@worldresources/wri-design-systems 2.197.0 → 2.198.0

package/dist/index.cjs.js

@@ -180,11 +180,11 @@
     font-weight: 400;
     color: ${w("neutral",700)};
   }
-`,xm=({item:t,isLast:n,isChecked:o=!1})=>{return r.jsx(e.Menu.Item,{css:bm,value:t.value||t.label||"",disabled:t.disabled,role:"menuitem","aria-label":t.label,children:t.children?t.children:r.jsxs(r.Fragment,{children:[t.startIcon,r.jsxs("div",{css:(s=!!t.startIcon,a=!!t.endIcon,i.css`
+`,xm=({item:t,isChecked:n=!1})=>{return r.jsx(e.Menu.Item,{css:bm,value:t.value||t.label||"",disabled:t.disabled,role:"menuitem","aria-label":t.label,children:t.children?t.children:r.jsxs(r.Fragment,{children:[t.startIcon,r.jsxs("div",{css:(o=!!t.startIcon,s=!!t.endIcon,i.css`
   width: 100%;
-  margin-left: ${s?k(200):"0"};
-  margin-right: ${a?k(200):"0"};
-`),children:[r.jsxs("div",{css:ym(o),children:[r.jsx("p",{className:"ds-menu-item-label",children:t.label}),t.command?r.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${t.command}`,children:t.command}):null]}),t.caption?r.jsx("p",{className:"ds-menu-item-caption",children:t.caption}):null]}),o?r.jsx(Rf,{}):t.endIcon]})});var s,a},wm=(e,t)=>i.css`
+  margin-left: ${o?k(200):"0"};
+  margin-right: ${s?k(200):"0"};
+`),children:[r.jsxs("div",{css:ym(n),children:[r.jsx("p",{className:"ds-menu-item-label",children:t.label}),t.command?r.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${t.command}`,children:t.command}):null]}),t.caption?r.jsx("p",{className:"ds-menu-item-caption",children:t.caption}):null]}),n?r.jsx(Rf,{}):t.endIcon]})});var o,s},wm=(e,t)=>i.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -236,8 +236,8 @@
     border-bottom: ${j(100)} solid
       ${w("neutral",600)};
   }
-`,km=i.css`
-  width: 14rem;
+`,km=(e="14rem")=>i.css`
+  width: ${"content"===e?"max-content":e};
   border: ${j(100)} solid ${w("neutral",600)};
   box-shadow: 0 0.25rem 0.375rem -0.25rem #0000001a;
   box-shadow: 0 0.625rem 0.9375rem -0.1875rem #0000001a;
@@ -300,7 +300,7 @@
   line-height: ${S(500)};
   font-weight: 700;
   color: ${w("neutral",900)};
-`,jm=({theme:t="light",label:o,hideArrow:i=!1,fontSize:s,items:a,groups:l,onSelect:c,customTrigger:d,selectionMode:u,defaultSelectedValues:h=[]})=>{const[p,f]=n.useState(!1),[m,g]=n.useState(new Set(h)),v=n.useRef(null);return n.useEffect((()=>{if(!p||!v.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||f(!1)}),{threshold:.01});return e.observe(v.current),()=>{e.disconnect()}}),[p]),r.jsxs(e.Menu.Root,{closeOnSelect:"multiple"!==u,onSelect:({value:e})=>{g((t=>{const n=new Set(t);return"radio"===u?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),c&&c(e)},onOpenChange:({open:e})=>f(e),open:p,children:[r.jsx(e.Menu.Trigger,{css:wm(t,s),asChild:!0,children:d||r.jsxs("button",{type:"button",ref:v,children:[o,r.jsx(If,{marginLeft:"0.375rem",rotate:p?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsxs(e.Menu.Content,{css:km,role:"menu","aria-label":o||"Menu",children:[i?null:r.jsx("div",{css:Cm}),a?.map(((t,o)=>{if(t.submenu){const[i,s]=n.useState(!1);return r.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>c&&c(e),onOpenChange:({open:e})=>s(e),open:i,children:[r.jsxs(e.Menu.TriggerItem,{css:Sm,role:"menuitem","aria-haspopup":"true","aria-expanded":i?"true":"false",children:[t.label,r.jsx(If,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{css:km,role:"menu","aria-label":`${t.label} submenu`,children:t.submenu.map(((e,n)=>r.jsx(xm,{item:e,isLast:n===(t.submenu?.length||0)-1},e.value)))})})})]},`${t.value}-${o}`)}return r.jsx(xm,{item:t,isLast:o===a.length-1,isChecked:!!u&&m.has(t.value||t.label||"")},`${t.value}-${o}`)})),l?.map(((t,o)=>r.jsxs(n.Fragment,{children:[r.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[r.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:$m,children:t.title}),t.items?.map((e=>r.jsx(xm,{item:e,isLast:!0,isChecked:!!u&&m.has(e.value||e.label||"")},e.value)))]}),o!==l.length-1?r.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},t.title)))]})})})]})},Em=i.css`
+`,jm=({theme:t="light",label:o,hideArrow:i=!1,fontSize:s,items:a,groups:l,onSelect:c,customTrigger:d,selectionMode:u,defaultSelectedValues:h=[],menuWidth:p="14rem"})=>{const[f,m]=n.useState(!1),[g,v]=n.useState(new Set(h)),b=n.useRef(null);return n.useEffect((()=>{if(!f||!b.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||m(!1)}),{threshold:.01});return e.observe(b.current),()=>{e.disconnect()}}),[f]),r.jsxs(e.Menu.Root,{closeOnSelect:"multiple"!==u,onSelect:({value:e})=>{v((t=>{const n=new Set(t);return"radio"===u?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),c&&c(e)},onOpenChange:({open:e})=>m(e),open:f,children:[r.jsx(e.Menu.Trigger,{css:wm(t,s),asChild:!0,children:d||r.jsxs("button",{type:"button",ref:b,children:[o,r.jsx(If,{marginLeft:"0.375rem",rotate:f?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsxs(e.Menu.Content,{css:km(p),role:"menu","aria-label":o||"Menu",children:[i?null:r.jsx("div",{css:Cm}),a?.map(((t,o)=>{if(t.submenu){const[i,s]=n.useState(!1);return r.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>c&&c(e),onOpenChange:({open:e})=>s(e),open:i,children:[r.jsxs(e.Menu.TriggerItem,{css:Sm,role:"menuitem","aria-haspopup":"true","aria-expanded":i?"true":"false",children:[t.label,r.jsx(If,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{css:km(t.menuWidth),role:"menu","aria-label":`${t.label} submenu`,children:t.submenu.map(((e,t)=>r.jsx(xm,{item:e},e.value)))})})})]},`${t.value}-${o}`)}return r.jsx(xm,{item:t,isChecked:!!u&&g.has(t.value||t.label||"")},`${t.value}-${o}`)})),l?.map(((t,o)=>r.jsxs(n.Fragment,{children:[r.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[r.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:$m,children:t.title}),t.items?.map((e=>r.jsx(xm,{item:e,isChecked:!!u&&g.has(e.value||e.label||"")},e.value)))]}),o!==l.length-1?r.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},t.title)))]})})})]})},Em=i.css`
   &:focus-visible {
     outline: none;
   }
@@ -513,7 +513,8 @@
     }
   }
 `),"aria-label":n,disabled:l,onClick:c,mr:d&&!u?"1rem":"0",mb:d&&u?"1rem":"0",children:r.jsxs(e.Box,{display:"flex",overflow:"hidden",style:{justifyContent:"flex-end",alignItems:"center"},whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",maxWidth:t?"9.375rem":"2rem",padding:"0.5rem",margin:t?"0.5rem":"0",children:[o&&r.jsx(e.Box,{as:"span",mr:o&&t?"0.5rem":"0px",children:r.jsx(Tm,{content:a,disabled:!a,children:o})}),s&&r.jsx(e.Box,{"aria-hidden":!t,overflow:"hidden",maxWidth:t?"9.375rem":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:r.jsx(Tm,{content:a,disabled:!a,children:s})})]})});var h},dg=e=>{const t=u(e),n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return t.endsWith("px")?parseFloat(t)/n:(t.endsWith("rem"),parseFloat(t))};const ug=({items:t,vertical:o=!1,expanded:i=!1,showExpandedToggle:s,autoCollapse:a=!1,ariaLabel:l,defaultGaps:c,labels:d})=>{const u=Ef("Toolbar",d),[h,p]=n.useState(i),{containerRef:f,visibleNumberOfItems:m,shouldForceCollapse:g}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:s=0,showExpandedToggle:a,autoCollapse:l}){const c=n.useRef(null),[d,u]=n.useState(0),[h,p]=n.useState(e),[f,m]=n.useState(!1);return n.useEffect((()=>{if(!c.current)return;const e=new ResizeObserver((e=>{const t=e[0],n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;u(t.contentRect.width/n)}));return e.observe(c.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===d)return;if(!l)return m(!1),void p(e);const n=dg(o),c=dg(i),u=dg(s),h=d-(a?n+u:0),f=n+u;m(e*(t?c+u:f)-u>h),e>1&&!r&&p(Math.floor(h/f))}),[d,e,t,r,o,i,s,a,l]),{containerRef:c,visibleNumberOfItems:h,shouldForceCollapse:f}}({itemsCount:t.length,isExpanded:h,isVertical:o,collapsedWidth:"3rem",expandedLabelWidth:"6.25rem",gap:"1rem",showExpandedToggle:s,autoCollapse:a});n.useEffect((()=>{p(i)}),[i]);const v=t.slice(0,m),b=t.slice(m,t.length),y=b.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),x=r.jsx("div",{style:{position:"relative",display:"flex",width:"3rem"},children:r.jsx(cg,{isExpanded:h,ariaLabel:h?"Collapse":"Expand",icon:r.jsx(Vf,{}),showGap:!1,vertical:o})}),[w,C]=n.useState(!1);return r.jsx("div",{role:"toolbar","aria-label":l,css:ag,children:r.jsxs(e.Group,{ref:f,orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===t.length?"row":"column",children:[v.map((e=>{const t=c&&!1!==e.gap||!c&&!0===e.gap;return r.jsx(cg,{isExpanded:h&&!g,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:t,vertical:o},e.ariaLabel)})),g&&y.length>1&&r.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=b.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>C(e),open:w,children:[r.jsx(e.Menu.Trigger,{asChild:!0,children:x}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:y.map((({label:t,startIcon:n,onClick:i,itemAriaLabel:s},a)=>r.jsx(e.Menu.Item,{css:lg,value:t||l||a.toString(),role:"menuitem",children:r.jsx(cg,{isExpanded:!1,icon:n,ariaLabel:s,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),s&&!a&&!g&&r.jsx(cg,{isExpanded:h,ariaLabel:h?u.collapseAriaLabel:u.expandAriaLabel,icon:h?r.jsx(dm,{}):r.jsx(um,{}),label:u.collapseLabel,onClick:()=>p(!h),showGap:!1,vertical:o})]})})},hg=i.css`
-  width: 12.5rem;
+  width: 100%;
+  max-width: 12.5rem;
   border: ${j(100)} solid ${w("neutral",600)};
   border-radius: ${$(300)};
   padding: ${k(200)};

package/dist/index.d.ts

@@ -686,6 +686,7 @@ type MenuItemProps = {
     submenu?: MenuItemProps[];
     onClick?: () => void;
     link?: string;
+    menuWidth?: string | 'content';
 };
 type MenuProps = {
     theme?: 'light' | 'dark';
@@ -704,9 +705,10 @@ type MenuProps = {
     selectionMode?: 'multiple' | 'radio';
     /** Values that are checked by default on first render. */
     defaultSelectedValues?: string[];
+    menuWidth?: string | 'content';
 };
 
-declare const Menu: ({ theme, label, hideArrow, fontSize, items, groups, onSelect, customTrigger, selectionMode, defaultSelectedValues, }: MenuProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Menu: ({ theme, label, hideArrow, fontSize, items, groups, onSelect, customTrigger, selectionMode, defaultSelectedValues, menuWidth, }: MenuProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     variant?: 'primary' | 'secondary';

package/dist/index.esm.js

@@ -180,11 +180,11 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     font-weight: 400;
     color: ${ze("neutral",700)};
   }
-`,zg=({item:e,isLast:t,isChecked:n=!1})=>{return ye(s.Item,{css:Pg,value:e.value||e.label||"",disabled:e.disabled,role:"menuitem","aria-label":e.label,children:e.children?e.children:be(we,{children:[e.startIcon,be("div",{css:(r=!!e.startIcon,o=!!e.endIcon,$e`
+`,zg=({item:e,isChecked:t=!1})=>{return ye(s.Item,{css:Pg,value:e.value||e.label||"",disabled:e.disabled,role:"menuitem","aria-label":e.label,children:e.children?e.children:be(we,{children:[e.startIcon,be("div",{css:(n=!!e.startIcon,r=!!e.endIcon,$e`
   width: 100%;
-  margin-left: ${r?He(200):"0"};
-  margin-right: ${o?He(200):"0"};
-`),children:[be("div",{css:Ig(n),children:[ye("p",{className:"ds-menu-item-label",children:e.label}),e.command?ye(s.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?ye("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),n?ye(Jm,{}):e.endIcon]})});var r,o},Vg=(e,t)=>$e`
+  margin-left: ${n?He(200):"0"};
+  margin-right: ${r?He(200):"0"};
+`),children:[be("div",{css:Ig(t),children:[ye("p",{className:"ds-menu-item-label",children:e.label}),e.command?ye(s.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?ye("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),t?ye(Jm,{}):e.endIcon]})});var n,r},Vg=(e,t)=>$e`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -236,8 +236,8 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     border-bottom: ${je(100)} solid
       ${ze("neutral",600)};
   }
-`,_g=$e`
-  width: 14rem;
+`,_g=(e="14rem")=>$e`
+  width: ${"content"===e?"max-content":e};
   border: ${je(100)} solid ${ze("neutral",600)};
   box-shadow: 0 0.25rem 0.375rem -0.25rem #0000001a;
   box-shadow: 0 0.625rem 0.9375rem -0.1875rem #0000001a;
@@ -300,7 +300,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
   line-height: ${_e(500)};
   font-weight: 700;
   color: ${ze("neutral",900)};
-`,Fg=({theme:e="light",label:t,hideArrow:n=!1,fontSize:r,items:o,groups:i,onSelect:l,customTrigger:c,selectionMode:d,defaultSelectedValues:u=[]})=>{const[h,p]=le(!1),[f,m]=le(new Set(u)),g=ae(null);return de((()=>{if(!h||!g.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||p(!1)}),{threshold:.01});return e.observe(g.current),()=>{e.disconnect()}}),[h]),be(s.Root,{closeOnSelect:"multiple"!==d,onSelect:({value:e})=>{m((t=>{const n=new Set(t);return"radio"===d?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),l&&l(e)},onOpenChange:({open:e})=>p(e),open:h,children:[ye(s.Trigger,{css:Vg(e,r),asChild:!0,children:c||be("button",{type:"button",ref:g,children:[t,ye(Qm,{marginLeft:"0.375rem",rotate:h?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),ye(a,{children:ye(s.Positioner,{children:be(s.Content,{css:_g,role:"menu","aria-label":t||"Menu",children:[n?null:ye("div",{css:Hg}),o?.map(((e,t)=>{if(e.submenu){const[n,r]=le(!1);return be(s.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>l&&l(e),onOpenChange:({open:e})=>r(e),open:n,children:[be(s.TriggerItem,{css:Bg,role:"menuitem","aria-haspopup":"true","aria-expanded":n?"true":"false",children:[e.label,ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{css:_g,role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((t,n)=>ye(zg,{item:t,isLast:n===(e.submenu?.length||0)-1},t.value)))})})})]},`${e.value}-${t}`)}return ye(zg,{item:e,isLast:t===o.length-1,isChecked:!!d&&f.has(e.value||e.label||"")},`${e.value}-${t}`)})),i?.map(((e,t)=>be(ne.Fragment,{children:[be(s.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[ye(s.ItemGroupLabel,{id:`group-${t}`,css:jg,children:e.title}),e.items?.map((e=>ye(zg,{item:e,isLast:!0,isChecked:!!d&&f.has(e.value||e.label||"")},e.value)))]}),t!==i.length-1?ye(s.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},qg=$e`
+`,Fg=({theme:e="light",label:t,hideArrow:n=!1,fontSize:r,items:o,groups:i,onSelect:l,customTrigger:c,selectionMode:d,defaultSelectedValues:u=[],menuWidth:h="14rem"})=>{const[p,f]=le(!1),[m,g]=le(new Set(u)),v=ae(null);return de((()=>{if(!p||!v.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||f(!1)}),{threshold:.01});return e.observe(v.current),()=>{e.disconnect()}}),[p]),be(s.Root,{closeOnSelect:"multiple"!==d,onSelect:({value:e})=>{g((t=>{const n=new Set(t);return"radio"===d?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),l&&l(e)},onOpenChange:({open:e})=>f(e),open:p,children:[ye(s.Trigger,{css:Vg(e,r),asChild:!0,children:c||be("button",{type:"button",ref:v,children:[t,ye(Qm,{marginLeft:"0.375rem",rotate:p?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),ye(a,{children:ye(s.Positioner,{children:be(s.Content,{css:_g(h),role:"menu","aria-label":t||"Menu",children:[n?null:ye("div",{css:Hg}),o?.map(((e,t)=>{if(e.submenu){const[n,r]=le(!1);return be(s.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>l&&l(e),onOpenChange:({open:e})=>r(e),open:n,children:[be(s.TriggerItem,{css:Bg,role:"menuitem","aria-haspopup":"true","aria-expanded":n?"true":"false",children:[e.label,ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{css:_g(e.menuWidth),role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((e,t)=>ye(zg,{item:e},e.value)))})})})]},`${e.value}-${t}`)}return ye(zg,{item:e,isChecked:!!d&&m.has(e.value||e.label||"")},`${e.value}-${t}`)})),i?.map(((e,t)=>be(ne.Fragment,{children:[be(s.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[ye(s.ItemGroupLabel,{id:`group-${t}`,css:jg,children:e.title}),e.items?.map((e=>ye(zg,{item:e,isChecked:!!d&&m.has(e.value||e.label||"")},e.value)))]}),t!==i.length-1?ye(s.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},qg=$e`
   &:focus-visible {
     outline: none;
   }
@@ -513,7 +513,8 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     }
   }
 `),"aria-label":t,disabled:a,onClick:l,mr:c&&!d?"1rem":"0",mb:c&&d?"1rem":"0",children:be(r,{display:"flex",overflow:"hidden",style:{justifyContent:"flex-end",alignItems:"center"},whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",maxWidth:e?"9.375rem":"2rem",padding:"0.5rem",margin:e?"0.5rem":"0",children:[o&&ye(r,{as:"span",mr:o&&e?"0.5rem":"0px",children:ye(Ug,{content:s,disabled:!s,children:o})}),i&&ye(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"9.375rem":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:ye(Ug,{content:s,disabled:!s,children:i})})]})});var u},Ov=e=>{const t=Me(e),n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return t.endsWith("px")?parseFloat(t)/n:(t.endsWith("rem"),parseFloat(t))};const Lv=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,autoCollapse:o=!1,ariaLabel:i,defaultGaps:l,labels:c})=>{const d=qm("Toolbar",c),[u,h]=le(n),{containerRef:p,visibleNumberOfItems:f,shouldForceCollapse:g}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:o,gap:i=0,showExpandedToggle:s,autoCollapse:a}){const l=ae(null),[c,d]=le(0),[u,h]=le(e),[p,f]=le(!1);return de((()=>{if(!l.current)return;const e=new ResizeObserver((e=>{const t=e[0],n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;d(t.contentRect.width/n)}));return e.observe(l.current),()=>e.disconnect()}),[]),de((()=>{if(0===c)return;if(!a)return f(!1),void h(e);const l=Ov(r),d=Ov(o),u=Ov(i),p=c-(s?l+u:0),m=l+u;f(e*(t?d+u:m)-u>p),e>1&&!n&&h(Math.floor(p/m))}),[c,e,t,n,r,o,i,s,a]),{containerRef:l,visibleNumberOfItems:u,shouldForceCollapse:p}}({itemsCount:e.length,isExpanded:u,isVertical:t,collapsedWidth:"3rem",expandedLabelWidth:"6.25rem",gap:"1rem",showExpandedToggle:r,autoCollapse:o});de((()=>{h(n)}),[n]);const v=e.slice(0,f),b=e.slice(f,e.length),y=b.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),w=ye("div",{style:{position:"relative",display:"flex",width:"3rem"},children:ye(Tv,{isExpanded:u,ariaLabel:u?"Collapse":"Expand",icon:ye(ng,{}),showGap:!1,vertical:t})}),[C,x]=le(!1);return ye("div",{role:"toolbar","aria-label":i,css:Ev,children:be(m,{ref:p,orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[v.map((e=>{const n=l&&!1!==e.gap||!l&&!0===e.gap;return ye(Tv,{isExpanded:u&&!g,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),g&&y.length>1&&be(s.Root,{onSelect:({value:e})=>(e=>{const t=b.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>x(e),open:C,children:[ye(s.Trigger,{asChild:!0,children:w}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{style:{minWidth:0,padding:0},children:y.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:o},a)=>ye(s.Item,{css:Mv,value:e||i||a.toString(),role:"menuitem",children:ye(Tv,{isExpanded:!1,icon:n,ariaLabel:o,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!o&&!g&&ye(Tv,{isExpanded:u,ariaLabel:u?d.collapseAriaLabel:d.expandAriaLabel,icon:ye(u?Mg:Tg,{}),label:d.collapseLabel,onClick:()=>h(!u),showGap:!1,vertical:t})]})})},Av=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:o,onSettingsClick:i,onQuestionClick:s,vertical:a,expanded:l,showExpandedToggle:c,ariaLabel:d,labels:u})=>{const h=qm("MapControlsToolbar",u),p=[{icon:Y(dg,{}),label:h.zoomInLabel,ariaLabel:h.zoomInAriaLabel,onClick:e},{icon:Y(ug,{}),label:h.zoomOutLabel,ariaLabel:h.zoomOutAriaLabel,onClick:t,gap:!0},{icon:Y(hg,{}),label:h.expandLabel,ariaLabel:h.expandAriaLabel,onClick:n,gap:!0},{icon:Y(pg,{}),label:h.shareLabel,ariaLabel:h.shareAriaLabel,onClick:r,gap:!0},{icon:Y(fg,{}),label:h.printLabel,ariaLabel:h.printAriaLabel,onClick:o,gap:!0},{icon:Y(mg,{}),label:h.settingsLabel,ariaLabel:h.settingsAriaLabel,onClick:i,gap:!0},{icon:Y(gg,{}),label:h.helpLabel,ariaLabel:h.helpAriaLabel,onClick:s}];return Y(Lv,{items:p,vertical:a,expanded:l,showExpandedToggle:c,ariaLabel:d||h.toolbarAriaLabel})},Nv=$e`
-  width: 12.5rem;
+  width: 100%;
+  max-width: 12.5rem;
   border: ${je(100)} solid ${ze("neutral",600)};
   border-radius: ${Be(300)};
   padding: ${He(200)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldresources/wri-design-systems",
-  "version": "2.197.0",
+  "version": "2.198.0",
   "description": "WRI UI Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",