@epam/ai-dial-ui-kit 0.15.0-dev.9 → 0.15.0

package/README.md

@@ -49,7 +49,7 @@ The AI DIAL UI Kit is an production-ready React component library designed to st
 - 🎨 **Highly Customizable**: Deep theming capabilities with CSS custom properties
 - 🧪 **Well-Tested**: Comprehensive test coverage (70%+) with Vitest and React Testing Library
 - 📚 **Storybook Ready**: Includes interactive component documentation and development playground
-- 🛠️ **Developer Experience**: Leverage ESLint, Prettier, Husky for maintainable code quality
+- 🛠️ **Developer Experience**: Leverage ESLint and Prettier for maintainable code quality
 - 📦 **Distribution Ready**: Deployed as NPM package ready for easy integration
 
 ## 📖 Documentation
@@ -193,6 +193,39 @@ These are defaults, not overrides: a `rounded-*` utility passed to a single
 control through `className` still wins, because a consumer's utilities are
 emitted after this package's stylesheet.
 
+#### Overlay stacking
+
+Overlays render in a portal at the end of `<body>`, so they stack against the
+host's own fixed and sticky chrome — a header, a side sheet, an embedding
+overlay. They sit on a four-step ladder driven by one variable:
+
+| Layer             | Utility                 | `z-index`                  | Components                                                       |
+| ----------------- | ----------------------- | -------------------------- | ---------------------------------------------------------------- |
+| Popup             | `z-popup`               | `var(--z-overlay, 52)`     | `Popup` backdrop, both generations                               |
+| Floating panel    | `z-floating`            | `--z-overlay` + 1          | `Dropdown` and `Select` overlays, submenus, `Calendar`           |
+| Interactive panel | `z-interactive-tooltip` | `--z-overlay` + 2          | `InteractiveTooltip`                                             |
+| Tooltip           | `z-tooltip`             | `--z-overlay` + 3          | `Tooltip`, both generations                                      |
+
+To lift every overlay above a host layer, set the base once:
+
+```css
+:root {
+  --z-overlay: 1000; /* popup 1000, dropdown 1001, interactive tooltip 1002, tooltip 1003 */
+}
+```
+
+Each layer is a fixed step above the one below, so raising the base never
+reorders them: a dropdown still opens above the popup it sits in, and a tooltip
+above the dropdown row that triggered it. Set the variable on `:root`, or in the
+class a `ThemeScope` re-applies to its portalled overlays — a portal escapes any
+other wrapper, so a value set only there never reaches the overlay.
+
+A single overlay can still be moved on its own: a `z-*` utility passed to a
+`Dropdown`'s `listClassName`, a `Popup`'s `overlayClassName`, an
+`InteractiveTooltip`'s `contentClassName` or a `Calendar`'s `panelClassName`
+replaces the layer's own step rather than landing beside it, because
+`mergeClasses` knows the ladder utilities are z-index.
+
 ### Public class names
 
 Some hosts need to restyle a part of a component the props do not reach — the
@@ -237,6 +270,7 @@ breaking change and goes through the migration-guide process.
 | `skeleton`      | `dial-kit-skeleton`       | The root of a `Skeleton`                                                                 |
 | `notification`  | `dial-kit-notification`   | The `Notification` surface, including every toast and section-message wrapper             |
 | `noDataContent` | `dial-kit-no-data-content` | The empty-state root of `NoDataContent`                                                 |
+| `transferQueue` | `dial-kit-transfer-queue` | The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar           |
 
 #### Text
 
@@ -255,9 +289,13 @@ breaking change and goes through the migration-guide process.
 | `collapsibleSidebar` | `dial-kit-collapsible-sidebar`    | The `aside` element of a `CollapsibleSidebar`                        |
 | `resizableContainer` | `dial-kit-resizable-container`    | The content box inside a `ResizableContainer`'s resize frame         |
 | `popup`              | `dial-kit-popup`                  | The `role="dialog"` panel of a `Popup`                               |
+| `bottomSheet`        | `dial-kit-bottom-sheet`           | The `role="dialog"` panel of a `BottomSheet`                         |
+| `sideDrawer`         | `dial-kit-side-drawer`            | The `role="dialog"` panel of a `SideDrawer`, open or closed          |
 | `confirmationPopup`  | `dial-kit-confirmation-popup`     | A `ConfirmationPopup`'s panel, additive to `popup`                   |
 | `accordion`          | `dial-kit-accordion`              | The root of an `Accordion`                                           |
 | `folderPath`         | `dial-kit-folder-path`            | The breadcrumb root of a `FolderPath`                                |
+| `breadcrumbs`        | `dial-kit-breadcrumbs`            | The `nav` element of a `Breadcrumbs` trail                           |
+| `breadcrumbsItem`    | `dial-kit-breadcrumbs-item`       | One segment of it: the link, button or span that draws the label     |
 
 #### Menus and overlays
 
@@ -281,10 +319,20 @@ breaking change and goes through the migration-guide process.
 | `passwordInput`        | `dial-kit-password-input`             | The `PasswordInput` field box, additive to `dial-kit-input`    |
 | `numberInput`          | `dial-kit-number-input`               | The `NumberInput` field box, additive to `dial-kit-input`      |
 | `tagInput`             | `dial-kit-tag-input`                  | The `TagInput` field box, additive to `dial-kit-input`         |
+| `autocompleteTagInput` | `dial-kit-autocomplete-tag-input`     | The `AutocompleteTagInput` field box, additive to `dial-kit-input` |
 | `select`               | `dial-kit-select`                     | The root of a `Select`                                         |
 | `inlineSelect`         | `dial-kit-inline-select`              | The trigger button of an `InlineSelect`                        |
 | `calendar`             | `dial-kit-calendar`                   | The root of a `Calendar`, in every mode                        |
+| `schemaRenderer`       | `dial-kit-schema-renderer`            | The root of a `SchemaRenderer`                                 |
+| `schemaRendererSection` | `dial-kit-schema-renderer-section`   | One collapsible `SchemaRenderer` section card, at any depth    |
 | `fileDropzone`         | `dial-kit-file-dropzone`              | The drop area of a `FileDropzone`                              |
+| `fileIcon`             | `dial-kit-file-icon`                  | The root of a `FileIcon`: glyph or spinner, and the shared badge |
+| `fileName`             | `dial-kit-file-name`                  | The row of a `FileName`: its type icon, the name and any details |
+| `folderName`           | `dial-kit-folder-name`                | The `FileName` row of a `FolderName`, additive to `fileName` |
+| `sharedEntityIndicator` | `dial-kit-shared-entity-indicator`   | The badge of a `SharedEntityIndicator`, including the one on a `FileIcon` |
+| `badge`                | `dial-kit-badge`                      | The root of a `Badge`: the label box, with its icon when it has one |
+| `avatar`               | `dial-kit-avatar`                     | The root of an `Avatar`: the image, or the initials box that replaces it |
+| `entityIdentity`         | `dial-kit-entity-identity`              | The root row of an `EntityIdentity`: icon, type label, name and version |
 | `radioGroupPopupField` | `dial-kit-radio-group-popup-field`    | The root of a `RadioGroupPopupField`                           |
 
 #### Controls
@@ -298,8 +346,11 @@ breaking change and goes through the migration-guide process.
 | `radioGroup`           | `dial-kit-radio-group`                | The root of a `RadioGroup`                                 |
 | `segmentedControl`     | `dial-kit-segmented-control`          | The `role="radiogroup"` track of a `SegmentedControl`       |
 | `segmentedControlItem` | `dial-kit-segmented-control-item`     | One segment of it                                          |
-| `tabs`                 | `dial-kit-tabs`                       | The `role="tablist"` root of `Tabs`                        |
+| `tabs`                 | `dial-kit-tabs`                       | The outermost element of a `Tabs` — the heading wrapper, or the tab list when there is no `sectionLabel` |
+| `tabList`              | `dial-kit-tab-list`                   | The `role="tablist"` inside it, in either orientation      |
 | `tab`                  | `dial-kit-tab`                        | One tab inside it                                          |
+| `tabSelected`          | `dial-kit-tab-selected`               | The selected tab, in either orientation                    |
+| `tabsSectionLabel`     | `dial-kit-tabs-section-label`         | The `sectionLabel` heading above a `Tabs`                  |
 | `tag`                  | `dial-kit-tag`                        | A `Tag` pill, including a `TagInput`'s rows                |
 | `filterChips`          | `dial-kit-filter-chips`               | The `role="group"` row of a `FilterChips`; its chips carry `dial-kit-tag` |
 | `toggleIconButton`     | `dial-kit-toggle-icon-button`         | A `ToggleIconButton`, additive to `dial-kit-base-icon-button` |
@@ -372,6 +423,8 @@ not AAA:
 | `Radio` circle | 20×20 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 12px per side and swallow the adjacent label. Clicking the label selects the radio, so the practical target is wider |
 | `Checkbox` box | 20×20 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 12px per side and swallow the adjacent label. Clicking the label toggles the checkbox, so the practical target is wider |
 | `Slider` track row | 24px tall | The pointer target spans the full track width but is only 24px tall; a 44px row would add 20px of dead space to every form the slider sits in, and the thumb is dragged rather than tapped |
+| `Breadcrumbs` segment link | content | Exempt under the 2.5.5 *Inline* exception — a segment is a text link in a line of text, and expanding it would overlap the segments beside it |
+| `Breadcrumbs` overflow button | 16×16 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 14px per side and swallow the segments on either side of it in an inline trail |
 | `SegmentedControl` segment | 32px tall | Sits 4px from its neighbours inside a 40px track, so a 44px target would overhang 6px per side and swallow the adjacent segments; the segment is already wider than 24px on both axes |
 | `ResizableContainer` resize handle | 10px wide pointer strip | The handle has to sit exactly on the panel boundary, so a 44px-wide strip would swallow content on both sides of it — essential to the control. It is a focusable `separator`, so the resize is also available from the keyboard with the arrow keys |
 

package/dist/CHANGELOG.md

@@ -9,14 +9,98 @@ Versions match the git tags on the `development` branch.
 
 ## [0.15.0]
 
+### Breaking Changes
+
+- **Legacy theme variable fallbacks removed** — 0.14.0 renamed several theme variables but kept the old names in the fallback chain, so every token resolved two variables and a theme could set either. The old names are no longer read: `--bg-control-neutral-hover` → `--bg-control-neutral-hover-muted`, `--stroke-focus-black` → `--stroke-focus`, and `--bg-control-accent-gradient-from` / `-to` / `-hover-from` / `-active-to` → `--bg-gradient-1` / `-2` / `-1-hover` / `-2-active`. A theme that still sets an old name falls back to the kit's default colour; rename the variable.
+  See [migration guide](migration-guides/0.15.0/legacy-theme-variable-fallbacks-removal.md).
+
+- **`Slider` (2.0) — redrawn thumb and track** — the slider now follows the new 2.0 design: a 12px solid accent thumb (was a 16px white disc with a border) that grows a soft halo on hover, focus and drag, over an accent-tint track (was grey). The props are unchanged, so typecheck cannot flag it, but every `Slider` renders differently and host CSS aimed at the old thumb needs a second look. The 24px pointer row and the `dial-kit-slider` class stay as they were.
+  See [migration guide](migration-guides/0.15.0/slider-redesign.md).
+
 ### Added
 
+- **`InteractiveTooltip` (2.0) — `trigger`, to open the panel by click or tap** — the panel opens on hover or focus and renders nothing on a mobile screen, so a trigger whose only job is to reveal it, such as an info chip, showed nothing on a phone ([ai-dial-chat#9250](https://github.com/epam/ai-dial-chat/issues/9250)). `trigger={InteractiveTooltipTrigger.Click}` opens the panel on a click or tap and keeps it open until a second click on the trigger, a press outside or Escape. It works on every screen size and ignores hover and focus; with a controlled `open` it still reports through `onOpenChange`. The default, `InteractiveTooltipTrigger.Hover`, changes nothing, so the `InteractiveTooltip`s inside `Select` and `Dropdown` and every host that does not pass it are unchanged. Do not use `Click` on a trigger that has its own action, since the same tap would run both. Additive.
+
+- **`AutocompleteTagInput` (2.0) — `openOnFocus`** — focusing or clicking the input opens the list of every suggestion that is not yet a tag, uncapped by `maxSuggestions`, so a short list can be browsed without typing. Nothing is highlighted in that list, so Enter adds nothing the user did not choose; ArrowDown lands on the first suggestion and ArrowUp on the last. The list stays open after a pick, and typing filters and caps it as before. Opt-in; without it nothing changes. Additive.
+
+- **`Slider` (2.0) — `showValueInput`, `valueInputAriaLabel`** — a compact, 24px `NumberInput` after the track, so the slider stays as tall as its track row, synced with the slider: typing reports the value snapped to `step` (the field already refuses values outside `min`/`max`), the text being typed is kept until the field loses focus, and it is disabled with the slider. Named by `valueInputAriaLabel`, or by a string `labelProps.label`. Takes the place of `rightContent`, which a caller no longer needs to wire by hand for this case. Additive.
+
+- **`Slider` (2.0) — `showTooltip`, `showTicks`, `leftContent`, `rightContent`** — the rest of the new slider design. `showTooltip` shows the formatted value in a bubble above the thumb; `showTicks` marks every step on the unfilled track for a discrete slider. Both are hidden while disabled. The bubble is `aria-hidden`, because the input already announces the value through `aria-valuetext`. `leftContent` and `rightContent` are the slider container's side slots, centred on the track: an icon on the left, a `NumberInput` or the value as text on the right. The kit does not sync a `NumberInput` placed there; the caller passes it the same `value` and setter. All four are opt-in.
+
+- **`SchemaRenderer` (2.0)** — a JSON Schema form built only from 2.0 controls. `DialSchemaRenderer` exists only in 1.0, so a 2.0 screen that renders a schema-driven form had to mix in 1.0 inputs, selects and the 1.0 `Dropdown` surface. The 2.0 renderer keeps the 1.0 props, except `jsonEditorTheme`: the three variants, `oneOf`/`anyOf` with select or radio selectors, arrays with discriminator types, key-value maps, `dial:resource` options, `skipUntouched`, `renderField` and `texts`. Primitives render as `Input`, `NumberInput`, `PasswordInput`, `Select`, `Switch` or `RadioGroup`. Values the schema does not describe are edited as JSON in a monospace `Textarea`, not in Monaco, so the form loads no editor bundle. Section headers are real toggle buttons with `aria-expanded`, and the remove and info buttons sit next to the toggle instead of inside it. Every control has an accessible name, including array items and key-value rows. `renderField` replaces only the control, so the field keeps its label and error. Stamps `DIAL_KIT_CLASS.schemaRenderer` (`dial-kit-schema-renderer`) on the root and `DIAL_KIT_CLASS.schemaRendererSection` (`dial-kit-schema-renderer-section`) on each section card. The schema types, enums and utils are shared with 1.0 from neutral modules; the 1.0 import paths still work. Additive.
+
+- **`AutocompleteTagInput` (2.0)** — a tag field that suggests values while typing and still accepts its own. `TagInput` takes only free text and a multiple `Select` only listed values, so a field such as a list of MIME types — where the common ones should be one keystroke away but any `<type>/<subtype>` is valid — had to be hand-built in each app (the DIAL admin's attachment types, the QuickApps editor's). Typing lists up to `maxSuggestions` (default 5) of the `suggestions` whose label, value or description contains the text and which are not already tags; Enter or comma adds the highlighted one, or the typed text when nothing matches; the arrow keys move the highlight, Escape and leaving the field close the list, Backspace on an empty input removes the last tag. The input follows the ARIA combobox pattern and keeps focus while the list is open, the list floats on the `z-floating` layer and takes the field's width, and the tags share the multiple `Select`'s look. `getRemoveTagLabel` names each tag's remove button, so a localised host is not left with the English `Remove <tag>`. Stamps `DIAL_KIT_CLASS.autocompleteTagInput` (`dial-kit-autocomplete-tag-input`) on the field. Additive; nothing else changes.
+
 - **Public class names on every design-system 2.0 component** — a host embedding the kit had no honest selector for the parts of a component its props do not reach: the kit's own classes are Tailwind utilities and hashed module locals, so hosts were left on `[class*='_selectedItem_']`, `> div:nth-child(2) > button` and `[role='none'][aria-label='dropdown']` — the last an accessibility contract, and a plain English string a localised host cannot rely on. Every 2.0 component now stamps a stable class on the element that draws it, exported as one record: `DIAL_KIT_CLASS.menuItem` is `'dial-kit-menuitem'`, and so on for 48 elements across the feedback components (`Spinner`, `ProgressBar`, `Skeleton`, `Notification`, `NoDataContent`), the text components (`Highlight`, `CaptionText`/`ErrorText`, `Label`), the containers (`CardShell`, `CollapsibleSidebar`, `ResizableContainer`, `Popup`, `ConfirmationPopup`, `Accordion`, `FolderPath`), the menus and overlays (`Dropdown` and its item list, rows and chosen-row check, `DialDropdownIcon`'s icon and caret badge, `Tooltip`, `InteractiveTooltip`, `EllipsisTooltip`), the fields (`Search`, `PasswordInput`, `NumberInput`, `TagInput`, `Select`, `InlineSelect`, `Calendar`, `FileDropzone`, `RadioGroupPopupField`) and the controls (`Switch`, `Checkbox`, `CheckboxBox`, `Radio`, `RadioGroup`, `SegmentedControl` and its segments, `Tabs` and its tabs, `Tag`, `ToggleIconButton`, `CloseButton`, `InfoButton`, `ButtonDropdown`). `dial-kit-dropdown-list` and `dial-kit-menuitem` are on the 1.0 dropdown family too, since `DialDropdownIcon` opens one.
 
   Nothing in `dist/index.css` selects on any of them — they carry no declarations and exist only as selectors, so this is not a visual change and a host rule needs no `!important` it would not otherwise need. A row's class sits on the element that draws the row box, which is the wrapper rather than the inner button for a `MenuItem` with a `rightControl`; a `ProgressBar` with neither label nor readout returns its track as its own root, and the class follows it there. Components whose target element already carries a stable `dial-kit-*` class have no entry, because a second name for one thing is worse than none: `Button` and `IconButton` with their variant wrappers, `FabButton`, `Input`, `Textarea`, `Slider`, `MarkdownEditor` and `Grid`. A `Dropdown`'s floating panel, a `Popup`'s backdrop and the `DialDropdownIcon` trigger button keep being reached through `listClassName`, `overlayClassName` and `buttonClassName`. See the README for the full table. Requested in [ai-dial-chat#8707](https://github.com/epam/ai-dial-chat/issues/8707), the counterpart of the `dial-*` classes that issue adds to the chat libraries.
 
+- **Overlay stacking token, `--z-overlay`** — every portalled overlay was a hardcoded Tailwind literal (`z-[52]` for the `Popup` backdrop, `z-[53]` for dropdown and select overlays, submenus and the `Calendar`, `z-[54]` for `InteractiveTooltip`, `z-[55]` for `Tooltip`), so a host whose own overlay or sticky header sits higher had no documented way to lift the kit's menus above it and fell back to `[role='menu']` and `z-[52]` overrides. The four layers are now theme steps — `z-popup`, `z-floating`, `z-interactive-tooltip`, `z-tooltip` — computed from one variable as base, +1, +2 and +3, so setting `--z-overlay` on `:root` (or in a `ThemeScope` class) moves the whole ladder without reordering it. The fallback is `52`, which reproduces today's values exactly: a host that sets nothing sees no change. `mergeClasses` registers the four steps as z-index, so a `z-*` a caller passes through `listClassName`, `overlayClassName`, `contentClassName` or `panelClassName` still replaces the layer's step rather than landing beside it. See the README's _Overlay stacking_ section. Requested in [ai-dial-chat#8943](https://github.com/epam/ai-dial-chat/issues/8943).
+
+- **`Dropdown` (2.0) — `listStyle`** — the floating panel renders in a portal at the end of `<body>`, so CSS custom properties a caller sets on its own wrapper never reach the panel's rows or `menuHeader`, and `listClassName` can carry a class but not a runtime value. A wrapping component that themes its menu through `var(--…)` — a composer's model picker colouring its selected row and check — had no way to deliver the values. `listStyle` is an inline style on that panel. Positioning stays the dropdown's own: `floatingStyles` is applied on top, so a caller's `position`, `top` or `transform` cannot unanchor it. Additive; nothing renders differently without it. Requested in [ai-dial-chat#8943](https://github.com/epam/ai-dial-chat/issues/8943).
+
+- **`ButtonDropdown` (2.0) — `dropdownProps`**: until now `ButtonDropdown` built its menu `Dropdown` with fixed options, so a caller could neither class the menu panel nor stop the panel from taking the button's width. A short label like "Add" produced a menu as narrow as the button. `dropdownProps` forwards `listClassName` and `matchReferenceWidth` to that `Dropdown`. With `matchReferenceWidth: false` and a `min-w-*` class, the menu gets a width of its own. Additive; a `ButtonDropdown` without it renders exactly as before.
+
+- **`Notification` (2.0) — `action` slot** — a notification had nowhere to put a control of its own: a "Try again" or "Reload" button had to be packed into `message`, where it sat inside the text column, wrapped with the copy and could not line up against a title. `action` takes any node and renders it at the inline end of the notification, after the text and before the close button, vertically centred and never shrunk by a long message. It sits inside the live region, so the control is reachable right where the error is announced; the caller supplies its visible label and handler. The slot is additive — a notification without `action` renders exactly as before. Requested in [ai-dial-chat#8979](https://github.com/epam/ai-dial-chat/issues/8979), where a failed chat response offers "Try again" inside its error banner.
+
 - **`FilterChips` (2.0)** — a row of filter chips that picks one value out of a few, the chip-shaped sibling of `Tabs` and `SegmentedControl`. It draws `TagAppearance.Selectable` tags: no fill until selected, a semibold label once selected. Each chip is a toggle button carrying its state on `aria-pressed` inside a named `role="group"`, so every chip is its own tab stop and arrowing across the row never changes the filter by accident — unlike a `radiogroup`. `stretch` grows the chips to share the row width equally for a filter row spanning a side panel; without it they hug their labels. There is no disabled chip: an option the user must not pick is left out of `items`. Labels carry no English defaults, so the caller translates them. The row carries the public class `dial-kit-filter-chips` (`DIAL_KIT_CLASS.filterChips`); its chips are `Tag` pills, so they carry `dial-kit-tag`.
 
+- **`Tabs` — `tabListClassName`, and a public class on the selected tab** — `className` lands on whichever element is outermost, so a `Tabs` with a `sectionLabel` left its `role="tablist"` unreachable: a caller wanting to repad the list had to choose between that and styling the wrapper. `tabListClassName` reaches the list in either case, and is additive to `className` when there is no heading and the two elements are one. The selected tab now also carries `dial-kit-tab-selected` (`DIAL_KIT_CLASS.tabSelected`) in both orientations, additive to `dial-kit-tab` — a wrapping component could mark a tab but not its selection, since the horizontal row's `dial-kit-tab-selected-underline` carries the gradient rule and the vertical rail draws its selection in Tailwind utilities alone. Like every entry in the record it carries no declarations. Both are additive: nothing renders differently.
+
+- **`Breadcrumbs` (2.0)** — the navigation trail of the 2.0 generation, and the first one built without `DialBreadcrumb` underneath it. `items` is a flat list, outermost first; the last entry is the current page, drawn semibold and primary with `aria-current="page"` and never rendered as a control, since a link to the page you are already on does nothing. An earlier entry with an `href` renders as a link, one with only an `onClick` as a button, and one with neither as plain text — the read-only location path, without a separate component for it. The trail never wraps: segments truncate, each revealing its full label through `EllipsisTooltip` only once it is actually clipped, and a trail longer than `maxVisibleItems` (4) collapses its middle into an ellipsis `Dropdown` so the root and the current page always stay on screen. Separators are decorative and `aria-hidden`, so the trail is announced as a list of links rather than a string of chevrons; the chevron mirrors itself in RTL. `ariaLabel` and `overflowAriaLabel` default to English and take an override for translation. `size` picks the trail's type scale: `BreadcrumbsSize.Small` (`dial-small-text`) by default, or `BreadcrumbsSize.Heading` (`dial-h2-text`) for a path that doubles as the page title — that token is semibold on its own, so the heading trail is semibold throughout, the current page included, and there is no `dial-h2-semi-text` to reach for. The `nav` carries `dial-kit-breadcrumbs` (`DIAL_KIT_CLASS.breadcrumbs`) and each segment `dial-kit-breadcrumbs-item`. The 1.0 `DialBreadcrumb` is untouched.
+
+- **`FileIcon`, `FileName`, `FolderName` and `SharedEntityIndicator` (2.0)** — the file-manager row pieces of the 2.0 generation, counterparts of `DialFileManagerItemIcon`, `DialFileName`, `DialFolderName` and `DialSharedEntityIndicator`, built without any of them underneath. `FileIcon` draws the new file-type glyphs — one sheet, coloured and marked by kind: images, video, audio, code, text, PDF, spreadsheet, presentation, archive, DIAL and a generic fallback, picked by extension — and a folder glyph of its own, with a shared badge and a `Spinner` while `loading`. The glyphs are inline SVG rather than imported assets, so each one takes its gradient `id` from `useId` — a list of files does not repeat one document-wide id, which blanks every copy's gradient once the first is hidden — and its colours from theme tokens instead of fixed hex. It is a `role="img"` named after the item ("PDF file", "Folder", ", shared" appended when shared; `label` overrides it), where the 1.0 icon called every file "File type icon" and left folders unnamed. `FileName` puts it before a truncating name with an optional `details` line; since the visible name already says what the item is, it hides the icon and announces the shared state through a visually-hidden `sharedLabel` instead, and while `loading` leaves the spinner in the tree so the busy state is still announced. `FolderName` is a `FileName` fixed to the folder type. `SharedEntityIndicator` is the badge on its own, a named `role="img"` whose tooltip is a pointer-only hint. Default icon size is 20px (`DIAL_ICON_SIZE.MD`), where 1.0 used 18px. They carry `dial-kit-file-icon`, `dial-kit-file-name`, `dial-kit-folder-name` (additive to `dial-kit-file-name`) and `dial-kit-shared-entity-indicator`. The 1.0 components are untouched.
+
+- **`TransferQueue` (2.0)** — the floating "Importing 5 files" panel for an upload, download, import or export, moved into the kit from `@epam/ai-dial-conversation-panel`'s `ImportExportQueue` so the file manager can use it for uploads too. It is generic: `items` are `{ id, name, status, percent?, message? }` with `TransferQueueItemStatus` (`InProgress`, `Success`, `Warning`, `Failed`, `Canceled`), not the conversation-transfer job the chat library used. Each row draws the 2.0 `FileIcon` for its name, a truncating name, and a trailing status: a named spinner with a cancel control on hover or focus (only when `onCancelItem` is passed; the spinner never takes the pointer, so the control stays clickable in the same cell), a named check, a warning or error icon whose `message` is both its tooltip and its focusable accessible name — a tooltip alone renders nothing on touch — or "Canceled". The header has the caller's `title` verbatim, a failed-item count badge, and collapse (`aria-expanded`/`aria-controls`) and close controls. Collapsed while work runs, the rows give way to one aggregate `ProgressBar` whose `aria-valuetext` counts settled items rather than a percentage. Closing with work in progress or a failure unread asks for confirmation first; once every item succeeds the queue calls `onClose` by itself after `autoCloseDelay` (8000 ms by default, `0` disables), and a warned or canceled row keeps it open. The root is a polite `role="status"` region carrying `dial-kit-transfer-queue` (`DIAL_KIT_CLASS.transferQueue`); positioning is the host's. Every string has an English default in `DEFAULT_TRANSFER_QUEUE_LABELS` and takes an override through `labels`.
+
+- **`Accordion` (2.0) — `caretPosition`** — the header always drew its caret after the title, pushed to the far edge, and a caller whose design puts it beside the title had no way to ask for that. `caretPosition` takes `AccordionCaretPosition.Start` (before the title, with a gap) or `AccordionCaretPosition.End` (the default, today's placement). A non-collapsible panel still draws no caret. Additive; nothing renders differently without it. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat) while moving its hand-rolled disclosures onto `Accordion`.
+
+- **`InlineSelect` (2.0) — `triggerClassName`, `triggerLabelClassName` and `onOpenChange`** — the trigger could not be restyled: `InlineSelect` took no class for it, and a caller whose design puts the value in a bordered pill, themed by its own colour properties, had to keep a hand-rolled trigger beside the kit `Dropdown`. `triggerClassName` is merged onto the trigger button after its own classes, `triggerLabelClassName` onto its label (now a `<span>`, so a type-scale or colour class has something to land on), and `onOpenChange` reports the dropdown opening and closing, for a caller that reacts to it beyond what `aria-expanded` styles. All three are additive; nothing renders differently without them. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat) for the share popover's access pill.
+
+- **`InlineSelect` (2.0) — controlled `open`, and `listStyle`** — `onOpenChange` reported the dropdown opening, but the caller could not close it: a popover that owns Escape (closing its own menu first and itself only on a second press) had no way to shut the select without shutting itself. `open` makes the open state controlled, the same way `Dropdown`'s already is; without it the select keeps its own. `listStyle` is passed through to the `Dropdown` overlay, which renders in a portal, so custom properties a caller sets on its own wrapper can reach the rows, as they already can for `Dropdown`. Both are additive; nothing renders differently without them.
+
+- **`BottomSheet` (2.0)** — a panel that slides up from the bottom edge over a dimmed page, the mobile counterpart of `Popup`, moved into the kit from ai-dial-chat's `BottomSheetShell`, which sat inside one feature library and was imported across a library boundary by another. It is built on the same Floating UI pieces as `Popup` rather than on a hand-written focus trap: a portal, a scroll-locking `FloatingOverlay` on the `z-popup` layer, a `FloatingFocusManager` that moves focus to the panel on open, keeps it inside and returns it on close, and `useDismiss`, so Escape, the close button and a press on the backdrop (unless `closeOnOutsideClick` is false) all call `onClose` while `open` stays the caller's. A `title` gives a 60px header with the title centred as an `<h2>` that names the dialog, a close button at the end and, with `onBack`, a back button at the start whose arrow mirrors in RTL; without a title there is no header and `ariaLabel` names the sheet. `backAriaLabel` and `closeAriaLabel` default to English. The body scrolls past 85% of the viewport height. The panel slides in over 300ms (`animate-slideUp`, a new theme animation) and not at all under `prefers-reduced-motion`. The panel carries `dial-kit-bottom-sheet` (`DIAL_KIT_CLASS.bottomSheet`).
+
+- **`Badge` (2.0)** — a short, static label: a topic, a category, or a status that is not a control, moved into the kit from ai-dial-chat's catalog, where `CardTag` and `FeaturedChip` drew two hand-rolled 24px labels. `Tag` is the kit's selectable, dismissable chip at 32px; a badge never responds to the pointer. `BadgeVariant.Outlined` (the default) is the neutral label, bordered on the sunken layer in `dial-tiny-text`; `BadgeVariant.Filled` is a pill in one of the theme's visual colours — `BadgeColor.Blue` (default), `Green`, `Violet`, `Indigo`, `Brown` or `Red` — in the self-uppercasing `dial-caption-lead-semi-text`, so the label is passed in sentence case. `textClassName` replaces the variant's type scale, `icon` adds a decorative icon before the label, and native span attributes pass through. The root carries `dial-kit-badge` (`DIAL_KIT_CLASS.badge`).
+
+- **`Avatar` (2.0)** — a person's or an entity's picture, or its initials on a colour picked from its name, moved into the kit from `@epam/ai-dial-chat-shared`'s `InitialsAvatar` and `@epam/ai-dial-navigation-panel`'s `UserAvatar`, which hosts were each reimplementing. `name` gives the initials (through the newly exported `extractInitials`: 1–2 letters, Unicode-aware, punctuation skipped, `?` when there are none) and a colour pair from the theme's visual tokens — the same name always gets the same colours, and they follow the active theme. `initials` overrides the derived ones. `src` shows an image instead; a missing or broken image falls back to the initials, `onImageError` reports the failure, and a new `src` is tried again. `shape` is `AvatarShape.Circle` for a person (the default) or `AvatarShape.Square` for an application or model. `size` sets the width and height and, unless `textClassName` supplies a type-scale class, a font size of 40% of it. With an `alt` the avatar is a `role="img"` named by it, image or initials alike; without one it is decorative and hidden from assistive technology. The root carries `dial-kit-avatar` (`DIAL_KIT_CLASS.avatar`).
+
+- **`SideDrawer` (2.0)** — a full-height panel that slides in from the inline end over a dimmed page, moved into the kit from ai-dial-chat, where the catalog's `DetailsPanel` and `StandalonePublishPanel` each carried a near-identical copy with its own backdrop, transform transition, `inert` handling and hand-written Tab trap. Neither `Popup` (a centred modal) nor `CollapsibleSidebar` (an inline rail) covered it. It is built on the same Floating UI pieces as `Popup`: a scroll-locking `FloatingOverlay` on `z-popup`, a `FloatingFocusManager` that moves focus to the panel on open and returns it on close, and `useDismiss` for Escape and a press on the backdrop (unless `closeOnOutsideClick` is false), all calling `onClose` while `open` stays the caller's. Unlike `Popup` the panel stays mounted while closed, so it slides out as well as in and keeps the state of what it holds; closed, it is `inert`, the focus manager and scroll lock are off, and the backdrop lets pointer events through. On desktop it is 540px wide with a rounded, bordered leading edge; on mobile it takes the full width; it slides from the end in either writing direction over 300ms, and not at all under `prefers-reduced-motion`. The header follows `Popup`: `onBack` (with `backDisabled`), the title — a string `header` renders an `<h2>` that names the dialog, a node needs `ariaLabel` — then `headerActions` and the close button, which `closeDisabled` disables and `hideClose` leaves out. The panel carries `dial-kit-side-drawer` (`DIAL_KIT_CLASS.sideDrawer`).
+
+- **`BottomSheet` and `SideDrawer` (2.0) — `style` and `overlayStyle`, and `headerClassName` on `BottomSheet`** — both render in a portal at the end of `<body>`, so custom properties a caller sets on its own wrapper never reached the panel, its header or the backdrop, and `className` can carry a class but not a runtime value. A host theming the sheet through `var(--…)` — a panel background, a title colour, a divider, a backdrop tint — had no way to deliver the values. `style` is an inline style on the panel and `overlayStyle` one on the backdrop, merged after its own positioning; `headerClassName` reaches `BottomSheet`'s header row, which `SideDrawer` already exposed. All additive; nothing renders differently without them. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat), whose bottom sheets and side panels theme their surfaces through public colour props.
+
+- **`Select` (2.0) — `collapseTagOverflow`, a one-row multi-select with a `+N` counter** — a multi-select could only wrap its tags onto more rows, so a field in a dense form or a table cell grew without bound. `collapseTagOverflow` keeps the tags on one row, as it does on `TagInput`, and folds the ones that do not fit into a `+N` tag; hovering it opens an `InteractiveTooltip` listing the hidden tags, each still removable. The count follows the width the field has, not the number of tags: the tags are taken in order while they fit beside the counter, and it is recomputed on resize. Without the prop the tags wrap as before; the prop is ignored with `customMultiSelectTagsRenderer`, and on a mobile screen the tags wrap, since the panel opens on hover. Additive.
+
+### Changed
+
+- **`Slider` (2.0) — ticks** — ticks are drawn in the `Controls/Stroke/Accent-focus` token (`--stroke-accent-focus`, was the neutral control grey), and there is one per step after `min`: a 0–1 slider at 0.1 now draws exactly 10. The tick at `min` was always under the thumb or the fill, so nothing visible is lost. Visual only; no props change.
+
+- **`Grid` (2.0) — a 1px header divider and an accent outline on hovered and selected rows** — the line under the header was on the thin 0.5px stroke like the rows, so the table body did not read as separate from its header; it is now the 1px main stroke, while the rows keep 0.5px. A hovered or selected row is outlined top and bottom with the design system shadow colour `--shadow-xs-1`, drawn as an inset shadow so the row keeps its height, and tinted with the new `--bg-control-accent-alpha-hover-subtle` (hover) and `--bg-control-accent-alpha-active-subtle` (selected) tokens. The line between the header titles and the filter row is removed, and the search fields use an 8px radius. The 1px line under the header was never drawn — ag-Grid's `border-bottom: none` collapsed it to 0 — and now is; column titles are 10px semibold caps, the header dividers are the design's short 12px marks, and the filter inputs use 12px text. Visual only; no prop changes.
+
+- **`StarterButton` (2.0) — a sparkles icon by default** — the design puts a sparkles glyph before every starter label, so each host was passing the same `iconBefore`. `iconBefore` now defaults to a 20px `IconSparkles` at the 1.5 stroke, `aria-hidden`, and stroked with the starter gradient like any other icon. A caller-supplied `iconBefore` replaces it; `iconBefore={null}` keeps a label-only pill. A `StarterButton` that passed no `iconBefore` now draws the icon; no other API changes.
+
+- **`Select` (2.0) — multi-select tags are 24px, and the field wraps them with an 8px gap** — the tags in a multi-select field used the 32px pill of `Tag`, taller than the design's field chip. They are now 24px with a `rounded-md` shape, a `layer-sunken` fill and a `stroke-secondary` rim, and the wrapped field pads 8px vertically with 8px between tags, so one row of tags still fills the 40px field. `Tag` itself is unchanged. Visual only; no API changes.
+
+### Fixed
+
+- **`Textarea` (2.0) — `invalid` no longer reaches the DOM** — the prop was spread onto the `<textarea>`, so React warned about a non-boolean `invalid` attribute on every render. It now only selects the error styling. No visual change.
+
+- **`Dropdown` and `Select` — a submenu closes when its menu or the page scrolls** — a submenu is portalled and repositioned by Floating UI's `autoUpdate`, so scrolling the list that holds its trigger, or the page, left the submenu open and dragged it along after the trigger, even once the trigger had scrolled out of the clipped list. The submenu now closes when an ancestor of its trigger scrolls. Scrolling inside the submenu does not close it. The fix is in the shared submenu hook, so it covers the 2.0 and 1.0 `Dropdown` and `Select` submenus. Reported in [ai-dial-chat#9295](https://github.com/epam/ai-dial-chat/issues/9295), on the catalog's Create menu.
+
+- **`Select` and `Dropdown` (2.0) — rows keep their 40px when the panel is capped** — the rows are `flex-col` items with a fixed height inside a list that scrolls at the panel's height cap, and a flex item shrinks by default: on a short viewport the rows collapsed to their content, with the check boxes squeezed and the focus ring hugging the text. The shared overlay row no longer shrinks.
+
+- **`Button` and `IconButton` (2.0) — a disabled button's tooltip opens** — `tooltipProps` wraps the button in `<Tooltip asChild>`, but a natively `disabled` button receives no pointer or focus events, so its tooltip could never open. That is exactly the state where a "why is this unavailable" hint matters, and callers worked around it with their own `<span>` wrapper, which no keyboard user could reach either. A disabled button that has a visible tooltip is now marked `aria-disabled="true"` instead of `disabled`: it stays in the tab order and answers hover and focus, so the tooltip opens for mouse and keyboard users alike, and it is still announced as unavailable. Its click is swallowed with `preventDefault`, so neither `onClick` nor a `type="submit"` form submission fires. Without a tooltip, or while `hideTooltip` is set, the button stays natively disabled as before. The disabled look is unchanged, since every 2.0 variant already styles `[aria-disabled="true"]`; the two ghost icon-button rules that styled only `:disabled` now style both. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat), where the chat-settings dialog explains why "Apply changes" is disabled.
+
+- **`InlineSelectTrigger` (2.0) — a `className` no longer wipes out the trigger's own classes** — the props were spread after the merged `className`, so passing `className` replaced it outright: the trigger lost its padding, pill shape, hover tint and focus ring, and the public `dial-kit-inline-select` class. `className` is now merged after the trigger's own classes, the way every other 2.0 component takes it. The trigger's own `aria-haspopup`, `aria-expanded` and `aria-label` also now win over the same attributes passed as props.
+
+- **`Accordion` (2.0) — the caret follows the reading direction, and the panel slides open and shut** — the collapsed caret pointed right under `dir="rtl"` too, against the reading direction; it now turns to point left in RTL and still points down once open. The content was also mounted only while expanded, so it appeared and vanished in one frame. It now stays mounted and animates its height (`grid-template-rows` 0fr ↔ 1fr, 200 ms, off under `prefers-reduced-motion`); while collapsed it is `inert`, so nothing in it is focusable or announced, and `aria-controls` always points at the region. The 12px gap under the header moved inside the clipped part, so a collapsed panel is exactly as tall as before. A caller that relied on the content unmounting while collapsed (to defer an expensive render, or to reset child state on close) now needs to render it conditionally itself. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat) while moving its conversation stages onto `Accordion`.
+
+- **`Select` and `Dropdown` (2.0) — rows are 2px apart, and every option list and submenu has the same vertical inset** — rows were stacked edge to edge, so a selected row's tint and a hovered neighbour's merged into one block; every option list, menu and kit-rendered submenu now stacks its rows with `gap-0.5` (the shared `overlayListClassName`). Separately, the `Dropdown` menu wraps its rows in `py-1` inside the panel's `p-1`, but the `Select` option list and the submenus of both components rendered their rows straight into the panel, so the first and last rows (and the focus ring of a keyboard-focused one) sat flush against its top and bottom edge. The `Select` option list now carries the same `py-1`, and a submenu panel of kit-rendered rows takes `py-2` — the same 8px in total. A `Dropdown` submenu drawn through `renderSubMenu` keeps the plain panel, as a `renderOverlay` body does at the top level.
+
+- **`MarkdownEditor` (2.0) — the live preview is part of the card now, instead of a sheet of GitHub's own CSS laid over it** — the 2.0 restyle covered the card and the toolbar and stopped at the split: everything right of it was still `@uiw/react-md-editor`'s default stylesheet. Three things came out of that. The pane divider was the library's `inset` box-shadow in a hardcoded `#d0d7de`, drawn on the preview and then painted over by the markdown body's opaque white — and since that body is only as tall as its content, the divider survived as a hairline starting halfway down the pane, under the last rendered block. The white itself was the second: a `#ffffff` patch over the card's `bg-layer-raised`, which a dark theme would have kept white. And Tailwind's preflight, which the kit ships, had stripped the list markers and the task-list checkbox out of the rendered markdown — a bulleted list came out as indented lines, a `- [ ]` as a 0×0 box. The divider is now a real border on `border-secondary`, the body and its table rows are transparent, code, quotes, tables and headings take kit tokens, and lists and task boxes render again. The preview also inherits the host's font and `text-primary` instead of the library's `-apple-system` stack and `#24292f`; the edit pane keeps its monospace face. Both panes gained a 16px gutter beside the divider, so text no longer butts against it.
+- **`MarkdownEditor` (2.0) — the two panes no longer sit on top of each other in RTL** — live mode pins the preview with a physical `right: 0` while the edit pane is a plain block at the inline start, so under `dir="rtl"` both landed on the right unless the host knew to add the library's own `w-md-editor-rtl` class. The preview is now placed with logical insets and the panes' text aligns to `start`, so the edit pane and the preview swap sides with the document direction — divider, gutters and the quote bar included — with no class for the host to remember.
+- **`DialSchemaRenderer` — required-field errors quote the field label** — the message was `${label} is required`, so with a long schema `title` the reader could not tell where the field name ended and "is required" began. The label is now wrapped in double quotes (`"API key" is required`) wherever the renderer builds the message — the inline field error and the `validateRequired` result alike. The label is still the schema `title` (or the label derived from the property key), never the entered value. Consumers asserting the old text in their tests need to add the quotes. Requested in [ai-dial-admin-frontend#4731](https://github.com/epam/ai-dial-admin-frontend/issues/4731).
+
 ---
 
 ## [0.14.0]

package/dist/DateCellRenderer-BdUMSg-E.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),g=require("./DateCellRenderer-CZNa4jVJ.cjs"),$=require("@tabler/icons-react"),a=require("react"),h=require("./merge-classes-BEJXjzkx.cjs"),C=require("@floating-ui/react"),he=require("./icon-DhjrDQ8I.cjs"),re=require("./icon-CrGVkVpG.cjs"),p=require("./IconButton-DHOFapLo.cjs"),gt=require("classnames");function ht(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const de=ht(a);var xe=(e=>(e.Top="top",e.Right="right",e.Bottom="bottom",e.Left="left",e))(xe||{}),fe=(e=>(e.Hover="hover",e.Click="click",e))(fe||{});const xt=7,bt=2,St=500,It="fill-control-inverted",Nt="z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs",We=a.createContext(null),Ke=()=>{const e=a.useContext(We);if(e==null)throw new Error("Tooltip components must be wrapped in <TooltipContainer />");return e},vt=({initialOpen:e=!1,placement:s=xe.Bottom,isTriggerClickable:n=!1,open:r,onOpenChange:i}={})=>{const[d,c]=a.useState(e),u=a.useRef(null),m=r??d,x=i??c,S=C.useFloating({placement:s,open:m,onOpenChange:x,whileElementsMounted:C.autoUpdate,middleware:[C.offset(xt+bt),C.flip({fallbackAxisSideDirection:"start",padding:5}),C.shift({padding:5}),C.arrow({element:u})]}),f=C.useHover(S.context,{move:!1,enabled:r==null,mouseOnly:n,delay:{open:St,close:0}}),I=C.useFocus(S.context,{enabled:r==null}),y=C.useDismiss(S.context),L=C.useRole(S.context,{role:"tooltip"}),R=C.useInteractions([f,I,y,L]);return a.useEffect(()=>{if(!m)return;const T=S.refs.reference.current;if(!(T instanceof Element))return;const w=new IntersectionObserver(([B])=>{B.isIntersecting||x(!1)},{root:null,threshold:0});return w.observe(T),()=>w.disconnect()},[m,S.refs.reference,x]),a.useMemo(()=>({open:m,setOpen:x,arrowRef:u,...R,...S}),[m,x,R,S])},Le=({children:e,...s})=>{const n=vt(s);return t.jsx(We.Provider,{value:n,children:e})},Re=({style:e,...s})=>{const n=Ke(),r=p.useHasHover(),i=g.useThemeScope(),d=a.useRef(null),c=C.useMergeRefs([n.refs.setFloating,d]);return!n.open||!r?null:t.jsx(C.FloatingPortal,{id:"tooltip-portal",children:t.jsxs("div",{ref:c,"data-placement":n.placement,style:{...n.floatingStyles,...e},...n.getFloatingProps(s),className:gt(Nt,i,n.getFloatingProps(s).className,g.DIAL_KIT_CLASS.tooltip),children:[s.children,t.jsx(C.FloatingArrow,{ref:n.arrowRef,context:n.context,className:It})]})})},we=({children:e,asChild:s=!1,...n})=>{const r=Ke(),i=s&&a.isValidElement(e),d=i?e.props?.ref:null,c=C.useMergeRefs([r.refs.setReference,...d?[d]:[]]);if(i){const u=e.props;return a.cloneElement(e,r.getReferenceProps({...u,...n,className:h.mergeClasses(u.className,n.className)||void 0,ref:c}))}return t.jsx("span",{ref:c,...r.getReferenceProps(n),className:n.className??"text-start",children:e})},Ue=({hideTooltip:e=!1,tooltip:s,children:n,asChild:r=!1,triggerClassName:i,contentClassName:d,...c})=>{const u=!e&&!!s;return t.jsxs(Le,{...c,children:[t.jsx(we,{asChild:r,className:i,children:n}),u&&t.jsx(Re,{className:d,children:s})]})},Ve={[p.ButtonVariant.Primary]:{[p.ButtonAppearance.Solid]:"dial-kit-primary-solid-button",[p.ButtonAppearance.Ghost]:"dial-kit-primary-ghost-button",[p.ButtonAppearance.Link]:"dial-kit-primary-link-button"},[p.ButtonVariant.Neutral]:{[p.ButtonAppearance.Solid]:"dial-kit-neutral-solid-button",[p.ButtonAppearance.Outlined]:"dial-kit-neutral-outlined-button"},[p.ButtonVariant.Danger]:{[p.ButtonAppearance.Solid]:"dial-kit-danger-solid-button",[p.ButtonAppearance.Ghost]:"dial-kit-danger-ghost-button",[p.ButtonAppearance.Outlined]:"dial-kit-danger-outlined-button"},[p.ButtonVariant.Static]:{[p.ButtonAppearance.Solid]:"dial-kit-static-solid-button"},[p.ButtonVariant.Starter]:{[p.ButtonAppearance.Outlined]:"dial-kit-starter-outlined-button"},[p.ButtonVariant.Success]:{},[p.ButtonVariant.Secondary]:{},[p.ButtonVariant.Tertiary]:{}},Et=e=>{e.preventDefault()},$e=(e,s,n)=>{const r=s!=null&&!s.hideTooltip&&s.tooltip!=null&&s.tooltip!=="";return e&&r?{disabled:void 0,"aria-disabled":!0,onClick:Et}:{disabled:e,onClick:n}},qe=(e=p.ButtonVariant.Primary,s=p.ButtonAppearance.Solid)=>{const n=Ve[e]?.[s];return n||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${s}. Using default primary solid button styles.`),Ve[p.ButtonVariant.Primary][p.ButtonAppearance.Solid])},yt={[p.ElementSize.Small]:"size-[24px]",[p.ElementSize.Standard]:"size-[40px] dial-kit-enhanced-target",[p.ElementSize.Large]:"size-[48px] dial-kit-enhanced-target"},be=({variant:e,appearance:s=p.ButtonAppearance.Solid,size:n=p.ElementSize.Standard,className:r,icon:i,tooltipProps:d,type:c="button",disabled:u,...m})=>{const x=h.mergeClasses("dial-kit-base-icon-button dial-kit-base-button",e&&qe(e,s),yt[n],r),S=t.jsx("button",{...m,...$e(u,d,m.onClick),type:c,className:x,"aria-label":p.resolveAccessibleName(m["aria-label"],d?.tooltip),children:i});return d?t.jsx(Ue,{asChild:!0,...d,children:S}):S},Xe=({caption:e,onClick:s,"aria-label":n})=>{if(!e)return null;const r=h.mergeClasses("text-secondary hover:text-control-accent-hover active:text-control-accent-active","focus-visible:outline focus-visible:outline-focus",g.DIAL_KIT_CLASS.infoButton);return t.jsx(be,{"aria-label":n,className:r,icon:t.jsx($.IconInfoCircle,{size:re.DIAL_ICON_SIZE.SM,stroke:he.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),onClick:s,size:p.ElementSize.Small,tooltipProps:{tooltip:e}})},De=({label:e,required:s,className:n,containerClassName:r,caption:i,size:d=p.ElementSize.Small,...c})=>e?t.jsxs("span",{className:h.mergeClasses("flex items-center gap-0.5",r,g.DIAL_KIT_CLASS.label),children:[t.jsxs("label",{...c,className:h.mergeClasses("text-secondary flex items-center gap-0.5",d===p.ElementSize.Small?"dial-tiny-semi-text":"dial-small-text",n),children:[typeof e=="string"?t.jsx("span",{className:"min-h-4",children:e}):e,s&&t.jsxs(t.Fragment,{children:[t.jsx("span",{"aria-hidden":"true",className:"text-error dial-tiny-text",children:"*"}),t.jsx("span",{className:"sr-only",children:"(required)"})]})]}),t.jsx(Xe,{caption:i})]}):null;var H=(e=>(e.None="none",e.Check="check",e.Tint="tint",e.Checkbox="checkbox",e.Highlight="highlight",e))(H||{});const Ge={size:14,stroke:3,"aria-hidden":!0},je=({isSelected:e=!1,isIndeterminate:s=!1,invalid:n=!1,disabled:r=!1,htmlFor:i,className:d})=>{const c=s||e,u=!!i,m=h.mergeClasses("grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",u&&"dial-kit-minimum-target",u&&"peer-focus-visible:outline peer-focus-visible:outline-focus",r?"border-transparent bg-control-disable-primary text-control-disable-primary":h.mergeClasses(n&&c&&"border-transparent bg-control-error text-control-permanent",n&&!c&&"border-error bg-control-neutral",!n&&c&&"border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",!n&&!c&&"border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"),r?"cursor-not-allowed":u&&"cursor-pointer",d,g.DIAL_KIT_CLASS.checkboxBox),x=s?t.jsx($.IconMinus,{...Ge}):e&&t.jsx($.IconCheck,{...Ge});return u?t.jsx("label",{htmlFor:i,className:m,children:x}):t.jsx("span",{"aria-hidden":"true",className:m,children:x})},He=({id:e,labelProps:s,isSelected:n=!1,isIndeterminate:r=!1,invalid:i=!1,disabled:d,onChange:c,caption:u,className:m,boxClassName:x,...S})=>{const f=a.useId(),I=e??f,y=u?`${I}-caption`:void 0,L=a.useCallback(T=>{c?.(T.target.checked)},[c]),R=a.useCallback(T=>{T&&(T.indeterminate=r)},[r]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:h.mergeClasses("flex items-center gap-2",m,g.DIAL_KIT_CLASS.checkbox),children:[t.jsx("input",{...S,ref:R,type:"checkbox",id:I,checked:n,disabled:d,onChange:L,"aria-checked":r?"mixed":n,"aria-invalid":i||void 0,"aria-label":p.resolveAccessibleName(typeof s?.label!="string"?S["aria-label"]:void 0),"aria-describedby":y,className:"peer sr-only"}),t.jsx(je,{htmlFor:I,isSelected:n,isIndeterminate:r,invalid:i,disabled:d,className:x}),s&&t.jsx(De,{size:p.ElementSize.Standard,...s,htmlFor:I,className:h.mergeClasses("py-[1px]",d?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",s.className)})]}),u&&t.jsx("span",{id:y,className:"dial-tiny-text text-secondary ml-[28px]",children:u})]})},Tt=8,kt=400,At="z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md",Ce=({content:e,placement:s=xe.Right,children:n,asChild:r=!1,hideTooltip:i=!1,initialOpen:d=!1,trigger:c=fe.Hover,open:u,onOpenChange:m,triggerClassName:x,contentClassName:S})=>{const f=g.useIsMobileScreen(),I=c===fe.Click,y=g.useThemeScope(),[L,R]=a.useState(d),T=u??L,w=K=>{m?.(K),u==null&&R(K)},B=C.useFloatingNodeId(),{refs:M,floatingStyles:q,context:k}=C.useFloating({nodeId:B,placement:s,open:T,onOpenChange:w,whileElementsMounted:C.autoUpdate,middleware:[C.offset(Tt),C.flip({padding:5}),C.shift({padding:5})]}),F=C.useHover(k,{enabled:u==null&&!I,handleClose:C.safePolygon(),delay:{open:kt,close:0}}),z=C.useFocus(k,{enabled:u==null&&!I}),v=C.useClick(k,{enabled:I}),X=C.useDismiss(k),{getReferenceProps:Y,getFloatingProps:te}=C.useInteractions([F,z,v,X]),W=a.useRef(null),Z=C.useMergeRefs(a.useMemo(()=>[M.setFloating,W],[M.setFloating])),A=r&&a.isValidElement(n),_=A?n.props?.ref:null,D=C.useMergeRefs(a.useMemo(()=>[M.setReference,..._?[_]:[]],[M.setReference,_])),J=!i&&(I||!f)&&!!e,E=A?a.cloneElement(n,Y({...n.props,ref:D,className:h.mergeClasses(n.props.className,x)||void 0})):t.jsx("span",{ref:D,...Y(),className:x??"text-start",children:n});return t.jsxs(t.Fragment,{children:[E,T&&J&&t.jsx(C.FloatingPortal,{id:"interactive-tooltip-portal",children:t.jsx(C.FloatingFocusManager,{context:k,modal:!1,initialFocus:-1,returnFocus:!1,order:["reference","content"],children:t.jsx("div",{ref:Z,"data-placement":k.placement,style:q,...te(),className:h.mergeClasses(At,y,S,g.DIAL_KIT_CLASS.interactiveTooltip),children:e})})})]})},Be="rounded-xl bg-layer-raised p-1 shadow-md",Me="flex flex-col gap-0.5",Ye=h.mergeClasses(Be,"w-max"),Je=h.mergeClasses(Ye,Me,"py-2"),Qe=h.mergeClasses("flex w-full shrink-0 cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg","dial-small-text text-primary truncate","hover:bg-control-accent-alpha-hover","focus-visible:outline focus-visible:outline-focus"),et="bg-control-accent-alpha",_t=h.mergeClasses(et,"text-accent"),Lt=h.mergeClasses("cursor-not-allowed text-control-disable-primary","bg-transparent hover:bg-transparent"),tt=4,Rt=h.mergeClasses("flex items-center gap-2 align-middle","h-auto px-0 bg-transparent border-0"),wt=h.mergeClasses("z-floating focus-visible:outline-none",Be),Dt=Ye,jt=Je,Ht=h.mergeClasses(Me,"py-1"),Bt="my-1 border-t border-tertiary",ee=tt,Mt=t.jsx($.IconChevronRight,{size:re.DIAL_ICON_SIZE.SM,stroke:he.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),Oe=(e,s)=>({appearance:r,...i})=>t.jsx(be,{...i,variant:e,appearance:r||s}),nt=(e,s)=>({variant:r,...i})=>t.jsx(be,{...i,variant:r||s,appearance:e}),Ot=Oe(p.ButtonVariant.Primary,p.ButtonAppearance.Solid),Ft=Oe(p.ButtonVariant.Neutral,p.ButtonAppearance.Solid),Vt=Oe(p.ButtonVariant.Danger,p.ButtonAppearance.Ghost),st=nt(p.ButtonAppearance.Ghost,p.ButtonVariant.Primary),Gt=nt(p.ButtonAppearance.Solid,p.ButtonVariant.Static),rt=({ariaLabel:e="Close",className:s,size:n=p.ElementSize.Small,onClose:r,...i})=>t.jsx(st,{...i,size:n,"aria-label":e,className:h.mergeClasses(s,g.DIAL_KIT_CLASS.closeButton),onClick:r,icon:t.jsx($.IconX,{size:n===p.ElementSize.Small?re.DIAL_ICON_SIZE.SM:re.DIAL_ICON_SIZE.MD,stroke:he.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"})}),Pt=e=>{const s=a.useRef(null),[n,r]=a.useState(!1),[i,d]=a.useState(""),c=a.useRef(!1),u=a.useCallback(()=>{const x=s.current;x&&(c.current&&d(x.textContent??""),r(x.scrollWidth>x.clientWidth))},[]),m=a.useCallback(()=>g.scheduleMeasure(u),[u]);return a.useEffect(()=>{const x=s.current;if(x)return g.observeElementSize(x,u)},[u]),a.useEffect(()=>{c.current=typeof e!="string",m()},[e,m]),{ref:s,isTruncated:n,textContent:i,remeasure:m}},Se=({text:e,className:s,contentClassName:n,hideTooltip:r=!1,id:i,customTooltipContent:d,...c})=>{const{ref:u,isTruncated:m,textContent:x,remeasure:S}=Pt(e),f=typeof e=="string"?e:x,I=a.useMemo(()=>r||!m?null:d??f,[d,f,r,m]);return t.jsxs(Le,{...c,children:[t.jsx(we,{asChild:!0,onMouseEnter:S,onFocusCapture:S,children:t.jsx("span",{id:i,ref:u,"aria-label":m&&f?f:void 0,className:h.mergeClasses("block min-w-0 max-w-full flex-1 truncate text-start",s,g.DIAL_KIT_CLASS.ellipsisTooltip),children:e})}),!!I&&t.jsx(Re,{className:n,children:I})]})},zt=t.jsx($.IconCheck,{size:re.DIAL_ICON_SIZE.SM,stroke:he.DIAL_KIT_ICON_STROKE,className:`shrink-0 ${g.DIAL_KIT_CLASS.menuItemCheck}`,"aria-hidden":!0}),pe=({label:e,icon:s,description:n,mark:r=H.None,selected:i=!1,danger:d=!1,trailing:c,rightControl:u,ellipsisLabel:m=!1,labelClassName:x,children:S,className:f,disabled:I=!1,type:y="button",...L})=>{const R=i&&r===H.Highlight,T=i&&(r===H.Checkbox||r===H.Tint),w=h.mergeClasses(d&&"text-error",I&&"text-control-disable-primary"),B=h.mergeClasses(Qe,"aria-expanded:bg-control-accent-alpha-hover",R&&_t,T&&et,I&&Lt,d&&"text-error",f,g.DIAL_KIT_CLASS.menuItem),M=t.jsxs("button",{type:y,disabled:I,"data-menu-item-row":u?"":void 0,className:u?"flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none":B,...L,children:[S??t.jsxs(t.Fragment,{children:[r===H.Checkbox&&t.jsx(je,{isSelected:i,disabled:I}),s&&t.jsx(g.DialIcon,{icon:s,className:w}),m?t.jsx(Se,{text:e,className:h.mergeClasses(w,x)}):t.jsx("span",{className:h.mergeClasses("min-w-0 flex-1 truncate text-start",w,x),children:e}),n&&t.jsx("span",{className:h.mergeClasses("shrink-0 text-secondary dial-small-text",I&&"text-control-disable-primary"),children:n}),i&&r===H.Check&&zt]}),c&&t.jsx("span",{className:h.mergeClasses("ml-auto shrink-0",w),children:c})]});return u?t.jsxs("div",{role:"none",className:h.mergeClasses(B,"has-[[data-menu-item-row]:focus-visible]:outline","has-[[data-menu-item-row]:focus-visible]:outline-focus"),children:[M,u]}):M},ge=e=>e.mark??(e.selectable?H.Checkbox:H.None),ot=e=>e.selectable?"menuitemcheckbox":ge(e)===H.Check?"menuitemradio":"menuitem",Zt=({item:e,onRootClose:s})=>{const{isOpen:n,nodeId:r,refs:i,floatingStyles:d,context:c,getReferenceProps:u,getFloatingProps:m}=g.useSubMenuFloating(ee,"menu",!!e.disabled),x=a.useCallback(f=>I=>{f.disabled||(f.onClick?.({key:f.key,domEvent:I}),f.selectable||s())},[s]),S=t.jsx(pe,{ref:i.setReference,role:"menuitem","aria-haspopup":"menu","aria-expanded":n,"aria-disabled":!!e.disabled,disabled:e.disabled,icon:e.icon,label:e.label,trailing:Mt,className:e.className,...u(),children:e.renderItem?.(e)});return t.jsxs(C.FloatingNode,{id:r,children:[e.interactiveTooltip?t.jsx(Ce,{asChild:!0,placement:e.interactiveTooltip.placement,content:e.interactiveTooltip.content,contentClassName:e.interactiveTooltip.contentClassName,children:S}):S,n&&t.jsx(g.SubMenuPanel,{refs:i,floatingStyles:d,context:c,getFloatingProps:m,role:"menu",surfaceClassName:e.renderSubMenu?Dt:jt,children:e.renderSubMenu?e.renderSubMenu():t.jsxs(t.Fragment,{children:[e.menuHeader&&(typeof e.menuHeader=="function"?e.menuHeader():e.menuHeader),e.children.map(f=>{const I=ot(f),y=t.jsx(pe,{role:I,"aria-checked":I==="menuitem"?void 0:!!f.checked,"aria-current":ge(f)===H.Highlight&&f.checked?!0:void 0,"aria-disabled":!!f.disabled,disabled:f.disabled,mark:ge(f),selected:!!f.checked,danger:f.danger,icon:f.icon,label:f.label,className:f.className,rightControl:f.rightControl,onClick:x(f),children:f.renderItem?.(f)});return t.jsx(a.Fragment,{children:f.interactiveTooltip?t.jsx(Ce,{asChild:!0,placement:f.interactiveTooltip.placement,content:f.interactiveTooltip.content,contentClassName:f.interactiveTooltip.contentClassName,children:y}):y},f.key)}),e.menuFooter&&(typeof e.menuFooter=="function"?e.menuFooter():e.menuFooter)]})})]})},Wt='[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]',Kt=e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-disabled")!=="true",Ut=["ArrowDown","ArrowUp","Home","End"],$t=(e,s,n)=>{if(e==="Home")return 0;if(e==="End")return n-1;const r=e==="ArrowDown"?1:-1;return s===-1?r===1?0:n-1:(s+r+n)%n},qt=e=>"clientWidth"in e?e.clientWidth:e.getBoundingClientRect?.()?.width??0,at=({children:e,items:s,onItemClick:n,menuHeader:r,menuFooter:i,renderOverlay:d,trigger:c=[g.DropdownTrigger.Click],placement:u,disabled:m=!1,open:x,defaultOpen:S=!1,onOpenChange:f,closable:I=!1,onClose:y,className:L,overlayContentClassName:R,separatorClassName:T,listClassName:w,listStyle:B,outsidePressIgnoreRef:M,outsideClosable:q=!0,allowedPlacements:k,anchorToMouse:F=!1,matchReferenceWidth:z=!0,maxDropdownHeight:v,initialFocus:X})=>{const Y=g.useThemeScope(),[te,W]=a.useState(S),Z=x!==void 0,A=Z?!!x:te,_=a.useRef(null),[D,J]=a.useState(!0),E=a.useCallback((l,o,b)=>{l&&J(b!=="hover"&&b!=="safe-polygon"),Z||W(l),f?.(l)},[Z,f]),K=a.useId(),Ie=u===void 0,oe=C.useFloatingNodeId(),{refs:j,floatingStyles:U,context:V}=C.useFloating({nodeId:oe,placement:u,open:A,onOpenChange:E,whileElementsMounted:C.autoUpdate,middleware:[C.offset({mainAxis:ee,crossAxis:0}),Ie?C.autoPlacement({alignment:"start",crossAxis:!0,padding:ee,allowedPlacements:k}):C.flip({padding:ee}),C.shift({padding:ee}),C.size({padding:ee,apply({availableWidth:l,availableHeight:o,elements:b}){const N=b.floating,O=qt(b.reference);N.style.setProperty("--fui-available-height",`${Math.floor(o)}px`),N.style.setProperty("--reference-width",z?`${Math.round(O)}px`:"0px"),z?N.style.minWidth=`${Math.round(O)}px`:N.style.removeProperty("min-width"),N.style.maxWidth=`${Math.floor(l)}px`;const se=Math.floor(o);N.style.maxHeight=`${v?Math.min(se,v):se}px`}})]}),Q=C.useClick(V,{enabled:c.includes(g.DropdownTrigger.Click)&&!m}),Ne=C.useHover(V,{enabled:c.includes(g.DropdownTrigger.Hover)&&!m,move:!1,restMs:40,handleClose:C.safePolygon(),delay:{open:80,close:80}}),ne=C.useDismiss(V,{bubbles:!0,referencePress:!1,outsidePress:l=>{if(!q)return!1;const o=l.target;return!(M?.current&&o instanceof Node&&M.current.contains(o))}}),ae=C.useRole(V,{role:"menu"}),{getReferenceProps:ve,getFloatingProps:le}=C.useInteractions([Q,Ne,ne,ae]),G=a.useCallback((l,o)=>{j.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:l,y:o,top:o,left:l,right:l,bottom:o})})},[j]),Ee=a.useCallback(l=>{!c.includes(g.DropdownTrigger.ContextMenu)||m||(l.preventDefault(),F&&(G(l.clientX,l.clientY),_.current=document.elementFromPoint(l.clientX,l.clientY)),E(!0))},[F,m,E,G,c]),ye=a.useCallback(l=>{!F||m||(c.includes(g.DropdownTrigger.ContextMenu)&&A&&E(!1),G(l.clientX,l.clientY),_.current=document.elementFromPoint(l.clientX,l.clientY))},[F,m,G,A,c,E]);a.useEffect(()=>{m&&A&&E(!1)},[m,A,E]);const Te=a.useCallback(l=>{if(l.defaultPrevented||!Ut.includes(l.key)||!l.currentTarget.contains(l.target))return;const o=Array.from(l.currentTarget.querySelectorAll(Wt)).filter(Kt);if(o.length===0)return;l.preventDefault();const b=l.currentTarget.ownerDocument.activeElement,N=o.findIndex(O=>O===b);o[$t(l.key,N,o.length)]?.focus()},[]),ce=a.useCallback(l=>o=>{l.disabled||(l.onClick?.({key:l.key,domEvent:o}),n?.({key:l.key,domEvent:o}),l.selectable||E(!1))},[n,E]),ie=a.useMemo(()=>d?d():s?t.jsxs(t.Fragment,{children:[r&&t.jsx(t.Fragment,{children:typeof r=="function"?r():r}),t.jsx("div",{role:"none",className:h.mergeClasses(Ht,R,g.DIAL_KIT_CLASS.dropdownList),"aria-label":"dropdown",children:s.map(l=>{if(l.type===g.DropdownItemType.Divider)return t.jsx("div",{role:"separator",className:h.mergeClasses(Bt,T)},l.key);if(l.type===g.DropdownItemType.PlainText)return t.jsx("div",{className:h.mergeClasses("px-3 py-2 text-secondary dial-caption-text",l.className),children:l.label},l.key);if(l.children?.length)return t.jsx(Zt,{item:l,onRootClose:()=>E(!1)},l.key);const o=ge(l),b=ot(l),N=t.jsx(pe,{role:b,"aria-checked":b==="menuitem"?void 0:!!l.checked,"aria-current":o===H.Highlight&&l.checked?!0:void 0,"aria-disabled":!!l.disabled,disabled:l.disabled,mark:o,selected:!!l.checked,danger:l.danger,icon:l.icon,label:l.label,className:l.className,rightControl:l.rightControl,onClick:ce(l),children:l.renderItem?.(l)});return t.jsx(a.Fragment,{children:l.interactiveTooltip?t.jsx(Ce,{asChild:!0,placement:l.interactiveTooltip.placement,content:l.interactiveTooltip.content,contentClassName:l.interactiveTooltip.contentClassName,children:N}):N},l.key)})}),i&&t.jsx(t.Fragment,{children:typeof i=="function"?i():i})]}):null,[ce,s,i,r,d,E,R,T]),ke=ve({onContextMenu:Ee,onMouseDown:ye});return a.useEffect(()=>{if(!A)return;const l=j.reference.current;let o=null;if(l instanceof Element?o=l:_.current instanceof Element&&(o=_.current),!o)return;const b=new IntersectionObserver(([N])=>{N.isIntersecting||E(!1)},{root:null,threshold:0});return b.observe(o),()=>b.disconnect()},[A,j.reference,E]),t.jsx(C.FloatingTree,{children:t.jsxs(C.FloatingNode,{id:oe,children:[t.jsx("span",{ref:j.setReference,className:h.mergeClasses(Rt,m&&"!cursor-not-allowed opacity-75",L,g.DIAL_KIT_CLASS.dropdown),"aria-haspopup":"menu","aria-expanded":A,"aria-controls":K,...ke,children:e}),A&&t.jsx(C.FloatingPortal,{children:t.jsx(C.FloatingFocusManager,{context:V,modal:!1,initialFocus:X!==void 0?X:D?0:-1,returnFocus:!0,children:t.jsxs("div",{id:K,ref:j.setFloating,style:B?{...B,...U}:U,className:h.mergeClasses(wt,!z&&"w-max","overflow-auto",Y,w),...le({onKeyDown:Te}),children:[I&&t.jsx("div",{className:"flex items-center justify-between px-2 pt-2",children:t.jsx(rt,{ariaLabel:"Close dropdown",onClose:l=>{y?.(l),E(!1)}})}),ie]})})})]})})},lt=e=>de.createElement("svg",{width:32,height:32,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},de.createElement("path",{d:"M20.2954 16.7035C20.2954 17.088 20.6029 17.4069 20.9737 17.4069C21.3445 17.4069 21.6519 17.088 21.6519 16.7035C21.6519 16.3189 21.3445 16 20.9737 16C20.6029 16 20.2954 16.3189 20.2954 16.7035Z",fill:"currentColor"}),de.createElement("path",{d:"M11.7041 16.7035C11.7041 17.088 11.3966 17.4069 11.0258 17.4069C10.655 17.4069 10.3476 17.088 10.3476 16.7035C10.3476 16.3189 10.655 16 11.0258 16C11.3966 16 11.7041 16.3189 11.7041 16.7035Z",fill:"currentColor"}),de.createElement("path",{d:"M19.0221 2.40002L19.5525 1.86969C19.4118 1.72904 19.221 1.65002 19.0221 1.65002V2.40002ZM26.5777 9.95558H27.3277C27.3277 9.75667 27.2487 9.5659 27.108 9.42525L26.5777 9.95558ZM5.42212 29.6H4.67212C4.67212 30.0142 5.00791 30.35 5.42212 30.35V29.6ZM8.44434 2.40002V1.65002V2.40002ZM13.8932 19.5173C13.8932 19.9315 14.229 20.2673 14.6432 20.2673C15.0574 20.2673 15.3932 19.9315 15.3932 19.5173H14.6432H13.8932ZM16.6063 19.5173C16.6063 19.9315 16.9421 20.2673 17.3563 20.2673C17.7705 20.2673 18.1063 19.9315 18.1063 19.5173H17.3563H16.6063ZM19.0221 2.40002H18.2721V8.44447H19.0221H19.7721V2.40002H19.0221ZM19.0221 8.44447H18.2721C18.2721 9.04415 18.5103 9.61927 18.9344 10.0433L19.4647 9.51299L19.995 8.98266C19.8523 8.83992 19.7721 8.64633 19.7721 8.44447H19.0221ZM19.4647 9.51299L18.9344 10.0433C19.3584 10.4674 19.9335 10.7056 20.5332 10.7056V9.95558V9.20558C20.3314 9.20558 20.1378 9.12539 19.995 8.98266L19.4647 9.51299ZM20.5332 9.95558V10.7056H26.5777V9.95558V9.20558H20.5332V9.95558ZM5.42212 29.6H6.17212V5.42225H5.42212H4.67212V29.6H5.42212ZM5.42212 5.42225H6.17212C6.17212 4.81962 6.41151 4.24167 6.83764 3.81554L6.30731 3.28521L5.77698 2.75488C5.06955 3.46231 4.67212 4.42179 4.67212 5.42225H5.42212ZM6.30731 3.28521L6.83764 3.81554C7.26376 3.38942 7.84171 3.15002 8.44434 3.15002V2.40002V1.65002C7.44389 1.65002 6.48441 2.04745 5.77698 2.75488L6.30731 3.28521ZM8.44434 2.40002V3.15002H19.0221V2.40002V1.65002H8.44434V2.40002ZM19.0221 2.40002L18.4918 2.93035L26.0473 10.4859L26.5777 9.95558L27.108 9.42525L19.5525 1.86969L19.0221 2.40002ZM26.5777 9.95558H25.8277V26.5778H26.5777H27.3277V9.95558H26.5777ZM26.5777 26.5778H25.8277C25.8277 27.1804 25.5883 27.7584 25.1622 28.1845L25.6925 28.7148L26.2228 29.2452C26.9302 28.5377 27.3277 27.5783 27.3277 26.5778H26.5777ZM25.6925 28.7148L25.1622 28.1845C24.736 28.6106 24.1581 28.85 23.5555 28.85V29.6V30.35C24.5559 30.35 25.5154 29.9526 26.2228 29.2452L25.6925 28.7148ZM23.5555 29.6V28.85H5.42212V29.6V30.35H23.5555V29.6ZM20.9737 16V16.75C20.9388 16.75 20.9181 16.7345 20.9119 16.7281C20.906 16.722 20.9019 16.7133 20.9019 16.7035H21.6519H22.4019C22.4019 15.9307 21.7842 15.25 20.9737 15.25V16ZM21.6519 16.7035H20.9019C20.9019 16.6936 20.906 16.685 20.9119 16.6788C20.9181 16.6724 20.9388 16.6569 20.9737 16.6569V17.4069V18.1569C21.7842 18.1569 22.4019 17.4762 22.4019 16.7035H21.6519ZM20.9737 17.4069V16.6569C21.0086 16.6569 21.0292 16.6724 21.0354 16.6788C21.0414 16.685 21.0454 16.6936 21.0454 16.7035H20.2954H19.5454C19.5454 17.4762 20.1631 18.1569 20.9737 18.1569V17.4069ZM20.2954 16.7035H21.0454C21.0454 16.7133 21.0414 16.722 21.0354 16.7281C21.0292 16.7345 21.0086 16.75 20.9737 16.75V16V15.25C20.1631 15.25 19.5454 15.9307 19.5454 16.7035H20.2954ZM11.0258 16V16.75C10.9909 16.75 10.9703 16.7345 10.9641 16.7281C10.9582 16.722 10.9541 16.7133 10.9541 16.7035H11.7041H12.4541C12.4541 15.9307 11.8364 15.25 11.0258 15.25V16ZM11.7041 16.7035H10.9541C10.9541 16.6936 10.9582 16.685 10.9641 16.6788C10.9703 16.6724 10.9909 16.6569 11.0258 16.6569V17.4069V18.1569C11.8364 18.1569 12.4541 17.4762 12.4541 16.7035H11.7041ZM11.0258 17.4069V16.6569C11.0607 16.6569 11.0814 16.6724 11.0876 16.6788C11.0935 16.685 11.0976 16.6936 11.0976 16.7035H10.3476H9.59757C9.59757 17.4762 10.2153 18.1569 11.0258 18.1569V17.4069ZM10.3476 16.7035H11.0976C11.0976 16.7133 11.0935 16.722 11.0876 16.7281C11.0814 16.7345 11.0607 16.75 11.0258 16.75V16V15.25C10.2153 15.25 9.59757 15.9307 9.59757 16.7035H10.3476ZM14.6432 19.5173H15.3932C15.3932 19.127 15.6889 18.8604 15.9998 18.8604V18.1104V17.3604C14.8094 17.3604 13.8932 18.3506 13.8932 19.5173H14.6432ZM15.9998 18.1104V18.8604C16.3106 18.8604 16.6063 19.127 16.6063 19.5173H17.3563H18.1063C18.1063 18.3506 17.1901 17.3604 15.9998 17.3604V18.1104Z",fill:"currentColor"})),ct=({id:e,name:s,value:n,labelProps:r,isSelected:i=!1,disabled:d,onChange:c,caption:u,className:m,...x})=>{const S=a.useId(),f=e??S,I=u?`${f}-caption`:void 0,y=a.useCallback(L=>{L.target.checked&&c?.(n)},[c,n]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:h.mergeClasses("flex items-center gap-2 ",m,g.DIAL_KIT_CLASS.radio),children:[t.jsx("input",{...x,type:"radio",id:f,name:s,value:n,checked:i,disabled:d,onChange:y,"aria-label":p.resolveAccessibleName(typeof r?.label!="string"?x["aria-label"]:void 0),"aria-describedby":I,className:"peer sr-only"}),t.jsx("label",{htmlFor:f,className:h.mergeClasses("group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover","dial-kit-minimum-target","peer-focus-visible:outline peer-focus-visible:outline-focus",d?"cursor-not-allowed border-default bg-control-disable-primary":h.mergeClasses("cursor-pointer",i?"border border-accent bg-control-neutral":"border-default bg-control-neutral")),children:i&&t.jsx("span",{className:h.mergeClasses("size-3 rounded-full",d?"bg-control-disable-secondary":"bg-control-accent")})}),r&&t.jsx(De,{size:p.ElementSize.Standard,...r,htmlFor:f,className:h.mergeClasses("py-[1px]",d?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",r.className)})]}),u&&t.jsx("span",{id:I,className:"dial-tiny-text text-secondary ml-[26px]",children:u})]})},Pe=32,it=({title:e,description:s,icon:n,live:r=!1,className:i,titleClassName:d,descriptionClassName:c})=>t.jsxs("div",{role:r?"status":void 0,className:h.mergeClasses("flex size-full flex-col items-center justify-center gap-2 text-tertiary",i,g.DIAL_KIT_CLASS.noDataContent),children:[n??t.jsx(lt,{width:Pe,height:Pe,"aria-hidden":"true"}),t.jsx("span",{className:h.mergeClasses("dial-tiny-text text-secondary",d),children:e}),s&&t.jsx("span",{className:h.mergeClasses("dial-tiny-text text-secondary",c),children:s})]}),ut="dial-kit-grid",Xt="dial-kit-grid-with-selection",Yt="dial-kit-grid-without-header-borders",Jt="dial-kit-grid-row-select",Qt="dial-kit-grid-header-select",en="dial-kit-grid-selection-visible",tn="dial-kit-grid-align-right",_e=40,ze="0.5px solid var(--stroke-tertiary, #E0E6F0)",me={accentColor:"var(--bg-control-accent, #1D4ED8)",backgroundColor:"var(--bg-layer-raised, #FCFCFC)",oddRowBackgroundColor:"var(--bg-layer-sunken, #EEF1F7)",selectedRowBackgroundColor:"var(--bg-control-accent-alpha-active-subtle, #2764D914)",rowHoverColor:"var(--bg-control-accent-alpha-hover-subtle, #2764D90A)",borderColor:"var(--stroke-tertiary, #E0E6F0)",rowBorder:ze,headerRowBorder:!1,headerColumnBorder:ze,headerColumnBorderHeight:12,chromeBackgroundColor:"var(--bg-layer-base, #F5F7FA)",headerBackgroundColor:"var(--bg-layer-raised, #FCFCFC)",foregroundColor:"var(--text-primary, #161B2D)",headerTextColor:"var(--text-secondary, #57647A)",browserColorScheme:"light",headerFontSize:14,headerFontWeight:600,fontSize:14,fontFamily:"var(--theme-font, var(--font-inter))",spacing:4,borderRadius:4,inputBorderRadius:8,wrapperBorderRadius:8};var P=(e=>(e.API="api",e.ROW_DATA_CHANGED="rowDataChanged",e.CHECKBOX_SELECTED="checkboxSelected",e))(P||{});const nn=({params:e,mode:s,label:n,radioName:r,rowId:i,disabled:d})=>{const c=e.node,[u,m]=a.useState(()=>!!c.isSelected());a.useEffect(()=>{const S=()=>m(!!c.isSelected());return S(),c.addEventListener("rowSelected",S),()=>c.removeEventListener("rowSelected",S)},[c]);const x=S=>{d||c.setSelected(S,s===g.GridSelectionMode.SINGLE,P.CHECKBOX_SELECTED)};return s===g.GridSelectionMode.SINGLE?t.jsx(ct,{name:r,value:i,isSelected:u,disabled:d,"aria-label":n,onChange:()=>x(!0)}):t.jsx(He,{isSelected:u,disabled:d,"aria-label":n,onChange:x})},Ze=e=>{let s=0,n=0;return e.forEachNodeAfterFilter(r=>{r.selectable!==!1&&(n++,r.isSelected()&&s++)}),{selected:s,selectable:n}},sn=({api:e,label:s})=>{const[{selected:n,selectable:r},i]=a.useState(()=>Ze(e));a.useEffect(()=>{const c=()=>i(Ze(e));return c(),e.addEventListener("selectionChanged",c),e.addEventListener("modelUpdated",c),()=>{e.isDestroyed()||(e.removeEventListener("selectionChanged",c),e.removeEventListener("modelUpdated",c))}},[e]);const d=a.useCallback(c=>{if(c){e.selectAll("filtered",P.CHECKBOX_SELECTED);return}e.deselectAll("filtered",P.CHECKBOX_SELECTED)},[e]);return t.jsx(He,{isSelected:r>0&&n===r,isIndeterminate:n>0&&n<r,disabled:r===0,"aria-label":s,onChange:d})},dt="en-US",mt={year:"numeric",month:"numeric",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"},Ae=40,rn={minWidth:Ae,width:Ae,maxWidth:Ae,resizable:!1,sortable:!1,filter:!1,floatingFilter:!1,suppressMovable:!0,suppressHeaderMenuButton:!0,suppressAutoSize:!0,suppressSizeToFit:!0},ft="dial-kit-grid-selection",on=150,an=100,ln=({columnDefs:e,rowData:s,additionalGridOptions:n,getContextMenuItems:r,className:i,ariaLabel:d="Data grid",wrapCustomCellRenderers:c=!0,disabledRowIds:u,selectedRowIds:m,onSelectionChange:x,onGridApiChange:S,getRowId:f,alternateOddRowColors:I=!1,filterPlaceholder:y="Enter value",emptyStateIcon:L,emptyStateTitle:R="No results found",emptyStateDescription:T="Sorry, we couldn't find any results for your search.",loading:w=!1,wrapperBorder:B=!0,withoutHeaderBorders:M=!1,allowDisabledContextMenu:q=!1,selectionMode:k,selectRowLabel:F,selectAllLabel:z="Select all rows"})=>{g.registerAgGridModulesOnce();const[v,X]=a.useState(),Y=g.useIsMobileScreen(),te=g.useIsTabletScreen(),W=a.useRef(new Set),Z=a.useRef(void 0),A=`dial-kit-grid-selection-${a.useId()}`,_=a.useRef({getRowId:f,getContextMenuItems:r,onSelectionChange:x,selectRowLabel:F,wrapCustomCellRenderers:c});_.current={getRowId:f,getContextMenuItems:r,onSelectionChange:x,selectRowLabel:F,wrapCustomCellRenderers:c};const D=a.useCallback(o=>{const b=_.current.getRowId;return b?b(o):String(o.id??JSON.stringify(o))},[]),J=!!r,E=!!c,K=a.useMemo(()=>g.themeBalham.withPart(g.colorSchemeLight).withParams({...me,oddRowBackgroundColor:I?me.oddRowBackgroundColor:me.backgroundColor,wrapperBorder:B}),[I,B]),Ie=a.useCallback(o=>{o.api.sizeColumnsToFit()},[]),oe=Y||te||(m?.size??0)>0,j=a.useCallback(o=>!!o&&!!u?.has(D(o)),[u,D]),U=a.useCallback((o,b,N)=>J?t.jsx(at,{trigger:[g.DropdownTrigger.ContextMenu],items:o.data?_.current.getContextMenuItems?.(o.data)??[]:[],anchorToMouse:!0,matchReferenceWidth:!0,className:h.mergeClasses("size-full",N&&"cursor-not-allowed opacity-75"),disabled:N&&!q,children:t.jsx("span",{className:"block min-w-0 max-w-full flex-1",children:b})}):b,[J,q]),V=a.useCallback(o=>{if(!o.data)return null;const b=j(o.data);return U(o,t.jsx(Se,{text:o.value==null?"":String(o.value),className:"max-w-full dial-small-text text-primary",hideTooltip:b}),b)},[j,U]),Q=a.useCallback(o=>o===P.API||o===P.ROW_DATA_CHANGED,[]),Ne=a.useMemo(()=>g.debounceFn(o=>{const N=(o.selectedNodes??[]).map(se=>se.data),O=new Set(N.map(D));W.current=O,Z.current=o.source,!Q(o.source)&&_.current.onSelectionChange?.(O,N)},an),[Q,D]),ne=a.useMemo(()=>{if(k)return{...rn,colId:ft,headerName:"",headerClass:Qt,cellClass:Jt,headerComponent:k===g.GridSelectionMode.MULTIPLE?sn:void 0,headerComponentParams:{label:z},cellRenderer:o=>{if(!o.data)return null;const b=D(o.data);return t.jsx(nn,{params:o,mode:k,rowId:b,radioName:A,label:_.current.selectRowLabel?.(o.data)??"Select row",disabled:u?.has(b)})}}},[k,z,D,u,A]),ae=a.useCallback(o=>{if(!o.cellRenderer)return{...o,cellRenderer:V};const b=_.current.wrapCustomCellRenderers;if(!(typeof b=="function"?b(o):!!b))return o;const O=o.cellRenderer;return{...o,cellRenderer:ue=>{const Ct=j(ue.data),Fe=typeof O=="function"?O:void 0,pt=Fe?t.jsx(Fe,{...ue}):V(ue);return U(ue,pt,Ct)}}},[j,V,U]),ve=a.useMemo(()=>{const o=E?(e??[]).map(ae):e??[];return ne?[ne,...o]:o},[e,E,ae,ne]),{defaultColDef:le,rowSelection:G,...Ee}=n??{},ye=a.useMemo(()=>({minWidth:on,resizable:!0,sortable:!0,floatingFilter:!0,filter:"agTextColumnFilter",filterParams:{filterPlaceholder:y,buttons:["reset"]},comparator:g.baseColumnComparator,...g.omitUndefined(le)}),[y,le]),Te=o=>{o.api.sizeColumnsToFit(),X(o.api),n?.onGridReady?.(o),S?.(o.api)};a.useEffect(()=>{v&&s&&v.setGridOption("rowData",s)},[v,s]);const ce=a.useCallback(()=>t.jsx(it,{live:!0,title:R,description:T,icon:L??t.jsx($.IconZoomCancel,{size:100,stroke:.5,"aria-hidden":"true"})}),[R,T,L]),ie=typeof G=="object"?G:void 0,ke=a.useMemo(()=>k?{isRowSelectable:o=>!j(o.data),...ie,mode:k===g.GridSelectionMode.SINGLE?"singleRow":"multiRow",checkboxes:!1,headerCheckbox:!1}:G,[G,ie,j,k]);a.useEffect(()=>{v&&s&&W.current.size&&W.current.forEach(o=>{const b=v.getRowNode(o);b&&!b.isSelected()&&b.setSelected(!0,!1,P.API)})},[v,s]),a.useEffect(()=>{v&&m&&(v.deselectAll("all",P.API),m.forEach(o=>{const b=v.getRowNode(o);b&&!b.isSelected()&&b.setSelected(!0,!1,P.API)}))},[v,m]);const l=a.useCallback(o=>o.data?D(o.data):"",[D]);return a.useEffect(()=>{const o=Q(Z.current);if(v&&m?.size&&o){const b=Array.from(m)[0];if(b){const N=v.getRowNode(b);N&&v.ensureNodeVisible(N)}}},[v,Q,m]),t.jsx("div",{className:h.mergeClasses(ut,"size-full",k&&Xt,k&&oe&&en,M&&Yt,i),role:"region","aria-label":d,"aria-busy":w,children:t.jsx("div",{className:"h-full overflow-x-auto",children:t.jsx(g.AgGridReact,{rowModelType:"clientSide",headerHeight:_e,rowHeight:_e,cellSelection:!1,theme:K,autoSizeStrategy:{type:"fitGridWidth"},columnDefs:ve,defaultColDef:ye,onGridSizeChanged:Ie,onGridReady:Te,loading:w,suppressCellFocus:!0,suppressDragLeaveHidesColumns:!0,noRowsOverlayComponent:ce,rowData:s,rowSelection:ke,onSelectionChanged:Ne,getRowId:l,...Ee})})})},cn=({value:e,locale:s=dt,options:n=mt,emptyPlaceholder:r,className:i,hideTooltip:d=!1})=>{const c=g.convertToDate(e),u=a.useMemo(()=>c?new Intl.DateTimeFormat(s,n).format(c):r,[c,r,s,n]),m=c?c.toISOString():void 0;return t.jsx(Se,{text:m?t.jsx("time",{dateTime:m,children:u}):t.jsx("span",{children:u}),className:h.mergeClasses("dial-small-text text-primary",i),hideTooltip:d})};exports.Checkbox=He;exports.CheckboxBox=je;exports.CloseButton=rt;exports.DEFAULT_DATE_FORMAT_OPTIONS=mt;exports.DEFAULT_LOCALE=dt;exports.DangerIconButton=Vt;exports.DateCellRenderer=cn;exports.Dropdown=at;exports.EllipsisTooltip=Se;exports.GRID_ALIGN_RIGHT_CLASS=tn;exports.GRID_ROOT_CLASS=ut;exports.GRID_SELECTION_COLUMN_ID=ft;exports.GRID_THEME_PARAMS=me;exports.GhostIconButton=st;exports.Grid=ln;exports.IconButton=be;exports.InfoButton=Xe;exports.InteractiveTooltip=Ce;exports.InteractiveTooltipTrigger=fe;exports.Label=De;exports.MenuItem=pe;exports.MenuItemMark=H;exports.NeutralIconButton=Ft;exports.NoDataContent=it;exports.PrimaryIconButton=Ot;exports.ROW_HEIGHT=_e;exports.Radio=ct;exports.StaticIconButton=Gt;exports.SvgNoData=lt;exports.Tooltip=Ue;exports.TooltipContainer=Le;exports.TooltipContent=Re;exports.TooltipPlacement=xe;exports.TooltipTrigger=we;exports.getButtonClassNames=qe;exports.getDisabledButtonProps=$e;exports.overlayGap=tt;exports.overlayItemClassName=Qe;exports.overlayListClassName=Me;exports.overlaySubMenuListClassName=Je;exports.overlaySurfaceClassName=Be;