@maxio-com/react-ui-components 1.5.1 → 1.6.0

package/dist/index.esm.js

@@ -1 +1 @@
-import a from"react";import r from"classnames";const t=({className:t,src:m,alt:s="avatar"})=>a.createElement("img",{className:r("maxio-avatar",t),alt:s,src:m});export{t as Avatar};
+import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as o,useId as r,useCallback as l,useMemo as s,forwardRef as c}from"react";import m from"classnames";import{AnimatePresence as d,motion as u}from"framer-motion";import{useClick as p,useHover as h,useFocus as v,useDismiss as g,useFloating as E,offset as x,useInteractions as f,useRole as _,FloatingPortal as N}from"@floating-ui/react-dom-interactions";const b=({variant:t,white:a,className:n})=>e.createElement("i",{className:m("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),w=({items:t,isShadowed:a=!0})=>{const n=m("maxio-action-list",{"maxio-action-list--shadow":a});return 0===t.length?null:e.createElement("ul",{className:n},t.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:r,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(b,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),r&&e.createElement("span",{className:"maxio-action-list__description"},r),i&&e.createElement(b,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},y=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:m("maxio-avatar",t),alt:n,src:a}),k=t({}),O=({children:t})=>{const[n,i]=a(!1);return e.createElement(k.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const I=({children:t})=>{const{isOpen:a,onToggle:i,onClose:o}=function(){const e=n(k);if(!e||"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:a,onToggle:i,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:o}):t)},C=({children:t})=>e.createElement(O,null,e.createElement(I,null,t)),S=({items:t,alignItemsEnd:a=!1})=>{const n=m("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(w,{items:t}))},$=({children:t,iconName:a="chevron-down"})=>{const n=m({"maxio-action-menu__chevron":"chevron-down"===a});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},t&&e.createElement("span",null,t),a&&e.createElement(b,{variant:a,className:n})))},T=({icon:t,variant:a="default"})=>e.createElement("i",{className:m("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),P={click:p,hover:h,focus:v,dismiss:g},D=(e,t)=>t.map((t=>P[t](e))),W=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:h}=E({placement:e,open:t,onOpenChange:e=>r(e),middleware:[x(n)]}),{getReferenceProps:v,getFloatingProps:g}=f([...D(u,a),_(u,{role:"tooltip"})]);o((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>r(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:h},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:v,getFloatingProps:g}};function H(e,t=0){const n=i((new Date).getTime()),r=i((new Date).getTime()),[l,s]=a(!1);return o((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{r.current=(new Date).getTime(),setTimeout((()=>{n.current-r.current<=0&&s(!1)}),t)},o=e&&e.current;return o&&(o.addEventListener("mouseenter",a),o.addEventListener("mouseleave",i)),()=>{o&&(o.removeEventListener("mouseenter",a),o.removeEventListener("mouseleave",i))}}),[e]),l}function F(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),r=i(null);return o((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(r.current),r.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const z=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:o=["hover"],role:r="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:p,onOverlayUpdate:h,className:v})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:x,reference:f},floatingElementCSSPosition:_}=W({role:r,isActive:n,onOverlayUpdate:h,autoHideMs:p,floatingElementOffset:s,interactions:o,placement:i}),b=e.createElement(d,null,n&&e.createElement(u.div,{ref:x,style:_,...c,...E()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,className:m("maxio-inline-flex",v),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(N,{id:"maxio-ui-portal"},b):b)},M=({children:t,loading:a=!1,loadingText:n,fullWidth:i=!1,className:o,variant:r="primary",size:l="lg",disabled:s,rightIcon:c,leftIcon:d,...u})=>{const p=m("maxio-button",o,{[`maxio-button--${l}`]:"lg"!==l&&!!t,[`maxio-button--icon-${l}`]:!t,[`maxio-button--${r}`]:"primary"!==r,"maxio-button--loading":a,"maxio-button--full-width":i}),h=m("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:s,...u,className:p},!a&&d,a&&"string"==typeof n?n:t,!a&&c,a&&e.createElement("div",{className:h}))},V=({icon:t,...a})=>e.createElement(M,{rightIcon:t,...a},null),A=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:o,valueDescriptionPosition:s,className:c,name:d,id:u})=>{const p=r(),h="boolean"==typeof t,v=u||p,g="left"===s?"row":"row-reverse",E=o&&s,x=l((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;h&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[h,n]);return e.createElement("div",{className:m("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},E?e.createElement("label",{className:"maxio-toggle__label",htmlFor:v},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:t,checked:a,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:x,disabled:i,"aria-label":E?void 0:o,className:"maxio-toggle__checkbox",id:v,name:d}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},L=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:m("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),U={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},B=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:o=160,size:r="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:h,floatingElementOffset:v=5})=>{const[g,E]=a(!1),x=void 0!==d,f=l((e=>{x||E(e),h&&h(e)}),[d]),_=s((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(z,{role:"tooltip",className:p,floatingElementOffset:v,motionSettings:_,isActive:x?d:g,onOverlayUpdate:f,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(L,{size:r,arrowPosition:U[i],maxWidth:o},c())},t)},R=({children:t,as:a,iconName:n,noPadding:i,className:o,...r})=>{const l=a||"button",s=m("maxio-header-button",o,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...r},e.createElement("div",{className:"maxio-header-button__content"},t||null,n&&e.createElement(b,{variant:n})))},j=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:a,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${a}`},e.createElement("a",{className:m("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),K=c((({className:t,...a},n)=>e.createElement("div",{className:m("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(b,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));K.displayName="SearchField";const X=c((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(b,{variant:"chevron-down"})))));X.displayName="SearchMenu";const Y=({options:t,onSubmit:a})=>{const n=i(null),o=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,i;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(i=o.current)||void 0===i?void 0:i.value)||""})}},e.createElement(X,{ref:o,options:t}),e.createElement(K,{ref:n}),e.createElement(R,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},q=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(B,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(b,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(b,{variant:a}))),G=t({}),J=()=>n(G),Q=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:r=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!r||("undefined"==typeof window||window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),h=()=>m(!1),{windowWitdh:v}=F();o((()=>{!function(e){if(!r)return;e<s&&c&&g();e>s&&!c&&E()}(v)}),[v]),o((()=>{c?E():g()}),[]);return e.createElement(G.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=x();u((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:h,onToggle:()=>m((e=>!e)),withIcons:n}},t);function g(){const e=x();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),h())}function E(){const e=x();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),p())}function x(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},Z=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=J(),{mainItem:o,otherItems:r,actions:l}=a,c=i(null),m=H(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...r.map(d),r.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,r]),p=r.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:o.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},o.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},o.url?e.createElement(e.Fragment,null,e.createElement(q,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:o.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},o.title)):e.createElement(q,{type:"menu",trailingIcon:"chevron-down"},o.title)),e.createElement(w,{items:u})))},ee=({section:t})=>{const{isOpen:a}=J(),n=i(null),o=H(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(q,{isTooltipVisible:o&&!a,type:"menu",leadingIcon:t.icon},t.name)))},te=({section:t})=>{var a;const{onOpen:n,onSectionOpen:o,isOpen:r,withIcons:l}=J();const s=i(null),c=H(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ee,{section:t}):e.createElement("li",{className:m("maxio-side-nav__item",{"maxio-side-nav__item--active":t.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){o(t.name),n()}},e.createElement(q,{type:"menu",isTooltipVisible:!r&&c,leadingIcon:t.icon,trailingIcon:(null===(a=t.items)||void 0===a?void 0:a.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},ae=()=>{const{sections:t}=J();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(te,{key:`section-${t.name}`,section:t}))))},ne=()=>{const{isOpen:t}=J();return e.createElement("nav",{className:m("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(Z,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(ae,null))},ie=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(Q,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(ne,null)),oe=({as:t="div",children:a,compact:n=!1,size:i="md",className:o,...r})=>{const l=t,s=m({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},o);return e.createElement(l,{className:s,...r},a)},re={sm:"h3",md:"h2",lg:"h1"},le=({children:t,size:a="sm",className:n,...i})=>{const o=re[a],r=m(`maxio-heading-${a}`,n);return e.createElement(o,{className:r,...i},t)},se=({as:t="div",children:a,size:n="md",className:i,...o})=>{const r=t,l=m(`maxio-display-${n}`,i);return e.createElement(r,{className:l,...o},a)},ce=({as:t="div",children:a,className:n,...i})=>{const o=t,r=m("maxio-code",n);return e.createElement(o,{className:r,...i},a)},me=({as:t="div",children:a,size:n="sm",className:i,...o})=>{const r=t,l=m(`maxio-label-${n}`,i);return e.createElement(r,{className:l,...o},a)};export{w as ActionList,y as Avatar,oe as Body,T as BrandLogo,M as Button,ce as Code,se as Display,R as HeaderButton,j as HeaderNav,K as HeaderSearchField,Y as HeaderSearchInput,X as HeaderSearchMenu,le as Heading,b as Icon,V as IconButton,me as Label,C as Menu,$ as MenuButton,S as MenuList,z as OverlayTrigger,ie as SideNav,A as Toggle,L as Tooltip,B as TooltipTrigger,H as useHover,W as useOverlayTrigger,F as useWindowSize};

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("react"),e=require("classnames");exports.Avatar=({className:r,src:s,alt:t="avatar"})=>a.createElement("img",{className:e("maxio-avatar",r),alt:t,src:s});
+"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions");const i=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const o=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:o},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:o,label:r,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(i,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),s&&e.createElement("span",{className:"maxio-action-list__description"},s),o&&e.createElement(i,{variant:o,className:"maxio-action-list__trailing-icon"})))})))},r=e.createContext({}),s=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(r.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const l=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(r);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},c={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},m=(e,t)=>t.map((t=>c[t](e))),d=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:o=0,onOverlayUpdate:r,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:d,y:u,context:p,floating:v,reference:h}=n.useFloating({placement:t,open:a,onOpenChange:e=>r(e),middleware:[n.offset(o)]}),{getReferenceProps:g,getFloatingProps:x}=n.useInteractions([...m(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>r(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:v,reference:h},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=d?d:0},getReferenceProps:g,getFloatingProps:x}};function u(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[o,r]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),r(!0)},o=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&r(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",o)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",o))}}),[t]),o}function p(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const v=({children:i,usePortal:o=!1,isActive:r=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:u,motionSettings:p={},autoHideMs:v,onOverlayUpdate:h,className:g})=>{const{getReferenceProps:x,getFloatingProps:f,refs:{floating:E,reference:_},floatingElementCSSPosition:N}=d({role:c,isActive:r,onOverlayUpdate:h,autoHideMs:v,floatingElementOffset:u,interactions:l,placement:s}),b=e.createElement(a.AnimatePresence,null,r&&e.createElement(a.motion.div,{ref:E,style:N,...p,...f()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:t("maxio-inline-flex",g),...x(),"data-testid":"overlay-trigger"},i),o?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},b):b)},h=({children:a,loading:n=!1,loadingText:i,fullWidth:o=!1,className:r,variant:s="primary",size:l="lg",disabled:c,rightIcon:m,leftIcon:d,...u})=>{const p=t("maxio-button",r,{[`maxio-button--${l}`]:"lg"!==l&&!!a,[`maxio-button--icon-${l}`]:!a,[`maxio-button--${s}`]:"primary"!==s,"maxio-button--loading":n,"maxio-button--full-width":o}),v=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(s)});return e.createElement("button",{disabled:c,...u,className:p},!n&&d,n&&"string"==typeof i?i:a,!n&&m,n&&e.createElement("div",{className:v}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:o=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:o}},a)),x={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},f=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:o="regular",renderContent:r,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,h]=e.useState(!1),f=void 0!==l,E=e.useCallback((e=>{f||h(e),d&&d(e)}),[l]),_=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:_,isActive:f?l:p,onOverlayUpdate:E,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:o,arrowPosition:x[n],maxWidth:i},r())},t)},E=({children:a,as:n,iconName:o,noPadding:r,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":r});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(i,{variant:o})))},_=e.forwardRef((({className:a,...n},o)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(i,{variant:"search"})),e.createElement("input",{ref:o,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const N=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(i,{variant:"chevron-down"})))));N.displayName="SearchMenu";const b=({leadingIcon:t,trailingIcon:a,type:n="menu",children:o,leadingIconClassName:r,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>o,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(i,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},o),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(i,{variant:a}))),w=e.createContext({}),y=()=>e.useContext(w),k=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:o,collapseBreakpoint:r=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>r))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:v}=p();e.useEffect((()=>{!function(e){if(!i)return;e<r&&s&&h();e>r&&!s&&g()}(v)}),[v]),e.useEffect((()=>{s?g():h()}),[]);return e.createElement(w.Provider,{value:{sections:c,topDropdownItems:o,onSectionOpen:e=>{const t=x();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function h(){const e=x();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function g(){const e=x();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function x(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},O=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=y(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=u(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),p=r.length+s.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(b,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(b,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},C=({section:t})=>{const{isOpen:a}=y(),n=e.useRef(null),i=u(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(b,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},I=({section:a})=>{var n;const{onOpen:i,onSectionOpen:o,isOpen:r,withIcons:s}=y();const l=e.useRef(null),c=u(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(C,{section:a}):e.createElement("li",{className:t("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":s}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:l,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){o(a.name),i()}},e.createElement(b,{type:"menu",isTooltipVisible:!r&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},S=()=>{const{sections:t}=y();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(I,{key:`section-${t.name}`,section:t}))))},T=()=>{const{isOpen:a}=y();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(O,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"};exports.ActionList=o,exports.Avatar=({className:a,src:n,alt:i="avatar"})=>e.createElement("img",{className:t("maxio-avatar",a),alt:i,src:n}),exports.Body=({as:a="div",children:n,compact:i=!1,size:o="md",className:r,...s})=>{const l=a,c=t({[`maxio-body-${o}`]:!i,[`maxio-body-${o}-compact`]:i},r);return e.createElement(l,{className:c,...s},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Code=({as:a="div",children:n,className:i,...o})=>{const r=a,s=t("maxio-code",i);return e.createElement(r,{className:s,...o},n)},exports.Display=({as:a="div",children:n,size:i="md",className:o,...r})=>{const s=a,l=t(`maxio-display-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.HeaderButton=E,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...o})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...o},a))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,o;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(o=i.current)||void 0===o?void 0:o.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(E,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...o})=>{const r=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(r,{className:s,...o},a)},exports.Icon=i,exports.IconButton=({icon:t,...a})=>e.createElement(h,{rightIcon:t,...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:o,...r})=>{const s=a,l=t(`maxio-label-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.Menu=({children:t})=>e.createElement(s,null,e.createElement(l,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const o=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(i,{variant:n,className:o})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=v,exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(k,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(T,null)),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:o,valueDescription:r,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,v="left"===s?"row":"row-reverse",h=r&&s,g=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("maxio-toggle",l,{"maxio-toggle--disabled":o}),style:{display:"inline-flex",flexDirection:v},"data-testid":"toggle-container"},h?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:g,disabled:o,"aria-label":h?void 0:r,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=f,exports.useHover=u,exports.useOverlayTrigger=d,exports.useWindowSize=p;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
     "classnames": "^2.3.2",
     "framer-motion": "^7.6.4"
   },
-  "gitHead": "bc7075a72a1ffd8880f5de4c69190e97815cbc72"
+  "gitHead": "74b7b015739d8b8062ab6e3eab1f43865120eca9"
 }

package/typings/index.d.ts

@@ -1,4 +1,43 @@
 /// <reference types="react" />
+import * as React$1 from 'react';
+import React__default, { ReactNode, RefObject, FC, ElementType } from 'react';
+import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
+import { AnimationProps } from 'framer-motion';
+
+declare const ICONS: readonly ["address-card", "arrow-down", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-right", "arrow-right", "arrow-up", "arrow-up-left", "arrow-up-right", "bank", "bar-chart", "briefcase", "building", "business-intelligence", "chat", "check", "check-circle", "chevron-down", "circle-dash", "circle-fill", "circle-stroke", "clipboard", "cloud", "cog", "copy-file", "credit-card", "cross", "cross-circle", "dashboard", "document", "document-blank", "dollar", "edit", "error", "globe", "graph", "home", "info-circle", "life-buoy", "list", "login", "logout", "megaphone", "menu", "menu-chevron-left", "menu-chevron-right", "notification", "notification-unread", "plus", "plus-circle", "profile", "question-circle", "recently-viewed", "search", "trash", "warning-circle"];
+
+declare type IconVariant = (typeof ICONS)[number];
+declare type IconProps = {
+    className?: string;
+    variant: IconVariant;
+    white?: boolean;
+};
+
+declare const Icon: ({ variant, white, className }: IconProps) => JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map
+
+interface DividerListItem {
+    id: string | number;
+    type: 'divider';
+}
+interface ListItem {
+    type?: 'default';
+    id?: string | number;
+    label: string;
+    description?: string;
+    leadingIconName?: IconVariant;
+    trailingIconName?: IconVariant;
+    link: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
+}
+declare type ActionListItem = ListItem | DividerListItem;
+interface ActionListProps {
+    items: ActionListItem[];
+    isShadowed?: boolean;
+}
+
+declare const ActionList: ({ items, isShadowed }: ActionListProps) => JSX.Element;
+//# sourceMappingURL=ActionList.d.ts.map
+
 declare type AvatarProps = {
     className?: string;
     src: string;
@@ -8,4 +47,268 @@ declare type AvatarProps = {
 declare const Avatar: ({ className, src, alt }: AvatarProps) => JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map
 
-export { Avatar };
+interface MenuProps {
+    children: ReactNode | (({ isOpen, onClose, }: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode);
+}
+declare const Menu: ({ children }: MenuProps) => JSX.Element;
+
+interface MenuListProps {
+    items: ActionListItem[];
+    alignItemsEnd?: boolean;
+}
+declare const MenuList: ({ items, alignItemsEnd }: MenuListProps) => JSX.Element;
+//# sourceMappingURL=MenuList.d.ts.map
+
+interface MenuButtonProps {
+    children?: ReactNode;
+    iconName?: IconVariant;
+}
+declare const MenuButton: ({ children, iconName, }: MenuButtonProps) => JSX.Element;
+//# sourceMappingURL=MenuButton.d.ts.map
+
+declare const LOGOS: readonly ["avalara", "chargify", "hubspot", "netsuite", "pipedrive", "quickbooks", "sage", "saasoptics", "salesforce", "xero"];
+declare type BrandLogoVariant = 'default' | 'white' | 'grayscale';
+declare type BrandLogoIcon = (typeof LOGOS)[number];
+declare type BrandLogoProps = {
+    icon: BrandLogoIcon;
+    variant?: BrandLogoVariant;
+};
+
+declare const BrandLogo: ({ icon, variant }: BrandLogoProps) => JSX.Element;
+//# sourceMappingURL=BrandLogo.d.ts.map
+
+declare type Alignment = 'start' | 'end';
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+declare type AlignedPlacement = `${Side}-${Alignment}`;
+declare type Placement = Side | AlignedPlacement;
+declare type Interactions = 'click' | 'hover' | 'focus' | 'dismiss';
+declare type OverlayAriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
+
+declare type OverlayTriggerSettings = {
+    placement?: Placement;
+    isInitiallyActive?: boolean;
+    interactions?: Interactions[];
+    floatingElementOffset?: number;
+    role: OverlayAriaRole;
+    isActive?: boolean;
+    onOverlayUpdate: (isActive: boolean) => void;
+    autoHideMs?: number;
+};
+declare const useOverlayTrigger: ({ placement, isActive, interactions, floatingElementOffset, onOverlayUpdate, autoHideMs, }: OverlayTriggerSettings) => {
+    isActive: boolean;
+    refs: {
+        floating: (node: HTMLElement) => void;
+        reference: (node: _floating_ui_react_dom_interactions.ReferenceType) => void;
+    };
+    floatingElementCSSPosition: {
+        position: _floating_ui_react_dom_interactions.Strategy;
+        top: number;
+        left: number;
+    };
+    getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+
+declare function useHover<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, mouseLeaveDelay?: number): boolean;
+
+declare function useWindowSize(debounce?: number): {
+    windowWitdh: number;
+    windowHeight: number;
+};
+
+declare type OverlayTriggerProps = {
+    children: React__default.ReactNode;
+    placement?: Placement;
+    usePortal?: boolean;
+    interactions?: Interactions[];
+    renderOverlay: () => React__default.ReactNode;
+    role?: OverlayAriaRole;
+    floatingElementOffset?: number;
+    isActive?: boolean;
+    onOverlayUpdate: (isActive: boolean) => void;
+    motionSettings?: AnimationProps;
+    autoHideMs?: number;
+    className?: string;
+};
+declare const OverlayTrigger: FC<OverlayTriggerProps>;
+
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' | 'skeleton';
+declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    loading?: boolean;
+    loadingText?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+}
+
+declare const Button: ({ children, loading, loadingText, fullWidth, className, variant, size, disabled, rightIcon, leftIcon, ...props }: ButtonProps) => JSX.Element;
+//# sourceMappingURL=Button.d.ts.map
+
+declare type IconButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'loadingText' | 'fullWidth' | 'children'> & {
+    icon: ReactNode;
+};
+
+declare const IconButton: ({ icon, ...props }: IconButtonProps) => JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map
+
+declare type ToggleProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (value: boolean, event?: React__default.ChangeEvent<HTMLInputElement> | React__default.KeyboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    name?: string;
+    valueDescription?: string;
+    valueDescriptionPosition?: 'left' | 'right';
+    className?: string;
+    id?: string;
+};
+declare const Toggle: ({ defaultChecked, checked, onChange, disabled, valueDescription, valueDescriptionPosition, className, name, id, }: ToggleProps) => JSX.Element;
+
+declare type ArrowPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
+
+declare type TooltipProps = {
+    children: React__default.ReactNode;
+    size?: 'regular' | 'small';
+    arrowPosition?: ArrowPosition;
+    maxWidth?: number | 'none';
+};
+declare const Tooltip: FC<TooltipProps>;
+
+declare type TooltipTriggerProps = {
+    children: React__default.ReactNode;
+    isVisible?: boolean;
+    onVisibilityUpdate?: (isVisible: boolean) => void;
+    renderContent: () => React__default.ReactNode;
+    floatingElementOffset?: number;
+} & Pick<OverlayTriggerProps, 'placement' | 'interactions' | 'usePortal' | 'autoHideMs' | 'className'> & Pick<TooltipProps, 'size' | 'maxWidth'>;
+declare const TooltipTrigger: FC<TooltipTriggerProps>;
+
+interface HeaderButtonProps<T extends React__default.ElementType> {
+    className?: string;
+    children?: React__default.ReactNode;
+    iconName?: IconVariant;
+    as?: T;
+    noPadding?: boolean;
+}
+declare const HeaderButton: <T extends React__default.ElementType<any> = "button">({ children, as, iconName, noPadding, className, ...props }: HeaderButtonProps<T> & Omit<React__default.PropsWithoutRef<React__default.ComponentProps<T>>, keyof HeaderButtonProps<T>>) => JSX.Element;
+
+interface HeaderNavItem extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'id'> {
+    id: string | number;
+    label: string;
+    isActive?: boolean;
+}
+interface HeaderNavProps {
+    items: HeaderNavItem[];
+}
+declare const HeaderNav: ({ items }: HeaderNavProps) => JSX.Element;
+//# sourceMappingURL=HeaderNav.d.ts.map
+
+declare const SearchField: React__default.ForwardRefExoticComponent<Pick<React__default.HTMLProps<HTMLInputElement>, "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React__default.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=SearchField.d.ts.map
+
+interface SearchMenuOption {
+    label: string;
+    value: string;
+}
+interface SearchMenuProps extends React__default.HTMLProps<HTMLSelectElement> {
+    options: SearchMenuOption[];
+}
+declare const SearchMenu: React__default.ForwardRefExoticComponent<Pick<SearchMenuProps, "options" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React__default.RefAttributes<HTMLSelectElement>>;
+
+interface SearchInputProps {
+    onSubmit: ({ searchField, selectField, }: {
+        selectField: string;
+        searchField: string;
+    }) => void;
+    options: SearchMenuOption[];
+}
+declare const SearchInput: ({ options, onSubmit }: SearchInputProps) => JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map
+
+interface SingleSection {
+    href?: string;
+    icon: IconVariant | null;
+    name: string;
+    key: string;
+    isCurrent?: boolean;
+    options?: {
+        upgradePlan: boolean;
+        text: string;
+    } | null;
+}
+interface SingleSectionWithItems extends SingleSection {
+    isOpen?: boolean;
+    items?: SingleSection[];
+}
+declare type SectionComponent = React.FC<{
+    section: SingleSectionWithItems;
+}>;
+interface Section extends SingleSectionWithItems {
+    Component?: SectionComponent;
+}
+interface SideNavProviderProps {
+    children: ReactNode;
+    withIcons?: boolean;
+    shouldToggleSidebar?: boolean;
+    sections: Section[];
+    collapseBreakpoint?: number;
+    topDropdownItems: SideNavTopDropdown;
+}
+interface SideNavTopDropdown {
+    mainItem: SideNavTopDropdownItem;
+    otherItems: SideNavTopDropdownItem[];
+    actions: SideNavTopDropdownItem[];
+}
+interface SideNavTopDropdownItem {
+    title: string;
+    icon: IconVariant;
+    url: string;
+    rel?: string;
+}
+
+declare const SideNavWrapper: ({ withIcons, shouldToggleSidebar, topDropdownItems, sections, collapseBreakpoint, }: Pick<SideNavProviderProps, 'withIcons' | 'shouldToggleSidebar' | 'topDropdownItems' | 'sections' | 'collapseBreakpoint'>) => JSX.Element;
+//# sourceMappingURL=SideNav.d.ts.map
+
+declare type BaseTypographyProps = {
+    className?: string;
+    children: ReactNode;
+};
+
+declare type BodyProps = BaseTypographyProps & {
+    as?: ElementType;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    compact?: boolean;
+};
+declare const Body: ({ as, children, compact, size, className, ...rest }: BodyProps) => JSX.Element;
+
+declare type HeadingProps = BaseTypographyProps & {
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Heading: ({ children, size, className, ...rest }: HeadingProps) => JSX.Element;
+
+declare type DisplayProps = BaseTypographyProps & {
+    as?: ElementType;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Display: ({ as, children, size, className, ...rest }: DisplayProps) => JSX.Element;
+
+declare type CodeProps = BaseTypographyProps & {
+    as?: ElementType;
+};
+declare const Code: ({ as, children, className, ...rest }: CodeProps) => JSX.Element;
+
+declare type LabelProps = BaseTypographyProps & {
+    as?: ElementType;
+    size?: 'xs' | 'sm';
+};
+declare const Label: ({ as, children, size, className, ...rest }: LabelProps) => JSX.Element;
+
+export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, SideNavWrapper as SideNav, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };