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

package/README.md

@@ -26,6 +26,7 @@ The AI DIAL UI Kit is an production-ready React component library designed to st
   - [Development Setup](#development-setup)
   - [Project Structure](#project-structure)
 - [🎨 Theming & Customization](#-theming--customization)
+  - [Public class names](#public-class-names)
 - [♿ Accessibility](#-accessibility)
   - [Naming icon-only controls](#naming-icon-only-controls)
   - [Target size (WCAG 2.5.5, Level AAA)](#target-size-wcag-255-level-aaa)
@@ -192,6 +193,150 @@ 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.
 
+### Public class names
+
+Some hosts need to restyle a part of a component the props do not reach — the
+padding of a menu's row list, the radius of a row, the caret badge of an icon
+trigger. The kit's own classes are Tailwind utilities and hashed module locals,
+so a host that reaches for them ends up on selectors that break on the next
+upgrade: `[class*='_selectedItem_']`, `> div:nth-child(2) > button`,
+`[role='none'][aria-label='dropdown']` — the last of which is an accessibility
+contract and, being a plain English string, is not one a localised host can rely
+on either.
+
+Every design-system 2.0 component therefore stamps a stable class on the element
+that draws it. They are exported as one record:
+
+```tsx
+import { DIAL_KIT_CLASS } from '@epam/ai-dial-ui-kit';
+
+DIAL_KIT_CLASS.menuItem; // 'dial-kit-menuitem'
+```
+
+```css
+.dial-kit-dropdown-list {
+  padding-block: 0;
+}
+
+.dial-kit-menuitem {
+  border-radius: 8px;
+}
+```
+
+Nothing in `dist/index.css` selects on them: they carry no declarations of their
+own and exist only as selectors, so a host's rule needs no `!important` it would
+not otherwise need. Renaming one, or moving it to a different element, is a
+breaking change and goes through the migration-guide process.
+
+#### Feedback and status
+
+| Key             | Class                     | Element                                                                                  |
+| --------------- | ------------------------- | ---------------------------------------------------------------------------------------- |
+| `spinner`       | `dial-kit-spinner`        | The `role="status"` root of a `Spinner`                                                  |
+| `progressBar`   | `dial-kit-progress-bar`   | The outermost element of a `ProgressBar` — its wrapper, or the track when it has neither label nor readout |
+| `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`                                                 |
+
+#### Text
+
+| Key             | Class                     | Element                                                             |
+| --------------- | ------------------------- | ------------------------------------------------------------------- |
+| `highlight`     | `dial-kit-highlight`      | The text element of a `Highlight`                                   |
+| `captionText`   | `dial-kit-caption-text`   | The caption line under a field                                      |
+| `errorText`     | `dial-kit-error-text`     | A caption in its error variant, additive to `captionText`           |
+| `label`         | `dial-kit-label`          | The `Label` root, wrapping its `label` element and its info button   |
+
+#### Containers
+
+| Key                  | Class                             | Element                                                              |
+| -------------------- | --------------------------------- | -------------------------------------------------------------------- |
+| `cardShell`          | `dial-kit-card-shell`             | The `article` element of a `CardShell`                               |
+| `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`                               |
+| `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
+
+| Key                 | Class                             | Element                                                                                          |
+| ------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `dropdown`          | `dial-kit-dropdown`               | The trigger wrapper of a `Dropdown`                                                              |
+| `dropdownList`      | `dial-kit-dropdown-list`          | The `role="none"` item list inside a dropdown overlay, and a submenu's own list. Both generations |
+| `menuItem`          | `dial-kit-menuitem`               | One overlay row: a dropdown item, a `Select` option, a submenu trigger or child                   |
+| `menuItemCheck`     | `dial-kit-menuitem-check`         | The trailing check of a chosen `MenuItemMark.Check` row                                          |
+| `dropdownIcon`      | `dial-kit-dropdown-icon`          | The primary icon of a `DialDropdownIcon` trigger                                                 |
+| `dropdownIconCaret` | `dial-kit-dropdown-icon-caret`    | Its caret badge. Absent when `showCaret` is `false`                                              |
+| `tooltip`           | `dial-kit-tooltip`                | The bubble of a `Tooltip`                                                                        |
+| `interactiveTooltip` | `dial-kit-interactive-tooltip`   | The panel of an `InteractiveTooltip`                                                             |
+| `ellipsisTooltip`   | `dial-kit-ellipsis-tooltip`       | The text element of an `EllipsisTooltip`, which is also its trigger                              |
+
+#### Fields
+
+| Key                    | Class                                 | Element                                                        |
+| ---------------------- | ------------------------------------- | -------------------------------------------------------------- |
+| `search`               | `dial-kit-search`                     | The `Search` field box, additive to `dial-kit-input`           |
+| `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`         |
+| `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                        |
+| `fileDropzone`         | `dial-kit-file-dropzone`              | The drop area of a `FileDropzone`                              |
+| `radioGroupPopupField` | `dial-kit-radio-group-popup-field`    | The root of a `RadioGroupPopupField`                           |
+
+#### Controls
+
+| Key                    | Class                                 | Element                                                    |
+| ---------------------- | ------------------------------------- | ---------------------------------------------------------- |
+| `switch`               | `dial-kit-switch`                     | The row of a `Switch`: the control and its label           |
+| `checkbox`             | `dial-kit-checkbox`                   | The row of a `Checkbox`                                    |
+| `checkboxBox`          | `dial-kit-checkbox-box`               | The decorative box a `CheckboxBox` draws                   |
+| `radio`                | `dial-kit-radio`                      | The row of a `Radio`                                       |
+| `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 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` |
+| `closeButton`          | `dial-kit-close-button`               | A `CloseButton`, additive to `dial-kit-base-icon-button`    |
+| `infoButton`           | `dial-kit-info-button`                | An `InfoButton`, additive to `dial-kit-base-icon-button`    |
+| `buttonDropdown`       | `dial-kit-button-dropdown`            | The wrapper of a `ButtonDropdown`                          |
+
+#### Components with no entry, and why
+
+Some 2.0 components are deliberately absent, because the element a host would
+target already carries a stable class:
+
+| Component                                     | Target it already |
+| --------------------------------------------- | ----------------- |
+| `Button` and its six variant wrappers         | `dial-kit-base-button` (plus a per-variant class such as `dial-kit-primary-solid-button`) |
+| `IconButton` and its five variant wrappers    | `dial-kit-base-icon-button` |
+| `FabButton`                                   | `dial-kit-fab-button` |
+| `Input`                                       | `dial-kit-input` |
+| `Textarea`                                    | `dial-kit-textarea` |
+| `Slider`                                      | `dial-kit-slider` |
+| `MarkdownEditor`                              | `dial-kit-markdown-editor` |
+| `Grid`                                        | `dial-kit-grid` (exported as `GRID_ROOT_CLASS`) |
+
+Four more contribute no element of their own, and are addressed through what
+they render: `ThemeScope` (a `display: contents` wrapper), `MultiSelectTags`
+(`Tag`s), and `TooltipContainer` / `TooltipTrigger`.
+
+Two neighbouring elements are reached through props instead, and keep being: a
+`Dropdown`'s floating panel takes `listClassName`, a `Popup`'s backdrop takes
+`overlayClassName`, and the `DialDropdownIcon` trigger button takes
+`buttonClassName`.
+
 ## ♿ Accessibility
 
 ### Naming icon-only controls
@@ -232,6 +377,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

@@ -7,6 +7,22 @@ Versions match the git tags on the `development` branch.
 
 ---
 
+## [0.15.0]
+
+### Added
+
+- **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.
+
+- **`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.
+
+---
+
 ## [0.14.0]
 
 ### Breaking Changes
@@ -41,6 +57,7 @@ Versions match the git tags on the `development` branch.
 
 ### Fixed
 
+- **`PasswordInput` (2.0) — a disabled field no longer draws a toggle it cannot act on** — the field masked its value correctly while disabled, but still rendered the reveal button beside it in a disabled state. The design draws a masked field with nothing after it (see [ai-dial-chat#8791](https://github.com/epam/ai-dial-chat/issues/8791), where a toolset's OAuth client secret sits in exactly that state once the user has logged in), and a control whose only two outcomes are both unreachable is space spent on nothing. The toggle is now absent while `disabled`, and masking resets with it: a field that is disabled and then enabled again comes back masked rather than silently restoring an earlier reveal, which previously left a revealed secret on screen with no pressed toggle to explain it. Nothing changes for an enabled field; a test that asserted on the disabled toggle should assert its absence instead.
 - **An optional editor peer broke the build of every consumer that did not install it** — this release moved `@monaco-editor/react`, `monaco-editor` and `@uiw/react-md-editor` to optional peers, so `npm install` stops bringing them in; but `JsonEditor` still reached `Editor` and the 2.0 markdown toolbar still reached its command set through **named** imports. A named import of a package that is not installed is a build error, not a runtime one: the root entry re-exports `LazyDialJsonEditor`/`LazyMarkdownEditor`, a bundler resolves a dynamic import target to chunk it, and Vite's stub for the absent optional peer exports nothing — so a host that installed nothing but this kit and React got `[MISSING_EXPORT] "Editor" is not exported by "__vite-optional-peer-dep:@monaco-editor/react:@epam/ai-dial-ui-kit"` and no bundle. Both modules now read their bindings off a namespace import, inside the render/getter that needs them, so nothing resolves by name at build time and a missing engine surfaces where it belongs: on the consumer that renders an editor without installing it. Types stay named — they are erased before any bundler sees them. Nothing changes for a host that installs the editor peers.
 - **`DialAnalyticsBarGroup` — compare-mode hover now highlights both bars of an entry as one block** — click already targeted the whole entry (label, delta, both bars), but hover used CSS `:hover` on each bar's own container, so only the bar under the pointer lit up (and a per-bar fill left a gap between the pair). The compare entry wrapper is now a Tailwind `group`; when `onBarClick` is set the shared bars container gets a default `group-hover` / `group-focus-visible` accent fill, and in compare mode `barClassName` applies to that container so consumers can use `group-hover:` for a continuous pair highlight. Single-bar mode is unchanged.
 - **`Tooltip` (2.0) and `DialTooltip` — no tooltip anywhere in an app embedded below 640px, mouse or not** — both bubbles asked `useIsMobileScreen()`, a `window.innerWidth < 640` test, and rendered `null` when it was true. Width is the wrong question: an app running inside an iframe reads the _iframe's_ width, so a chat in a 380px overlay panel lost every tooltip it had — the agent name on a conversation row included — while the desktop mouse hovering it worked exactly as before. The gate is now the `(hover: none)` media query, via the new internal `useHasHover`: a touch-only phone still gets nothing, since nothing there can reveal a hover-only bubble, and a narrow embed driven by a pointer gets its tooltips back. A hybrid device that gains or loses a hovering pointer re-evaluates without a reload, and an environment that cannot answer the question at all (SSR, or no `matchMedia`) counts as hover-capable, so a tooltip is never dropped on a guess. `(pointer: coarse)` is deliberately not part of the query — a touchscreen laptop on a mouse hovers fine. Tooltips remain unusable by touch, so a control still must not depend on one for its accessible name.

package/dist/DateCellRenderer-Ba9tlNbk.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),g=require("./DateCellRenderer-S5QJV-Wp.cjs"),$=require("@tabler/icons-react"),o=require("react"),x=require("./merge-classes-Dipy1Ih1.cjs"),p=require("@floating-ui/react"),ge=require("./icon-DhjrDQ8I.cjs"),oe=require("./icon-CrGVkVpG.cjs"),C=require("./IconButton-DWqoaBWf.cjs"),mt=require("classnames");function ft(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=ft(o);var he=(e=>(e.Top="top",e.Right="right",e.Bottom="bottom",e.Left="left",e))(he||{});const pt=7,Ct=2,gt=500,ht="fill-control-inverted",xt="z-[55] 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",Ge=o.createContext(null),ze=()=>{const e=o.useContext(Ge);if(e==null)throw new Error("Tooltip components must be wrapped in <TooltipContainer />");return e},bt=({initialOpen:e=!1,placement:s=he.Bottom,isTriggerClickable:n=!1,open:r,onOpenChange:i}={})=>{const[u,a]=o.useState(e),d=o.useRef(null),m=r??u,h=i??a,S=p.useFloating({placement:s,open:m,onOpenChange:h,whileElementsMounted:p.autoUpdate,middleware:[p.offset(pt+Ct),p.flip({fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:d})]}),f=p.useHover(S.context,{move:!1,enabled:r==null,mouseOnly:n,delay:{open:gt,close:0}}),I=p.useFocus(S.context,{enabled:r==null}),E=p.useDismiss(S.context),k=p.useRole(S.context,{role:"tooltip"}),R=p.useInteractions([f,I,E,k]);return o.useEffect(()=>{if(!m)return;const y=S.refs.reference.current;if(!(y instanceof Element))return;const T=new IntersectionObserver(([H])=>{H.isIntersecting||h(!1)},{root:null,threshold:0});return T.observe(y),()=>T.disconnect()},[m,S.refs.reference,h]),o.useMemo(()=>({open:m,setOpen:h,arrowRef:d,...R,...S}),[m,h,R,S])},ke=({children:e,...s})=>{const n=bt(s);return t.jsx(Ge.Provider,{value:n,children:e})},Le=({style:e,...s})=>{const n=ze(),r=C.useHasHover(),i=g.useThemeScope(),u=o.useRef(null),a=p.useMergeRefs([n.refs.setFloating,u]);return!n.open||!r?null:t.jsx(p.FloatingPortal,{id:"tooltip-portal",children:t.jsxs("div",{ref:a,"data-placement":n.placement,style:{...n.floatingStyles,...e},...n.getFloatingProps(s),className:mt(xt,i,n.getFloatingProps(s).className,g.DIAL_KIT_CLASS.tooltip),children:[s.children,t.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,className:ht})]})})},Re=({children:e,asChild:s=!1,...n})=>{const r=ze(),i=s&&o.isValidElement(e),u=i?e.props?.ref:null,a=p.useMergeRefs([r.refs.setReference,...u?[u]:[]]);if(i){const d=e.props;return o.cloneElement(e,r.getReferenceProps({...d,...n,className:x.mergeClasses(d.className,n.className)||void 0,ref:a}))}return t.jsx("span",{ref:a,...r.getReferenceProps(n),className:n.className??"text-start",children:e})},Ze=({hideTooltip:e=!1,tooltip:s,children:n,asChild:r=!1,triggerClassName:i,contentClassName:u,...a})=>{const d=!e&&!!s;return t.jsxs(ke,{...a,children:[t.jsx(Re,{asChild:r,className:i,children:n}),d&&t.jsx(Le,{className:u,children:s})]})},Be={[C.ButtonVariant.Primary]:{[C.ButtonAppearance.Solid]:"dial-kit-primary-solid-button",[C.ButtonAppearance.Ghost]:"dial-kit-primary-ghost-button",[C.ButtonAppearance.Link]:"dial-kit-primary-link-button"},[C.ButtonVariant.Neutral]:{[C.ButtonAppearance.Solid]:"dial-kit-neutral-solid-button",[C.ButtonAppearance.Outlined]:"dial-kit-neutral-outlined-button"},[C.ButtonVariant.Danger]:{[C.ButtonAppearance.Solid]:"dial-kit-danger-solid-button",[C.ButtonAppearance.Ghost]:"dial-kit-danger-ghost-button",[C.ButtonAppearance.Outlined]:"dial-kit-danger-outlined-button"},[C.ButtonVariant.Static]:{[C.ButtonAppearance.Solid]:"dial-kit-static-solid-button"},[C.ButtonVariant.Success]:{},[C.ButtonVariant.Secondary]:{},[C.ButtonVariant.Tertiary]:{}},We=(e=C.ButtonVariant.Primary,s=C.ButtonAppearance.Solid)=>{const n=Be[e]?.[s];return n||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${s}. Using default primary solid button styles.`),Be[C.ButtonVariant.Primary][C.ButtonAppearance.Solid])},St={[C.ElementSize.Small]:"size-[24px]",[C.ElementSize.Standard]:"size-[40px] dial-kit-enhanced-target",[C.ElementSize.Large]:"size-[48px] dial-kit-enhanced-target"},xe=({variant:e,appearance:s=C.ButtonAppearance.Solid,size:n=C.ElementSize.Standard,className:r,icon:i,tooltipProps:u,type:a="button",...d})=>{const m=x.mergeClasses("dial-kit-base-icon-button dial-kit-base-button",e&&We(e,s),St[n],r),h=t.jsx("button",{...d,type:a,className:m,"aria-label":C.resolveAccessibleName(d["aria-label"],u?.tooltip),children:i});return u?t.jsx(Ze,{asChild:!0,...u,children:h}):h},Ke=({caption:e,onClick:s,"aria-label":n})=>{if(!e)return null;const r=x.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(xe,{"aria-label":n,className:r,icon:t.jsx($.IconInfoCircle,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),onClick:s,size:C.ElementSize.Small,tooltipProps:{tooltip:e}})},we=({label:e,required:s,className:n,containerClassName:r,caption:i,size:u=C.ElementSize.Small,...a})=>e?t.jsxs("span",{className:x.mergeClasses("flex items-center gap-0.5",r,g.DIAL_KIT_CLASS.label),children:[t.jsxs("label",{...a,className:x.mergeClasses("text-secondary flex items-center gap-0.5",u===C.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(Ke,{caption:i})]}):null;var j=(e=>(e.None="none",e.Check="check",e.Tint="tint",e.Checkbox="checkbox",e.Highlight="highlight",e))(j||{});const De=(e,s)=>({appearance:r,...i})=>t.jsx(xe,{...i,variant:e,appearance:r||s}),Ue=(e,s)=>({variant:r,...i})=>t.jsx(xe,{...i,variant:r||s,appearance:e}),It=De(C.ButtonVariant.Primary,C.ButtonAppearance.Solid),Nt=De(C.ButtonVariant.Neutral,C.ButtonAppearance.Solid),vt=De(C.ButtonVariant.Danger,C.ButtonAppearance.Ghost),$e=Ue(C.ButtonAppearance.Ghost,C.ButtonVariant.Primary),Et=Ue(C.ButtonAppearance.Solid,C.ButtonVariant.Static),qe=({ariaLabel:e="Close",className:s,size:n=C.ElementSize.Small,onClose:r,...i})=>t.jsx($e,{...i,size:n,"aria-label":e,className:x.mergeClasses(s,g.DIAL_KIT_CLASS.closeButton),onClick:r,icon:t.jsx($.IconX,{size:n===C.ElementSize.Small?oe.DIAL_ICON_SIZE.SM:oe.DIAL_ICON_SIZE.MD,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"})}),yt=e=>{const s=o.useRef(null),[n,r]=o.useState(!1),[i,u]=o.useState(""),a=o.useRef(!1),d=o.useCallback(()=>{const h=s.current;h&&(a.current&&u(h.textContent??""),r(h.scrollWidth>h.clientWidth))},[]),m=o.useCallback(()=>g.scheduleMeasure(d),[d]);return o.useEffect(()=>{const h=s.current;if(h)return g.observeElementSize(h,d)},[d]),o.useEffect(()=>{a.current=typeof e!="string",m()},[e,m]),{ref:s,isTruncated:n,textContent:i,remeasure:m}},be=({text:e,className:s,contentClassName:n,hideTooltip:r=!1,id:i,customTooltipContent:u,...a})=>{const{ref:d,isTruncated:m,textContent:h,remeasure:S}=yt(e),f=typeof e=="string"?e:h,I=o.useMemo(()=>r||!m?null:u??f,[u,f,r,m]);return t.jsxs(ke,{...a,children:[t.jsx(Re,{asChild:!0,onMouseEnter:S,onFocusCapture:S,children:t.jsx("span",{id:i,ref:d,"aria-label":m&&f?f:void 0,className:x.mergeClasses("block min-w-0 max-w-full flex-1 truncate text-start",s,g.DIAL_KIT_CLASS.ellipsisTooltip),children:e})}),!!I&&t.jsx(Le,{className:n,children:I})]})},Tt=8,_t=400,At="z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md",fe=({content:e,placement:s=he.Right,children:n,asChild:r=!1,hideTooltip:i=!1,initialOpen:u=!1,open:a,onOpenChange:d,triggerClassName:m,contentClassName:h})=>{const S=g.useIsMobileScreen(),f=g.useThemeScope(),[I,E]=o.useState(u),k=a??I,R=D=>{d?.(D),a==null&&E(D)},y=p.useFloatingNodeId(),{refs:T,floatingStyles:H,context:O}=p.useFloating({nodeId:y,placement:s,open:k,onOpenChange:R,whileElementsMounted:p.autoUpdate,middleware:[p.offset(Tt),p.flip({padding:5}),p.shift({padding:5})]}),q=p.useHover(O,{enabled:a==null,handleClose:p.safePolygon(),delay:{open:_t,close:0}}),A=p.useFocus(O,{enabled:a==null}),G=p.useDismiss(O),{getReferenceProps:z,getFloatingProps:v}=p.useInteractions([q,A,G]),ee=o.useRef(null),te=p.useMergeRefs(o.useMemo(()=>[T.setFloating,ee],[T.setFloating])),X=r&&o.isValidElement(n),M=X?n.props?.ref:null,L=p.useMergeRefs(o.useMemo(()=>[T.setReference,...M?[M]:[]],[T.setReference,M])),V=!i&&!S&&!!e,B=X?o.cloneElement(n,z({...n.props,ref:L,className:x.mergeClasses(n.props.className,m)||void 0})):t.jsx("span",{ref:L,...z(),className:m??"text-start",children:n});return t.jsxs(t.Fragment,{children:[B,k&&V&&t.jsx(p.FloatingPortal,{id:"interactive-tooltip-portal",children:t.jsx(p.FloatingFocusManager,{context:O,modal:!1,initialFocus:-1,returnFocus:!1,order:["reference","content"],children:t.jsx("div",{ref:te,"data-placement":O.placement,style:H,...v(),className:x.mergeClasses(At,f,h,g.DIAL_KIT_CLASS.interactiveTooltip),children:e})})})]})},Xe="rounded-xl bg-layer-raised p-1 shadow-md",Ye=x.mergeClasses(Xe,"w-max"),Je=x.mergeClasses("flex w-full 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"),Qe="bg-control-accent-alpha",kt=x.mergeClasses(Qe,"text-accent"),Lt=x.mergeClasses("cursor-not-allowed text-control-disable-primary","bg-transparent hover:bg-transparent"),et=4,Rt=x.mergeClasses("flex items-center gap-2 align-middle","h-auto px-0 bg-transparent border-0"),wt=x.mergeClasses("z-[53] focus-visible:outline-none",Xe),Dt=Ye,jt="my-1 border-t border-tertiary",Q=et,Ht=t.jsx($.IconChevronRight,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),Fe={size:14,stroke:3,"aria-hidden":!0},je=({isSelected:e=!1,isIndeterminate:s=!1,invalid:n=!1,disabled:r=!1,htmlFor:i,className:u})=>{const a=s||e,d=!!i,m=x.mergeClasses("grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",d&&"dial-kit-minimum-target",d&&"peer-focus-visible:outline peer-focus-visible:outline-focus",r?"border-transparent bg-control-disable-primary text-control-disable-primary":x.mergeClasses(n&&a&&"border-transparent bg-control-error text-control-permanent",n&&!a&&"border-error bg-control-neutral",!n&&a&&"border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",!n&&!a&&"border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"),r?"cursor-not-allowed":d&&"cursor-pointer",u,g.DIAL_KIT_CLASS.checkboxBox),h=s?t.jsx($.IconMinus,{...Fe}):e&&t.jsx($.IconCheck,{...Fe});return d?t.jsx("label",{htmlFor:i,className:m,children:h}):t.jsx("span",{"aria-hidden":"true",className:m,children:h})},Ot=t.jsx($.IconCheck,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,className:`shrink-0 ${g.DIAL_KIT_CLASS.menuItemCheck}`,"aria-hidden":!0}),pe=({label:e,icon:s,description:n,mark:r=j.None,selected:i=!1,danger:u=!1,trailing:a,rightControl:d,ellipsisLabel:m=!1,labelClassName:h,children:S,className:f,disabled:I=!1,type:E="button",...k})=>{const R=i&&r===j.Highlight,y=i&&(r===j.Checkbox||r===j.Tint),T=x.mergeClasses(u&&"text-error",I&&"text-control-disable-primary"),H=x.mergeClasses(Je,"aria-expanded:bg-control-accent-alpha-hover",R&&kt,y&&Qe,I&&Lt,u&&"text-error",f,g.DIAL_KIT_CLASS.menuItem),O=t.jsxs("button",{type:E,disabled:I,"data-menu-item-row":d?"":void 0,className:d?"flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none":H,...k,children:[S??t.jsxs(t.Fragment,{children:[r===j.Checkbox&&t.jsx(je,{isSelected:i,disabled:I}),s&&t.jsx(g.DialIcon,{icon:s,className:T}),m?t.jsx(be,{text:e,className:x.mergeClasses(T,h)}):t.jsx("span",{className:x.mergeClasses("min-w-0 flex-1 truncate text-start",T,h),children:e}),n&&t.jsx("span",{className:x.mergeClasses("shrink-0 text-secondary dial-small-text",I&&"text-control-disable-primary"),children:n}),i&&r===j.Check&&Ot]}),a&&t.jsx("span",{className:x.mergeClasses("ml-auto shrink-0",T),children:a})]});return d?t.jsxs("div",{role:"none",className:x.mergeClasses(H,"has-[[data-menu-item-row]:focus-visible]:outline","has-[[data-menu-item-row]:focus-visible]:outline-focus"),children:[O,d]}):O},Ce=e=>e.mark??(e.selectable?j.Checkbox:j.None),tt=e=>e.selectable?"menuitemcheckbox":Ce(e)===j.Check?"menuitemradio":"menuitem",Mt=({item:e,onRootClose:s})=>{const{isOpen:n,nodeId:r,refs:i,floatingStyles:u,context:a,getReferenceProps:d,getFloatingProps:m}=g.useSubMenuFloating(Q,"menu",!!e.disabled),h=o.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:Ht,className:e.className,...d(),children:e.renderItem?.(e)});return t.jsxs(p.FloatingNode,{id:r,children:[e.interactiveTooltip?t.jsx(fe,{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:u,context:a,getFloatingProps:m,role:"menu",surfaceClassName:Dt,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=tt(f),E=t.jsx(pe,{role:I,"aria-checked":I==="menuitem"?void 0:!!f.checked,"aria-current":Ce(f)===j.Highlight&&f.checked?!0:void 0,"aria-disabled":!!f.disabled,disabled:f.disabled,mark:Ce(f),selected:!!f.checked,danger:f.danger,icon:f.icon,label:f.label,className:f.className,rightControl:f.rightControl,onClick:h(f),children:f.renderItem?.(f)});return t.jsx(o.Fragment,{children:f.interactiveTooltip?t.jsx(fe,{asChild:!0,placement:f.interactiveTooltip.placement,content:f.interactiveTooltip.content,contentClassName:f.interactiveTooltip.contentClassName,children:E}):E},f.key)}),e.menuFooter&&(typeof e.menuFooter=="function"?e.menuFooter():e.menuFooter)]})})]})},Bt='[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]',Ft=e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-disabled")!=="true",Vt=["ArrowDown","ArrowUp","Home","End"],Pt=(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},Gt=e=>"clientWidth"in e?e.clientWidth:e.getBoundingClientRect?.()?.width??0,nt=({children:e,items:s,onItemClick:n,menuHeader:r,menuFooter:i,renderOverlay:u,trigger:a=[g.DropdownTrigger.Click],placement:d,disabled:m=!1,open:h,defaultOpen:S=!1,onOpenChange:f,closable:I=!1,onClose:E,className:k,overlayContentClassName:R,separatorClassName:y,listClassName:T,outsidePressIgnoreRef:H,outsideClosable:O=!0,allowedPlacements:q,anchorToMouse:A=!1,matchReferenceWidth:G=!0,maxDropdownHeight:z,initialFocus:v})=>{const ee=g.useThemeScope(),[te,X]=o.useState(S),M=h!==void 0,L=M?!!h:te,V=o.useRef(null),[B,D]=o.useState(!0),_=o.useCallback((l,N,c)=>{l&&D(c!=="hover"&&c!=="safe-polygon"),M||X(l),f?.(l)},[M,f]),ne=o.useId(),Se=d===void 0,ae=p.useFloatingNodeId(),{refs:Z,floatingStyles:W,context:F}=p.useFloating({nodeId:ae,placement:d,open:L,onOpenChange:_,whileElementsMounted:p.autoUpdate,middleware:[p.offset({mainAxis:Q,crossAxis:0}),Se?p.autoPlacement({alignment:"start",crossAxis:!0,padding:Q,allowedPlacements:q}):p.flip({padding:Q}),p.shift({padding:Q}),p.size({padding:Q,apply({availableWidth:l,availableHeight:N,elements:c}){const b=c.floating,w=Gt(c.reference);b.style.setProperty("--fui-available-height",`${Math.floor(N)}px`),b.style.setProperty("--reference-width",G?`${Math.round(w)}px`:"0px"),G?b.style.minWidth=`${Math.round(w)}px`:b.style.removeProperty("min-width"),b.style.maxWidth=`${Math.floor(l)}px`;const K=Math.floor(N);b.style.maxHeight=`${z?Math.min(K,z):K}px`}})]}),se=p.useClick(F,{enabled:a.includes(g.DropdownTrigger.Click)&&!m}),Y=p.useHover(F,{enabled:a.includes(g.DropdownTrigger.Hover)&&!m,move:!1,restMs:40,handleClose:p.safePolygon(),delay:{open:80,close:80}}),Ie=p.useDismiss(F,{bubbles:!0,referencePress:!1,outsidePress:l=>{if(!O)return!1;const N=l.target;return!(H?.current&&N instanceof Node&&H.current.contains(N))}}),re=p.useRole(F,{role:"menu"}),{getReferenceProps:le,getFloatingProps:Ne}=p.useInteractions([se,Y,Ie,re]),U=o.useCallback((l,N)=>{Z.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:l,y:N,top:N,left:l,right:l,bottom:N})})},[Z]),J=o.useCallback(l=>{!a.includes(g.DropdownTrigger.ContextMenu)||m||(l.preventDefault(),A&&(U(l.clientX,l.clientY),V.current=document.elementFromPoint(l.clientX,l.clientY)),_(!0))},[A,m,_,U,a]),ve=o.useCallback(l=>{!A||m||(a.includes(g.DropdownTrigger.ContextMenu)&&L&&_(!1),U(l.clientX,l.clientY),V.current=document.elementFromPoint(l.clientX,l.clientY))},[A,m,U,L,a,_]);o.useEffect(()=>{m&&L&&_(!1)},[m,L,_]);const Ee=o.useCallback(l=>{if(l.defaultPrevented||!Vt.includes(l.key))return;const N=Array.from(l.currentTarget.querySelectorAll(Bt)).filter(Ft);if(N.length===0)return;l.preventDefault();const c=l.currentTarget.ownerDocument.activeElement,b=N.findIndex(w=>w===c);N[Pt(l.key,b,N.length)]?.focus()},[]),ce=o.useCallback(l=>N=>{l.disabled||(l.onClick?.({key:l.key,domEvent:N}),n?.({key:l.key,domEvent:N}),l.selectable||_(!1))},[n,_]),ye=o.useMemo(()=>u?u():s?t.jsxs(t.Fragment,{children:[r&&t.jsx(t.Fragment,{children:typeof r=="function"?r():r}),t.jsx("div",{role:"none",className:x.mergeClasses("py-1",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:x.mergeClasses(jt,y)},l.key);if(l.type===g.DropdownItemType.PlainText)return t.jsx("div",{className:x.mergeClasses("px-3 py-2 text-secondary dial-caption-text",l.className),children:l.label},l.key);if(l.children?.length)return t.jsx(Mt,{item:l,onRootClose:()=>_(!1)},l.key);const N=Ce(l),c=tt(l),b=t.jsx(pe,{role:c,"aria-checked":c==="menuitem"?void 0:!!l.checked,"aria-current":N===j.Highlight&&l.checked?!0:void 0,"aria-disabled":!!l.disabled,disabled:l.disabled,mark:N,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(o.Fragment,{children:l.interactiveTooltip?t.jsx(fe,{asChild:!0,placement:l.interactiveTooltip.placement,content:l.interactiveTooltip.content,contentClassName:l.interactiveTooltip.contentClassName,children:b}):b},l.key)})}),i&&t.jsx(t.Fragment,{children:typeof i=="function"?i():i})]}):null,[ce,s,i,r,u,_,R,y]),ie=le({onContextMenu:J,onMouseDown:ve});return o.useEffect(()=>{if(!L)return;const l=Z.reference.current;let N=null;if(l instanceof Element?N=l:V.current instanceof Element&&(N=V.current),!N)return;const c=new IntersectionObserver(([b])=>{b.isIntersecting||_(!1)},{root:null,threshold:0});return c.observe(N),()=>c.disconnect()},[L,Z.reference,_]),t.jsx(p.FloatingTree,{children:t.jsxs(p.FloatingNode,{id:ae,children:[t.jsx("span",{ref:Z.setReference,className:x.mergeClasses(Rt,m&&"!cursor-not-allowed opacity-75",k,g.DIAL_KIT_CLASS.dropdown),"aria-haspopup":"menu","aria-expanded":L,"aria-controls":ne,...ie,children:e}),L&&t.jsx(p.FloatingPortal,{children:t.jsx(p.FloatingFocusManager,{context:F,modal:!1,initialFocus:v!==void 0?v:B?0:-1,returnFocus:!0,children:t.jsxs("div",{id:ne,ref:Z.setFloating,style:W,className:x.mergeClasses(wt,!G&&"w-max","overflow-auto",ee,T),...Ne({onKeyDown:Ee}),children:[I&&t.jsx("div",{className:"flex items-center justify-between px-2 pt-2",children:t.jsx(qe,{ariaLabel:"Close dropdown",onClose:l=>{E?.(l),_(!1)}})}),ye]})})})]})})},He=({id:e,labelProps:s,isSelected:n=!1,isIndeterminate:r=!1,invalid:i=!1,disabled:u,onChange:a,caption:d,className:m,boxClassName:h,...S})=>{const f=o.useId(),I=e??f,E=d?`${I}-caption`:void 0,k=o.useCallback(y=>{a?.(y.target.checked)},[a]),R=o.useCallback(y=>{y&&(y.indeterminate=r)},[r]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:x.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:u,onChange:k,"aria-checked":r?"mixed":n,"aria-invalid":i||void 0,"aria-label":C.resolveAccessibleName(typeof s?.label!="string"?S["aria-label"]:void 0),"aria-describedby":E,className:"peer sr-only"}),t.jsx(je,{htmlFor:I,isSelected:n,isIndeterminate:r,invalid:i,disabled:u,className:h}),s&&t.jsx(we,{size:C.ElementSize.Standard,...s,htmlFor:I,className:x.mergeClasses("py-[1px]",u?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",s.className)})]}),d&&t.jsx("span",{id:E,className:"dial-tiny-text text-secondary ml-[28px]",children:d})]})},st=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"})),rt=({id:e,name:s,value:n,labelProps:r,isSelected:i=!1,disabled:u,onChange:a,caption:d,className:m,...h})=>{const S=o.useId(),f=e??S,I=d?`${f}-caption`:void 0,E=o.useCallback(k=>{k.target.checked&&a?.(n)},[a,n]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:x.mergeClasses("flex items-center gap-2 ",m,g.DIAL_KIT_CLASS.radio),children:[t.jsx("input",{...h,type:"radio",id:f,name:s,value:n,checked:i,disabled:u,onChange:E,"aria-label":C.resolveAccessibleName(typeof r?.label!="string"?h["aria-label"]:void 0),"aria-describedby":I,className:"peer sr-only"}),t.jsx("label",{htmlFor:f,className:x.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",u?"cursor-not-allowed border-default bg-control-disable-primary":x.mergeClasses("cursor-pointer",i?"border border-accent bg-control-neutral":"border-default bg-control-neutral")),children:i&&t.jsx("span",{className:x.mergeClasses("size-3 rounded-full",u?"bg-control-disable-secondary":"bg-control-accent")})}),r&&t.jsx(we,{size:C.ElementSize.Standard,...r,htmlFor:f,className:x.mergeClasses("py-[1px]",u?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",r.className)})]}),d&&t.jsx("span",{id:I,className:"dial-tiny-text text-secondary ml-[26px]",children:d})]})},Ve=32,ot=({title:e,description:s,icon:n,live:r=!1,className:i,titleClassName:u,descriptionClassName:a})=>t.jsxs("div",{role:r?"status":void 0,className:x.mergeClasses("flex size-full flex-col items-center justify-center gap-2 text-tertiary",i,g.DIAL_KIT_CLASS.noDataContent),children:[n??t.jsx(st,{width:Ve,height:Ve,"aria-hidden":"true"}),t.jsx("span",{className:x.mergeClasses("dial-tiny-text text-secondary",u),children:e}),s&&t.jsx("span",{className:x.mergeClasses("dial-tiny-text text-secondary",a),children:s})]}),at="dial-kit-grid",zt="dial-kit-grid-with-selection",Zt="dial-kit-grid-without-header-borders",Wt="dial-kit-grid-row-select",Kt="dial-kit-grid-header-select",Ut="dial-kit-grid-selection-visible",$t="dial-kit-grid-align-right",Ae=40,Te="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, #2764D90F)",rowHoverColor:"var(--bg-control-accent-alpha-hover, #2764D924)",borderColor:"var(--stroke-tertiary, #E0E6F0)",rowBorder:Te,headerRowBorder:Te,headerColumnBorder:Te,chromeBackgroundColor:"var(--bg-layer-base, #F5F7FA)",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,wrapperBorderRadius:8};var P=(e=>(e.API="api",e.ROW_DATA_CHANGED="rowDataChanged",e.CHECKBOX_SELECTED="checkboxSelected",e))(P||{});const qt=({params:e,mode:s,label:n,radioName:r,rowId:i,disabled:u})=>{const a=e.node,[d,m]=o.useState(()=>!!a.isSelected());o.useEffect(()=>{const S=()=>m(!!a.isSelected());return S(),a.addEventListener("rowSelected",S),()=>a.removeEventListener("rowSelected",S)},[a]);const h=S=>{u||a.setSelected(S,s===g.GridSelectionMode.SINGLE,P.CHECKBOX_SELECTED)};return s===g.GridSelectionMode.SINGLE?t.jsx(rt,{name:r,value:i,isSelected:d,disabled:u,"aria-label":n,onChange:()=>h(!0)}):t.jsx(He,{isSelected:d,disabled:u,"aria-label":n,onChange:h})},Pe=e=>{let s=0,n=0;return e.forEachNodeAfterFilter(r=>{r.selectable!==!1&&(n++,r.isSelected()&&s++)}),{selected:s,selectable:n}},Xt=({api:e,label:s})=>{const[{selected:n,selectable:r},i]=o.useState(()=>Pe(e));o.useEffect(()=>{const a=()=>i(Pe(e));return a(),e.addEventListener("selectionChanged",a),e.addEventListener("modelUpdated",a),()=>{e.isDestroyed()||(e.removeEventListener("selectionChanged",a),e.removeEventListener("modelUpdated",a))}},[e]);const u=o.useCallback(a=>{if(a){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:u})},lt="en-US",ct={year:"numeric",month:"numeric",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"},_e=40,Yt={minWidth:_e,width:_e,maxWidth:_e,resizable:!1,sortable:!1,filter:!1,floatingFilter:!1,suppressMovable:!0,suppressHeaderMenuButton:!0,suppressAutoSize:!0,suppressSizeToFit:!0},it="dial-kit-grid-selection",Jt=150,Qt=100,en=({columnDefs:e,rowData:s,additionalGridOptions:n,getContextMenuItems:r,className:i,ariaLabel:u="Data grid",wrapCustomCellRenderers:a=!0,disabledRowIds:d,selectedRowIds:m,onSelectionChange:h,onGridApiChange:S,getRowId:f,alternateOddRowColors:I=!1,filterPlaceholder:E="Enter value",emptyStateIcon:k,emptyStateTitle:R="No results found",emptyStateDescription:y="Sorry, we couldn't find any results for your search.",loading:T=!1,wrapperBorder:H=!0,withoutHeaderBorders:O=!1,allowDisabledContextMenu:q=!1,selectionMode:A,selectRowLabel:G,selectAllLabel:z="Select all rows"})=>{g.registerAgGridModulesOnce();const[v,ee]=o.useState(),te=g.useIsMobileScreen(),X=g.useIsTabletScreen(),M=o.useRef(new Set),L=o.useRef(void 0),V=`dial-kit-grid-selection-${o.useId()}`,B=o.useRef({getRowId:f,getContextMenuItems:r,onSelectionChange:h,selectRowLabel:G,wrapCustomCellRenderers:a});B.current={getRowId:f,getContextMenuItems:r,onSelectionChange:h,selectRowLabel:G,wrapCustomCellRenderers:a};const D=o.useCallback(c=>{const b=B.current.getRowId;return b?b(c):String(c.id??JSON.stringify(c))},[]),_=!!r,ne=!!a,Se=o.useMemo(()=>g.themeBalham.withPart(g.colorSchemeLight).withParams({...me,oddRowBackgroundColor:I?me.oddRowBackgroundColor:me.backgroundColor,wrapperBorder:H}),[I,H]),ae=o.useCallback(c=>{c.api.sizeColumnsToFit()},[]),Z=te||X||(m?.size??0)>0,W=o.useCallback(c=>!!c&&!!d?.has(D(c)),[d,D]),F=o.useCallback((c,b,w)=>_?t.jsx(nt,{trigger:[g.DropdownTrigger.ContextMenu],items:c.data?B.current.getContextMenuItems?.(c.data)??[]:[],anchorToMouse:!0,matchReferenceWidth:!0,className:x.mergeClasses("size-full",w&&"cursor-not-allowed opacity-75"),disabled:w&&!q,children:t.jsx("span",{className:"block min-w-0 max-w-full flex-1",children:b})}):b,[_,q]),se=o.useCallback(c=>{if(!c.data)return null;const b=W(c.data);return F(c,t.jsx(be,{text:c.value==null?"":String(c.value),className:"max-w-full dial-small-text text-primary",hideTooltip:b}),b)},[W,F]),Y=o.useCallback(c=>c===P.API||c===P.ROW_DATA_CHANGED,[]),Ie=o.useMemo(()=>g.debounceFn(c=>{const w=(c.selectedNodes??[]).map(Oe=>Oe.data),K=new Set(w.map(D));M.current=K,L.current=c.source,!Y(c.source)&&B.current.onSelectionChange?.(K,w)},Qt),[Y,D]),re=o.useMemo(()=>{if(A)return{...Yt,colId:it,headerName:"",headerClass:Kt,cellClass:Wt,headerComponent:A===g.GridSelectionMode.MULTIPLE?Xt:void 0,headerComponentParams:{label:z},cellRenderer:c=>{if(!c.data)return null;const b=D(c.data);return t.jsx(qt,{params:c,mode:A,rowId:b,radioName:V,label:B.current.selectRowLabel?.(c.data)??"Select row",disabled:d?.has(b)})}}},[A,z,D,d,V]),le=o.useCallback(c=>{if(!c.cellRenderer)return{...c,cellRenderer:se};const b=B.current.wrapCustomCellRenderers;if(!(typeof b=="function"?b(c):!!b))return c;const K=c.cellRenderer;return{...c,cellRenderer:ue=>{const ut=W(ue.data),Me=typeof K=="function"?K:void 0,dt=Me?t.jsx(Me,{...ue}):se(ue);return F(ue,dt,ut)}}},[W,se,F]),Ne=o.useMemo(()=>{const c=ne?(e??[]).map(le):e??[];return re?[re,...c]:c},[e,ne,le,re]),{defaultColDef:U,rowSelection:J,...ve}=n??{},Ee=o.useMemo(()=>({minWidth:Jt,resizable:!0,sortable:!0,floatingFilter:!0,filter:"agTextColumnFilter",filterParams:{filterPlaceholder:E,buttons:["reset"]},comparator:g.baseColumnComparator,...g.omitUndefined(U)}),[E,U]),ce=c=>{c.api.sizeColumnsToFit(),ee(c.api),n?.onGridReady?.(c),S?.(c.api)};o.useEffect(()=>{v&&s&&v.setGridOption("rowData",s)},[v,s]);const ye=o.useCallback(()=>t.jsx(ot,{live:!0,title:R,description:y,icon:k??t.jsx($.IconZoomCancel,{size:100,stroke:.5,"aria-hidden":"true"})}),[R,y,k]),ie=typeof J=="object"?J:void 0,l=o.useMemo(()=>A?{isRowSelectable:c=>!W(c.data),...ie,mode:A===g.GridSelectionMode.SINGLE?"singleRow":"multiRow",checkboxes:!1,headerCheckbox:!1}:J,[J,ie,W,A]);o.useEffect(()=>{v&&s&&M.current.size&&M.current.forEach(c=>{const b=v.getRowNode(c);b&&!b.isSelected()&&b.setSelected(!0,!1,P.API)})},[v,s]),o.useEffect(()=>{v&&m&&(v.deselectAll("all",P.API),m.forEach(c=>{const b=v.getRowNode(c);b&&!b.isSelected()&&b.setSelected(!0,!1,P.API)}))},[v,m]);const N=o.useCallback(c=>c.data?D(c.data):"",[D]);return o.useEffect(()=>{const c=Y(L.current);if(v&&m?.size&&c){const b=Array.from(m)[0];if(b){const w=v.getRowNode(b);w&&v.ensureNodeVisible(w)}}},[v,Y,m]),t.jsx("div",{className:x.mergeClasses(at,"size-full",A&&zt,A&&Z&&Ut,O&&Zt,i),role:"region","aria-label":u,"aria-busy":T,children:t.jsx("div",{className:"h-full overflow-x-auto",children:t.jsx(g.AgGridReact,{rowModelType:"clientSide",headerHeight:Ae,rowHeight:Ae,cellSelection:!1,theme:Se,autoSizeStrategy:{type:"fitGridWidth"},columnDefs:Ne,defaultColDef:Ee,onGridSizeChanged:ae,onGridReady:ce,loading:T,suppressCellFocus:!0,suppressDragLeaveHidesColumns:!0,noRowsOverlayComponent:ye,rowData:s,rowSelection:l,onSelectionChanged:Ie,getRowId:N,...ve})})})},tn=({value:e,locale:s=lt,options:n=ct,emptyPlaceholder:r,className:i,hideTooltip:u=!1})=>{const a=g.convertToDate(e),d=o.useMemo(()=>a?new Intl.DateTimeFormat(s,n).format(a):r,[a,r,s,n]),m=a?a.toISOString():void 0;return t.jsx(be,{text:m?t.jsx("time",{dateTime:m,children:d}):t.jsx("span",{children:d}),className:x.mergeClasses("dial-small-text text-primary",i),hideTooltip:u})};exports.Checkbox=He;exports.CheckboxBox=je;exports.CloseButton=qe;exports.DEFAULT_DATE_FORMAT_OPTIONS=ct;exports.DEFAULT_LOCALE=lt;exports.DangerIconButton=vt;exports.DateCellRenderer=tn;exports.Dropdown=nt;exports.EllipsisTooltip=be;exports.GRID_ALIGN_RIGHT_CLASS=$t;exports.GRID_ROOT_CLASS=at;exports.GRID_SELECTION_COLUMN_ID=it;exports.GRID_THEME_PARAMS=me;exports.GhostIconButton=$e;exports.Grid=en;exports.IconButton=xe;exports.InfoButton=Ke;exports.InteractiveTooltip=fe;exports.Label=we;exports.MenuItem=pe;exports.MenuItemMark=j;exports.NeutralIconButton=Nt;exports.NoDataContent=ot;exports.PrimaryIconButton=It;exports.ROW_HEIGHT=Ae;exports.Radio=rt;exports.StaticIconButton=Et;exports.SvgNoData=st;exports.Tooltip=Ze;exports.TooltipContainer=ke;exports.TooltipContent=Le;exports.TooltipPlacement=he;exports.TooltipTrigger=Re;exports.getButtonClassNames=We;exports.overlayGap=et;exports.overlayItemClassName=Je;exports.overlaySubMenuClassName=Ye;