@worldresources/wri-design-systems 2.148.1 → 2.148.3

package/dist/index.cjs.js

@@ -297,7 +297,7 @@
   width: 100%;
   margin-left: ${i?"8px":"0"};
   margin-right: ${a?"8px":"0"};
-`),children:[t.jsxs("div",{css:le,children:[t.jsx("p",{className:"ds-menu-item-label",children:n.label}),n.command?t.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${n.command}`,children:n.command}):null]}),n.caption?t.jsx("p",{className:"ds-menu-item-caption",children:n.caption}):null]}),n.endIcon]})}),o?null:t.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"})]});var i,a},de=({label:r,items:o,groups:i,onSelect:a,customTrigger:s})=>{const[l,c]=n.useState(!1);return t.jsxs(e.Menu.Root,{onSelect:({value:e})=>a&&a(e),onOpenChange:({open:e})=>c(e),open:l,children:[t.jsx(e.Menu.Trigger,{css:oe,asChild:!0,children:s||t.jsxs("button",{type:"button",children:[r,t.jsx(k,{marginLeft:"6px",rotate:l?"180":"0",height:"14px",width:"14px"})]})}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsxs(e.Menu.Content,{css:ie,role:"menu","aria-label":r||"Menu",children:[o?.map(((r,i)=>{if(r.submenu){const[o,s]=n.useState(!1);return t.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>a&&a(e),onOpenChange:({open:e})=>s(e),open:o,children:[t.jsxs(e.Menu.TriggerItem,{css:ae,role:"menuitem","aria-haspopup":"true","aria-expanded":o?"true":"false",children:[r.label," ",t.jsx(k,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{css:ie,role:"menu","aria-label":`${r.label} submenu`,children:r.submenu.map(((e,n)=>t.jsx(ue,{item:e,isLast:n===(r.submenu?.length||0)-1},e.value)))})})})]},`${r.value}-${i}`)}return t.jsx(ue,{item:r,isLast:i===o.length-1},`${r.value}-${i}`)})),i?.map(((r,o)=>t.jsxs(n.Fragment,{children:[t.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[t.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:ce,children:r.title}),r.items?.map((e=>t.jsx(ue,{item:e,isLast:i.length-1===o},e.value)))]}),o!==i.length-1?t.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},r.title)))]})})})]})},pe=e=>r.css`
+`),children:[t.jsxs("div",{css:le,children:[t.jsx("p",{className:"ds-menu-item-label",children:n.label}),n.command?t.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${n.command}`,children:n.command}):null]}),n.caption?t.jsx("p",{className:"ds-menu-item-caption",children:n.caption}):null]}),n.endIcon]})}),o?null:t.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"})]});var i,a},de=({label:r,items:o,groups:i,onSelect:a,customTrigger:s})=>{const[l,c]=n.useState(!1);return t.jsxs(e.Menu.Root,{onSelect:({value:e})=>a&&a(e),onOpenChange:({open:e})=>c(e),open:l,children:[t.jsx(e.Menu.Trigger,{css:oe,asChild:!0,children:s||t.jsxs("button",{type:"button",children:[r,t.jsx(k,{marginLeft:"6px",rotate:l?"180":"0",height:"14px",width:"14px"})]})}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsxs(e.Menu.Content,{css:ie,role:"menu","aria-label":r||"Menu",children:[o?.map(((r,i)=>{if(r.submenu){const[o,s]=n.useState(!1);return t.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>a&&a(e),onOpenChange:({open:e})=>s(e),open:o,children:[t.jsxs(e.Menu.TriggerItem,{css:ae,role:"menuitem","aria-haspopup":"true","aria-expanded":o?"true":"false",children:[r.label,t.jsx(k,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{css:ie,role:"menu","aria-label":`${r.label} submenu`,children:r.submenu.map(((e,n)=>t.jsx(ue,{item:e,isLast:n===(r.submenu?.length||0)-1},e.value)))})})})]},`${r.value}-${i}`)}return t.jsx(ue,{item:r,isLast:i===o.length-1},`${r.value}-${i}`)})),i?.map(((r,o)=>t.jsxs(n.Fragment,{children:[t.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[t.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:ce,children:r.title}),r.items?.map((e=>t.jsx(ue,{item:e,isLast:i.length-1===o},e.value)))]}),o!==i.length-1?t.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},r.title)))]})})})]})},pe=e=>r.css`
   position: relative;
 
   .toolbar-overflow-menu {
@@ -1883,6 +1883,7 @@
   border: 1px solid ${p("neutral",300)};
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px #0000000d;
+  background-color: ${p("neutral",100)};
 `,Ko=r.css`
   padding: 6px 8px;
   align-items: center;
@@ -1926,6 +1927,7 @@
   display: flex;
   gap: 12px;
   border-bottom: 1px solid ${p("neutral",300)};
+  background-color: ${p("neutral",100)};
 `,ti=r.css`
   display: flex;
   flex-direction: column;
@@ -3317,7 +3319,7 @@ function Fd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   color: ${p("error",100)};
 `,$f=(e,t)=>r.css`
   width: 100%;
-  min-width: ${"small"===e?"234px":"320px"};
+  max-width: ${"small"===e?"234px":"320px"};
   border-radius: 4px;
   padding: ${"small"===e?"8px 8px 12px 8px":"8px 12px 12px 12px"};
   display: flex;
@@ -3526,7 +3528,7 @@ function Fd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   background-image: url(${n});
   background-size: cover;
   background-position: center;
-`)}),t.jsxs("div",{css:wn,children:[t.jsxs("div",{className:"ds-base-map-title-container",children:[t.jsx("p",{className:"ds-base-map-title",children:e.label}),e.active?t.jsx(At,{label:"Active",variant:"warning",size:"small",icon:t.jsx(w,{})}):null]}),t.jsx("p",{className:"ds-base-map-caption",children:e.caption}),e.active&&e.children?t.jsx("div",{className:"ds-base-map-children",children:e.children}):null]})]},e.label);var n}))}):null]})]})}),exports.Breadcrumb=({links:r,separator:o,maxItems:i=99,linkRouter:a})=>{const[s,l]=n.useState(r.length>i);n.useEffect((()=>{l(r.length>i)}),[r.length]);const c=a;return t.jsx(e.Breadcrumb.Root,{children:t.jsx(e.Breadcrumb.List,{gap:"16px",children:s?t.jsxs(t.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:wh,children:t.jsxs(c,{to:r[0].link,href:r[0].link,children:[r[0].icon,r[0].label]})}),t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}),t.jsx("li",{className:"chakra-breadcrumb__item",children:t.jsx("button",{css:jh,type:"button",onClick:()=>l(!1),children:"..."})}),t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}),t.jsx(e.Breadcrumb.Item,{css:wh,children:t.jsxs("p",{"aria-current":"page","aria-label":r[r.length-1].label,children:[r[r.length-1].icon,r[r.length-1].label]})})]}):r.map(((i,a)=>i?.label?t.jsxs(n.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:wh,children:a<r.length-1?t.jsxs(c,{to:i.link,href:i.link,children:[i.icon,i.label]}):t.jsxs("p",{"aria-current":"page","aria-label":i.label,children:[i.label&&i.icon?i.icon:"",i.label]})}),a<r.length-1?t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}):null]},i.label):null))})})},exports.Button=m,exports.Checkbox=je,exports.CheckboxList=({label:o,caption:i,checkboxes:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:u,required:d})=>{const[p,h]=n.useState(s?{[s]:!0}:{}),f=`${o}. ${i?`${i}.`:""} ${d?"Required.":"Optional"} ${c?`Error: ${c}.`:""} `;return t.jsxs(e.Group,{css:Je,tabIndex:0,"aria-label":f,children:[c?t.jsx("div",{css:nt}):null,t.jsxs("div",{css:(x=!!c,r.css`
+`)}),t.jsxs("div",{css:wn,children:[t.jsxs("div",{className:"ds-base-map-title-container",children:[t.jsx("p",{className:"ds-base-map-title",children:e.label}),e.active?t.jsx(At,{label:"Active",variant:"warning",size:"small",icon:t.jsx(w,{})}):null]}),t.jsx("p",{className:"ds-base-map-caption",children:e.caption}),e.active&&e.children?t.jsx("div",{className:"ds-base-map-children",children:e.children}):null]})]},e.label);var n}))}):null]})]})}),exports.Breadcrumb=({links:r,separator:o,maxItems:i=99,linkRouter:a})=>{const[s,l]=n.useState(r.length>i);n.useEffect((()=>{l(r.length>i)}),[r.length]);const c=a;return t.jsx(e.Breadcrumb.Root,{children:t.jsx(e.Breadcrumb.List,{gap:"16px",children:s?t.jsxs(t.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:wh,children:t.jsxs(c,{to:r[0].link,href:r[0].link,children:[r[0].icon,r[0].label]})}),t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}),t.jsx("li",{className:"chakra-breadcrumb__item",children:t.jsx("button",{css:jh,type:"button",onClick:()=>l(!1),children:"..."})}),t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}),t.jsx(e.Breadcrumb.Item,{css:wh,children:t.jsxs("p",{"aria-current":"page","aria-label":r[r.length-1].label,children:[r[r.length-1].icon,r[r.length-1].label]})})]}):r.map(((i,a)=>i?.label?t.jsxs(n.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:wh,children:a<r.length-1?t.jsxs(c,{to:i.link,href:i.link,children:[i.icon,i.label]}):t.jsxs("p",{"aria-current":"page","aria-label":i.label,children:[i.label&&i.icon?i.icon:"",i.label]})}),a<r.length-1?t.jsx(e.Breadcrumb.Separator,{css:Ch,children:o||t.jsx(k,{rotate:"270"})}):null]},i.label):null))})})},exports.Button=m,exports.Checkbox=je,exports.CheckboxList=({label:o,caption:i,checkboxes:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:u,required:d})=>{const[p,h]=n.useState(s?{[s]:!0}:{}),f=`${o}. ${i?`${i}.`:""} ${d?"Required.":"Optional"} ${c?`Error: ${c}.`:""} `;return t.jsxs(e.Group,{css:Je,"aria-label":f,children:[c?t.jsx("div",{css:nt}):null,t.jsxs("div",{css:(x=!!c,r.css`
   margin-left: ${x?"19px":"0px"};
 `),children:[t.jsxs("p",{css:Qe,"aria-label":o,children:[d&&t.jsx("span",{"aria-label":"required",children:"*"}),o]}),t.jsx("p",{css:et,"aria-label":i,children:i}),c?t.jsx("p",{css:rt,"aria-label":c,children:c}):null,t.jsx("div",{css:tt(u),children:a.map((e=>t.jsx(je,{css:{},defaultChecked:s===e.value,onCheckedChange:({checked:t})=>((e,t)=>{const n={...p};t&&(n[t]=e,h(n)),l&&l(n)})(t,e.name),...e},e.name)))})]})]});var x},exports.CheckboxOptionCard=({defaultValue:n,items:o,onValueChange:i})=>t.jsx(e.CheckboxGroup,{defaultValue:n,onValueChange:i,children:t.jsx(e.HStack,{alignItems:"flex-start",flexWrap:"wrap",gap:"12px",children:o.map((o=>{return t.jsxs(e.CheckboxCard.Root,{css:ke,defaultChecked:-1!==n?.indexOf(o.value),disabled:o.disabled,value:o.value,children:[t.jsx(e.CheckboxCard.HiddenInput,{}),t.jsxs(e.CheckboxCard.Control,{css:$e,children:[t.jsxs(e.CheckboxCard.Content,{css:(a=o.variant,r.css`
   width: 100%;
@@ -3571,7 +3573,7 @@ function Fd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     font-weight: 700;
     color: ${p("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:Ut(x.strength),children:t.jsx("div",{})}),t.jsxs("div",{css:Xt(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(w,{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:Xt(x.uppercase),"aria-label":"Use an uppercase letter. "+(x.uppercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.uppercase?t.jsx(w,{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:Xt(x.lowercase),"aria-label":"Use a lowercase letter. "+(x.lowercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.lowercase?t.jsx(w,{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:Xt(x.numbers),"aria-label":"Use a number. "+(x.numbers?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.numbers?t.jsx(w,{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:Xt(x.specialCharacters),"aria-label":"Use a special character. "+(x.specialCharacters?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.specialCharacters?t.jsx(w,{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:_f,role:"progressbar","aria-label":`Progress: ${n}%`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":n,children:t.jsx("div",{css:Df(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]),b=c?"Hide":"Show";return t.jsxs("div",{css:fi,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:xi,children:[t.jsxs("div",{children:[h&&t.jsx("div",{css:di(i)}),f&&t.jsx("div",{css:pi(i)}),x&&t.jsx("div",{css:hi(i),children:l})]}),t.jsxs("div",{children:[t.jsx("p",{id:d,css:gi,children:r}),o?t.jsx("p",{id:p,css:vi,children:o}):null]})]}),a&&s?t.jsx("div",{css:mi,children:t.jsx(m,{type:"button",variant:"borderless",label:b,rightIcon:c?t.jsx(L,{}):t.jsx(O,{}),"aria-pressed":c,"aria-labelledby":`${g} ${d}`,onClick:()=>{u((e=>!e)),a?.()}})}):null]})},exports.Radio=Ae,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,{tabIndex:0,css:Yt,"aria-roledescription":"group","aria-label":h,children:[c?t.jsx("div",{css:en}):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:Ut(x.strength),children:t.jsx("div",{})}),t.jsxs("div",{css:Xt(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(w,{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:Xt(x.uppercase),"aria-label":"Use an uppercase letter. "+(x.uppercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.uppercase?t.jsx(w,{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:Xt(x.lowercase),"aria-label":"Use a lowercase letter. "+(x.lowercase?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.lowercase?t.jsx(w,{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:Xt(x.numbers),"aria-label":"Use a number. "+(x.numbers?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.numbers?t.jsx(w,{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:Xt(x.specialCharacters),"aria-label":"Use a special character. "+(x.specialCharacters?"Requirement met.":"Requirement not met."),children:[t.jsx("div",{children:x.specialCharacters?t.jsx(w,{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:_f,role:"progressbar","aria-label":`Progress: ${n}%`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":n,children:t.jsx("div",{css:Df(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]),b=c?"Hide":"Show";return t.jsxs("div",{css:fi,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:xi,children:[t.jsxs("div",{children:[h&&t.jsx("div",{css:di(i)}),f&&t.jsx("div",{css:pi(i)}),x&&t.jsx("div",{css:hi(i),children:l})]}),t.jsxs("div",{children:[t.jsx("p",{id:d,css:gi,children:r}),o?t.jsx("p",{id:p,css:vi,children:o}):null]})]}),a&&s?t.jsx("div",{css:mi,children:t.jsx(m,{type:"button",variant:"borderless",label:b,rightIcon:c?t.jsx(L,{}):t.jsx(O,{}),"aria-pressed":c,"aria-labelledby":`${g} ${d}`,onClick:()=>{u((e=>!e)),a?.()}})}):null]})},exports.Radio=Ae,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:Yt,"aria-roledescription":"group","aria-label":h,children:[c?t.jsx("div",{css:en}):null,t.jsxs("div",{css:(f=!!c,r.css`
   margin-left: ${f?"19px":"0px"};
 `),children:[t.jsxs("p",{css:Kt,"aria-label":n,children:[p&&t.jsx("span",{"aria-label":"required",children:"*"}),n]}),t.jsx("p",{css:Jt,"aria-label":o,children:o}),c?t.jsx("p",{css:tn,"aria-label":c,children:c}):null,t.jsx("div",{css:Qt,children:t.jsx(ze,{name:i,defaultValue:s,onChange:l,horizontal:u&&"card"!==d,children:a.map((e=>t.jsx(Ae,{css:"card"===d?nn:{},...e},e.value)))})})]})]});var f},exports.SSOButtons=Q,exports.ScaleBar=({colors:e,values:n,subLabels:o,isGradient:i})=>{return t.jsxs("div",{css:bi,children:[i?t.jsx("div",{css:(a=ki(e),r.css`
   height: 20px;

package/dist/index.esm.js

@@ -297,7 +297,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   width: 100%;
   margin-left: ${n?"8px":"0"};
   margin-right: ${r?"8px":"0"};
-`),children:[B("div",{css:pt,children:[F("p",{className:"ds-menu-item-label",children:e.label}),e.command?F(a.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?F("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),e.endIcon]})}),t?null:F(a.Separator,{borderColor:"var(--chakra-colors-neutral-300)"})]});var n,r},gt=({label:e,items:t,groups:n,onSelect:r,customTrigger:i})=>{const[o,s]=U(!1);return B(a.Root,{onSelect:({value:e})=>r&&r(e),onOpenChange:({open:e})=>s(e),open:o,children:[F(a.Trigger,{css:st,asChild:!0,children:i||B("button",{type:"button",children:[e,F(Re,{marginLeft:"6px",rotate:o?"180":"0",height:"14px",width:"14px"})]})}),F(l,{children:F(a.Positioner,{children:B(a.Content,{css:ct,role:"menu","aria-label":e||"Menu",children:[t?.map(((e,n)=>{if(e.submenu){const[t,i]=U(!1);return B(a.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>r&&r(e),onOpenChange:({open:e})=>i(e),open:t,children:[B(a.TriggerItem,{css:dt,role:"menuitem","aria-haspopup":"true","aria-expanded":t?"true":"false",children:[e.label," ",F(Re,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),F(l,{children:F(a.Positioner,{children:F(a.Content,{css:ct,role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((t,n)=>F(ft,{item:t,isLast:n===(e.submenu?.length||0)-1},t.value)))})})})]},`${e.value}-${n}`)}return F(ft,{item:e,isLast:n===t.length-1},`${e.value}-${n}`)})),n?.map(((e,t)=>B(q.Fragment,{children:[B(a.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[F(a.ItemGroupLabel,{id:`group-${t}`,css:ht,children:e.title}),e.items?.map((e=>F(ft,{item:e,isLast:n.length-1===t},e.value)))]}),t!==n.length-1?F(a.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},vt=e=>ae`
+`),children:[B("div",{css:pt,children:[F("p",{className:"ds-menu-item-label",children:e.label}),e.command?F(a.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?F("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),e.endIcon]})}),t?null:F(a.Separator,{borderColor:"var(--chakra-colors-neutral-300)"})]});var n,r},gt=({label:e,items:t,groups:n,onSelect:r,customTrigger:i})=>{const[o,s]=U(!1);return B(a.Root,{onSelect:({value:e})=>r&&r(e),onOpenChange:({open:e})=>s(e),open:o,children:[F(a.Trigger,{css:st,asChild:!0,children:i||B("button",{type:"button",children:[e,F(Re,{marginLeft:"6px",rotate:o?"180":"0",height:"14px",width:"14px"})]})}),F(l,{children:F(a.Positioner,{children:B(a.Content,{css:ct,role:"menu","aria-label":e||"Menu",children:[t?.map(((e,n)=>{if(e.submenu){const[t,i]=U(!1);return B(a.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>r&&r(e),onOpenChange:({open:e})=>i(e),open:t,children:[B(a.TriggerItem,{css:dt,role:"menuitem","aria-haspopup":"true","aria-expanded":t?"true":"false",children:[e.label,F(Re,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),F(l,{children:F(a.Positioner,{children:F(a.Content,{css:ct,role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((t,n)=>F(ft,{item:t,isLast:n===(e.submenu?.length||0)-1},t.value)))})})})]},`${e.value}-${n}`)}return F(ft,{item:e,isLast:n===t.length-1},`${e.value}-${n}`)})),n?.map(((e,t)=>B(q.Fragment,{children:[B(a.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[F(a.ItemGroupLabel,{id:`group-${t}`,css:ht,children:e.title}),e.items?.map((e=>F(ft,{item:e,isLast:n.length-1===t},e.value)))]}),t!==n.length-1?F(a.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},vt=e=>ae`
   position: relative;
 
   .toolbar-overflow-menu {
@@ -1038,7 +1038,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   font-weight: 700;
   color: ${ve("error",900)};
   text-align: left;
-`,fn=({label:e,caption:t,checkboxes:n,defaultValue:r,onCheckedChange:i,errorMessage:o,horizontal:a,required:l})=>{const[c,d]=U(r?{[r]:!0}:{});return B(s,{css:sn,tabIndex:0,"aria-label":`${e}. ${t?`${t}.`:""} ${l?"Required.":"Optional"} ${o?`Error: ${o}.`:""} `,children:[o?F("div",{css:pn}):null,B("div",{css:(u=!!o,ae`
+`,fn=({label:e,caption:t,checkboxes:n,defaultValue:r,onCheckedChange:i,errorMessage:o,horizontal:a,required:l})=>{const[c,d]=U(r?{[r]:!0}:{});return B(s,{css:sn,"aria-label":`${e}. ${t?`${t}.`:""} ${l?"Required.":"Optional"} ${o?`Error: ${o}.`:""} `,children:[o?F("div",{css:pn}):null,B("div",{css:(u=!!o,ae`
   margin-left: ${u?"19px":"0px"};
 `),children:[B("p",{css:cn,"aria-label":e,children:[l&&F("span",{"aria-label":"required",children:"*"}),e]}),F("p",{css:dn,"aria-label":t,children:t}),o?F("p",{css:hn,"aria-label":o,children:o}):null,F("div",{css:un(a),children:n.map((e=>F(Pt,{css:{},defaultChecked:r===e.value,onCheckedChange:({checked:t})=>((e,t)=>{const n={...c};t&&(n[t]=e,d(n)),i&&i(n)})(t,e.name),...e},e.name)))})]})]});var u},gn=ae`
   width: 100%;
@@ -1552,7 +1552,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   border-radius: 4px;
   background-color: ${ve("neutral",100)};
   padding: 12px;
-`,vr=({label:e,caption:t,name:n,radios:r,defaultValue:i,onCheckedChange:o,errorMessage:a,horizontal:l,variant:c="default",required:d})=>{return B(s,{tabIndex:0,css:cr,"aria-roledescription":"group","aria-label":`${e}. ${t?`${t}.`:""} ${d?"Required.":"Optional."} ${a?`Error: ${a}.`:""} `,children:[a?F("div",{css:hr}):null,B("div",{css:(u=!!a,ae`
+`,vr=({label:e,caption:t,name:n,radios:r,defaultValue:i,onCheckedChange:o,errorMessage:a,horizontal:l,variant:c="default",required:d})=>{return B(s,{css:cr,"aria-roledescription":"group","aria-label":`${e}. ${t?`${t}.`:""} ${d?"Required.":"Optional."} ${a?`Error: ${a}.`:""} `,children:[a?F("div",{css:hr}):null,B("div",{css:(u=!!a,ae`
   margin-left: ${u?"19px":"0px"};
 `),children:[B("p",{css:dr,"aria-label":e,children:[d&&F("span",{"aria-label":"required",children:"*"}),e]}),F("p",{css:ur,"aria-label":t,children:t}),a?F("p",{css:fr,"aria-label":a,children:a}):null,F("div",{css:pr,children:F(Xt,{name:n,defaultValue:i,onChange:o,horizontal:l&&"card"!==c,children:r.map((e=>F(Ut,{css:"card"===c?gr:{},...e},e.value)))})})]})]});var u},mr=e=>ae`
   font-size: ${"small"===e?"14px":"16px"};
@@ -1932,6 +1932,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   border: 1px solid ${ve("neutral",300)};
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px #0000000d;
+  background-color: ${ve("neutral",100)};
 `,xa=ae`
   padding: 6px 8px;
   align-items: center;
@@ -1975,6 +1976,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   display: flex;
   gap: 12px;
   border-bottom: 1px solid ${ve("neutral",300)};
+  background-color: ${ve("neutral",100)};
 `,$a=ae`
   display: flex;
   flex-direction: column;
@@ -3379,7 +3381,7 @@ function yh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   color: ${ve("error",100)};
 `,cv=({hasNotification:e,notificationCount:t,label:n})=>{const[r,i]=U(!1);X((()=>{const e=()=>{window.innerWidth<1024?i(!0):i(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const o=(()=>{let e="";return t&&t>0&&(e=`${t>99?"99+":t}`),e})();let a="16px";return t&&t>99?a="28px":t&&t>9&&(a="22px"),B("div",r?{css:nv,role:"status","aria-live":"polite",children:[B("div",{css:rv(),children:[F(ze,{color:"currentColor",height:"16px",width:"16px"}),!e||t||n?null:F("div",{css:iv,"aria-hidden":!0})]}),n?F("p",{children:n}):null,o.length>0?F("div",{css:lv,children:F("p",{css:sv,"aria-label":`${t} unread message`,children:o})}):null]}:{css:nv,role:"status","aria-live":"polite",children:[n?F("p",{children:n}):null,B("div",{css:rv(a),children:[o.length>0?F("div",{css:ov,children:F("p",{css:av,"aria-label":`${t} unread message`,children:o})}):null,e&&!t?F("div",{css:iv,"aria-hidden":!0}):null,F(ze,{color:"currentColor",height:"16px",width:"16px"})]})]})},dv=(e,t)=>ae`
   width: 100%;
-  min-width: ${"small"===e?"234px":"320px"};
+  max-width: ${"small"===e?"234px":"320px"};
   border-radius: 4px;
   padding: ${"small"===e?"8px 8px 12px 8px":"8px 12px 12px 12px"};
   display: flex;

package/package.json

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