@epam/ai-dial-ui-kit 0.15.0-dev.52 → 0.15.0-dev.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +2 -0
- package/dist/{DateCellRenderer-CmgeZvYm.cjs → DateCellRenderer-BdUMSg-E.cjs} +1 -1
- package/dist/components/New/Grid/constants.js +14 -5
- package/dist/components/New/Popup/Popup.js +58 -56
- package/dist/components-manifest.json +11 -5
- package/dist/dial-ui-kit.cjs +2 -2
- package/dist/grid.cjs +1 -1
- package/dist/index.css +2 -2
- package/dist/src/components/New/Grid/constants.d.ts +6 -4
- package/dist/src/components/New/Popup/Popup.d.ts +8 -1
- package/package.json +1 -1
package/dist/CHANGELOG.md
CHANGED
|
@@ -75,6 +75,8 @@ Versions match the git tags on the `development` branch.
|
|
|
75
75
|
|
|
76
76
|
- **`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.
|
|
77
77
|
|
|
78
|
+
- **`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.
|
|
79
|
+
|
|
78
80
|
- **`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.
|
|
79
81
|
|
|
80
82
|
- **`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.
|
|
@@ -1 +1 @@
|
|
|
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"),p=require("@floating-ui/react"),he=require("./icon-DhjrDQ8I.cjs"),re=require("./icon-CrGVkVpG.cjs"),C=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=p.useFloating({placement:s,open:m,onOpenChange:x,whileElementsMounted:p.autoUpdate,middleware:[p.offset(xt+bt),p.flip({fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(S.context,{move:!1,enabled:r==null,mouseOnly:n,delay:{open:St,close:0}}),I=p.useFocus(S.context,{enabled:r==null}),y=p.useDismiss(S.context),L=p.useRole(S.context,{role:"tooltip"}),w=p.useInteractions([f,I,y,L]);return a.useEffect(()=>{if(!m)return;const T=S.refs.reference.current;if(!(T instanceof Element))return;const R=new IntersectionObserver(([M])=>{M.isIntersecting||x(!1)},{root:null,threshold:0});return R.observe(T),()=>R.disconnect()},[m,S.refs.reference,x]),a.useMemo(()=>({open:m,setOpen:x,arrowRef:u,...w,...S}),[m,x,w,S])},we=({children:e,...s})=>{const n=vt(s);return t.jsx(We.Provider,{value:n,children:e})},Re=({style:e,...s})=>{const n=Ke(),r=C.useHasHover(),i=g.useThemeScope(),d=a.useRef(null),c=p.useMergeRefs([n.refs.setFloating,d]);return!n.open||!r?null:t.jsx(p.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(p.FloatingArrow,{ref:n.arrowRef,context:n.context,className:It})]})})},De=({children:e,asChild:s=!1,...n})=>{const r=Ke(),i=s&&a.isValidElement(e),d=i?e.props?.ref:null,c=p.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(we,{...c,children:[t.jsx(De,{asChild:r,className:i,children:n}),u&&t.jsx(Re,{className:d,children:s})]})},Ge={[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.Starter]:{[C.ButtonAppearance.Outlined]:"dial-kit-starter-outlined-button"},[C.ButtonVariant.Success]:{},[C.ButtonVariant.Secondary]:{},[C.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=C.ButtonVariant.Primary,s=C.ButtonAppearance.Solid)=>{const n=Ge[e]?.[s];return n||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${s}. Using default primary solid button styles.`),Ge[C.ButtonVariant.Primary][C.ButtonAppearance.Solid])},yt={[C.ElementSize.Small]:"size-[24px]",[C.ElementSize.Standard]:"size-[40px] dial-kit-enhanced-target",[C.ElementSize.Large]:"size-[48px] dial-kit-enhanced-target"},be=({variant:e,appearance:s=C.ButtonAppearance.Solid,size:n=C.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":C.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:C.ElementSize.Small,tooltipProps:{tooltip:e}})},je=({label:e,required:s,className:n,containerClassName:r,caption:i,size:d=C.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===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(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 Pe={size:14,stroke:3,"aria-hidden":!0},He=({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,{...Pe}):e&&t.jsx($.IconCheck,{...Pe});return u?t.jsx("label",{htmlFor:i,className:m,children:x}):t.jsx("span",{"aria-hidden":"true",className:m,children:x})},Me=({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]),w=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:w,type:"checkbox",id:I,checked:n,disabled:d,onChange:L,"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":y,className:"peer sr-only"}),t.jsx(He,{htmlFor:I,isSelected:n,isIndeterminate:r,invalid:i,disabled:d,className:x}),s&&t.jsx(je,{size:C.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,_t="z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md",pe=({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,w]=a.useState(d),T=u??L,R=K=>{m?.(K),u==null&&w(K)},M=p.useFloatingNodeId(),{refs:O,floatingStyles:q,context:k}=p.useFloating({nodeId:M,placement:s,open:T,onOpenChange:R,whileElementsMounted:p.autoUpdate,middleware:[p.offset(Tt),p.flip({padding:5}),p.shift({padding:5})]}),F=p.useHover(k,{enabled:u==null&&!I,handleClose:p.safePolygon(),delay:{open:kt,close:0}}),z=p.useFocus(k,{enabled:u==null&&!I}),v=p.useClick(k,{enabled:I}),X=p.useDismiss(k),{getReferenceProps:Y,getFloatingProps:te}=p.useInteractions([F,z,v,X]),W=a.useRef(null),Z=p.useMergeRefs(a.useMemo(()=>[O.setFloating,W],[O.setFloating])),_=r&&a.isValidElement(n),A=_?n.props?.ref:null,D=p.useMergeRefs(a.useMemo(()=>[O.setReference,...A?[A]:[]],[O.setReference,A])),J=!i&&(I||!f)&&!!e,E=_?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(p.FloatingPortal,{id:"interactive-tooltip-portal",children:t.jsx(p.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(_t,y,S,g.DIAL_KIT_CLASS.interactiveTooltip),children:e})})})]})},Oe="rounded-xl bg-layer-raised p-1 shadow-md",Be="flex flex-col gap-0.5",Ye=h.mergeClasses(Oe,"w-max"),Je=h.mergeClasses(Ye,Be,"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",At=h.mergeClasses(et,"text-accent"),Lt=h.mergeClasses("cursor-not-allowed text-control-disable-primary","bg-transparent hover:bg-transparent"),tt=4,wt=h.mergeClasses("flex items-center gap-2 align-middle","h-auto px-0 bg-transparent border-0"),Rt=h.mergeClasses("z-floating focus-visible:outline-none",Oe),Dt=Ye,jt=Je,Ht=h.mergeClasses(Be,"py-1"),Mt="my-1 border-t border-tertiary",ee=tt,Ot=t.jsx($.IconChevronRight,{size:re.DIAL_ICON_SIZE.SM,stroke:he.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),Fe=(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}),Bt=Fe(C.ButtonVariant.Primary,C.ButtonAppearance.Solid),Ft=Fe(C.ButtonVariant.Neutral,C.ButtonAppearance.Solid),Vt=Fe(C.ButtonVariant.Danger,C.ButtonAppearance.Ghost),st=nt(C.ButtonAppearance.Ghost,C.ButtonVariant.Primary),Gt=nt(C.ButtonAppearance.Solid,C.ButtonVariant.Static),rt=({ariaLabel:e="Close",className:s,size:n=C.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===C.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(we,{...c,children:[t.jsx(De,{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}),Ce=({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 w=i&&r===H.Highlight,T=i&&(r===H.Checkbox||r===H.Tint),R=h.mergeClasses(d&&"text-error",I&&"text-control-disable-primary"),M=h.mergeClasses(Qe,"aria-expanded:bg-control-accent-alpha-hover",w&&At,T&&et,I&&Lt,d&&"text-error",f,g.DIAL_KIT_CLASS.menuItem),O=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":M,...L,children:[S??t.jsxs(t.Fragment,{children:[r===H.Checkbox&&t.jsx(He,{isSelected:i,disabled:I}),s&&t.jsx(g.DialIcon,{icon:s,className:R}),m?t.jsx(Se,{text:e,className:h.mergeClasses(R,x)}):t.jsx("span",{className:h.mergeClasses("min-w-0 flex-1 truncate text-start",R,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",R),children:c})]});return u?t.jsxs("div",{role:"none",className:h.mergeClasses(M,"has-[[data-menu-item-row]:focus-visible]:outline","has-[[data-menu-item-row]:focus-visible]:outline-focus"),children:[O,u]}):O},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(Ce,{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:Ot,className:e.className,...u(),children:e.renderItem?.(e)});return t.jsxs(p.FloatingNode,{id:r,children:[e.interactiveTooltip?t.jsx(pe,{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(Ce,{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(pe,{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:w,separatorClassName:T,listClassName:R,listStyle:M,outsidePressIgnoreRef:O,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,_=Z?!!x:te,A=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=p.useFloatingNodeId(),{refs:j,floatingStyles:U,context:V}=p.useFloating({nodeId:oe,placement:u,open:_,onOpenChange:E,whileElementsMounted:p.autoUpdate,middleware:[p.offset({mainAxis:ee,crossAxis:0}),Ie?p.autoPlacement({alignment:"start",crossAxis:!0,padding:ee,allowedPlacements:k}):p.flip({padding:ee}),p.shift({padding:ee}),p.size({padding:ee,apply({availableWidth:l,availableHeight:o,elements:b}){const N=b.floating,B=qt(b.reference);N.style.setProperty("--fui-available-height",`${Math.floor(o)}px`),N.style.setProperty("--reference-width",z?`${Math.round(B)}px`:"0px"),z?N.style.minWidth=`${Math.round(B)}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=p.useClick(V,{enabled:c.includes(g.DropdownTrigger.Click)&&!m}),Ne=p.useHover(V,{enabled:c.includes(g.DropdownTrigger.Hover)&&!m,move:!1,restMs:40,handleClose:p.safePolygon(),delay:{open:80,close:80}}),ne=p.useDismiss(V,{bubbles:!0,referencePress:!1,outsidePress:l=>{if(!q)return!1;const o=l.target;return!(O?.current&&o instanceof Node&&O.current.contains(o))}}),ae=p.useRole(V,{role:"menu"}),{getReferenceProps:ve,getFloatingProps:le}=p.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),A.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)&&_&&E(!1),G(l.clientX,l.clientY),A.current=document.elementFromPoint(l.clientX,l.clientY))},[F,m,G,_,c,E]);a.useEffect(()=>{m&&_&&E(!1)},[m,_,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(B=>B===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,w,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(Mt,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(Ce,{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(pe,{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,w,T]),ke=ve({onContextMenu:Ee,onMouseDown:ye});return a.useEffect(()=>{if(!_)return;const l=j.reference.current;let o=null;if(l instanceof Element?o=l:A.current instanceof Element&&(o=A.current),!o)return;const b=new IntersectionObserver(([N])=>{N.isIntersecting||E(!1)},{root:null,threshold:0});return b.observe(o),()=>b.disconnect()},[_,j.reference,E]),t.jsx(p.FloatingTree,{children:t.jsxs(p.FloatingNode,{id:oe,children:[t.jsx("span",{ref:j.setReference,className:h.mergeClasses(wt,m&&"!cursor-not-allowed opacity-75",L,g.DIAL_KIT_CLASS.dropdown),"aria-haspopup":"menu","aria-expanded":_,"aria-controls":K,...ke,children:e}),_&&t.jsx(p.FloatingPortal,{children:t.jsx(p.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:M?{...M,...U}:U,className:h.mergeClasses(Rt,!z&&"w-max","overflow-auto",Y,R),...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":C.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(je,{size:C.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})]})},ze=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:ze,height:ze,"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",Le=40,_e="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:_e,headerRowBorder:_e,headerColumnBorder:_e,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 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(Me,{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(Me,{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:w="No results found",emptyStateDescription:T="Sorry, we couldn't find any results for your search.",loading:R=!1,wrapperBorder:M=!0,withoutHeaderBorders:O=!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),_=`dial-kit-grid-selection-${a.useId()}`,A=a.useRef({getRowId:f,getContextMenuItems:r,onSelectionChange:x,selectRowLabel:F,wrapCustomCellRenderers:c});A.current={getRowId:f,getContextMenuItems:r,onSelectionChange:x,selectRowLabel:F,wrapCustomCellRenderers:c};const D=a.useCallback(o=>{const b=A.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:M}),[I,M]),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?A.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),B=new Set(N.map(D));W.current=B,Z.current=o.source,!Q(o.source)&&A.current.onSelectionChange?.(B,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:_,label:A.current.selectRowLabel?.(o.data)??"Select row",disabled:u?.has(b)})}}},[k,z,D,u,_]),ae=a.useCallback(o=>{if(!o.cellRenderer)return{...o,cellRenderer:V};const b=A.current.wrapCustomCellRenderers;if(!(typeof b=="function"?b(o):!!b))return o;const B=o.cellRenderer;return{...o,cellRenderer:ue=>{const pt=j(ue.data),Ve=typeof B=="function"?B:void 0,Ct=Ve?t.jsx(Ve,{...ue}):V(ue);return U(ue,Ct,pt)}}},[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:w,description:T,icon:L??t.jsx($.IconZoomCancel,{size:100,stroke:.5,"aria-hidden":"true"})}),[w,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,O&&Yt,i),role:"region","aria-label":d,"aria-busy":R,children:t.jsx("div",{className:"h-full overflow-x-auto",children:t.jsx(g.AgGridReact,{rowModelType:"clientSide",headerHeight:Le,rowHeight:Le,cellSelection:!1,theme:K,autoSizeStrategy:{type:"fitGridWidth"},columnDefs:ve,defaultColDef:ye,onGridSizeChanged:Ie,onGridReady:Te,loading:R,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=Me;exports.CheckboxBox=He;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=pe;exports.InteractiveTooltipTrigger=fe;exports.Label=je;exports.MenuItem=Ce;exports.MenuItemMark=H;exports.NeutralIconButton=Ft;exports.NoDataContent=it;exports.PrimaryIconButton=Bt;exports.ROW_HEIGHT=Le;exports.Radio=ct;exports.StaticIconButton=Gt;exports.SvgNoData=lt;exports.Tooltip=Ue;exports.TooltipContainer=we;exports.TooltipContent=Re;exports.TooltipPlacement=xe;exports.TooltipTrigger=De;exports.getButtonClassNames=qe;exports.getDisabledButtonProps=$e;exports.overlayGap=tt;exports.overlayItemClassName=Qe;exports.overlayListClassName=Be;exports.overlaySubMenuListClassName=Je;exports.overlaySurfaceClassName=Oe;
|
|
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;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)",
|
|
1
|
+
const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", s = {
|
|
2
2
|
accentColor: "var(--bg-control-accent, #1D4ED8)",
|
|
3
3
|
backgroundColor: "var(--bg-layer-raised, #FCFCFC)",
|
|
4
4
|
oddRowBackgroundColor: "var(--bg-layer-sunken, #EEF1F7)",
|
|
5
|
-
selectedRowBackgroundColor: "var(--bg-control-accent-alpha, #
|
|
6
|
-
rowHoverColor: "var(--bg-control-accent-alpha-hover, #
|
|
5
|
+
selectedRowBackgroundColor: "var(--bg-control-accent-alpha-active-subtle, #2764D914)",
|
|
6
|
+
rowHoverColor: "var(--bg-control-accent-alpha-hover-subtle, #2764D90A)",
|
|
7
7
|
borderColor: "var(--stroke-tertiary, #E0E6F0)",
|
|
8
8
|
// Dividers inside the table sit on the thin stroke (0.5px) rather than the
|
|
9
9
|
// 1px main stroke that controls and standalone dividers use, so a dense grid
|
|
@@ -13,9 +13,16 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
|
|
|
13
13
|
// by the theme: those frame the table and separate its regions rather than
|
|
14
14
|
// dividing rows and columns.
|
|
15
15
|
rowBorder: o,
|
|
16
|
-
|
|
16
|
+
// Off: ag-Grid draws this one both under the header and between the title
|
|
17
|
+
// row and the filter row, and the design has no line between those two. The
|
|
18
|
+
// line under the header is drawn at 1px in `styles/grid.scss`.
|
|
19
|
+
headerRowBorder: !1,
|
|
17
20
|
headerColumnBorder: o,
|
|
21
|
+
// The design's header divider is a short 12px mark centred in the cell, not
|
|
22
|
+
// the 20px (half the row) ag-Grid draws by default.
|
|
23
|
+
headerColumnBorderHeight: 12,
|
|
18
24
|
chromeBackgroundColor: "var(--bg-layer-base, #F5F7FA)",
|
|
25
|
+
headerBackgroundColor: "var(--bg-layer-raised, #FCFCFC)",
|
|
19
26
|
foregroundColor: "var(--text-primary, #161B2D)",
|
|
20
27
|
headerTextColor: "var(--text-secondary, #57647A)",
|
|
21
28
|
// 1.0 asked the browser for dark native widgets while painting a light
|
|
@@ -27,6 +34,8 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
|
|
|
27
34
|
fontFamily: "var(--theme-font, var(--font-inter))",
|
|
28
35
|
spacing: 4,
|
|
29
36
|
borderRadius: 4,
|
|
37
|
+
// Search fields in the header and filter popups: `rounded-lg`.
|
|
38
|
+
inputBorderRadius: 8,
|
|
30
39
|
wrapperBorderRadius: 8
|
|
31
40
|
};
|
|
32
41
|
var e = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(e || {});
|
|
@@ -36,7 +45,7 @@ export {
|
|
|
36
45
|
a as GRID_ROOT_CLASS,
|
|
37
46
|
i as GRID_ROW_SELECT_CLASS,
|
|
38
47
|
n as GRID_SELECTION_VISIBLE_CLASS,
|
|
39
|
-
|
|
48
|
+
s as GRID_THEME_PARAMS,
|
|
40
49
|
d as GRID_WITHOUT_HEADER_BORDERS_CLASS,
|
|
41
50
|
t as GRID_WITH_SELECTION_CLASS,
|
|
42
51
|
C as ROW_HEIGHT,
|
|
@@ -1,63 +1,64 @@
|
|
|
1
1
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
2
|
-
import { useFloating as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { CloseButton as
|
|
6
|
-
import { GhostIconButton as
|
|
7
|
-
import { Tooltip as
|
|
8
|
-
import { DIAL_KIT_ICON_STROKE as
|
|
9
|
-
import { DIAL_ICON_SIZE as
|
|
10
|
-
import { ButtonVariant as
|
|
11
|
-
import { PopupSize as
|
|
12
|
-
import { ElementSize as
|
|
13
|
-
import { useThemeScope as
|
|
2
|
+
import { useFloating as Q, useRole as U, useDismiss as W, useInteractions as X, FloatingPortal as Y, FloatingOverlay as ee, FloatingFocusManager as oe } from "@floating-ui/react";
|
|
3
|
+
import { useRef as re, useId as se } from "react";
|
|
4
|
+
import { Button as ae } from "../Button/Button.js";
|
|
5
|
+
import { CloseButton as ie } from "../CloseButton/CloseButton.js";
|
|
6
|
+
import { GhostIconButton as le } from "../IconButton/IconButtonWrappers.js";
|
|
7
|
+
import { Tooltip as te } from "../Tooltip/Tooltip.js";
|
|
8
|
+
import { DIAL_KIT_ICON_STROKE as ne } from "../constants/icon.js";
|
|
9
|
+
import { DIAL_ICON_SIZE as pe } from "../../../constants/icon.js";
|
|
10
|
+
import { ButtonVariant as me } from "../../../types/button.js";
|
|
11
|
+
import { PopupSize as ce } from "../../../types/popup.js";
|
|
12
|
+
import { ElementSize as de } from "../../../types/size.js";
|
|
13
|
+
import { useThemeScope as ue } from "../ThemeScope/ThemeScope.js";
|
|
14
14
|
import { mergeClasses as r } from "../../../utils/merge-classes.js";
|
|
15
|
-
import { IconChevronLeft as
|
|
16
|
-
import { popupActionsGroupClassName as l, popupHeaderDividerClassName as
|
|
17
|
-
import { DIAL_KIT_CLASS as
|
|
18
|
-
const
|
|
15
|
+
import { IconChevronLeft as fe } from "@tabler/icons-react";
|
|
16
|
+
import { popupActionsGroupClassName as l, popupHeaderDividerClassName as ge, popupHeaderClassName as he, popupSizeClassMap as Ne, popupBaseClassName as Ce, popupOverlayBaseClassName as ve, popupTitleClassName as Ie, popupFooterDividerClassName as Fe, popupFooterClassName as Se } from "./constants.js";
|
|
17
|
+
import { DIAL_KIT_CLASS as xe } from "../../../constants/public-class-names.js";
|
|
18
|
+
const je = ({
|
|
19
19
|
open: t = !1,
|
|
20
20
|
header: n,
|
|
21
21
|
ariaLabel: F,
|
|
22
22
|
portalId: S,
|
|
23
23
|
className: x,
|
|
24
24
|
overlayClassName: T,
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
overlayStyle: _,
|
|
26
|
+
titleClassName: b,
|
|
27
|
+
headerClassName: y,
|
|
27
28
|
bodyClassName: z,
|
|
28
29
|
children: D,
|
|
29
30
|
footer: p,
|
|
30
|
-
footerClassName:
|
|
31
|
+
footerClassName: B,
|
|
31
32
|
onClose: m,
|
|
32
33
|
onBack: c,
|
|
33
|
-
backAriaLabel:
|
|
34
|
+
backAriaLabel: L = "Back",
|
|
34
35
|
headerActions: d,
|
|
35
|
-
headerDivider:
|
|
36
|
+
headerDivider: P = !1,
|
|
36
37
|
mainButtons: u,
|
|
37
38
|
additionalButtons: f,
|
|
38
39
|
additionalButtonsOnLeft: g = !1,
|
|
39
|
-
footerDivider:
|
|
40
|
-
size:
|
|
41
|
-
hideClose:
|
|
42
|
-
closeAriaLabel:
|
|
43
|
-
closeOnOutsideClick:
|
|
40
|
+
footerDivider: A = !1,
|
|
41
|
+
size: M = ce.Md,
|
|
42
|
+
hideClose: R = !1,
|
|
43
|
+
closeAriaLabel: w = "Close dialog",
|
|
44
|
+
closeOnOutsideClick: E = !0,
|
|
44
45
|
preventKeyboardOnOpen: h = !1
|
|
45
46
|
}) => {
|
|
46
|
-
const
|
|
47
|
+
const G = ue(), N = re(null), O = se(), { refs: C, context: a } = Q({
|
|
47
48
|
open: t,
|
|
48
49
|
onOpenChange: (e) => {
|
|
49
50
|
e || m?.(null);
|
|
50
51
|
}
|
|
51
|
-
}),
|
|
52
|
+
}), $ = U(a, { role: "dialog" }), j = W(a, { outsidePress: E }), { getFloatingProps: k } = X([$, j]);
|
|
52
53
|
if (!t) return null;
|
|
53
|
-
const i = typeof n == "string" ? `popup-heading-${
|
|
54
|
+
const i = typeof n == "string" ? `popup-heading-${O}` : void 0, H = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
|
|
54
55
|
"h2",
|
|
55
56
|
{
|
|
56
57
|
id: i,
|
|
57
|
-
className: r(
|
|
58
|
-
children: /* @__PURE__ */ o(
|
|
58
|
+
className: r(Ie, b),
|
|
59
|
+
children: /* @__PURE__ */ o(te, { tooltip: e, triggerClassName: "truncate", children: e })
|
|
59
60
|
}
|
|
60
|
-
) : e : /* @__PURE__ */ o("span", {}), v =
|
|
61
|
+
) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ie, { ariaLabel: w, onClose: (e) => m?.(e) }), I = (e, V = []) => V.map(({ variant: Z = me.Neutral, ...q }, J) => /* @__PURE__ */ o(ae, { variant: Z, ...q }, `${e}-${J}`)), K = () => {
|
|
61
62
|
if (p !== void 0) return p;
|
|
62
63
|
if (!u?.length && !f?.length) return null;
|
|
63
64
|
const e = I("additional", f);
|
|
@@ -65,9 +66,9 @@ const $e = ({
|
|
|
65
66
|
"div",
|
|
66
67
|
{
|
|
67
68
|
className: r(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
Se,
|
|
70
|
+
A && Fe,
|
|
71
|
+
B
|
|
71
72
|
),
|
|
72
73
|
children: [
|
|
73
74
|
g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
|
|
@@ -79,16 +80,17 @@ const $e = ({
|
|
|
79
80
|
}
|
|
80
81
|
);
|
|
81
82
|
};
|
|
82
|
-
return /* @__PURE__ */ o(
|
|
83
|
-
|
|
83
|
+
return /* @__PURE__ */ o(Y, { id: S, children: /* @__PURE__ */ o(
|
|
84
|
+
ee,
|
|
84
85
|
{
|
|
86
|
+
style: _,
|
|
85
87
|
className: r(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
+
ve,
|
|
89
|
+
G,
|
|
88
90
|
T
|
|
89
91
|
),
|
|
90
92
|
children: /* @__PURE__ */ o(
|
|
91
|
-
|
|
93
|
+
oe,
|
|
92
94
|
{
|
|
93
95
|
context: a,
|
|
94
96
|
initialFocus: h ? N : C.floating,
|
|
@@ -96,16 +98,16 @@ const $e = ({
|
|
|
96
98
|
"div",
|
|
97
99
|
{
|
|
98
100
|
ref: C.setFloating,
|
|
99
|
-
...
|
|
101
|
+
...k(),
|
|
100
102
|
role: "dialog",
|
|
101
103
|
"aria-modal": "true",
|
|
102
104
|
"aria-labelledby": i,
|
|
103
105
|
"aria-label": i ? void 0 : F,
|
|
104
106
|
className: r(
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
Ce,
|
|
108
|
+
Ne[M],
|
|
107
109
|
x,
|
|
108
|
-
|
|
110
|
+
xe.popup
|
|
109
111
|
),
|
|
110
112
|
children: [
|
|
111
113
|
h && /* @__PURE__ */ o(
|
|
@@ -121,29 +123,29 @@ const $e = ({
|
|
|
121
123
|
"div",
|
|
122
124
|
{
|
|
123
125
|
className: r(
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
126
|
+
he,
|
|
127
|
+
P && ge,
|
|
128
|
+
y
|
|
127
129
|
),
|
|
128
130
|
children: [
|
|
129
131
|
c && /* @__PURE__ */ o(
|
|
130
|
-
|
|
132
|
+
le,
|
|
131
133
|
{
|
|
132
|
-
"aria-label":
|
|
133
|
-
size:
|
|
134
|
+
"aria-label": L,
|
|
135
|
+
size: de.Small,
|
|
134
136
|
className: "mr-2",
|
|
135
137
|
onClick: c,
|
|
136
138
|
icon: /* @__PURE__ */ o(
|
|
137
|
-
|
|
139
|
+
fe,
|
|
138
140
|
{
|
|
139
|
-
size:
|
|
140
|
-
stroke:
|
|
141
|
+
size: pe.SM,
|
|
142
|
+
stroke: ne,
|
|
141
143
|
"aria-hidden": "true"
|
|
142
144
|
}
|
|
143
145
|
)
|
|
144
146
|
}
|
|
145
147
|
),
|
|
146
|
-
|
|
148
|
+
H(n),
|
|
147
149
|
d ? /* @__PURE__ */ s("div", { className: l, children: [
|
|
148
150
|
d,
|
|
149
151
|
v
|
|
@@ -152,7 +154,7 @@ const $e = ({
|
|
|
152
154
|
}
|
|
153
155
|
),
|
|
154
156
|
/* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
|
|
155
|
-
|
|
157
|
+
K()
|
|
156
158
|
]
|
|
157
159
|
}
|
|
158
160
|
)
|
|
@@ -162,5 +164,5 @@ const $e = ({
|
|
|
162
164
|
) });
|
|
163
165
|
};
|
|
164
166
|
export {
|
|
165
|
-
|
|
167
|
+
je as Popup
|
|
166
168
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.15.0-dev.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "0.15.0-dev.54",
|
|
3
|
+
"generatedAt": "2026-10-08T11:59:00.519Z",
|
|
4
4
|
"kit": {
|
|
5
5
|
"name": "@epam/ai-dial-ui-kit",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n return (\n <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n <h1>Test library</h1>\n <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n </div>\n );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
|
|
18
18
|
},
|
|
19
19
|
"styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class | Design name | Weight | Size / Line-height |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text` | Display 1 | semibold | 32px / 48px |\n| `.dial-display2-text` | Display 2 | semibold | 28px / 40px |\n| `.dial-display3-text` | Display 3 | semibold | 22px / 32px |\n| `.dial-h1-text` | Heading 1 | semibold | 20px / 28px |\n| `.dial-h2-text` | Heading 2 | semibold | 18px / 26px |\n| `.dial-h3-text` | Heading 3 | semibold | 16px / 24px |\n| `.dial-body-text` | Body Text | normal | 16px / 24px |\n| `.dial-body-semi-text` | Body Text (Semi Bold) | semibold | 16px / 24px |\n| `.dial-body-paragraph-text` | Body Paragraph | normal | 16px / 26px |\n| `.dial-body-paragraph-semi-text` | Body Paragraph (Semi Bold) | semibold | 16px / 26px |\n| `.dial-small-text` | Small Text | normal | 14px / 20px |\n| `.dial-small-semi-text` | Small Text (Semi Bold) | semibold | 14px / 20px |\n| `.dial-small-paragraph-text` | Small Paragraph | normal | 14px / 24px |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px |\n| `.dial-tiny-text` | Tiny Text | normal | 12px / 16px |\n| `.dial-tiny-lead-text` | Tiny Text Lead | normal | 12px / 16px (+0.03em, uppercase) |\n| `.dial-tiny-semi-text` | Tiny Text (Semi Bold) | semibold | 12px / 16px |\n| `.dial-tiny-lead-semi-text` | Tiny Text Lead (Semi Bold) | semibold | 12px / 16px (+0.03em, uppercase) |\n| `.dial-caption-text` | Caption | normal | 10px / 12px |\n| `.dial-caption-lead-semi-text` | Caption Lead (Semi Bold) | semibold | 10px / 12px (+0.06em, uppercase) |\n| `.dial-code-text` | Code | normal | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text` | Italic | normal | 18px / 22px (serif, italic) |\n| `.dial-small-italic-text` | Small Italic | normal | 14px / 20px (serif, italic) |\n| `.dial-tiny-italic-text` | Tiny Italic | normal | 12px / 16px (serif, italic) |\n| `.dial-caption-italic-text` | Caption Italic | normal | 10px / 12px (serif, italic) |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
|
|
20
|
-
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#
|
|
20
|
+
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha` | `var(--bg-control-error-alpha)` | `#F764641A` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F7646426` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
|
|
21
21
|
"components": [
|
|
22
22
|
{
|
|
23
23
|
"name": "Spinner",
|
|
@@ -1768,6 +1768,12 @@
|
|
|
1768
1768
|
"required": false,
|
|
1769
1769
|
"description": "Additional CSS classes applied to the overlay"
|
|
1770
1770
|
},
|
|
1771
|
+
{
|
|
1772
|
+
"name": "overlayStyle",
|
|
1773
|
+
"type": "CSSProperties",
|
|
1774
|
+
"required": false,
|
|
1775
|
+
"description": "Inline styles merged over Floating UI's own overlay styles (`position`, `inset`, `overflow: auto`)"
|
|
1776
|
+
},
|
|
1771
1777
|
{
|
|
1772
1778
|
"name": "titleClassName",
|
|
1773
1779
|
"type": "string",
|
|
@@ -12446,8 +12452,8 @@
|
|
|
12446
12452
|
{
|
|
12447
12453
|
"name": "GRID_THEME_PARAMS",
|
|
12448
12454
|
"sourceFile": "components/New/Grid/constants.ts",
|
|
12449
|
-
"description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover
|
|
12450
|
-
"signature": "GRID_THEME_PARAMS = {\n accentColor: 'var(--bg-control-accent, #1D4ED8)',\n backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n selectedRowBackgroundColor
|
|
12455
|
+
"description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover uses the subtle accent tint and selection the slightly stronger\nselected tint, as in the grid cell design.",
|
|
12456
|
+
"signature": "GRID_THEME_PARAMS = {\n accentColor: 'var(--bg-control-accent, #1D4ED8)',\n backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n selectedRowBackgroundColor:\n 'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n // 1px main stroke that controls and standalone dividers use, so a dense grid\n // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n // antialiased rather than snapped, which is what makes the line look lighter.\n // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n // by the theme: those frame the table and separate its regions rather than\n // dividing rows and columns.\n rowBorder: THIN_TABLE_DIVIDER,\n // Off: ag-Grid draws this one both under the header and between the title\n // row and the filter row, and the design has no line between those two. The\n // line under the header is drawn at 1px in `styles/grid.scss`.\n headerRowBorder: false,\n headerColumnBorder: THIN_TABLE_DIVIDER,\n // The design's header divider is a short 12px mark centred in the cell, not\n // the 20px (half the row) ag-Grid draws by default.\n headerColumnBorderHeight: 12,\n chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n foregroundColor: 'var(--text-primary, #161B2D)',\n headerTextColor: 'var(--text-secondary, #57647A)',\n // 1.0 asked the browser for dark native widgets while painting a light\n // theme; the scheme now matches the palette it is used with.\n browserColorScheme: 'light',\n headerFontSize: 14,\n headerFontWeight: 600,\n fontSize: 14,\n fontFamily: 'var(--theme-font, var(--font-inter))',\n spacing: 4,\n borderRadius: 4,\n // Search fields in the header and filter popups: `rounded-lg`.\n inputBorderRadius: 8,\n wrapperBorderRadius: 8,\n}"
|
|
12451
12457
|
},
|
|
12452
12458
|
{
|
|
12453
12459
|
"name": "GRID_ROW_HEIGHT",
|