@vuu-ui/vuu-popups 0.8.12 → 0.8.13-debug

package/esm/index.js

@@ -1,2 +1,1974 @@
-import{Scrim as At}from"@salt-ds/lab";import Nt from"classnames";import{useCallback as Dt,useRef as Bt}from"react";import{useThemeAttributes as Ct}from"@vuu-ui/vuu-shell";import{useLayoutEffect as we,useRef as vt,useState as xt}from"react";import{createPortal as Et}from"react-dom";function wt(e){return typeof e=="function"?e():e}var Tt="vuu-portal-root",$=({children:e,container:n=document.body,id:t=Tt,onRender:o,open:r=!0,themeAttributes:s})=>{var M;let[i,d]=xt(!1),l=vt(null),a=(M=wt(n))!=null?M:document.body,[u,c,p]=Ct(s);return we(()=>{let x=document.getElementById(t);x?l.current=x:(l.current=document.createElement("div"),l.current.id=t);let g=l.current;a.contains(g)||a.appendChild(g),g.classList.add(u,c),g.dataset.mode=p,d(!0)},[t,a,u,c,p]),we(()=>{requestAnimationFrame(()=>{o==null||o()})},[o]),r&&i&&l.current&&e?Et(e,l.current):null};import{Button as Rt,Text as Lt}from"@salt-ds/core";import Ht from"classnames";import{jsx as Te,jsxs as kt}from"react/jsx-runtime";var It="vuuDialogHeader",Re=({hideCloseButton:e=!1,title:n,onClose:t,...o})=>kt("div",{...o,className:Ht(It,"vuuToolbarProxy"),children:[Te(Lt,{className:"dialogHeader",children:n}),!e&&Te(Rt,{onClick:t,"data-align":"end","data-icon":"close",variant:"secondary"},"close")]});import{jsx as se,jsxs as Ot}from"react/jsx-runtime";var Le="vuuDialog",Xo=({children:e,className:n,isOpen:t=!1,onClose:o,title:r,hideCloseButton:s=!1,...i})=>{let d=Bt(null),l=Dt(()=>{o==null||o()},[o]);return t?se($,{children:se(At,{className:`${Le}-scrim`,open:t,autoFocusRef:d,children:Ot("div",{...i,className:Nt(Le,n),ref:d,children:[se(Re,{hideCloseButton:s,onClose:l,title:r}),e]})})}):null};import{useCallback as Xe,useRef as de}from"react";import Ke,{useLayoutEffect as Zt,useMemo as jt,useRef as _t}from"react";import Fe from"classnames";import{useId as en}from"@vuu-ui/vuu-layout";import{useCallback as X,useMemo as Vt,useRef as ie,useState as Ut}from"react";var He=e=>e.closest("[data-root='true']")!==null,Ie=(e,n)=>{var t;return e.ariaHasPopup==="true"&&((t=e.dataset)==null?void 0:t.idx)===`${n}`||e.querySelector(`:scope > [data-index='${n}'][aria-haspopup='true']`)!==null};function St(e,...n){let t=new Set(e);for(let o of n)for(let r of o)t.add(r);return t}var $t="Enter";var Kt="Delete",Ft=new Set([$t,Kt]),Wt=new Set(["Tab"]),qt=new Set(["ArrowRight","ArrowLeft"]),ke=new Set(["Home","End","ArrowDown","ArrowUp"]),Ae=new Set(["Home","End","ArrowRight","ArrowLeft"]),Gt=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),jo=St(Ft,Ae,ke,qt,Gt,Wt);var Ne=({key:e},n="vertical")=>(n==="vertical"?ke:Ae).has(e);import{isValidNumber as ue}from"@vuu-ui/vuu-utils";var De=({autoHighlightFirstItem:e=!1,count:n,defaultHighlightedIdx:t,highlightedIndex:o,onActivate:r,onHighlight:s,onCloseMenu:i,onOpenMenu:d})=>{var E;if(ue(o)&&ue(t))throw Error("useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx");let l=ue(o),a=ie((E=t!=null?t:o)!=null?E:e?0:-1),[,u]=Ut(null),c=X(b=>{a.current=b,s==null||s(b),u({})},[s]),p=X(b=>{b!==a.current&&(l||c(b))},[l,c]),M=ie(!0),x=ie(!1),g=b=>x.current=b,C=l?o:a.current,P=X(b=>{let h=Xt(n,b.key,a.current);h!==a.current&&p(h)},[n,p]),w=X(b=>{if(Ne(b))b.preventDefault(),b.stopPropagation(),M.current=!0,P(b);else if((b.key==="ArrowRight"||b.key==="Enter")&&Ie(b.target,C)){let m=b.target.querySelector(`:scope > [data-index='${C}']`);m&&(d==null||d(m,!0))}else b.key==="ArrowLeft"&&!He(b.target)?i(C):b.key==="Enter"?(b.preventDefault(),b.stopPropagation(),r&&r(C)):b.key==="Tab"&&i(-1)},[C,P,r,i,d]),R=Vt(()=>({onFocus:()=>{C===-1&&c(0)},onKeyDown:w,onMouseDownCapture:()=>{M.current=!1,g(!0)},onMouseMove:()=>{M.current&&(M.current=!1)},onMouseLeave:()=>{M.current=!0,g(!1),p(-1)}}),[w,C,c,p]);return{focusVisible:M.current?C:-1,controlledHighlighting:l,highlightedIndex:C,setHighlightedIndex:p,listProps:R,setIgnoreFocus:g}};function Xt(e,n,t){return n==="ArrowUp"?t>0?t-1:t:t===null?0:t===e-1?t:t+1}import Be,{useCallback as Jt,useMemo as zt}from"react";var ae=e=>e.type===J||!!e.props["data-group"],Yt=e=>{if(Array.isArray(e)&&ce(e[0]))return e[0]},Qt=(e,n,t,o=!1)=>{let{props:{children:r}}=e;return{childWithId:Be.cloneElement(e,{hasSeparator:o,id:`${n}`,key:n,children:t?Yt(r):r}),grandChildren:t?r:void 0}},Oe=(e,n)=>{let t=Jt(()=>{let s=(i,d=n,l={},a={})=>{let u=l[d]=[],c=0,p=!1;return Be.Children.forEach(i,M=>{if(!ce(M))if(M.type===Se)p=!0;else{let x=ae(M),g=`${d}-${c}`,{props:{action:C,options:P}}=M,{childWithId:w,grandChildren:R}=Qt(M,g,x,p);u.push(w),R?s(R,g,l,a):a[g]={action:C,options:P},c+=1,p=!1}}),[l,a]};return s(e)},[n,e]),[o,r]=zt(()=>t(),[t]);return[o,r]};import{Fragment as rn,jsx as K}from"react/jsx-runtime";var $e="vuuMenuList",Se=()=>K("li",{className:"vuuMenuItem-divider"}),J=()=>null,z=({children:e,idx:n,options:t,...o})=>K("div",{...o,children:e}),We=({children:e})=>K(rn,{children:e});We.displayName="MenuItemLabel";z.Label=We;var tn=e=>Ke.isValidElement(e)&&typeof e.type!="string"&&"displayName"in e.type?e.type.displayName:void 0,ce=e=>tn(e)==="MenuItemLabel",nn=e=>e.props["data-icon"],le=({activatedByKeyboard:e,childMenuShowing:n,children:t,className:o,defaultHighlightedIdx:r,highlightedIdx:s,id:i,isRoot:d,listItemProps:l,onHighlightMenuItem:a,onActivate:u,onCloseMenu:c,openMenu:p,...M})=>{let x=en(i),g=_t(null),C=jt(()=>new Map,[]),P=f=>{var v;let y=(v=g.current)==null?void 0:v.querySelector(`:scope > [data-index='${f}']`);y!=null&&y.id&&(u==null||u(y.id))},{focusVisible:w,highlightedIndex:R,listProps:E}=De({count:Ke.Children.count(t),defaultHighlightedIdx:r,highlightedIndex:s,onActivate:P,onHighlight:a,onOpenMenu:p,onCloseMenu:c}),b=n==null?w:-1;Zt(()=>{var f;n===void 0&&e&&((f=g.current)==null||f.focus())},[e,n]);let h=()=>R===void 0||R===-1?void 0:C.get(R);function m(){let f={...l,role:"menuitem"},y=(I,T,k)=>T?[K("span",{className:"vuuIconContainer","data-icon":k},"icon")].concat(I):I;function v(I,T,k,D){var Ee;let{children:B,className:ht,"data-icon":ve,id:U,hasSeparator:bt,label:oe,...yt}=T.props,re=ae(T),xe=re&&n===U,Pt=xe?`${x}-${U}`:void 0;I.push(K(z,{...yt,...f,...on(U,k,(Ee=T.key)!=null?Ee:U,R,b,ht,bt),"aria-controls":Pt,"aria-haspopup":re||void 0,"aria-expanded":xe||void 0,children:y(re&&oe!=null?oe:B,D,ve)}))}let L=[];if(t.length>0){let I=t.some(nn);t.forEach((T,k)=>{v(L,T,k,I)})}return L}return K("div",{...M,...E,"aria-activedescendant":h(),className:Fe($e,o,{[`${$e}-childMenuShowing`]:n!==void 0}),"data-root":d||void 0,id:x,ref:g,role:"menu",children:m()})},on=(e,n,t,o,r,s,i)=>({id:`menuitem-${e}`,key:t!=null?t:n,"data-index":n,"data-highlighted":n===o||void 0,className:Fe("vuuMenuItem",s,{"vuuMenuItem-separator":i,focusVisible:r===n})});le.displayName="MenuList";import{useCallback as N,useMemo as sn,useRef as Y,useState as un}from"react";var pe=e=>e==null?void 0:e.closest("[data-index],[aria-posinset]");var Ge=(e,n,t)=>e.map((o,r)=>r===e.length-1?{...o,[t]:o[t]-n}:o),an=(e,n)=>Ge(e,n,"left"),cn=(e,n)=>Ge(e,n,"top"),ln=(e,n)=>{let[t,o]=n.slice(-2),r=document.getElementById(`${e}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:s}=r.getBoundingClientRect();return n.map(i=>i===o?{...i,left:t.left-(s-2)}:i)},pn=(e,n)=>{let[{left:t,top:o}]=n.slice(-1),{offsetWidth:r,offsetTop:s}=e;return{left:t+r,top:s+o}},Ve=(e,n)=>{let t=e.lastIndexOf("-");return e.startsWith("menuitem")?t>-1?e.slice(9,t):n:t>-1?e.slice(0,t):n},dn=e=>e.slice(9),qe=({ariaExpanded:e,ariaHasPopup:n,id:t},o)=>{if(t.startsWith("menuitem"))return{hostMenuId:Ve(t,o),targetMenuId:dn(t),menuItemId:t,isGroup:n==="true",isOpen:e==="true"};throw Error(`getMenuItemDetails #${t} is not a menuitem`)},Ue=({id:e,onActivate:n,onMouseEnterItem:t,position:{x:o,y:r}})=>{let[,s]=un({}),i=Y([{id:e,left:o,top:r}]),d=N(h=>i.current.findIndex(m=>m.id===h)!==-1,[]),l=N(h=>{let m=p.current[h];if(m===void 0)throw Error(`getOpenMenuState no entry for menu ${h}`);return m},[]),a=N(h=>{i.current=h,s({})},[]),u=Y(),c=Y(),p=Y({[e]:"no-popup"}),M=N((h=e,m,f=null)=>{if(h===e&&f===null)a([{id:e,left:o,top:r}]);else{p.current[h]="popup-open";let y=document.getElementById(f);if(y!==null){let{left:v,top:L}=pn(y,i.current);a(i.current.concat({id:m,left:v,top:L}))}else throw Error(`openMenu no menuItem ${f}`)}},[e,o,r,a]),x=N(h=>{if(h===e)a([]);else{let m=i.current.slice(),f=m.pop();p.current[f.id]="no-popup";let y=m.at(-1);y&&(p.current[y.id]="no-popup"),a(m)}},[e,a]),g=N(h=>{let m=i.current.slice(),f=h.slice(9),{id:y}=m.at(-1);for(;m.length>1&&!f.startsWith(y);){let v=Ve(y,e);m.pop(),p.current[y]="no-popup",p.current[v]="no-popup",{id:y}=m[m.length-1]}m.length<i.current.length&&a(m)},[e,a]),C=N(()=>{u.current&&(clearTimeout(u.current),u.current=void 0)},[]),P=N((h,m,f,y=300)=>{C(),u.current=window.setTimeout(()=>{g(f),p.current[h]="popup-open",p.current[m]="no-popup",M(h,m,f)},y)},[C,g,M]),w=N((h,m,f)=>{p.current[m]="pending-close",c.current=window.setTimeout(()=>{g(f)},400)},[g]),R=N(()=>{let{current:h}=i,m=h.at(-1),f=m?document.getElementById(m.id):void 0;if(f){let{right:y,bottom:v}=f.getBoundingClientRect(),{clientHeight:L,clientWidth:I}=document.body;if(y>I){let T=h.length>1?ln(e,h):an(h,y-I);a(T)}else if(v>L){let T=cn(h,v-L);a(T)}typeof f.tabIndex=="number"&&f.focus()}},[e,a]),E=N((h,m=!1)=>{let{hostMenuId:f,targetMenuId:y,menuItemId:v,isGroup:L,isOpen:I}=qe(h,e),{current:{[f]:T}}=p,k=m?0:void 0;if(T==="no-popup"&&L)p.current[f]="popup-pending",P(f,y,v,k);else if(T==="popup-pending"&&!L)p.current[f]="no-popup",clearTimeout(u.current),u.current=void 0;else if(T==="popup-pending"&&L)clearTimeout(u.current),P(f,y,v,k);else if(T==="popup-open")if(d(y)){let D=l(y);switch(g(v),D){case"pending-close":clearTimeout(c.current),c.current=void 0,p.current[y]="no-popup",C();break;default:}}else{let[D,B]=i.current.slice(-2);D.id===f&&p.current[B.id]!=="pending-close"?(w(f,B.id,v),L&&!I&&P(f,y,v,k)):D.id===f&&L&&v!==B.id&&p.current[B.id]==="pending-close"||L?P(f,y,v,k):p.current[B.id]!=="pending-close"&&g(v)}T==="pending-close"&&(C(),clearTimeout(c.current),c.current=void 0,p.current[f]="popup-open")},[C,g,l,d,e,w,P]),b=sn(()=>({onMouseEnter:h=>{let m=pe(h.target);E(m),t(h,m.id)},onClick:h=>{let m=pe(h.target),{isGroup:f,menuItemId:y}=qe(m,e);f?E(m):n(y)}}),[n,t,e,E]);return{closeMenu:x,handleRender:R,listItemProps:b,openMenu:E,openMenus:i.current}};import{useId as mn}from"@vuu-ui/vuu-layout";import{Fragment as Mn,jsx as ze}from"react/jsx-runtime";import{createElement as Je}from"react";var fn=()=>{},me=({PortalProps:e,activatedByKeyboard:n,children:t,className:o,id:r,onClose:s=()=>{},position:i={x:0,y:0},style:d,...l})=>{let a=de(s);a.current=s;let u=mn(r),c=de(fn),[p,M]=Oe(t,u),x=de(n),g=Xe(()=>{x.current=!1},[]),C=Xe(v=>{let L=v.slice(9),{action:I,options:T}=M[L];c.current(u),s({type:"menu-action",menuId:I,options:T})},[M,u,s]),{closeMenu:P,listItemProps:w,openMenu:R,openMenus:E,handleRender:b}=Ue({id:`${u}`,onActivate:C,onMouseEnterItem:g,position:i});c.current=P;let h=()=>{x.current=!0,P()},m=()=>{},f=E.length-1,y=v=>{if(!(v>=f)){let{id:L}=E[v+1];return L}};return ze(Mn,{children:E.map(({id:v,left:L,top:I},T,k)=>{let D=y(T);return Je($,{...e,key:T,onRender:b},ze(Ye,{anchorElement:{current:document.body},placement:"absolute",position:{left:L,top:I},children:Je(le,{...l,activatedByKeyboard:x.current,childMenuShowing:D,className:o,id:v,isRoot:T===0,key:T,listItemProps:w,onActivate:C,onHighlightMenuItem:m,onCloseMenu:h,openMenu:R,style:d,tabIndex:T===k.length-1?0:void 0},p[v])}))})})};me.displayName="ContextMenu";import{createContext as gn,useCallback as hn,useMemo as bn}from"react";import{jsx as fe}from"react/jsx-runtime";var Q=gn(null),yn=({children:e,context:n,menuActionHandler:t,menuBuilder:o})=>{let r=bn(()=>n!=null&&n.menuBuilders&&o?n.menuBuilders.concat(o):o?[o]:(n==null?void 0:n.menuBuilders)||[],[n,o]),s=hn(i=>{var d;if(t!=null&&t(i)||(d=n==null?void 0:n.menuActionHandler)!=null&&d.call(n,i))return!0},[n,t]);return fe(Q.Provider,{value:{menuActionHandler:s,menuBuilders:r},children:e})},Ur=({children:e,label:n,menuActionHandler:t,menuBuilder:o})=>fe(Q.Consumer,{children:r=>fe(yn,{context:r,label:n,menuActionHandler:t,menuBuilder:o,children:e})});import{isGroupMenuItemDescriptor as On}from"@vuu-ui/vuu-utils";import{cloneElement as Sn,useCallback as Me,useContext as $n,useMemo as Kn}from"react";import xn from"classnames";import En,{createElement as je}from"react";import W from"react-dom";import*as Qe from"react-dom";import Pn from"classnames";var Cn=1,vn=({className:e,dataMode:n,x:t=0,y:o=0,win:r=window})=>{let s=r.document.createElement("div");return s.className=Pn(`vuuPopup ${Cn++}`,e),s.style.cssText=`left:${t}px; top:${o}px;`,n&&(s.dataset.mode=n),r.document.body.appendChild(s),s},Yr=e=>vn(e),Ze=(e,n,t,o,r)=>{n.style.cssText=`left:${t}px; top:${o}px;position: absolute;`,Qe.render(e,n,r)};var O=!1,A=[],_e=e=>(e==null?void 0:e.type)==="menu-action",et=e=>(e==null?void 0:e.type)==="click-away";function j(e){if(e.key==="Esc"){if(A.length)nt();else if(O){let n=document.body.querySelector(".vuuDialog");n&&W.unmountComponentAtNode(n)}}}function tt(e){if(A.length){let n=document.body.querySelectorAll(".vuuPopup,#vuu-portal-root");for(let t=0;t<n.length;t++)if(n[t].contains(e.target))return;nt({mouseEvt:e,type:"click-away"})}}function nt(e){if(A.length===1)H.hidePopup(e,"anon","all");else if(A.length){let n=document.body.querySelectorAll(".vuuPopup");for(let t=0;t<n.length;t++)W.unmountComponentAtNode(n[t]);ot("*")}}function wn(){O===!1&&(O=!0,window.addEventListener("keydown",j,!0))}function Tn(){O&&(O=!1,window.removeEventListener("keydown",j,!0))}function Rn(e){A.indexOf(e)===-1&&(A.push(e),O===!1&&(window.addEventListener("keydown",j,!0),window.addEventListener("click",tt,!0)))}function ot(e){if(A.length){if(e==="*")A.length=0;else{let n=A.indexOf(e);n!==-1&&A.splice(n,1)}A.length===0&&O===!1&&(window.removeEventListener("keydown",j,!0),window.removeEventListener("click",tt,!0))}}var Ln=({children:e,position:n,style:t})=>{let o=xn("hwPopup","hwPopupContainer",n);return je("div",{className:o,style:t},e)},Hn=1,H=class{static showPopup({group:n="all",name:t="anon",left:o=0,position:r="",right:s="auto",top:i=0,width:d="auto",component:l}){if(!l)throw Error("PopupService showPopup, no component supplied");typeof l.props.onClose=="function"?H.onClose=l.props.onClose:H.onClose=void 0,Rn(t),document.addEventListener("keydown",H.escapeKeyListener,!0);let a=document.body.querySelector(".vuuPopup."+n);a===null&&(a=document.createElement("div"),a.className="vuuPopup "+n,document.body.appendChild(a));let u={width:d};Ze(je(Ln,{key:Hn++,position:r,style:u},l),a,o,i,()=>{H.keepWithinThePage(a,s)})}static escapeKeyListener(n){n.key==="Escape"&&H.hidePopup({type:"escape",event:n})}static hidePopup(n,t="anon",o="all"){var r;if(A.indexOf(t)!==-1){ot(t);let s=document.body.querySelector(`.vuuPopup.${o}`);s&&W.unmountComponentAtNode(s)}document.removeEventListener("keydown",H.escapeKeyListener,!0),(r=H==null?void 0:H.onClose)==null||r.call(H,n)}static keepWithinThePage(n,t="auto"){let o=n.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:s,width:i,height:d,right:l}=o.getBoundingClientRect(),a=window.innerWidth,c=window.innerHeight-(r+d);c<0&&(o.style.top=Math.round(r)+c+"px");let p=a-(s+i);if(p<0&&(o.style.left=Math.round(s)+p+"px"),typeof t=="number"&&t!==l){let M=t-l;o.style.left=s+M+"px"}}}},Z=class{static showDialog(n){let t=".vuuDialog",o=n.props.onClose;wn(),W.render(En.cloneElement(n,{container:t,onClose:()=>{Z.closeDialog(),o&&o()}}),document.body.querySelector(t))}static closeDialog(){Tn();let n=document.body.querySelector(".vuuDialog");n&&W.unmountComponentAtNode(n)}};import Dn from"classnames";import{useCallback as In,useLayoutEffect as kn,useRef as An,useState as Nn}from"react";var rt=(e,n,t,o,r,s)=>{let{bottom:i,height:d,left:l,right:a,top:u,width:c}=e.getBoundingClientRect();switch(n){case"below":return{left:l+t,top:i+o};case"right":return{left:a+t,top:u+o};case"below-center":return{left:l+c/2+t,top:i+o};case"below-full-width":return{left:l+t,minWidth:r,top:i+o,width:c};case"center":return s?{left:c/2-s.width/2+t,top:d/2-s.height/2+o,visibility:"visible"}:{left:c/2+t,top:d/2+o,visibility:"hidden"};default:throw Error("Popup getPositionRelativeToAnchor only supported placement values are below and right")}},_=({anchorElement:e,minWidth:n,offsetLeft:t=0,offsetTop:o=0,placement:r,position:s})=>{let i=An(null),[d,l]=Nn(s);kn(()=>{if(r==="absolute"&&s)l(s);else if(e.current){let u=i.current===null?void 0:i.current.getBoundingClientRect(),c=rt(e.current,r,t,o,n,u);l(c)}},[e,n,t,o,r,s]);let a=In(u=>{if(i.current=u,u&&r==="center"&&e.current){let{height:c,width:p}=u.getBoundingClientRect();l(rt(e.current,r,t,o,void 0,{height:c,width:p}))}},[e,t,o,r]);return{position:d,popupRef:r==="center"?a:void 0}};import{jsx as Bn}from"react/jsx-runtime";var Ye=({children:e,className:n,anchorElement:t,minWidth:o,placement:r,position:s})=>{let{popupRef:i,position:d}=_({anchorElement:t,minWidth:o,placement:r,position:s});return d===void 0?null:Bn("div",{className:Dn("vuuPortal",n),ref:i,style:d,children:e})};import{useThemeAttributes as Fn}from"@vuu-ui/vuu-shell";import{jsx as ge}from"react/jsx-runtime";var st=(e,n)=>{let t=$n(Q),[o,r,s]=Fn(),i=Kn(()=>({themeClass:o,densityClass:r,dataMode:s}),[s,r,o]),d=Me((u,c,p)=>{let M=[];for(let x of u)M=M.concat(x(c,p));return M},[]),l=Me((u,c,{ContextMenuProps:p,contextMenu:M,...x})=>{var C,P;if((C=u.stopPropagation)==null||C.call(u),(P=u.preventDefault)==null||P.call(u),M)return qn({x:u.clientX,y:u.clientY},M);let g=[];if(e&&g.push(e),t&&Array.isArray(t==null?void 0:t.menuBuilders)&&t.menuBuilders.length>0&&g.push(...t.menuBuilders),g.length>0){let w=d(g,c,x),R=E=>(n==null?void 0:n(E))===!0?!0:t==null?void 0:t.menuActionHandler(E);w.length&&R&&Gn(u,w,R,{PortalProps:{themeAttributes:i},...p})}else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)")},[d,t,n,e,i]),a=Me(()=>{console.log("hide context menu")},[]);return[l,a]},Wn={},qn=(e,n)=>{H.showPopup({focus:!0,left:0,top:0,component:Sn(n,{position:e})})},Gn=(e,n,t,{position:o,...r}=Wn)=>{let s=a=>{let u=(c,p)=>On(c)?ge(J,{label:c.label,children:c.children.map(u)},p):ge(z,{action:c.action,className:c.className,"data-icon":c.icon,options:c.options,children:c.label},p);return a.map(u)},i=a=>{var u;_e(a)&&(t(a),H.hidePopup()),(u=r==null?void 0:r.onClose)==null||u.call(r,a)},d=o!=null?o:{x:e.clientX,y:e.clientY},l=ge(me,{...r,onClose:i,position:d,children:s(n)});H.showPopup({left:0,top:0,component:l,focus:!0})};import{useCallback as he,useRef as it,useState as Vn}from"react";import Un from"classnames";import{Button as Xn}from"@salt-ds/core";import{useId as Jn}from"@vuu-ui/vuu-layout";import{jsx as Yn}from"react/jsx-runtime";var be="vuuPopupMenu",zn=e=>{if(e){let{bottom:n,left:t}=e.getBoundingClientRect();return{x:t,y:n+6}}},ei=({className:e,label:n,icon:t=n?"chevron-down":"more-vert",id:o,menuActionHandler:r,menuBuilder:s,menuLocation:i="header",menuOptions:d,onMenuClose:l,tabIndex:a=0,...u})=>{let c=it(null),p=it(!1),[M,x]=Vn(!1),g=Jn(o),[C]=st(s,r),P=he(E=>{console.log("menu Open ",{el:E})},[]),w=he(E=>{x(!1),et(E)?E.mouseEvt.target===c.current&&(p.current=!0):requestAnimationFrame(()=>{var b;l==null||l(E),a!==-1&&((b=c.current)==null||b.focus())})},[l,a]),R=he(E=>{p.current?p.current=!1:(x(!0),C(E,i,{ContextMenuProps:{id:`${g}-menu`,onClose:w,openMenu:P,position:zn(c.current)},...d}))},[w,P,g,i,d,C]);return Yn(Xn,{...u,"aria-controls":`${g}-menu-root`,"aria-expanded":M,"aria-haspopup":"menu",className:Un(be,e,{[`${be}-withCaption`]:n!==void 0,[`${be}-open`]:M}),"data-icon":t,id:g,onClick:R,ref:c,tabIndex:a,variant:"secondary",children:n})};import{useThemeAttributes as Qn}from"@vuu-ui/vuu-shell";import{Button as ut}from"@salt-ds/core";import Zn from"classnames";import{useLayoutEffect as jn,useRef as at}from"react";import{jsx as q,jsxs as ct}from"react/jsx-runtime";var F="vuuPrompt",_n={current:document.body},eo={},Mi=({PopupProps:e=eo,cancelButtonLabel:n="Cancel",confirmButtonLabel:t="Confirm",icon:o,onCancel:r,onConfirm:s,style:i,text:d,title:l,variant:a="info",...u})=>{let{anchorElement:c=_n,offsetLeft:p=0,offsetTop:M=0,placement:x="below"}=e,[g,C,P]=Qn(),{position:w}=_({anchorElement:c,offsetLeft:p,offsetTop:M,placement:x}),R=at(null),E=at(null);return jn(()=>{if(R.current&&(R.current.showModal(),E.current&&E.current.focus(),x.endsWith("center"))){let{width:b}=R.current.getBoundingClientRect();R.current.style.marginLeft=`-${b/2}px`}},[x]),q("dialog",{...u,className:Zn(F,`${F}-${a}`,g),"data-mode":P,ref:R,style:{...i,...w},children:ct("form",{className:`${F}-form`,children:[q("div",{className:`${F}-header`,"data-icon":o,children:l}),q("div",{className:`${F}-text`,children:d}),ct("div",{className:`${F}-buttonBar`,children:[q(ut,{onClick:r,variant:"secondary",children:n}),q(ut,{onClick:s,ref:E,value:"default",children:t})]})]})})};import{useLayoutEffect as to,useState as no}from"react";var oo=(e,n,t,o)=>{let{bottom:r,height:s,left:i,right:d,top:l,width:a}=e.getBoundingClientRect(),u=i+a/2,c=l+s/2;switch(n){case"above":return{left:u+t,top:l+o};case"below":return{left:u+t,top:r+o};case"right":return{left:d+t,top:c+t};case"left":return{left:i+t,top:c+t};default:throw Error("Tooltip getPositionRelativeToAnchor only supported placement values are left, right, below and right")}},lt=({anchorElement:e,offsetLeft:n=0,offsetTop:t=0,placement:o})=>{let[r,s]=no();return to(()=>{if(e.current){let i=oo(e.current,o,n,t);s(i)}},[e,n,t,o]),r};import{jsx as ye}from"react/jsx-runtime";var pt="vuuTooltip",Hi=({anchorElement:e,children:n,id:t,onMouseEnter:o,onMouseLeave:r,placement:s})=>{let i=lt({anchorElement:e,placement:s});return i===void 0?null:ye($,{children:ye("div",{className:pt,"data-align":s,id:t,style:i,children:ye("span",{className:`${pt}-content`,onMouseEnter:o,onMouseLeave:r,children:n})})})};import{useCallback as S,useRef as ee,useState as ro}from"react";import{useId as so}from"@vuu-ui/vuu-layout";var Oi=({id:e,placement:n="right",tooltipContent:t})=>{let o=ee(),r=ee(null),s=ee(),i=ee(),[d,l]=ro(),a=so(e),u=S(P=>{var w;P.key==="Escape"&&((w=o.current)==null||w.call(o))},[]);o.current=S(()=>{l(void 0),document.removeEventListener("keydown",u)},[u]);let c=S(()=>{window.clearTimeout(i.current)},[]),p=S(()=>{var P;(P=o.current)==null||P.call(o)},[]),M=S(()=>{let{current:P}=r;P&&(l({anchorElement:r,children:t,id:`${a}-tooltip`,onMouseEnter:c,onMouseLeave:p,placement:n}),document.addEventListener("keydown",u)),s.current=void 0},[u,c,p,a,n,t]),x=S(P=>{let w=P.target;w&&(r.current=w,s.current=window.setTimeout(M,800))},[M]),g=S(()=>{r.current&&(s.current?(window.clearTimeout(s.current),s.current=void 0):o.current&&(i.current=window.setTimeout(o.current,200)))},[]);return{anchorProps:{"aria-describedby":`${a}-tooltip`,onMouseEnter:x,onMouseLeave:g},tooltipProps:d}};import io,{useState as mt,useContext as uo,useCallback as ao,useEffect as co}from"react";import dt from"classnames";import{getUniqueId as lo}from"@vuu-ui/vuu-utils";import{jsx as V,jsxs as Ce}from"react/jsx-runtime";var ft=6e3,Pe=1e3,po=300,Mt=56,te=300,mo=10,fo=10,ne=50,G="vuuToastNotifications",Mo=(r=>(r.Info="info",r.Success="success",r.Warning="warning",r.Error="error",r))(Mo||{}),gt=io.createContext({notify:()=>"have you forgotten to provide a NotificationProvider?"}),Ji=e=>{let[n,t]=mt([]),o=ao(r=>{let s={...r,id:lo()};t(i=>[...i,s]),setTimeout(()=>{t(i=>i.filter(d=>d!==s))},ft+Pe*2)},[]);return Ce(gt.Provider,{value:{notify:o},children:[V("div",{className:`${G}-toastContainer`,style:{width:te+ne+fo},children:n.map((r,s)=>V(go,{top:(Mt+mo)*s,notification:r},r.id))}),e.children]})},zi=()=>uo(gt),go=e=>{let{top:n,notification:t,animated:o=!0}=e,[r,s]=mt(-te-ne);return co(()=>{s(ne),o&&setTimeout(()=>s(-te-ne),ft+Pe)},[o]),Ce("div",{className:dt(`${G}-toast`,t.type),style:{height:Mt,right:r,width:te,top:n,transition:o?`right ${Pe}ms, top ${po}ms `:"none"},children:[V("div",{className:dt(`${G}-toastIcon`,`${t.type}-icon`)}),Ce("div",{className:`${G}-toastContent`,children:[V("strong",{className:`${G}-toastHeader`,children:t.header}),V("div",{children:t.body})]})]})};export{me as ContextMenu,Q as ContextMenuContext,Ur as ContextMenuProvider,Xo as Dialog,Re as DialogHeader,Z as DialogService,z as MenuItem,J as MenuItemGroup,le as MenuList,Mo as NotificationLevel,gt as NotificationsContext,Ji as NotificationsProvider,Ye as PopupComponent,ei as PopupMenu,H as PopupService,$ as Portal,Mi as Prompt,Se as Separator,go as ToastNotification,Hi as Tooltip,Yr as createContainer,ce as isMenuItemLabel,et as reasonIsClickAway,_e as reasonIsMenuAction,Ze as renderPortal,_ as useAnchoredPosition,st as useContextMenu,zi as useNotifications,Oi as useTooltip};
+// src/dialog/Dialog.tsx
+import { Scrim } from "@salt-ds/lab";
+import cx2 from "classnames";
+import { useCallback, useRef as useRef2 } from "react";
+
+// src/portal/Portal.tsx
+import { useThemeAttributes } from "@vuu-ui/vuu-shell";
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = "vuu-portal-root";
+var Portal = ({
+  children,
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = useState(false);
+  const portalRef = useRef(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = useThemeAttributes(themeAttributes);
+  useLayoutEffect(() => {
+    const root = document.getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = id;
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    el.classList.add(themeClass, densityClass);
+    el.dataset.mode = dataMode;
+    setMounted(true);
+  }, [id, container, themeClass, densityClass, dataMode]);
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return createPortal(children, portalRef.current);
+  }
+  return null;
+};
+
+// src/dialog-header/DialogHeader.tsx
+import { Button, Text } from "@salt-ds/core";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+var classBase = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsx(Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+// src/dialog/Dialog.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var classBase2 = "vuuDialog";
+var Dialog = ({
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  title,
+  hideCloseButton = false,
+  ...props
+}) => {
+  const root = useRef2(null);
+  const close = useCallback(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(Scrim, { className: `${classBase2}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ jsxs2("div", { ...props, className: cx2(classBase2, className), ref: root, children: [
+    /* @__PURE__ */ jsx2(
+      DialogHeader,
+      {
+        hideCloseButton,
+        onClose: close,
+        title
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: `${classBase2}-body`, children })
+  ] }) }) });
+};
+
+// src/dialog/useDialog.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var useDialog = () => {
+  const [dialogState, setDialogState] = useState2();
+  const handleClose = useCallback2(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ jsx3(
+    Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
+
+// src/menu/ContextMenu.tsx
+import { useCallback as useCallback6, useRef as useRef6 } from "react";
+
+// src/menu/MenuList.tsx
+import React2, {
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
+  useRef as useRef4
+} from "react";
+import cx3 from "classnames";
+import { useId } from "@vuu-ui/vuu-layout";
+
+// src/menu/use-keyboard-navigation.ts
+import {
+  useCallback as useCallback3,
+  useMemo,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+
+// src/menu/utils.ts
+var isRoot = (el) => el.closest(`[data-root='true']`) !== null;
+var hasPopup = (el, idx) => {
+  var _a;
+  return el.ariaHasPopup === "true" && ((_a = el.dataset) == null ? void 0 : _a.idx) === `${idx}` || el.querySelector(`:scope > [data-index='${idx}'][aria-haspopup='true']`) !== null;
+};
+
+// src/menu/key-code.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+var Enter = "Enter";
+var Delete = "Delete";
+var actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+var horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+var isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};
+
+// src/menu/use-keyboard-navigation.ts
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  defaultHighlightedIdx,
+  highlightedIndex: highlightedIndexProp,
+  onActivate,
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
+}) => {
+  var _a;
+  if (isValidNumber(highlightedIndexProp) && isValidNumber(defaultHighlightedIdx)) {
+    throw Error(
+      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+    );
+  }
+  const controlledHighlighting = isValidNumber(highlightedIndexProp);
+  const highlightedIndexRef = useRef3(
+    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
+  );
+  const [, forceRender] = useState3(null);
+  const setHighlightedIdx = useCallback3(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
+    },
+    [onHighlight]
+  );
+  const setHighlightedIndex = useCallback3(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
+        }
+      }
+    },
+    [controlledHighlighting, setHighlightedIdx]
+  );
+  const keyBoardNavigation = useRef3(true);
+  const ignoreFocus = useRef3(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = useCallback3(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
+      }
+    },
+    [count, setHighlightedIndex]
+  );
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (isNavigationKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyBoardNavigation.current = true;
+        navigateChildldItems(e);
+      } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
+        const menuEl = e.target;
+        const menuItemEl = menuEl.querySelector(
+          `:scope > [data-index='${highlightedIndex}']`
+        );
+        if (menuItemEl) {
+          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
+        }
+      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
+        onCloseMenu(highlightedIndex);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        onActivate && onActivate(highlightedIndex);
+      } else if (e.key === "Tab") {
+        onCloseMenu(-1);
+      }
+    },
+    [
+      highlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu
+    ]
+  );
+  const listProps = useMemo(
+    () => ({
+      onFocus: () => {
+        if (highlightedIndex === -1) {
+          setHighlightedIdx(0);
+        }
+      },
+      onKeyDown: handleKeyDown,
+      onMouseDownCapture: () => {
+        keyBoardNavigation.current = false;
+        setIgnoreFocus(true);
+      },
+      // onMouseEnter would seem less expensive but it misses some cases
+      onMouseMove: () => {
+        if (keyBoardNavigation.current) {
+          keyBoardNavigation.current = false;
+        }
+      },
+      onMouseLeave: () => {
+        keyBoardNavigation.current = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
+      }
+    }),
+    [handleKeyDown, highlightedIndex, setHighlightedIdx, setHighlightedIndex]
+  );
+  return {
+    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
+    controlledHighlighting,
+    highlightedIndex,
+    setHighlightedIndex,
+    // keyBoardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+function nextItemIdx(count, key, idx) {
+  if (key === "ArrowUp") {
+    if (idx > 0) {
+      return idx - 1;
+    } else {
+      return idx;
+    }
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
+
+// src/menu/use-items-with-ids-next.ts
+import React, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
+var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+var getLabelFromChildren = (children) => {
+  if (Array.isArray(children) && isMenuItemLabel(children[0])) {
+    return children[0];
+  }
+};
+var assignId = (child, path, group, hasSeparator = false) => {
+  const {
+    props: { children }
+  } = child;
+  return {
+    childWithId: React.cloneElement(child, {
+      hasSeparator,
+      id: `${path}`,
+      key: path,
+      children: group ? getLabelFromChildren(children) : children
+    }),
+    grandChildren: group ? children : void 0
+  };
+};
+var useItemsWithIdsNext = (childrenProp, rootId) => {
+  const normalizeChildren = useCallback4(() => {
+    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      React.Children.forEach(children, (child) => {
+        if (isMenuItemLabel(child)) {
+        } else if (child.type === Separator) {
+          hasSeparator = true;
+        } else {
+          const hasChildItems = isMenuItemGroup(child);
+          const childPath = `${path}-${idx}`;
+          const {
+            props: { action, options }
+          } = child;
+          const { childWithId, grandChildren } = assignId(
+            child,
+            childPath,
+            hasChildItems,
+            hasSeparator
+          );
+          list.push(childWithId);
+          if (grandChildren) {
+            collectChildren(grandChildren, childPath, menus2, actions2);
+          } else {
+            actions2[childPath] = { action, options };
+          }
+          idx += 1;
+          hasSeparator = false;
+        }
+      });
+      return [menus2, actions2];
+    };
+    return collectChildren(childrenProp);
+  }, [rootId, childrenProp]);
+  const [menus, actions] = useMemo2(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// src/menu/MenuList.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ jsx4("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx4("div", { ...props, children });
+};
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ jsx4(Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+var getDisplayName = (item) => React2.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+var isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+var hasIcon = (child) => child.props["data-icon"];
+var MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
+  children,
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot: isRoot2,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
+}) => {
+  const id = useId(idProp);
+  const root = useRef4(null);
+  const mapIdxToId = useMemo3(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    var _a;
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-index='${idx}']`);
+    (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
+    count: React2.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  useLayoutEffect2(() => {
+    var _a;
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      (_a = root.current) == null ? void 0 : _a.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ jsx4(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      var _a;
+      const {
+        children: children2,
+        className: className2,
+        "data-icon": iconName,
+        id: itemId,
+        hasSeparator,
+        label,
+        ...props2
+      } = child.props;
+      const hasSubMenu = isMenuItemGroup(child);
+      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      list.push(
+        /* @__PURE__ */ jsx4(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              itemId,
+              idx,
+              (_a = child.key) != null ? _a : itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            children: hasSubMenu ? maybeIcon(label != null ? label : children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+          }
+        )
+      );
+    }
+    const listItems = [];
+    if (children.length > 0) {
+      const withIcon = children.some(hasIcon);
+      children.forEach((child, idx) => {
+        addClonedChild(listItems, child, idx, withIcon);
+      });
+    }
+    return listItems;
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx3(classBase3, className, {
+        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot2 || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
+    }
+  );
+};
+var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key != null ? key : idx,
+  "data-index": idx,
+  "data-highlighted": idx === highlightedIdx || void 0,
+  className: cx3("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+// src/menu/use-cascade.ts
+import {
+  useCallback as useCallback5,
+  useMemo as useMemo4,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+
+// src/menu/list-dom-utils.ts
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[aria-posinset]");
+
+// src/menu/use-cascade.ts
+var nudge = (menus, distance, pos) => {
+  return menus.map(
+    (m, i) => i === menus.length - 1 ? {
+      ...m,
+      [pos]: m[pos] - distance
+    } : m
+  );
+};
+var nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+var nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+var flipSides = (id, menus) => {
+  const [parentMenu, menu] = menus.slice(-2);
+  const el = document.getElementById(`${id}-${menu.id}`);
+  if (el === null) {
+    throw Error(`useCascade.flipSides element with id ${menu.id} not found`);
+  }
+  const { width } = el.getBoundingClientRect();
+  return menus.map(
+    (m) => m === menu ? {
+      ...m,
+      left: parentMenu.left - (width - 2)
+    } : m
+  );
+};
+var getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
+};
+var getHostMenuId = (id, rootId) => {
+  const pos = id.lastIndexOf("-");
+  if (id.startsWith("menuitem")) {
+    return pos > -1 ? id.slice(9, pos) : rootId;
+  } else {
+    return pos > -1 ? id.slice(0, pos) : rootId;
+  }
+};
+var getTargetMenuId = (id) => id.slice(9);
+var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
+  if (id.startsWith("menuitem")) {
+    return {
+      hostMenuId: getHostMenuId(id, rootId),
+      targetMenuId: getTargetMenuId(id),
+      menuItemId: id,
+      isGroup: ariaHasPopup === "true",
+      isOpen: ariaExpanded === "true"
+    };
+  } else {
+    throw Error(`getMenuItemDetails #${id} is not a menuitem`);
+  }
+};
+var useCascade = ({
+  id: rootId,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = useState4({});
+  const openMenus = useRef5([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = useCallback5(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = useCallback5((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
+    }
+    return state;
+  }, []);
+  const setOpenMenus = useCallback5((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = useRef5();
+  const menuClosePendingTimeout = useRef5();
+  const menuState = useRef5({ [rootId]: "no-popup" });
+  const openMenu = useCallback5(
+    (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      if (hostMenuId === rootId && itemId === null) {
+        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
+      } else {
+        menuState.current[hostMenuId] = "popup-open";
+        const el = document.getElementById(itemId);
+        if (el !== null) {
+          const { left, top } = getPosition(el, openMenus.current);
+          setOpenMenus(
+            openMenus.current.concat({ id: targetMenuId, left, top })
+          );
+        } else {
+          throw Error(`openMenu no menuItem ${itemId}`);
+        }
+      }
+    },
+    [rootId, posX, posY, setOpenMenus]
+  );
+  const closeMenu = useCallback5(
+    (menuId) => {
+      if (menuId === rootId) {
+        setOpenMenus([]);
+      } else {
+        const menus = openMenus.current.slice();
+        const lastMenu = menus.pop();
+        menuState.current[lastMenu.id] = "no-popup";
+        const parentMenu = menus.at(-1);
+        if (parentMenu) {
+          menuState.current[parentMenu.id] = "no-popup";
+        }
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const closeMenus = useCallback5(
+    (menuItemId) => {
+      const menus = openMenus.current.slice();
+      const menuItemMenuId = menuItemId.slice(9);
+      let { id: lastMenuId } = menus.at(-1);
+      while (menus.length > 1 && !menuItemMenuId.startsWith(lastMenuId)) {
+        const parentMenuId = getHostMenuId(lastMenuId, rootId);
+        menus.pop();
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const clearAnyScheduledOpenTasks = useCallback5(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
+    }
+  }, []);
+  const scheduleOpen = useCallback5(
+    (hostMenuId, targetMenuId, menuItemId, delay = 300) => {
+      clearAnyScheduledOpenTasks();
+      menuOpenPendingTimeout.current = window.setTimeout(() => {
+        closeMenus(menuItemId);
+        menuState.current[hostMenuId] = "popup-open";
+        menuState.current[targetMenuId] = "no-popup";
+        openMenu(hostMenuId, targetMenuId, menuItemId);
+      }, delay);
+    },
+    [clearAnyScheduledOpenTasks, closeMenus, openMenu]
+  );
+  const scheduleClose = useCallback5(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = useCallback5(() => {
+    const { current: menus } = openMenus;
+    const menu = menus.at(-1);
+    const el = menu ? document.getElementById(menu.id) : void 0;
+    if (el) {
+      const { right, bottom } = el.getBoundingClientRect();
+      const { clientHeight, clientWidth } = document.body;
+      if (right > clientWidth) {
+        const newMenus = menus.length > 1 ? flipSides(rootId, menus) : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+      if (typeof el.tabIndex === "number") {
+        el.focus();
+      }
+    }
+  }, [rootId, setOpenMenus]);
+  const triggerChildMenu = useCallback5(
+    (menuItemEl, immediate = false) => {
+      const { hostMenuId, targetMenuId, menuItemId, isGroup, isOpen } = getMenuItemDetails(menuItemEl, rootId);
+      const {
+        current: { [hostMenuId]: state }
+      } = menuState;
+      const delay = immediate ? 0 : void 0;
+      if (state === "no-popup" && isGroup) {
+        menuState.current[hostMenuId] = "popup-pending";
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-pending" && !isGroup) {
+        menuState.current[hostMenuId] = "no-popup";
+        clearTimeout(menuOpenPendingTimeout.current);
+        menuOpenPendingTimeout.current = void 0;
+      } else if (state === "popup-pending" && isGroup) {
+        clearTimeout(menuOpenPendingTimeout.current);
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-open") {
+        if (menuIsOpen(targetMenuId)) {
+          const menuStatus = getOpenMenuStatus(targetMenuId);
+          closeMenus(menuItemId);
+          switch (menuStatus) {
+            case "pending-close":
+              clearTimeout(menuClosePendingTimeout.current);
+              menuClosePendingTimeout.current = void 0;
+              menuState.current[targetMenuId] = "no-popup";
+              clearAnyScheduledOpenTasks();
+              break;
+            default:
+          }
+        } else {
+          const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
+          if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
+            scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+            }
+          } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (isGroup) {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
+            closeMenus(menuItemId);
+          }
+        }
+      }
+      if (state === "pending-close") {
+        clearAnyScheduledOpenTasks();
+        clearTimeout(menuClosePendingTimeout.current);
+        menuClosePendingTimeout.current = void 0;
+        menuState.current[hostMenuId] = "popup-open";
+      }
+    },
+    [
+      clearAnyScheduledOpenTasks,
+      closeMenus,
+      getOpenMenuStatus,
+      menuIsOpen,
+      rootId,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  const listItemProps = useMemo4(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = closestListItem(evt.target);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
+        if (isGroup) {
+          triggerChildMenu(listItemEl);
+        } else {
+          onActivate(menuItemId);
+        }
+      }
+    }),
+    [onActivate, onMouseEnterItem, rootId, triggerChildMenu]
+  );
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu: triggerChildMenu,
+    openMenus: openMenus.current
+  };
+};
+
+// src/menu/ContextMenu.tsx
+import { useId as useId2 } from "@vuu-ui/vuu-layout";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+import { createElement } from "react";
+var noop = () => void 0;
+var ContextMenu = ({
+  PortalProps: PortalProps2,
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const closeHandlerRef = useRef6(onClose);
+  closeHandlerRef.current = onClose;
+  const id = useId2(idProp);
+  const closeMenuRef = useRef6(noop);
+  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = useRef6(activatedByKeyboard);
+  const handleMouseEnterItem = useCallback6(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = useCallback6(
+    (menuItemId) => {
+      const actionId = menuItemId.slice(9);
+      const { action, options } = actions[actionId];
+      closeMenuRef.current(id);
+      onClose({
+        type: "menu-action",
+        menuId: action,
+        options
+      });
+    },
+    [actions, id, onClose]
+  );
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade({
+    // FIXME
+    id: `${id}`,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  const handleCloseMenu = () => {
+    navigatingWithKeyboard.current = true;
+    closeMenu();
+  };
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuId = (i) => {
+    if (i >= lastMenu) {
+      return void 0;
+    } else {
+      const { id: id2 } = openMenus[i + 1];
+      return id2;
+    }
+  };
+  return /* @__PURE__ */ jsx5(Fragment2, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ createElement(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ jsx5(
+      PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ createElement(
+          MenuList,
+          {
+            ...menuListProps,
+            activatedByKeyboard: navigatingWithKeyboard.current,
+            childMenuShowing: childMenuId,
+            className,
+            id: menuId,
+            isRoot: i === 0,
+            key: i,
+            listItemProps,
+            onActivate: handleActivate,
+            onHighlightMenuItem: handleHighlightMenuItem,
+            onCloseMenu: handleCloseMenu,
+            openMenu: onOpenMenu,
+            style,
+            tabIndex: i === all.length - 1 ? 0 : void 0
+          },
+          menus[menuId]
+        )
+      }
+    ));
+  }) });
+};
+ContextMenu.displayName = "ContextMenu";
+
+// src/menu/context-menu-provider.tsx
+import { createContext, useCallback as useCallback7, useMemo as useMemo5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ContextMenuContext = createContext(
+  null
+);
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = useMemo5(() => {
+    if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
+      return context.menuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return (context == null ? void 0 : context.menuBuilders) || [];
+    }
+  }, [context, menuBuilder]);
+  const handleMenuAction = useCallback7(
+    (reason) => {
+      var _a;
+      if (menuActionHandler == null ? void 0 : menuActionHandler(reason)) {
+        return true;
+      }
+      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, reason)) {
+        return true;
+      }
+    },
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ jsx6(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+var ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ jsx6(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx6(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+// src/menu/useContextMenu.tsx
+import { isGroupMenuItemDescriptor } from "@vuu-ui/vuu-utils";
+import { cloneElement, useCallback as useCallback9, useContext, useMemo as useMemo6 } from "react";
+
+// src/popup/popup-service.ts
+import cx5 from "classnames";
+import React3, {
+  createElement as createElement2
+} from "react";
+import ReactDOM2 from "react-dom";
+
+// src/portal-deprecated/render-portal.tsx
+import * as ReactDOM from "react-dom";
+import cx4 from "classnames";
+var containerId = 1;
+var getPortalContainer = ({
+  className,
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
+}) => {
+  const el = win.document.createElement("div");
+  el.className = cx4(`vuuPopup ${containerId++}`, className);
+  el.style.cssText = `left:${x}px; top:${y}px;`;
+  if (dataMode) {
+    el.dataset.mode = dataMode;
+  }
+  win.document.body.appendChild(el);
+  return el;
+};
+var createContainer = (props) => getPortalContainer(props);
+var renderPortal = (component, container, x, y, onRender) => {
+  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
+  ReactDOM.render(component, container, onRender);
+};
+
+// src/popup/popup-service.ts
+var _dialogOpen = false;
+var _popups = [];
+var reasonIsMenuAction = (reason) => (reason == null ? void 0 : reason.type) === "menu-action";
+var reasonIsClickAway = (reason) => (reason == null ? void 0 : reason.type) === "click-away";
+function specialKeyHandler(e) {
+  if (e.key === "Esc") {
+    if (_popups.length) {
+      closeAllPopups();
+    } else if (_dialogOpen) {
+      const dialogRoot = document.body.querySelector(".vuuDialog");
+      if (dialogRoot) {
+        ReactDOM2.unmountComponentAtNode(dialogRoot);
+      }
+    }
+  }
+}
+function outsideClickHandler(e) {
+  if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(
+      ".vuuPopup,#vuu-portal-root"
+    );
+    for (let i = 0; i < popupContainers.length; i++) {
+      if (popupContainers[i].contains(e.target)) {
+        return;
+      }
+    }
+    closeAllPopups({ mouseEvt: e, type: "click-away" });
+  }
+}
+function closeAllPopups(reason) {
+  if (_popups.length === 1) {
+    PopupService.hidePopup(reason, "anon", "all");
+  } else if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(".vuuPopup");
+    for (let i = 0; i < popupContainers.length; i++) {
+      ReactDOM2.unmountComponentAtNode(popupContainers[i]);
+    }
+    popupClosed("*");
+  }
+}
+function dialogOpened() {
+  if (_dialogOpen === false) {
+    _dialogOpen = true;
+    window.addEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function dialogClosed() {
+  if (_dialogOpen) {
+    _dialogOpen = false;
+    window.removeEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function popupOpened(name) {
+  if (_popups.indexOf(name) === -1) {
+    _popups.push(name);
+    if (_dialogOpen === false) {
+      window.addEventListener("keydown", specialKeyHandler, true);
+      window.addEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+function popupClosed(name) {
+  if (_popups.length) {
+    if (name === "*") {
+      _popups.length = 0;
+    } else {
+      const pos = _popups.indexOf(name);
+      if (pos !== -1) {
+        _popups.splice(pos, 1);
+      }
+    }
+    if (_popups.length === 0 && _dialogOpen === false) {
+      window.removeEventListener("keydown", specialKeyHandler, true);
+      window.removeEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+var PopupComponent2 = ({
+  children,
+  position,
+  style
+}) => {
+  const className = cx5("hwPopup", "hwPopupContainer", position);
+  return createElement2("div", { className, style }, children);
+};
+var incrementingKey = 1;
+var PopupService = class {
+  static showPopup({
+    group = "all",
+    name = "anon",
+    left = 0,
+    position = "",
+    right = "auto",
+    top = 0,
+    width = "auto",
+    component
+  }) {
+    if (!component) {
+      throw Error(`PopupService showPopup, no component supplied`);
+    }
+    if (typeof component.props.onClose === "function") {
+      PopupService.onClose = component.props.onClose;
+    } else {
+      PopupService.onClose = void 0;
+    }
+    popupOpened(name);
+    document.addEventListener("keydown", PopupService.escapeKeyListener, true);
+    let el = document.body.querySelector(".vuuPopup." + group);
+    if (el === null) {
+      el = document.createElement("div");
+      el.className = "vuuPopup " + group;
+      document.body.appendChild(el);
+    }
+    const style = { width };
+    renderPortal(
+      createElement2(
+        PopupComponent2,
+        { key: incrementingKey++, position, style },
+        component
+      ),
+      el,
+      left,
+      top,
+      () => {
+        PopupService.keepWithinThePage(el, right);
+      }
+    );
+  }
+  static escapeKeyListener(evt) {
+    if (evt.key === "Escape") {
+      PopupService.hidePopup({ type: "escape", event: evt });
+    }
+  }
+  static hidePopup(reason, name = "anon", group = "all") {
+    var _a;
+    if (_popups.indexOf(name) !== -1) {
+      popupClosed(name);
+      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
+      if (popupRoot) {
+        ReactDOM2.unmountComponentAtNode(popupRoot);
+      }
+    }
+    document.removeEventListener(
+      "keydown",
+      PopupService.escapeKeyListener,
+      true
+    );
+    (_a = PopupService == null ? void 0 : PopupService.onClose) == null ? void 0 : _a.call(PopupService, reason);
+  }
+  static keepWithinThePage(el, right = "auto") {
+    const target = el.querySelector(".vuuPopupContainer > *");
+    if (target) {
+      const {
+        top,
+        left,
+        width,
+        height,
+        right: currentRight
+      } = target.getBoundingClientRect();
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const overflowH = h - (top + height);
+      if (overflowH < 0) {
+        target.style.top = Math.round(top) + overflowH + "px";
+      }
+      const overflowW = w - (left + width);
+      if (overflowW < 0) {
+        target.style.left = Math.round(left) + overflowW + "px";
+      }
+      if (typeof right === "number" && right !== currentRight) {
+        const adjustment = right - currentRight;
+        target.style.left = left + adjustment + "px";
+      }
+    }
+  }
+};
+var DialogService = class {
+  static showDialog(dialog) {
+    const containerEl = ".vuuDialog";
+    const onClose = dialog.props.onClose;
+    dialogOpened();
+    ReactDOM2.render(
+      React3.cloneElement(dialog, {
+        container: containerEl,
+        onClose: () => {
+          DialogService.closeDialog();
+          if (onClose) {
+            onClose();
+          }
+        }
+      }),
+      document.body.querySelector(containerEl)
+    );
+  }
+  static closeDialog() {
+    dialogClosed();
+    const dialogRoot = document.body.querySelector(".vuuDialog");
+    if (dialogRoot) {
+      ReactDOM2.unmountComponentAtNode(dialogRoot);
+    }
+  }
+};
+
+// src/popup/Popup.tsx
+import cx6 from "classnames";
+
+// src/popup/useAnchoredPosition.ts
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState5 } from "react";
+var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  switch (placement) {
+    case "below":
+      return { left: left + offsetLeft, top: bottom + offsetTop };
+    case "right":
+      return { left: right + offsetLeft, top: top + offsetTop };
+    case "below-center":
+      return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
+    case "below-right":
+      return { left, minWidth, top: bottom + offsetTop };
+    case "below-full-width":
+      return {
+        left: left + offsetLeft,
+        minWidth,
+        top: bottom + offsetTop,
+        width
+      };
+    case "center":
+      if (dimensions) {
+        return {
+          left: width / 2 - dimensions.width / 2 + offsetLeft,
+          top: height / 2 - dimensions.height / 2 + offsetTop,
+          visibility: "visible"
+        };
+      } else {
+        return {
+          left: width / 2 + offsetLeft,
+          top: height / 2 + offsetTop,
+          visibility: "hidden"
+        };
+      }
+    default:
+      throw Error(
+        "Popup getPositionRelativeToAnchor only supported placement values are below and right"
+      );
+  }
+};
+var useAnchoredPosition = ({
+  anchorElement,
+  minWidth,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement,
+  position: positionProp
+}) => {
+  const popupRef = useRef7(null);
+  const [position, setPosition] = useState5(positionProp);
+  useLayoutEffect3(() => {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current) {
+      const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
+      const position2 = getPositionRelativeToAnchor(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop,
+        minWidth,
+        dimensions
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
+  const popupCallbackRef = useCallback8(
+    (el) => {
+      popupRef.current = el;
+      if (el && placement === "center" && anchorElement.current) {
+        const { height, width } = el.getBoundingClientRect();
+        setPosition(
+          getPositionRelativeToAnchor(
+            anchorElement.current,
+            placement,
+            offsetLeft,
+            offsetTop,
+            void 0,
+            { height, width }
+          )
+        );
+      }
+    },
+    [anchorElement, offsetLeft, offsetTop, placement]
+  );
+  return {
+    position,
+    popupRef: placement === "center" ? popupCallbackRef : void 0
+  };
+};
+
+// src/popup/Popup.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PopupComponent = ({
+  children,
+  className,
+  anchorElement,
+  minWidth,
+  placement,
+  position: positionProp
+}) => {
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    placement,
+    position: positionProp
+  });
+  return position === void 0 ? null : /* @__PURE__ */ jsx7("div", { className: cx6(`vuuPortal`, className), ref: popupRef, style: position, children });
+};
+
+// src/menu/useContextMenu.tsx
+import { useThemeAttributes as useThemeAttributes2 } from "@vuu-ui/vuu-shell";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var useContextMenu = (menuBuilder, menuActionHandler) => {
+  const ctx = useContext(ContextMenuContext);
+  const [themeClass, densityClass, dataMode] = useThemeAttributes2();
+  const themeAttributes = useMemo6(
+    () => ({
+      themeClass,
+      densityClass,
+      dataMode
+    }),
+    [dataMode, densityClass, themeClass]
+  );
+  const buildMenuOptions = useCallback9(
+    (menuBuilders, location, options) => {
+      let results = [];
+      for (const menuBuilder2 of menuBuilders) {
+        results = results.concat(menuBuilder2(location, options));
+      }
+      return results;
+    },
+    []
+  );
+  const handleShowContextMenu = useCallback9(
+    (e, location, { ContextMenuProps: ContextMenuProps2, contextMenu, ...options }) => {
+      var _a, _b;
+      (_a = e.stopPropagation) == null ? void 0 : _a.call(e);
+      (_b = e.preventDefault) == null ? void 0 : _b.call(e);
+      if (contextMenu) {
+        return showContextMenuComponent(
+          {
+            x: e.clientX,
+            y: e.clientY
+          },
+          contextMenu
+        );
+      }
+      const menuBuilders = [];
+      if (menuBuilder) {
+        menuBuilders.push(menuBuilder);
+      }
+      if (ctx && Array.isArray(ctx == null ? void 0 : ctx.menuBuilders) && ctx.menuBuilders.length > 0) {
+        menuBuilders.push(...ctx.menuBuilders);
+      }
+      if (menuBuilders.length > 0) {
+        const menuItemDescriptors = buildMenuOptions(
+          menuBuilders,
+          location,
+          options
+        );
+        const menuHandler = (action) => {
+          if ((menuActionHandler == null ? void 0 : menuActionHandler(action)) === true) {
+            return true;
+          } else {
+            return ctx == null ? void 0 : ctx.menuActionHandler(action);
+          }
+        };
+        if (menuItemDescriptors.length && menuHandler) {
+          showContextMenu(e, menuItemDescriptors, menuHandler, {
+            PortalProps: {
+              themeAttributes
+            },
+            ...ContextMenuProps2
+          });
+        }
+      } else {
+        console.warn(
+          "useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)"
+        );
+      }
+    },
+    [buildMenuOptions, ctx, menuActionHandler, menuBuilder, themeAttributes]
+  );
+  const hideContextMenu = useCallback9(() => {
+    console.log("hide context menu");
+  }, []);
+  return [handleShowContextMenu, hideContextMenu];
+};
+var NO_OPTIONS = {};
+var showContextMenuComponent = (position, contextMenu) => {
+  PopupService.showPopup({
+    focus: true,
+    left: 0,
+    top: 0,
+    component: cloneElement(contextMenu, { position })
+  });
+};
+var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
+  position: positionProp,
+  ...contextMenuProps
+} = NO_OPTIONS) => {
+  const menuItems = (menuDescriptors2) => {
+    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsx8(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ jsx8(
+      MenuItem,
+      {
+        action: menuItem.action,
+        className: menuItem.className,
+        "data-icon": menuItem.icon,
+        options: menuItem.options,
+        children: menuItem.label
+      },
+      i
+    );
+    return menuDescriptors2.map(fromDescriptor);
+  };
+  const handleClose = (reason) => {
+    var _a;
+    if (reasonIsMenuAction(reason)) {
+      handleContextMenuAction(reason);
+      PopupService.hidePopup();
+    }
+    (_a = contextMenuProps == null ? void 0 : contextMenuProps.onClose) == null ? void 0 : _a.call(contextMenuProps, reason);
+  };
+  const position = positionProp != null ? positionProp : {
+    x: e.clientX,
+    y: e.clientY
+  };
+  const component = /* @__PURE__ */ jsx8(
+    ContextMenu,
+    {
+      ...contextMenuProps,
+      onClose: handleClose,
+      position,
+      children: menuItems(menuDescriptors)
+    }
+  );
+  PopupService.showPopup({ left: 0, top: 0, component, focus: true });
+};
+
+// src/popup-menu/PopupMenu.tsx
+import {
+  useCallback as useCallback10,
+  useRef as useRef8,
+  useState as useState6
+} from "react";
+import cx7 from "classnames";
+import { Button as Button2 } from "@salt-ds/core";
+import { useId as useId3 } from "@vuu-ui/vuu-layout";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var classBase4 = "vuuPopupMenu";
+var getPosition2 = (element) => {
+  if (element) {
+    const { bottom, left } = element.getBoundingClientRect();
+    return { x: left, y: bottom + 6 };
+  }
+};
+var PopupMenu = ({
+  className,
+  label,
+  icon = label ? "chevron-down" : "more-vert",
+  id: idProp,
+  menuActionHandler,
+  menuBuilder,
+  menuLocation = "header",
+  menuOptions,
+  onMenuClose,
+  tabIndex = 0,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef8(null);
+  const suppressShowMenuRef = useRef8(false);
+  const [menuOpen, setMenuOpen] = useState6(false);
+  const id = useId3(idProp);
+  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const handleOpenMenu = useCallback10((el) => {
+    console.log(`menu Open `, {
+      el
+    });
+  }, []);
+  const handleMenuClose = useCallback10(
+    (reason) => {
+      setMenuOpen(false);
+      if (reasonIsClickAway(reason)) {
+        const target = reason.mouseEvt.target;
+        if (target === rootRef.current) {
+          suppressShowMenuRef.current = true;
+        }
+      } else {
+        requestAnimationFrame(() => {
+          var _a;
+          onMenuClose == null ? void 0 : onMenuClose(reason);
+          if (tabIndex !== -1) {
+            (_a = rootRef.current) == null ? void 0 : _a.focus();
+          }
+        });
+      }
+    },
+    [onMenuClose, tabIndex]
+  );
+  const showMenu = useCallback10(
+    (e) => {
+      if (suppressShowMenuRef.current) {
+        suppressShowMenuRef.current = false;
+      } else {
+        setMenuOpen(true);
+        showContextMenu2(e, menuLocation, {
+          ContextMenuProps: {
+            id: `${id}-menu`,
+            onClose: handleMenuClose,
+            openMenu: handleOpenMenu,
+            position: getPosition2(rootRef.current)
+          },
+          ...menuOptions
+        });
+      }
+    },
+    [
+      handleMenuClose,
+      handleOpenMenu,
+      id,
+      menuLocation,
+      menuOptions,
+      showContextMenu2
+    ]
+  );
+  return /* @__PURE__ */ jsx9(
+    Button2,
+    {
+      ...htmlAttributes,
+      "aria-controls": `${id}-menu-root`,
+      "aria-expanded": menuOpen,
+      "aria-haspopup": "menu",
+      className: cx7(classBase4, className, {
+        [`${classBase4}-withCaption`]: label !== void 0,
+        [`${classBase4}-open`]: menuOpen
+      }),
+      "data-icon": icon,
+      id,
+      onClick: showMenu,
+      ref: rootRef,
+      tabIndex,
+      variant: "secondary",
+      children: label
+    }
+  );
+};
+
+// src/prompt/Prompt.tsx
+import { useThemeAttributes as useThemeAttributes3 } from "@vuu-ui/vuu-shell";
+import { Button as Button3 } from "@salt-ds/core";
+import cx8 from "classnames";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef9 } from "react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase5 = "vuuPrompt";
+var AnchorBody = { current: document.body };
+var EMPTY_PROPS = {};
+var Prompt = ({
+  PopupProps = EMPTY_PROPS,
+  cancelButtonLabel = "Cancel",
+  confirmButtonLabel = "Confirm",
+  icon,
+  onCancel,
+  onConfirm,
+  style,
+  text,
+  title,
+  variant = "info",
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "below"
+  } = PopupProps;
+  const [themeClass, densityClass, dataMode] = useThemeAttributes3();
+  const { position } = useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const rootRef = useRef9(null);
+  const confirmRef = useRef9(null);
+  useLayoutEffect4(() => {
+    if (rootRef.current) {
+      rootRef.current.showModal();
+      if (confirmRef.current) {
+        confirmRef.current.focus();
+      }
+      if (placement.endsWith("center")) {
+        const { width } = rootRef.current.getBoundingClientRect();
+        rootRef.current.style.marginLeft = `-${width / 2}px`;
+      }
+    }
+  }, [placement]);
+  return /* @__PURE__ */ jsx10(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: cx8(classBase5, `${classBase5}-${variant}`, themeClass),
+      "data-mode": dataMode,
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: /* @__PURE__ */ jsxs3("form", { className: `${classBase5}-form`, children: [
+        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-text`, children: text }),
+        /* @__PURE__ */ jsxs3("div", { className: `${classBase5}-buttonBar`, children: [
+          /* @__PURE__ */ jsx10(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
+          /* @__PURE__ */ jsx10(Button3, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/tooltip/useAnchoredPosition.ts
+import { useLayoutEffect as useLayoutEffect5, useState as useState7 } from "react";
+var getPositionRelativeToAnchor2 = (anchorElement, placement, offsetLeft, offsetTop) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  const midX = left + width / 2;
+  const midY = top + height / 2;
+  switch (placement) {
+    case "above":
+      return { left: midX + offsetLeft, top: top + offsetTop };
+    case "below":
+      return { left: midX + offsetLeft, top: bottom + offsetTop };
+    case "right":
+      return { left: right + offsetLeft, top: midY + offsetLeft };
+    case "left":
+      return { left: left + offsetLeft, top: midY + offsetLeft };
+    default:
+      throw Error(
+        "Tooltip getPositionRelativeToAnchor only supported placement values are left, right, below and right"
+      );
+  }
+};
+var useAnchoredPosition2 = ({
+  anchorElement,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement
+}) => {
+  const [position, setPosition] = useState7();
+  useLayoutEffect5(() => {
+    if (anchorElement.current) {
+      const position2 = getPositionRelativeToAnchor2(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, offsetLeft, offsetTop, placement]);
+  return position;
+};
+
+// src/tooltip/Tooltip.tsx
+import cx9 from "classnames";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var classBase6 = "vuuTooltip";
+var Tooltip = ({
+  anchorElement,
+  children,
+  id,
+  onMouseEnter,
+  onMouseLeave,
+  placement,
+  status
+}) => {
+  const position = useAnchoredPosition2({ anchorElement, placement });
+  if (position === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx11(Portal, { children: /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cx9(classBase6, {
+        [`${classBase6}-error`]: status === "error"
+      }),
+      "data-align": placement,
+      id,
+      style: position,
+      children: /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: `${classBase6}-content`,
+          onMouseEnter,
+          onMouseLeave,
+          children
+        }
+      )
+    }
+  ) });
+};
+
+// src/tooltip/useTooltip.ts
+import { useCallback as useCallback11, useRef as useRef10, useState as useState8 } from "react";
+import { useId as useId4 } from "@vuu-ui/vuu-layout";
+var useTooltip = ({
+  id: idProp,
+  placement = "right",
+  tooltipContent
+}) => {
+  const hideTooltipRef = useRef10();
+  const anchorElementRef = useRef10(null);
+  const mouseEnterTimerRef = useRef10();
+  const mouseLeaveTimerRef = useRef10();
+  const [tooltipProps, setTooltipProps] = useState8();
+  const id = useId4(idProp);
+  const escapeListener = useCallback11((evt) => {
+    var _a;
+    if (evt.key === "Escape") {
+      (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+    }
+  }, []);
+  hideTooltipRef.current = useCallback11(() => {
+    setTooltipProps(void 0);
+    document.removeEventListener("keydown", escapeListener);
+  }, [escapeListener]);
+  const handleMouseEnterTooltip = useCallback11(() => {
+    window.clearTimeout(mouseLeaveTimerRef.current);
+  }, []);
+  const handleMouseLeaveTooltip = useCallback11(() => {
+    var _a;
+    (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+  }, []);
+  const showTooltip = useCallback11(() => {
+    const { current: anchorEl } = anchorElementRef;
+    if (anchorEl) {
+      setTooltipProps({
+        anchorElement: anchorElementRef,
+        children: tooltipContent,
+        id: `${id}-tooltip`,
+        onMouseEnter: handleMouseEnterTooltip,
+        onMouseLeave: handleMouseLeaveTooltip,
+        placement
+      });
+      document.addEventListener("keydown", escapeListener);
+    }
+    mouseEnterTimerRef.current = void 0;
+  }, [
+    escapeListener,
+    handleMouseEnterTooltip,
+    handleMouseLeaveTooltip,
+    id,
+    placement,
+    tooltipContent
+  ]);
+  const handleMouseEnter = useCallback11(
+    (evt) => {
+      const el = evt.target;
+      if (el) {
+        anchorElementRef.current = el;
+        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);
+      }
+    },
+    [showTooltip]
+  );
+  const handleMouseLeave = useCallback11(() => {
+    if (anchorElementRef.current)
+      if (mouseEnterTimerRef.current) {
+        window.clearTimeout(mouseEnterTimerRef.current);
+        mouseEnterTimerRef.current = void 0;
+      } else {
+        if (hideTooltipRef.current) {
+          mouseLeaveTimerRef.current = window.setTimeout(
+            hideTooltipRef.current,
+            200
+          );
+        }
+      }
+  }, []);
+  const anchorProps = {
+    "aria-describedby": `${id}-tooltip`,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  };
+  return {
+    anchorProps,
+    tooltipProps
+  };
+};
+
+// src/notifications/NotificationsProvider.tsx
+import React4, { useState as useState9, useContext as useContext2, useCallback as useCallback12, useEffect } from "react";
+import classNames from "classnames";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var toastOffsetTop = 60;
+var toastDisplayDuration = 6e3;
+var horizontalTransitionDuration = 1e3;
+var verticalTransitionDuration = 300;
+var toastHeight = 56;
+var toastWidth = 300;
+var toastContainerContentGap = 10;
+var toastContainerLeftPadding = 10;
+var toastContainerRightPadding = 50;
+var classBase7 = "vuuToastNotifications";
+var NotificationLevel = /* @__PURE__ */ ((NotificationLevel2) => {
+  NotificationLevel2["Info"] = "info";
+  NotificationLevel2["Success"] = "success";
+  NotificationLevel2["Warning"] = "warning";
+  NotificationLevel2["Error"] = "error";
+  return NotificationLevel2;
+})(NotificationLevel || {});
+var NotificationsContext = React4.createContext({
+  notify: () => "have you forgotten to provide a NotificationProvider?"
+});
+var NotificationsProvider = (props) => {
+  const [notifications, setNotifications] = useState9([]);
+  const notify = useCallback12((notification) => {
+    const newNotification = { ...notification, id: getUniqueId() };
+    setNotifications((prev) => [...prev, newNotification]);
+    setTimeout(() => {
+      setNotifications((prev) => prev.filter((n) => n !== newNotification));
+    }, toastDisplayDuration + horizontalTransitionDuration * 2);
+  }, []);
+  return /* @__PURE__ */ jsxs4(NotificationsContext.Provider, { value: { notify }, children: [
+    /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
+        },
+        children: notifications.map((notification, i) => /* @__PURE__ */ jsx12(
+          ToastNotification,
+          {
+            top: toastOffsetTop + (toastHeight + toastContainerContentGap) * i,
+            notification
+          },
+          notification.id
+        ))
+      }
+    ),
+    props.children
+  ] });
+};
+var useNotifications = () => useContext2(NotificationsContext);
+var ToastNotification = (props) => {
+  const { top, notification, animated = true } = props;
+  const [right, setRight] = useState9(-toastWidth - toastContainerRightPadding);
+  useEffect(() => {
+    setTimeout(() => setRight(toastContainerRightPadding));
+    if (animated) {
+      setTimeout(
+        () => setRight(-toastWidth - toastContainerRightPadding),
+        toastDisplayDuration + horizontalTransitionDuration
+      );
+    }
+  }, [animated]);
+  return /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: classNames(`${classBase7}-toast`, notification.type),
+      style: {
+        height: toastHeight,
+        right,
+        width: toastWidth,
+        top,
+        transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: classNames(
+              `${classBase7}-toastIcon`,
+              `${notification.type}-icon`
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: `${classBase7}-toastContent`, children: [
+          /* @__PURE__ */ jsx12("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
+          /* @__PURE__ */ jsx12("div", { children: notification.body })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  ContextMenu,
+  ContextMenuContext,
+  ContextMenuProvider,
+  Dialog,
+  DialogHeader,
+  DialogService,
+  MenuItem,
+  MenuItemGroup,
+  MenuList,
+  NotificationLevel,
+  NotificationsContext,
+  NotificationsProvider,
+  PopupComponent,
+  PopupMenu,
+  PopupService,
+  Portal,
+  Prompt,
+  Separator,
+  ToastNotification,
+  Tooltip,
+  createContainer,
+  isMenuItemLabel,
+  reasonIsClickAway,
+  reasonIsMenuAction,
+  renderPortal,
+  useAnchoredPosition,
+  useContextMenu,
+  useDialog,
+  useNotifications,
+  useTooltip
+};
 //# sourceMappingURL=index.js.map