@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

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

@@ -27,7 +27,7 @@ export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
-export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSubMenuCaretIcon: import('react/jsx-runtime').JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**
@@ -35,6 +35,5 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
  * 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;
-export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSearchIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectCloseIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+export interface StateScreenProps {
+    /** Headline of the state, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Optional line under the title saying what the state means or what to do. */
+    description?: ReactNode;
+    /** Glyph drawn in the round badge above the title. Decorative: hidden from assistive tech. */
+    icon?: ReactNode;
+    /** The way out of the state — typically one button (Log in, Log out, Retry). */
+    action?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * A whole screen given over to one state the app cannot work past: signed out,
+ * access denied, a misconfigured provider.
+ * aliases: AuthScreen|LoginScreen|ForbiddenPage|AccessDenied|ErrorPage|FullPageState
+ * Design system 2.0
+ *
+ * Fills its container and centres a round icon badge, an `h1`, an optional
+ * description and an optional action. The root is a `section` named by its
+ * title, so the state is a landmark of its own. For an empty list or grid
+ * inside a page, use `NoDataContent` instead.
+ *
+ * @example
+ * ```tsx
+ * <StateScreen
+ *   icon={<IconLock size={DIAL_ICON_SIZE.LG} stroke={DIAL_KIT_ICON_STROKE} />}
+ *   title="Log in to configure your QuickApp"
+ *   description="Set up instructions, add-ons and settings."
+ *   action={<NeutralButton label="Log in" onClick={openLogin} />}
+ * />
+ * ```
+ *
+ * @param title - Headline of the state, rendered as the page's `h1`.
+ * @param [description] - Optional line under the title.
+ * @param [icon] - Glyph drawn in the round badge; the badge is omitted without one.
+ * @param [action] - The way out of the state, rendered under the text.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const StateScreen: FC<StateScreenProps>;

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

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
- * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — above popups (`z-popup`), dropdowns and the calendar
  * (`z-floating`) and interactive tooltips — since they can be triggered by a
  * control inside any of them.
  *

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

@@ -52,7 +52,11 @@ export interface TransferQueueLabels {
     closeConfirmHeader: string;
     /** Confirmation description when an item is in progress and none failed. */
     closeConfirmDescriptionInProgress: string;
-    /** Confirmation description when an item failed and none is in progress. */
+    /**
+     * Confirmation description when an item failed and none is in progress.
+     * @deprecated Never shown: closing asks for confirmation only while an item
+     * is in progress, since a failed one has nothing left to lose.
+     */
     closeConfirmDescriptionFailed: string;
     /** Confirmation description when items are both in progress and failed. */
     closeConfirmDescriptionMixed: string;
@@ -103,12 +107,12 @@ export interface TransferQueueProps {
  * Each row shows the file's `FileIcon` and name, and a trailing status: a
  * spinner (with a cancel control on hover or focus) while in progress, a check
  * on success, a warning or error icon whose reason is both its tooltip and its
- * accessible name, or "Canceled". The header carries the host's title, a count
- * of failed items, and collapse and close controls. Collapsed while work runs,
+ * accessible name, or "Canceled". The header carries the host's title and the
+ * collapse and close controls. Collapsed while work runs,
  * the rows are replaced by one aggregate `ProgressBar`.
  *
- * Closing while an item is in progress or has failed asks for confirmation
- * first. Once every item has succeeded the queue closes itself after
+ * Closing while an item is in progress asks for confirmation first; a queue
+ * whose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after
  * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
  *
  * The root is a polite `role="status"` live region. Positioning is left to

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { TransferQueueLabels } from './TransferQueue';
 interface TransferQueueHeaderProps {
     title: string;
-    /** The badge renders only when this is positive. */
-    failedCount: number;
     isCollapsed: boolean;
     /** Id of the rows container the collapse toggle controls. */
     itemsId: string;
@@ -11,6 +9,6 @@ interface TransferQueueHeaderProps {
     onToggleCollapse: () => void;
     onClose: () => void;
 }
-/** Queue heading with its failed-item badge and the collapse and close controls. */
+/** Queue heading with the collapse and close controls. */
 export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
 export {};

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

@@ -37,4 +37,4 @@ export interface DialSegmentedControlProps<T extends string> {
  * @param [className] - Additional classes applied to the container.
  * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
  */
-export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -1,9 +1,9 @@
 export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary";
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
-export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectChevronIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/constants/public-class-names.d.ts

@@ -17,6 +17,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly notification: "dial-kit-notification";
     /** The empty-state root of `NoDataContent`. */
     readonly noDataContent: "dial-kit-no-data-content";
+    /** The `section` root of a `StateScreen`. */
+    readonly stateScreen: "dial-kit-state-screen";
     /** The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar. */
     readonly transferQueue: "dial-kit-transfer-queue";
     /** The text element of a `Highlight`, which renders the matched query. */
@@ -36,6 +38,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly collapsibleSidebar: "dial-kit-collapsible-sidebar";
     /** The content box inside a `ResizableContainer`'s resize frame. */
     readonly resizableContainer: "dial-kit-resizable-container";
+    /** The `role="separator"` element of a `ResizeHandle`. */
+    readonly resizeHandle: "dial-kit-resize-handle";
     /**
      * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
      * `overlayClassName`.
@@ -43,6 +47,11 @@ export declare const DIAL_KIT_CLASS: {
     readonly popup: "dial-kit-popup";
     /** The `role="dialog"` panel of a `BottomSheet`. */
     readonly bottomSheet: "dial-kit-bottom-sheet";
+    /**
+     * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on
+     * `z-popup` that holds the panel.
+     */
+    readonly bottomSheetOverlay: "dial-kit-bottom-sheet-overlay";
     /** The `role="dialog"` panel of a `SideDrawer`, open or closed. */
     readonly sideDrawer: "dial-kit-side-drawer";
     /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
@@ -69,6 +78,8 @@ export declare const DIAL_KIT_CLASS: {
      * on a submenu's own list. It is *not* the floating panel.
      */
     readonly dropdownList: "dial-kit-dropdown-list";
+    /** The search row above the item list of a `searchable` `Dropdown`. */
+    readonly dropdownSearch: "dial-kit-dropdown-search";
     /**
      * One row of a floating overlay: a dropdown item, a `Select` option, a
      * submenu trigger, or a submenu child. It sits on the element that draws the

package/dist/src/index.d.ts

@@ -96,11 +96,6 @@ export { DialDropdown } from './components/Dropdown/Dropdown';
 export { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
 export { DialDropdownIcon } from './components/DropdownIcon/DropdownIcon';
 export type { DialDropdownIconProps } from './components/DropdownIcon/DropdownIcon';
-export { DialFileManager } from './components/FileManager/FileManager';
-export type { FileManagerGridRow } from './components/FileManager/FileManagerContext';
-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';
@@ -113,16 +108,12 @@ export { ScreenResolution, TabOrientation, TabView } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
-export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
 export { ResizableContainerSide } from './types/resizable-container';
 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';
-export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
-export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
@@ -134,13 +125,11 @@ export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
 export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
 export type { DialRootFolder } from './models/file';
-export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, type DialFileManagerActionsRef, type DialFileAcceptType, } from './models/file-manager';
 export { GridSelectionMode } from './models/selection-mode';
 export { mergeClasses } from './utils/merge-classes';
 export { wrapInRootFolder } from './utils/flat-to-hierarchy-convertor.ts';
 export { getTimezoneLabel } from './utils/timezone';
 export type { TimezoneLabelOptions } from './utils/timezone';
-export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from './constants/file-grid-columns';
 export { DIAL_ICON_SIZE, BASE_ICON_PROPS, BASE_ICON_SIZE, } from './constants/icon.ts';
 export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NOT_ALLOWED_SPACES_REGEXP, } from './constants/validation.ts';
 export { DIAL_KIT_CLASS } from './constants/public-class-names';
@@ -249,8 +238,9 @@ export type { BadgeProps } from './components/New/Badge/Badge';
 export { BadgeColor, BadgeVariant } from './types/badge';
 export { Avatar } from './components/New/Avatar/Avatar';
 export type { AvatarProps } from './components/New/Avatar/Avatar';
-export { AvatarShape } from './types/avatar';
-export { extractInitials } from './utils/avatar';
+export { AvatarColor, AvatarShape } from './types/avatar';
+export { AVATAR_PALETTE, extractInitials } from './utils/avatar';
+export type { AvatarColorClasses } from './utils/avatar';
 export { EntityIdentity } from './components/New/EntityIdentity/EntityIdentity';
 export type { EntityIdentityProps, EntityIdentityItem, EntityIdentityLabels, } from './components/New/EntityIdentity/EntityIdentity';
 export { EntityType } from './types/entity-type';
@@ -284,16 +274,21 @@ export { CollapsibleSidebar } from './components/New/CollapsibleSidebar/Collapsi
 export type { CollapsibleSidebarProps } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
 export { ResizableContainer } from './components/New/ResizableContainer/ResizableContainer';
 export type { ResizableContainerProps } from './components/New/ResizableContainer/ResizableContainer';
+export { ResizeHandle } from './components/New/ResizeHandle/ResizeHandle';
+export type { ResizeHandleProps } from './components/New/ResizeHandle/ResizeHandle';
 export { ConditionalResizableContainer } from './components/New/ResizableContainer/ConditionalResizableContainer';
 export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
 export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
 export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
+export { StateScreen } from './components/New/StateScreen/StateScreen';
+export type { StateScreenProps } from './components/New/StateScreen/StateScreen';
 export { TransferQueue } from './components/New/TransferQueue/TransferQueue';
 export type { TransferQueueItem, TransferQueueLabels, TransferQueueProps, } from './components/New/TransferQueue/TransferQueue';
 export { DEFAULT_TRANSFER_QUEUE_LABELS, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS, } from './components/New/TransferQueue/constants';
 export { TransferQueueItemStatus } from './types/transfer-queue';
 export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
 export type { GridProps } from './components/New/Grid/Grid';
+export { GridColorScheme } from './types/grid';
 export { DateCellRenderer } from './components/New/Grid/renderers/DateCellRenderer';
 export type { DateCellRendererProps, DateValue, } from './components/New/Grid/renderers/DateCellRenderer';
 export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from './components/New/Grid/renderers/constants';

package/dist/src/subpaths/editors.d.ts

@@ -16,7 +16,7 @@
 export { LazyDialJsonEditor } from '../components/JsonEditor/lazy';
 export { LazyDialMarkdownEditor } from '../components/MarkdownEditor/lazy';
 export { LazyMarkdownEditor } from '../components/New/MarkdownEditor/lazy';
-export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import("../components/MarkdownEditor/MarkdownEditorContainer")>;
+export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import('../components/MarkdownEditor/MarkdownEditorContainer')>;
 export { EditorThemes } from '../types/editor';
 export type { MarkdownEditorProps } from '../components/New/MarkdownEditor/MarkdownEditor';
 export type { DialMarkdownEditorContainerProps } from '../components/MarkdownEditor/MarkdownEditorContainer';

package/dist/src/subpaths/grid.d.ts

@@ -16,6 +16,7 @@ export { DEFAULT_DATE_FORMAT_OPTIONS as DEFAULT_GRID_DATE_FORMAT_OPTIONS, DEFAUL
 export { convertToDate as convertGridDateToDate } from '../components/Grid/renderers/utils';
 export { Grid, GRID_SELECTION_COLUMN_ID } from '../components/New/Grid/Grid';
 export type { GridProps } from '../components/New/Grid/Grid';
+export { GridColorScheme } from '../types/grid';
 export { DateCellRenderer } from '../components/New/Grid/renderers/DateCellRenderer';
 export type { DateCellRendererProps, DateValue, } from '../components/New/Grid/renderers/DateCellRenderer';
 export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from '../components/New/Grid/renderers/constants';

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

@@ -5,3 +5,12 @@ export declare enum AvatarShape {
     /** A rounded square — the avatar of an application, model or other entity. */
     Square = "square"
 }
+export declare enum AvatarColor {
+    Green1 = "green-1",
+    Violet2 = "violet-2",
+    Brown = "brown",
+    Red = "red",
+    Green2 = "green-2",
+    Blue = "blue",
+    Violet1 = "violet-1"
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Color scheme `Grid` passes to AG Grid. It selects the light or dark theme
+ * part and the browser `color-scheme` native controls inside the grid follow.
+ */
+export declare enum GridColorScheme {
+    Light = "light",
+    Dark = "dark"
+}

package/dist/src/utils/avatar.d.ts

@@ -1,3 +1,4 @@
+import { AvatarColor } from '../types/avatar';
 /** A background and text colour pair for an initials avatar, as Tailwind classes. */
 export interface AvatarColorClasses {
     /** Background class, bound to a `--bg-visual-*` token. */
@@ -5,7 +6,7 @@ export interface AvatarColorClasses {
     /** Text class, bound to the matching `--text-visual-*` token. */
     foreground: string;
 }
-export declare const AVATAR_PALETTE: readonly AvatarColorClasses[];
+export declare const AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>;
 /** Returns the palette entry for a name; the same name always gets the same colours. */
 export declare const pickAvatarColor: (name: string) => AvatarColorClasses;
 /** Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters. */

package/dist/src/utils/sub-menu-floating.d.ts

@@ -64,5 +64,5 @@ interface SubMenuPanelProps {
  * Shared floating panel wrapper (FloatingPortal → FloatingFocusManager → container div).
  * Used by DropdownSubMenuItem and SelectSubMenuItem.
  */
-export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import('react/jsx-runtime').JSX.Element;
 export {};

package/dist/types/avatar.js

@@ -1,4 +1,5 @@
-var e = /* @__PURE__ */ ((r) => (r.Circle = "circle", r.Square = "square", r))(e || {});
+var n = /* @__PURE__ */ ((e) => (e.Circle = "circle", e.Square = "square", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Green1 = "green-1", e.Violet2 = "violet-2", e.Brown = "brown", e.Red = "red", e.Green2 = "green-2", e.Blue = "blue", e.Violet1 = "violet-1", e))(i || {});
 export {
-  e as AvatarShape
+  i as AvatarColor,
+  n as AvatarShape
 };

package/dist/types/grid.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((r) => (r.Light = "light", r.Dark = "dark", r))(t || {});
+export {
+  t as GridColorScheme
+};

package/dist/utils/avatar.js

@@ -1,22 +1,45 @@
-const o = [
-  { background: "bg-green-1", foreground: "text-green-2" },
-  { background: "bg-violet-2", foreground: "text-violet-1" },
-  { background: "bg-brown", foreground: "text-brown-2" },
-  { background: "bg-red", foreground: "text-red" },
-  { background: "bg-green-2", foreground: "text-green-3" },
-  { background: "bg-blue", foreground: "text-accent" },
-  { background: "bg-violet-1", foreground: "text-violet-2" }
-], c = (t) => {
-  let e = 0;
-  for (let r = 0; r < t.length; r++)
-    e += t.charCodeAt(r);
-  return o[e % o.length];
-}, n = (t) => t.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", l = (t) => {
-  const e = t.trim().split(/\s+/).filter(Boolean);
-  return e.length === 0 ? "?" : e.length >= 2 ? (n(e[0]) + n(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
+import { AvatarColor as t } from "../types/avatar.js";
+const l = {
+  [t.Green1]: {
+    background: "bg-green-1",
+    foreground: "text-green-2"
+  },
+  [t.Violet2]: {
+    background: "bg-violet-2",
+    foreground: "text-violet-1"
+  },
+  [t.Brown]: {
+    background: "bg-brown",
+    foreground: "text-brown-2"
+  },
+  [t.Red]: {
+    background: "bg-red",
+    foreground: "text-red"
+  },
+  [t.Green2]: {
+    background: "bg-green-2",
+    foreground: "text-green-3"
+  },
+  [t.Blue]: {
+    background: "bg-blue",
+    foreground: "text-accent"
+  },
+  [t.Violet1]: {
+    background: "bg-violet-1",
+    foreground: "text-violet-2"
+  }
+}, c = (r) => {
+  const e = Object.values(l);
+  let n = 0;
+  for (let o = 0; o < r.length; o++)
+    n += r.charCodeAt(o);
+  return e[n % e.length];
+}, g = (r) => r.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", u = (r) => {
+  const e = r.trim().split(/\s+/).filter(Boolean);
+  return e.length === 0 ? "?" : e.length >= 2 ? (g(e[0]) + g(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
 };
 export {
-  o as AVATAR_PALETTE,
-  l as extractInitials,
+  l as AVATAR_PALETTE,
+  u as extractInitials,
   c as pickAvatarColor
 };

package/dist/utils/merge-classes.js

@@ -1,15 +1,44 @@
-import t from "classnames";
-import { extendTailwindMerge as o } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
-const r = o({
+import i from "classnames";
+import { extendTailwindMerge as t } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+const l = [
+  "display1",
+  "display2",
+  "display3",
+  "h1",
+  "h2",
+  "h3",
+  "body",
+  "body-semi",
+  "body-paragraph",
+  "body-paragraph-semi",
+  "small",
+  "small-semi",
+  "small-paragraph",
+  "small-paragraph-semi",
+  "tiny",
+  "tiny-semi",
+  "tiny-lead",
+  "tiny-lead-semi",
+  "caption",
+  "caption-lead-semi",
+  "code",
+  "italic",
+  "small-italic",
+  "tiny-italic",
+  "caption-italic"
+], e = t({
   extend: {
     classGroups: {
-      z: [{ z: ["popup", "floating", "interactive-tooltip", "tooltip"] }]
+      z: [{ z: ["popup", "floating", "interactive-tooltip", "tooltip"] }],
+      "dial-typography": l.map(
+        (a) => `dial-${a}-text`
+      )
     }
   }
 });
-function n(...e) {
-  return r(t(e));
+function o(...a) {
+  return e(i(a));
 }
 export {
-  n as mergeClasses
+  o as mergeClasses
 };

package/dist/utils/sub-menu-floating.js

@@ -14,7 +14,7 @@ const Z = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"],
   return n === -1 ? s === 1 ? 0 : o - 1 : (n + s + o) % o;
 };
 function le(t, n = "menu", o = !1, s) {
-  const [r, i] = b(!1), u = M(), { refs: a, elements: p, floatingStyles: S, context: c } = k({
+  const [r, i] = b(!1), u = M(), { refs: a, elements: d, floatingStyles: S, context: c } = k({
     nodeId: u,
     placement: "right-start",
     open: r,
@@ -40,13 +40,13 @@ function le(t, n = "menu", o = !1, s) {
   }), T = z(c, { role: n }), {
     getReferenceProps: g,
     getFloatingProps: y
-  } = X([O, D, R, T]), [w, h] = b(!1), d = p.floating;
+  } = X([O, D, R, T]), [h, w] = b(!1), p = d.floating;
   Q(() => {
-    !r || !w || d == null || (A(d)[0]?.focus(), h(!1));
-  }, [r, w, d]);
+    !r || !h || p == null || (A(p)[0]?.focus(), w(!1));
+  }, [r, h, p]);
   const F = f(
     (e) => {
-      o || !(e.key === v(e.currentTarget) || e.key === "Enter" || e.key === " ") || (e.preventDefault(), e.stopPropagation(), i(!0), h(!0));
+      o || !(e.key === v(e.currentTarget) || e.key === "Enter" || e.key === " ") || (e.preventDefault(), e.stopPropagation(), i(!0), w(!0));
     },
     [o]
   ), E = f(
@@ -97,7 +97,7 @@ const ne = "rounded bg-layer-0 shadow", ue = ({
   className: u,
   children: a
 }) => {
-  const p = W();
+  const d = W();
   return /* @__PURE__ */ m(Y, { children: /* @__PURE__ */ m(
     G,
     {
@@ -112,9 +112,9 @@ const ne = "rounded bg-layer-0 shadow", ue = ({
           style: n,
           role: r,
           className: J(
-            "z-floating overflow-auto text-primary focus-visible:outline-none",
+            "z-floating overflow-auto text-primary focus-visible:outline-hidden",
             i ?? ne,
-            p,
+            d,
             u
           ),
           ...s(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.3",
+  "version": "0.16.0-dev.33",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -24,11 +24,6 @@
       "import": "./dist/grid.js",
       "require": "./dist/grid.cjs"
     },
-    "./file-manager": {
-      "types": "./dist/src/subpaths/file-manager.d.ts",
-      "import": "./dist/file-manager.js",
-      "require": "./dist/file-manager.cjs"
-    },
     "./editors": {
       "types": "./dist/src/subpaths/editors.d.ts",
       "import": "./dist/editors.js",
@@ -83,7 +78,10 @@
     "dompurify": "3.4.16",
     "esbuild": "0.28.1",
     "shell-quote": "1.11.0",
-    "postcss-selector-parser": "^7.1.6"
+    "postcss-selector-parser": "^7.1.6",
+    "@tailwindcss/cli": {
+      "@parcel/watcher": "2.6.0"
+    }
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
@@ -128,6 +126,7 @@
     "@storybook/addon-docs": "^10.4.4",
     "@storybook/addon-vitest": "^10.4.4",
     "@storybook/react-vite": "^10.4.4",
+    "@tailwindcss/cli": "^4.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^28.0.1",
@@ -140,7 +139,6 @@
     "@vitejs/plugin-react": "^4.6.0",
     "@vitest/browser": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
-    "autoprefixer": "^10.5.0",
     "concurrently": "^10.0.3",
     "esbuild": "0.28.1",
     "eslint": "^9.39.2",
@@ -151,24 +149,23 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-storybook": "^10.4.4",
-    "eslint-plugin-tailwindcss": "^3.18.3",
+    "eslint-plugin-tailwindcss": "4.4.1-beta.1",
     "globals": "^16.3.0",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.2",
     "monaco-editor": "^0.55.1",
     "postcss": "^8.5.6",
-    "postcss-import": "^16.1.1",
     "prettier": "^3.8.3",
     "sass": "^1.99.0",
     "sass-embedded": "^1.99.0",
     "storybook": "^10.4.4",
     "storybook-addon-pseudo-states": "^10.4.4",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.3.3",
     "tsx": "^4.20.5",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.59.1",
     "vite": "^7.1.5",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.8"
   }