@worldresources/wri-design-systems 2.150.0 → 2.152.0

package/dist/index.cjs.js

@@ -213,7 +213,7 @@
       }
     }
   }
-`),"aria-label":o,disabled:l,onClick:c,mr:u&&!d?"16px":"0",mb:u&&d?"16px":"0",children:t.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:n?"150px":"32px",padding:"8px",margin:n?"8px":"0",children:[i&&t.jsx(e.Box,{as:"span",mr:i&&n?"8px":"0px",children:t.jsx(ue,{content:s,disabled:!s,children:i})}),a&&t.jsx(e.Box,{"aria-hidden":!n,overflow:"hidden",maxWidth:n?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:t.jsx(ue,{content:s,disabled:!s,children:a})})]})});var p};const pe=({items:r,vertical:o=!1,expanded:i=!1,showExpandedToggle:a,ariaLabel:s,defaultGaps:l})=>{const[c,u]=n.useState(i),{containerRef:d,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:a=0}){const s=n.useRef(null),[l,c]=n.useState(0),[u,d]=n.useState(e),[p,h]=n.useState(!1);return n.useEffect((()=>{if(!s.current)return;const e=new ResizeObserver((e=>{const t=e[0];c(Math.floor(t.contentRect.width))}));return e.observe(s.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===l)return;const n=o+a;h(e*(t?i+a:n)-a>l),r||d(Math.floor(l/n))}),[l,e,r,o,i,a]),{containerRef:s,visibleNumberOfItems:u,shouldForceCollapse:p}}({itemsCount:r.length,isExpanded:c,isVertical:o,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=r.slice(0,p),x=r.slice(p,r.length),g=x.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),v=t.jsx("div",{style:{position:"relative",display:"flex",width:"48px"},children:t.jsx(de,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:t.jsx(R,{}),showGap:!1,vertical:o})}),[m,b]=n.useState(!1);return t.jsx("div",{ref:d,role:"toolbar","aria-label":s,css:ae,children:t.jsxs(e.Group,{orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===r.length?"row":"column",children:[f.map((e=>{const n=l&&!1!==e.gap||!l&&!0===e.gap;return t.jsx(de,{isExpanded:c&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:o},e.ariaLabel)})),h&&g.length&&t.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=x.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:m,children:[t.jsx(e.Menu.Trigger,{asChild:!0,children:v}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:g.map((({label:n,startIcon:r,onClick:i,itemAriaLabel:a},l)=>t.jsx(e.Menu.Item,{css:se,value:n||s||l.toString(),role:"menuitem",children:t.jsx(de,{isExpanded:!1,icon:r,ariaLabel:a,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),a&&!h&&t.jsx(de,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:c?t.jsx(Q,{}):t.jsx(ee,{}),label:"Collapse",onClick:()=>u(!c),showGap:!1,vertical:o})]})})},he=r.css`
+`),"aria-label":o,disabled:l,onClick:c,mr:u&&!d?"16px":"0",mb:u&&d?"16px":"0",children:t.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:n?"150px":"32px",padding:"8px",margin:n?"8px":"0",children:[i&&t.jsx(e.Box,{as:"span",mr:i&&n?"8px":"0px",children:t.jsx(ue,{content:s,disabled:!s,children:i})}),a&&t.jsx(e.Box,{"aria-hidden":!n,overflow:"hidden",maxWidth:n?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:t.jsx(ue,{content:s,disabled:!s,children:a})})]})});var p};const pe=({items:r,vertical:o=!1,expanded:i=!1,showExpandedToggle:a,ariaLabel:s,defaultGaps:l})=>{const[c,u]=n.useState(i),{containerRef:d,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:a=0}){const s=n.useRef(null),[l,c]=n.useState(0),[u,d]=n.useState(e),[p,h]=n.useState(!1);return n.useEffect((()=>{if(!s.current)return;const e=new ResizeObserver((e=>{const t=e[0];c(Math.floor(t.contentRect.width))}));return e.observe(s.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===l)return;const n=o+a;h(e*(t?i+a:n)-a>l),e>1&&!r&&d(Math.floor(l/n))}),[l,e,r,o,i,a]),{containerRef:s,visibleNumberOfItems:u,shouldForceCollapse:p}}({itemsCount:r.length,isExpanded:c,isVertical:o,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=r.slice(0,p),x=r.slice(p,r.length),g=x.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),v=t.jsx("div",{style:{position:"relative",display:"flex",width:"48px"},children:t.jsx(de,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:t.jsx(R,{}),showGap:!1,vertical:o})}),[m,b]=n.useState(!1);return t.jsx("div",{ref:d,role:"toolbar","aria-label":s,css:ae,children:t.jsxs(e.Group,{orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===r.length?"row":"column",children:[f.map((e=>{const n=l&&!1!==e.gap||!l&&!0===e.gap;return t.jsx(de,{isExpanded:c&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:o},e.ariaLabel)})),h&&g.length>1&&t.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=x.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:m,children:[t.jsx(e.Menu.Trigger,{asChild:!0,children:v}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:g.map((({label:n,startIcon:r,onClick:i,itemAriaLabel:a},l)=>t.jsx(e.Menu.Item,{css:se,value:n||s||l.toString(),role:"menuitem",children:t.jsx(de,{isExpanded:!1,icon:r,ariaLabel:a,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),a&&!h&&t.jsx(de,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:c?t.jsx(Q,{}):t.jsx(ee,{}),label:"Collapse",onClick:()=>u(!c),showGap:!1,vertical:o})]})})},he=r.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3576,7 +3576,7 @@ function qd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     font-weight: 700;
     color: ${h("Medium"===v?"warning":"Strong"===v||"Very Strong"===v?"success":"error",900)};
   }
-`),"aria-live":"polite",role:"status",children:["Password Strength: ",t.jsx("span",{children:x.strength})]}),t.jsx("div",{css:Jt(x.strength),children:t.jsx("div",{})}),t.jsxs("div",{css:Qt(x.length),"aria-label":`Use a minimum of ${l} characters. ${x.length?"Requirement met.":"Requirement not met."}`,children:[t.jsx("div",{children:x.length?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsxs("p",{children:["Use a minimum of ",l," characters"]})]}),a?.uppercase?null:t.jsxs("div",{css:Qt(x.uppercase),"aria-label":"Use an uppercase letter. "+(x.uppercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.uppercase?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use an uppercase letter"})]}),a?.lowercase?null:t.jsxs("div",{css:Qt(x.lowercase),"aria-label":"Use a lowercase letter. "+(x.lowercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.lowercase?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a lowercase letter"})]}),a?.numbers?null:t.jsxs("div",{css:Qt(x.numbers),"aria-label":"Use a number. "+(x.numbers?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.numbers?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a number"})]}),a?.specialCharacters?null:t.jsxs("div",{css:Qt(x.specialCharacters),"aria-label":"Use a special character. "+(x.specialCharacters?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.specialCharacters?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a special character"})]})]}):null]});var v},exports.ProgressBar=({progress:e})=>{let n=e;return n>100&&(n=100),n<0&&(n=0),t.jsx("div",{css:Vf,role:"progressbar","aria-label":`Progress: ${n}%`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":n,children:t.jsx("div",{css:Af(n)})})},exports.QualitativeAttribute=({type:e,label:r,caption:o,color:i,onActionClick:a,showActionButton:s,pointIcon:l=t.jsx(Z,{color:"#006D2C"})})=>{const[c,u]=n.useState(!0),d=n.useId(),p=n.useId(),h="raster"===e,f="line"===e,x="point"===e,g=n.useId(),v=n.useMemo((()=>`${e?`${e} layer`:"layer"}, ${r}${o?`, ${o}`:""}. Currently ${c?"visible":"hidden"}.`),[c,e,r,o]),m=c?"Hide":"Show";return t.jsxs("div",{css:mi,children:[t.jsx("p",{id:g,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:v}),t.jsxs("div",{css:bi,children:[t.jsxs("div",{children:[h&&t.jsx("div",{css:xi(i)}),f&&t.jsx("div",{css:gi(i)}),x&&t.jsx("div",{css:vi(i),children:l})]}),t.jsxs("div",{children:[t.jsx("p",{id:d,css:yi,children:r}),o?t.jsx("p",{id:p,css:wi,children:o}):null]})]}),a&&s?t.jsx("div",{css:Ci,children:t.jsx(b,{type:"button",variant:"borderless",label:m,rightIcon:c?t.jsx(L,{}):t.jsx(O,{}),"aria-pressed":c,"aria-labelledby":`${g} ${d}`,onClick:()=>{u((e=>!e)),a?.()}})}):null]})},exports.Radio=Fe,exports.RadioGroup=Ze,exports.RadioList=({label:n,caption:o,name:i,radios:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:u,variant:d="default",required:p})=>{const h=`${n}. ${o?`${o}.`:""} ${p?"Required.":"Optional."} ${c?`Error: ${c}.`:""} `;return t.jsxs(e.Group,{css:en,"aria-roledescription":"group","aria-label":h,children:[c?t.jsx("div",{css:on}):null,t.jsxs("div",{css:(f=!!c,r.css`
+`),"aria-live":"polite",role:"status",children:["Password Strength: ",t.jsx("span",{children:x.strength})]}),t.jsx("div",{css:Jt(x.strength),children:t.jsx("div",{})}),t.jsxs("div",{css:Qt(x.length),"aria-label":`Use a minimum of ${l} characters. ${x.length?"Requirement met.":"Requirement not met."}`,children:[t.jsx("div",{children:x.length?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsxs("p",{children:["Use a minimum of ",l," characters"]})]}),a?.uppercase?null:t.jsxs("div",{css:Qt(x.uppercase),"aria-label":"Use an uppercase letter. "+(x.uppercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.uppercase?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use an uppercase letter"})]}),a?.lowercase?null:t.jsxs("div",{css:Qt(x.lowercase),"aria-label":"Use a lowercase letter. "+(x.lowercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.lowercase?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a lowercase letter"})]}),a?.numbers?null:t.jsxs("div",{css:Qt(x.numbers),"aria-label":"Use a number. "+(x.numbers?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.numbers?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a number"})]}),a?.specialCharacters?null:t.jsxs("div",{css:Qt(x.specialCharacters),"aria-label":"Use a special character. "+(x.specialCharacters?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.specialCharacters?t.jsx(C,{color:"var(--chakra-colors-success-500)",height:"8px",width:"8px"}):t.jsx(E,{color:"var(--chakra-colors-error-900)",height:"8px",width:"8px"})}),t.jsx("p",{children:"Use a special character"})]})]}):null]});var v},exports.ProgressBar=({progress:e})=>{let n=e;return n>100&&(n=100),n<0&&(n=0),t.jsx("div",{css:Vf,role:"progressbar","aria-label":`Progress: ${n}%`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":n,children:t.jsx("div",{css:Af(n)})})},exports.QualitativeAttribute=({type:e,label:r,caption:o,color:i,onActionClick:a,showActionButton:s,pointIcon:l=t.jsx(Z,{color:"#006D2C"}),ariaLabelType:c=""})=>{const[u,d]=n.useState(!0),p=n.useId(),h=n.useId(),f="raster"===e,x="line"===e,g="point"===e,v=n.useId(),m=n.useMemo((()=>`${c??`${c},`} ${r}${o?`, ${o}`:""}. Currently ${u?"visible":"hidden"}.`),[u,e,r,o]),y=u?"Hide":"Show";return t.jsxs("div",{css:mi,children:[t.jsx("p",{id:v,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:m}),t.jsxs("div",{css:bi,children:[t.jsxs("div",{children:[f&&t.jsx("div",{css:xi(i)}),x&&t.jsx("div",{css:gi(i)}),g&&t.jsx("div",{css:vi(i),children:l})]}),t.jsxs("div",{children:[t.jsx("p",{id:p,css:yi,children:r}),o?t.jsx("p",{id:h,css:wi,children:o}):null]})]}),a&&s?t.jsx("div",{css:Ci,children:t.jsx(b,{type:"button",variant:"borderless",label:y,rightIcon:u?t.jsx(L,{}):t.jsx(O,{}),"aria-pressed":u,"aria-labelledby":`${v} ${p}`,onClick:()=>{d((e=>!e)),a?.()}})}):null]})},exports.Radio=Fe,exports.RadioGroup=Ze,exports.RadioList=({label:n,caption:o,name:i,radios:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:u,variant:d="default",required:p})=>{const h=`${n}. ${o?`${o}.`:""} ${p?"Required.":"Optional."} ${c?`Error: ${c}.`:""} `;return t.jsxs(e.Group,{css:en,"aria-roledescription":"group","aria-label":h,children:[c?t.jsx("div",{css:on}):null,t.jsxs("div",{css:(f=!!c,r.css`
   margin-left: ${f?"19px":"0px"};
 `),children:[t.jsxs("p",{css:tn,"aria-label":n,children:[p&&t.jsx("span",{"aria-label":"required",children:"*"}),n]}),t.jsx("p",{css:nn,"aria-label":o,children:o}),c?t.jsx("p",{css:an,"aria-label":c,children:c}):null,t.jsx("div",{css:rn,children:t.jsx(Ze,{name:i,defaultValue:s,onChange:l,horizontal:u&&"card"!==d,children:a.map((e=>t.jsx(Fe,{css:"card"===d?sn:{},...e},e.value)))})})]})]});var f},exports.SSOButtons=te,exports.ScaleBar=({colors:e,values:n,subLabels:o,isGradient:i})=>{return t.jsxs("div",{css:ji,children:[i?t.jsx("div",{css:(a=Ri(e),r.css`
   height: 20px;

package/dist/index.d.ts

@@ -543,9 +543,10 @@ type QualitativeAttributeProps = {
     showActionButton?: boolean;
     onActionClick?: () => void;
     pointIcon?: React.ReactNode;
+    ariaLabelType?: string;
 };
 
-declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, ariaLabelType, }: QualitativeAttributeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ScaleBarProps = {
     colors: string[];

package/dist/index.esm.js

@@ -213,7 +213,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
       }
     }
   }
-`),"aria-label":t,disabled:l,onClick:s,mr:c&&!d?"16px":"0",mb:c&&d?"16px":"0",children:F(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?"150px":"32px",padding:"8px",margin:e?"8px":"0",children:[i&&Z(r,{as:"span",mr:i&&e?"8px":"0px",children:Z(gt,{content:a,disabled:!a,children:i})}),o&&Z(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:Z(gt,{content:a,disabled:!a,children:o})})]})});var u};const mt=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,ariaLabel:i,defaultGaps:o})=>{const[a,d]=X(n),{containerRef:u,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:i,gap:o=0}){const a=Y(null),[l,s]=X(0),[c,d]=X(e),[u,p]=X(!1);return K((()=>{if(!a.current)return;const e=new ResizeObserver((e=>{const t=e[0];s(Math.floor(t.contentRect.width))}));return e.observe(a.current),()=>e.disconnect()}),[]),K((()=>{if(0===l)return;const a=r+o;p(e*(t?i+o:a)-o>l),n||d(Math.floor(l/a))}),[l,e,n,r,i,o]),{containerRef:a,visibleNumberOfItems:c,shouldForceCollapse:u}}({itemsCount:e.length,isExpanded:a,isVertical:t,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=e.slice(0,p),g=e.slice(p,e.length),v=g.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),m=Z("div",{style:{position:"relative",display:"flex",width:"48px"},children:Z(vt,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:Z(Me,{}),showGap:!1,vertical:t})}),[x,b]=X(!1);return Z("div",{ref:u,role:"toolbar","aria-label":i,css:ut,children:F(s,{orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[f.map((e=>{const n=o&&!1!==e.gap||!o&&!0===e.gap;return Z(vt,{isExpanded:a&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),h&&v.length&&F(c.Root,{onSelect:({value:e})=>(e=>{const t=g.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:x,children:[Z(c.Trigger,{asChild:!0,children:m}),Z(l,{children:Z(c.Positioner,{children:Z(c.Content,{style:{minWidth:0,padding:0},children:v.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:o},a)=>Z(c.Item,{css:pt,value:e||i||a.toString(),role:"menuitem",children:Z(vt,{isExpanded:!1,icon:n,ariaLabel:o,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!h&&Z(vt,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:Z(a?it:ot,{}),label:"Collapse",onClick:()=>d(!a),showGap:!1,vertical:t})]})})},xt=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:i,onSettingsClick:o,onQuestionClick:a,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d})=>{const u=[{icon:se(Be,{}),label:"Zoom in",ariaLabel:"zoom in",onClick:e},{icon:se(Fe,{}),label:"Zoom out",ariaLabel:"zoom out",onClick:t,gap:!0},{icon:se(Ze,{}),label:"Expand",ariaLabel:"expand",onClick:n,gap:!0},{icon:se(We,{}),label:"Share",ariaLabel:"share",onClick:r,gap:!0},{icon:se(qe,{}),label:"Print",ariaLabel:"print",onClick:i,gap:!0},{icon:se(Ge,{}),label:"Settings",ariaLabel:"settings",onClick:o,gap:!0},{icon:se(Ue,{}),label:"Help",ariaLabel:"question",onClick:a}];return se(mt,{items:u,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d||"Map controls toolbar"})},bt=le`
+`),"aria-label":t,disabled:l,onClick:s,mr:c&&!d?"16px":"0",mb:c&&d?"16px":"0",children:F(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?"150px":"32px",padding:"8px",margin:e?"8px":"0",children:[i&&Z(r,{as:"span",mr:i&&e?"8px":"0px",children:Z(gt,{content:a,disabled:!a,children:i})}),o&&Z(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:Z(gt,{content:a,disabled:!a,children:o})})]})});var u};const mt=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,ariaLabel:i,defaultGaps:o})=>{const[a,d]=X(n),{containerRef:u,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:i,gap:o=0}){const a=Y(null),[l,s]=X(0),[c,d]=X(e),[u,p]=X(!1);return K((()=>{if(!a.current)return;const e=new ResizeObserver((e=>{const t=e[0];s(Math.floor(t.contentRect.width))}));return e.observe(a.current),()=>e.disconnect()}),[]),K((()=>{if(0===l)return;const a=r+o;p(e*(t?i+o:a)-o>l),e>1&&!n&&d(Math.floor(l/a))}),[l,e,n,r,i,o]),{containerRef:a,visibleNumberOfItems:c,shouldForceCollapse:u}}({itemsCount:e.length,isExpanded:a,isVertical:t,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=e.slice(0,p),g=e.slice(p,e.length),v=g.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),m=Z("div",{style:{position:"relative",display:"flex",width:"48px"},children:Z(vt,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:Z(Me,{}),showGap:!1,vertical:t})}),[x,b]=X(!1);return Z("div",{ref:u,role:"toolbar","aria-label":i,css:ut,children:F(s,{orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[f.map((e=>{const n=o&&!1!==e.gap||!o&&!0===e.gap;return Z(vt,{isExpanded:a&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),h&&v.length>1&&F(c.Root,{onSelect:({value:e})=>(e=>{const t=g.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:x,children:[Z(c.Trigger,{asChild:!0,children:m}),Z(l,{children:Z(c.Positioner,{children:Z(c.Content,{style:{minWidth:0,padding:0},children:v.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:o},a)=>Z(c.Item,{css:pt,value:e||i||a.toString(),role:"menuitem",children:Z(vt,{isExpanded:!1,icon:n,ariaLabel:o,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!h&&Z(vt,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:Z(a?it:ot,{}),label:"Collapse",onClick:()=>d(!a),showGap:!1,vertical:t})]})})},xt=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:i,onSettingsClick:o,onQuestionClick:a,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d})=>{const u=[{icon:se(Be,{}),label:"Zoom in",ariaLabel:"zoom in",onClick:e},{icon:se(Fe,{}),label:"Zoom out",ariaLabel:"zoom out",onClick:t,gap:!0},{icon:se(Ze,{}),label:"Expand",ariaLabel:"expand",onClick:n,gap:!0},{icon:se(We,{}),label:"Share",ariaLabel:"share",onClick:r,gap:!0},{icon:se(qe,{}),label:"Print",ariaLabel:"print",onClick:i,gap:!0},{icon:se(Ge,{}),label:"Settings",ariaLabel:"settings",onClick:o,gap:!0},{icon:se(Ue,{}),label:"Help",ariaLabel:"question",onClick:a}];return se(mt,{items:u,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d||"Map controls toolbar"})},bt=le`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2099,7 +2099,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
     color: ${xe("neutral",600)};
     padding: 0 10px;
   }
-`,qa=({type:e,label:t,caption:n,color:r,onActionClick:i,showActionButton:o,pointIcon:a=Z(Xe,{color:"#006D2C"})})=>{const[l,s]=X(!0),c=J(),d=J(),u="raster"===e,p="line"===e,h="point"===e,f=J(),g=te((()=>`${e?`${e} layer`:"layer"}, ${t}${n?`, ${n}`:""}. Currently ${l?"visible":"hidden"}.`),[l,e,t,n]),v=l?"Hide":"Show";return F("div",{css:Ha,children:[Z("p",{id:f,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:g}),F("div",{css:Ba,children:[F("div",{children:[u&&Z("div",{css:Ia(r)}),p&&Z("div",{css:Aa(r)}),h&&Z("div",{css:za(r),children:a})]}),F("div",{children:[Z("p",{id:c,css:Fa,children:t}),n?Z("p",{id:d,css:Za,children:n}):null]})]}),i&&o?Z("div",{css:Wa,children:Z(ke,{type:"button",variant:"borderless",label:v,rightIcon:Z(l?Ne:De,{}),"aria-pressed":l,"aria-labelledby":`${f} ${c}`,onClick:()=>{s((e=>!e)),i?.()}})}):null]})},Ga=le`
+`,qa=({type:e,label:t,caption:n,color:r,onActionClick:i,showActionButton:o,pointIcon:a=Z(Xe,{color:"#006D2C"}),ariaLabelType:l=""})=>{const[s,c]=X(!0),d=J(),u=J(),p="raster"===e,h="line"===e,f="point"===e,g=J(),v=te((()=>`${l??`${l},`} ${t}${n?`, ${n}`:""}. Currently ${s?"visible":"hidden"}.`),[s,e,t,n]),m=s?"Hide":"Show";return F("div",{css:Ha,children:[Z("p",{id:g,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:v}),F("div",{css:Ba,children:[F("div",{children:[p&&Z("div",{css:Ia(r)}),h&&Z("div",{css:Aa(r)}),f&&Z("div",{css:za(r),children:a})]}),F("div",{children:[Z("p",{id:d,css:Fa,children:t}),n?Z("p",{id:u,css:Za,children:n}):null]})]}),i&&o?Z("div",{css:Wa,children:Z(ke,{type:"button",variant:"borderless",label:m,rightIcon:Z(s?Ne:De,{}),"aria-pressed":s,"aria-labelledby":`${g} ${d}`,onClick:()=>{c((e=>!e)),i?.()}})}):null]})},Ga=le`
   width: 100%;
   display: flex;
   flex-direction: column;

package/package.json

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