@worldresources/wri-design-systems 2.148.4 → 2.148.6

package/dist/index.cjs.js

@@ -1660,6 +1660,10 @@
     color: ${p("neutral",900)};
     text-align: left;
     margin-bottom: 4px;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .ds-base-map-header-caption {
@@ -1900,6 +1904,13 @@
     height: 10px;
     width: 10px;
   }
+
+  &:focus-visible {
+    outline-color: ${p("primary",700)};
+    box-shadow:
+      0 0 0 2px ${p("neutral",100)},
+      rgba(0, 0, 0, 0.05) 0px 2px 2px 4px;
+  }
 `,Jo=r.css`
   font-size: 12px;
   font-weight: 700;
@@ -3521,7 +3532,7 @@ function Fd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   padding: 6px;
 `,qf=r.css`
   padding: 6px;
-`,Gf={pauseOnPageIdle:!0,offsets:"24px"},Uf={"top-start":e.createToaster({placement:"top-start",...Gf}),"top-end":e.createToaster({placement:"top-end",...Gf}),"bottom-start":e.createToaster({placement:"bottom-start",...Gf}),"bottom-end":e.createToaster({placement:"bottom-end",...Gf})};exports.AnalysisWidget=({children:r,header:o,footer:i,expanded:a=!0,collapsible:s=!0,actions:l})=>{const c="analysis-widget-item",[u,d]=n.useState(a),p=`analysis-widget-header-${c}`;return t.jsx(e.Box,{as:"section","aria-labelledby":p,css:Qi,children:t.jsx(e.Accordion.Root,{multiple:!0,value:s?void 0:[c],defaultValue:a?[c]:[],children:t.jsxs(e.Accordion.Item,{css:ta,value:c,children:[o&&t.jsx(e.Accordion.ItemTrigger,{id:p,role:"button","aria-expanded":u,tabIndex:0,css:ea,pointerEvents:s?"auto":"none",onClick:s?()=>{d(!u)}:void 0,children:t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",justifyContent:"space-between",children:[o,l&&l.map((e=>t.jsx(At,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),s&&t.jsx(e.Accordion.ItemIndicator,{height:"16px",display:"flex",children:t.jsx(k,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),t.jsxs("div",{className:u?"item-content-open":"item-content-closed","aria-hidden":!u,children:[r,i&&t.jsx(e.Box,{css:na,children:i})]})]})})})},exports.Avatar=vf,exports.Badge=({hasNotification:e,notificationCount:r,label:o})=>{const[i,a]=n.useState(!1);n.useEffect((()=>{const e=()=>{window.innerWidth<1024?a(!0):a(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const s=(()=>{let e="";return r&&r>0&&(e=`${r>99?"99+":r}`),e})();let l="16px";return r&&r>99?l="28px":r&&r>9&&(l="22px"),i?t.jsxs("div",{css:mf,role:"status","aria-live":"polite",children:[t.jsxs("div",{css:bf(),children:[t.jsx(I,{color:"currentColor",height:"16px",width:"16px"}),!e||r||o?null:t.jsx("div",{css:yf,"aria-hidden":!0})]}),o?t.jsx("p",{children:o}):null,s.length>0?t.jsx("div",{css:jf,children:t.jsx("p",{css:kf,"aria-label":`${r} unread message`,children:s})}):null]}):t.jsxs("div",{css:mf,role:"status","aria-live":"polite",children:[o?t.jsx("p",{children:o}):null,t.jsxs("div",{css:bf(l),children:[s.length>0?t.jsx("div",{css:wf,children:t.jsx("p",{css:Cf,"aria-label":`${r} unread message`,children:s})}):null,e&&!r?t.jsx("div",{css:yf,"aria-hidden":!0}):null,t.jsx(I,{color:"currentColor",height:"16px",width:"16px"})]})]})},exports.BaseMap=({title:e,caption:n,additionalSettings:o,options:i,onOptionSelected:a,maxHeight:s="400px",maxWidth:l="260px"})=>t.jsx("div",{css:fn(s,l),children:t.jsxs("div",{className:"ds-base-map-scroll-content",children:[t.jsxs("div",{css:xn,children:[t.jsx("h2",{className:"ds-base-map-header-title",children:e}),t.jsx("p",{className:"ds-base-map-header-caption",children:n})]}),t.jsxs("div",{css:gn,children:[o?t.jsx("div",{css:vn,children:o.map((e=>t.jsxs("div",{children:[t.jsx(je,{css:{},checked:e.checked,onCheckedChange:({checked:t})=>e.onCheckedChange({checked:Boolean(t)}),children:e.label}),e.checked&&e.children?t.jsx("div",{css:mn,children:e.children}):null]},e.label)))}):null,i?t.jsx("div",{css:bn,children:i.map((e=>{return t.jsxs("div",{css:yn(e.active),role:"button",onClick:()=>a?.(e),tabIndex:0,onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||a?.(e)},children:[t.jsx("div",{css:(n=e.imageUrl,r.css`
+`,Gf={pauseOnPageIdle:!0,offsets:"24px"},Uf={"top-start":e.createToaster({placement:"top-start",...Gf}),"top-end":e.createToaster({placement:"top-end",...Gf}),"bottom-start":e.createToaster({placement:"bottom-start",...Gf}),"bottom-end":e.createToaster({placement:"bottom-end",...Gf})};exports.AnalysisWidget=({children:r,header:o,footer:i,expanded:a=!0,collapsible:s=!0,actions:l})=>{const c="analysis-widget-item",[u,d]=n.useState(a),p=`analysis-widget-header-${c}`;return t.jsx(e.Box,{as:"section","aria-labelledby":p,css:Qi,children:t.jsx(e.Accordion.Root,{multiple:!0,value:s?void 0:[c],defaultValue:a?[c]:[],children:t.jsxs(e.Accordion.Item,{css:ta,value:c,children:[o&&t.jsx(e.Accordion.ItemTrigger,{id:p,role:"button","aria-expanded":u,tabIndex:0,css:ea,pointerEvents:s?"auto":"none",onClick:s?()=>{d(!u)}:void 0,children:t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",justifyContent:"space-between",children:[o,l&&l.map((e=>t.jsx(At,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),s&&t.jsx(e.Accordion.ItemIndicator,{height:"16px",display:"flex",children:t.jsx(k,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),t.jsxs("div",{className:u?"item-content-open":"item-content-closed","aria-hidden":!u,children:[r,i&&t.jsx(e.Box,{css:na,children:i})]})]})})})},exports.Avatar=vf,exports.Badge=({hasNotification:e,notificationCount:r,label:o})=>{const[i,a]=n.useState(!1);n.useEffect((()=>{const e=()=>{window.innerWidth<1024?a(!0):a(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const s=(()=>{let e="";return r&&r>0&&(e=`${r>99?"99+":r}`),e})();let l="16px";return r&&r>99?l="28px":r&&r>9&&(l="22px"),i?t.jsxs("div",{css:mf,role:"status","aria-live":"polite",children:[t.jsxs("div",{css:bf(),children:[t.jsx(I,{color:"currentColor",height:"16px",width:"16px"}),!e||r||o?null:t.jsx("div",{css:yf,"aria-hidden":!0})]}),o?t.jsx("p",{children:o}):null,s.length>0?t.jsx("div",{css:jf,children:t.jsx("p",{css:kf,"aria-label":`${r} unread message`,children:s})}):null]}):t.jsxs("div",{css:mf,role:"status","aria-live":"polite",children:[o?t.jsx("p",{children:o}):null,t.jsxs("div",{css:bf(l),children:[s.length>0?t.jsx("div",{css:wf,children:t.jsx("p",{css:Cf,"aria-label":`${r} unread message`,children:s})}):null,e&&!r?t.jsx("div",{css:yf,"aria-hidden":!0}):null,t.jsx(I,{color:"currentColor",height:"16px",width:"16px"})]})]})},exports.BaseMap=({title:e,caption:o,additionalSettings:i,options:a,onOptionSelected:s,maxHeight:l="400px",maxWidth:c="260px"})=>{const u=n.useRef(null),d=n.useRef(null);return n.useEffect((()=>{const e=u.current,t=d.current;if(!e||!t)return;const n=()=>{e.focus()};if("undefined"!=typeof IntersectionObserver){let e=!1;const r=new IntersectionObserver((([t])=>{t?.isIntersecting?(e||n(),e=!0):e=!1}),{threshold:.01});return r.observe(t),()=>r.disconnect()}const r=window.setTimeout(n,0);return()=>window.clearTimeout(r)}),[]),t.jsx("div",{ref:d,css:fn(l,c),children:t.jsxs("div",{className:"ds-base-map-scroll-content",children:[t.jsxs("div",{css:xn,children:[t.jsx("h2",{ref:u,className:"ds-base-map-header-title",tabIndex:-1,children:e}),t.jsx("p",{className:"ds-base-map-header-caption",children:o})]}),t.jsxs("div",{css:gn,children:[i?t.jsx("div",{css:vn,children:i.map((e=>t.jsxs("div",{children:[t.jsx(je,{css:{},checked:e.checked,onCheckedChange:({checked:t})=>e.onCheckedChange({checked:Boolean(t)}),children:e.label}),e.checked&&e.children?t.jsx("div",{css:mn,children:e.children}):null]},e.label)))}):null,a?t.jsx("div",{css:bn,children:a.map((e=>{return t.jsxs("div",{css:yn(e.active),role:"button",onClick:()=>s?.(e),tabIndex:0,onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||s?.(e)},children:[t.jsx("div",{css:(n=e.imageUrl,r.css`
   height: 32px;
   width: 32px;
   border: 1px solid ${p("neutral",300)};
@@ -3529,7 +3540,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,"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%;