@worldresources/wri-design-systems 2.191.2 → 2.191.3

package/dist/index.cjs.js

@@ -2225,6 +2225,7 @@
     background-color: ${h("neutral",200)};
   }
 `,Ki=({id:t,label:n,caption:o,icon:i,value:a,variant:s="data",onItemClick:l,isExpanded:c=!1,ariaLabel:d,disabled:u=!1,isHighlighted:p=!1})=>{const f=("navigation"===s||"select"===s)&&!!l,g=f?e.chakra.button:e.chakra.div,x=d||("data"===s&&a?`${n}, ${a}`:n);return r.jsxs(g,{id:t,css:["data"===s?Xi:Yi,p&&{backgroundColor:h("neutral",200)}],onClick:f?l:void 0,tabIndex:f?0:void 0,onKeyDown:e=>{f&&("Enter"!==e.key&&" "!==e.key||l?.())},role:f?"button":void 0,"aria-expanded":f?c:void 0,"aria-label":x,disabled:u,"aria-selected":p,children:[r.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",children:[i,r.jsxs(e.Box,{flex:"1",minWidth:0,children:[r.jsx(e.Text,{fontWeight:"data"===s?"400":"700",css:Zi(u),children:n}),o&&r.jsx(e.Text,{css:Wi,children:o})]})]}),"data"===s&&a&&r.jsx(e.Text,{css:Gi,children:a}),"navigation"===s&&r.jsx(e.Icon,{as:R,boxSize:4,"aria-hidden":"true",css:Ui(u)})]})},Ji=({items:t,noBorder:n,highlightedIndex:o})=>r.jsx(e.Box,{css:qi(n),children:t.map(((e,t)=>r.jsx(Ki,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick,isHighlighted:t===o},e.id??e.label)))}),Qi=o.css`
+  background: transparent;
   svg {
     path {
       fill: ${h("primary",500)};
@@ -2250,7 +2251,7 @@
   line-height: 1.5rem;
   font-weight: 400;
   color: ${h("neutral",700)};
-
+  background: transparent;
   &[data-selected] {
     color: ${h("neutral",900)};
     font-weight: 700;
@@ -2299,7 +2300,7 @@
 `,la=e=>o.css`
   svg {
     path {
-      fill: ${e?h("primary",600):h("neutral",500)} !important;
+      fill: ${h("accessible",e?"controls-on-neutral-lights":100)} !important;
     }
   }
 `,ca=o.css`
@@ -2319,6 +2320,10 @@
     :hover {
       background-color: ${h("neutral",200)};
     }
+
+    &.selected {
+      background-color: ${h("primary",100)} !important;
+    }
   }
 `,pa=o.css`
   height: 480px;
@@ -3766,4 +3771,4 @@ function ap(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   border: 1px solid ${h("neutral",300)};
   border-radius: 4px;
   ${a?`background: ${a};`:""}
-`)}):r.jsx("div",{css:Ii,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:Di,children:t?.map((e=>r.jsx("div",{style:{width:i?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:Ai,children:e})},e)))}),n&&n.length?r.jsx("div",{css:Di,children:n.map((e=>r.jsx("div",{style:{width:i?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:Ni,style:{width:"100%"},children:e})},e)))}):null]});var a},exports.Search=({placeholder:t,disabled:o,size:i="default",options:a=[],resultsMaxHeight:s=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:u,onClear:p,renderResults:f,labels:g})=>{const x=w("Search",g),[m,v]=n.useState(""),{open:b,onOpen:y,onClose:C}=e.useDisclosure(),[j,k]=n.useState(a),[$,S]=n.useState(-1),[E,L]=n.useState(!1),R=n.useRef(null),T=`search-results-${n.useId()}`,O=e=>{const t=a.find((t=>t.id===e||t.label===e));t&&(d?.(t),v(""),C())};n.useEffect((()=>{if(u?.(m),!m)return void k(a);const e=a.filter((e=>e.id?.toLowerCase().includes(m.toLowerCase())||e.label.toLowerCase().includes(m.toLowerCase())||e.caption?.toLowerCase().includes(m.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>O(e.id||e.label)})));k(e),y()}),[m]),n.useEffect((()=>{function e(e){b&&R.current&&!R.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[b]);const P=m.length?r.jsx(de,{style:{marginTop:"0.5rem"},onClick:()=>{v(""),p?.()}}):null,M="none"!==c&&!!m.length&&j.length>0&&b;let _=h("neutral",500);o?_=h("neutral",500):E&&(_=h("primary",700));const I="small"===i?"1rem":"1.25rem",D=ms(s);return r.jsxs("div",{ref:R,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(ie,{width:I,height:I,fill:_,style:{marginTop:"0.5rem"}}),endElement:P,children:r.jsx(Ot,{autoComplete:"off",placeholder:t||x.filterPlaceholder,onChange:e=>{const{value:t}=e.target;v(t)},onFocus:()=>L(!0),onBlur:()=>L(!1),value:m,label:"",style:{paddingLeft:"2.5rem",borderColor:h("neutral",500)},type:"search","aria-label":t||x.filterAriaLabel,"aria-expanded":M,"aria-controls":T,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(M){if("ArrowDown"===e.key&&(e.preventDefault(),S((e=>Math.min(e+1,j.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),S((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=j[$];O(e.id||e.label)}"Escape"===e.key&&C()}}})}),(M||l&&!!m.length)&&"custom"===c&&f&&!l&&f({items:j,highlightedIndex:$,query:m,onSelect:O}),(M||l&&!!m.length)&&r.jsx(e.Portal,{container:R,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:D,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(Af,{highlightedIndex:$,items:j,query:m,onSelect:O}),"list"===c&&!l&&r.jsx(Ji,{items:j,highlightedIndex:$})]})})]})},exports.Select=rn,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:a,minimizedHeight:s,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:p,zIndex:h=1e3})=>{const f=n.useRef(null),g=n.useRef([]),[x,m]=n.useState(null),v=window.innerWidth>768,b=g.current;let y="Expand sheet";if(null!=x){const e=Vh(x,b);e>0&&e<b.length-1?y="Make full screen":e===b.length-1&&(y="Expanded sheet")}const w=!(null==x||!b.length||Vh(x,b)!==b.length-1);return r.jsx(Dh,{ref:f,css:Nh(!!e,h),className:u,open:i,onDismiss:a,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":y,css:Ah,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=b[b.length-1];if(v)return void f.current?.snapTo?.((()=>t));const n=x??b[0];let r=b.findIndex((e=>e>n));-1===r&&(r=b.length-1);const o=b[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:y}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,s||e,l+(o?n:0),c||t-t/6];return g.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&m(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=s||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:p,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:a="simple-pin"})=>t.jsx(Nn,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:a}),exports.Slider=lt,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:a,onChange:s})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const a=i.min||0,s=i.max||100;o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>s?s:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const a=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?a:o;const e=l[0],n=l[1];0===t?(o=o<a?a:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),s&&s(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:bn(o),"aria-label":e,children:[a?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:yn(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:wn,children:[i.step&&i.marks?r.jsx(rn,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),s&&s(t)}}):r.jsx(Ot,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(lt,{css:{},...i,value:l,onValueChangeEnd:e=>{c(e.value),s&&s(e.value)}}),2===l?.length?r.jsx(Ot,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=w("StepProgressIndicator",n);return r.jsxs("div",{css:dg,children:[e.map(((e,n)=>r.jsxs("div",{css:ug,children:[r.jsx("button",{css:pg(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx($,{height:"16px",width:"16px"}):n+1}),e.label?r.jsx("p",{css:hg(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:fg,children:r.jsx("div",{css:gg})})]})},exports.Switch=dt,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:a,activationMode:s="manual"})=>{const[l,c]=n.useState(_f(i,o)||0);return r.jsx("div",{css:Lf(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(_f(i,t=e)),void(a&&a(t));var t},activationMode:s,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===If(l)?r.jsx("div",{css:Of}):null,r.jsx(e.Tabs.Trigger,{css:[Rf,"view"===t&&Pf,"panel"===t&&Tf,"transparent"===t&&Mf],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===If(l)?r.jsx("div",{css:Of}):null]},o.label)))})})})},exports.Table=({columns:t,data:o=[],renderRow:i,striped:a,stickyHeader:s,pagination:l,selectable:c,selectedRows:d,variant:u="default",onSortColumn:p,onPageSizeChange:f,onPageChange:g,onAllItemsSelected:x,loading:m,labels:v})=>{const b=w("Table",v),[y,C]=n.useState({key:"",order:""}),{totalItems:j=o.length,currentPage:k=1,pageSize:$=10,showItemCount:S,showItemCountText:E}=l||{},R=(e,t)=>{C({key:e,order:t}),p&&p({key:e,order:t})},T=d?.length===o?.length,O=d&&d.length>0&&!T;return r.jsxs("div",{children:[r.jsxs(e.Table.Root,{css:oa(u),striped:a,stickyHeader:s,interactive:!0,children:[r.jsx(e.Table.Header,{css:ia(u),children:r.jsxs(e.Table.Row,{children:[c?r.jsx(e.Table.ColumnHeader,{children:r.jsx(De,{name:"header-checkbox",checked:T,indeterminate:O,onCheckedChange:({checked:e})=>{x&&x(e)}})}):null,t.map((t=>r.jsx(e.Table.ColumnHeader,{role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===y.order?"ascending":t.sortable&&"desc"===y.order?"descending":void 0,children:r.jsxs("div",{css:aa,children:[t.label,t.sortable?r.jsxs("div",{css:sa,children:[r.jsx(ce,{css:la(y.key===t.key&&"asc"===y.order),icon:r.jsx(L,{style:{transform:"rotate(180deg)"}}),onClick:()=>R(t.key,"asc"),"aria-label":b.ascendingLabel}),r.jsx(ce,{css:la(y.key===t.key&&"desc"===y.order),icon:r.jsx(L,{}),onClick:()=>R(t.key,"desc"),"aria-label":b.descendingLabel})]}):null]})},t.key)))]})}),r.jsx(e.Table.Body,{css:ua,children:o.map((e=>r.jsx(n.Fragment,{children:i(e)},e.id)))})]}),m?r.jsx("div",{css:pa,children:r.jsx(e.Spinner,{size:"lg",color:h("primary",500)})}):null,r.jsxs("div",{css:ca,children:[r.jsx("div",{children:S?r.jsx(Fi,{pageSize:$,currentPage:k,totalItems:j,onPageSizeChange:f,showItemCountText:E}):null}),l?r.jsx("div",{css:da,children:r.jsx(ra,{totalItems:j,pageSize:$,currentPage:k,onPageChange:g})}):null]})]})},exports.TableCell=fa,exports.TableRow=ha,exports.Tag=en,exports.TextInput=Ot,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:a,required:s,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:p,maxLength:h,labels:f,...g})=>{const x=w("Textarea",f),[m,v]=n.useState(d),[b,y]=n.useState(!1),[C,j]=n.useState(!1),[k,$]=n.useState(""),S=n.useId(),E=n.useId(),L=n.useId();n.useEffect((()=>{const{length:e}=d;p&&e<p&&e>0?(y(e<p),j(!1),$(x.enterAtLeastChars(p-e))):p&&0===e&&$(x.minChars(p)),h&&e>0?(y(!1),j(e>h),$(x.charsRemaining(h-e))):h&&0===e&&$(x.maxChars(h))}),[]);const R=!!a||b||C,T=[o?S:null,R?E:null,k?L:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:Cn(c),children:[R?r.jsx("div",{css:jn}):null,r.jsxs(e.Field.Root,{required:s,invalid:R,gap:"0",style:{marginLeft:R?"19px":"0px"},children:[t?r.jsxs(e.Field.Label,{css:kn(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":x.requiredSymbolLabel}),t,s?"":r.jsx("span",{children:x.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:S,css:$n(c,l),children:o}):null,a?r.jsx(e.Field.ErrorText,{id:E,css:En,"aria-label":`${x.errorPrefix} ${a}`,"aria-live":"polite",children:a}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:Ln(c,m,d),onChange:e=>{v(e.target.value);const{length:t}=e.target.value;p&&h?(y(t<p),j(t>h),$(x.charsRemaining(h-t))):p?(y(t<p),j(!1),$(t<p?x.enterAtLeastChars(p-t):"")):h&&(j(t>h),y(!1),$(x.charsRemaining(h-t))),u&&u(e)},value:m,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...g}),b&&p?r.jsx(e.Field.ErrorText,{id:E,css:En,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:x.needMoreChars(p-m.length)}):null,C&&h?r.jsx(e.Field.ErrorText,{id:E,css:En,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:x.tooManyChars(m.length-h)}):null,!k||C||b?null:r.jsx(e.Field.HelperText,{id:L,css:Sn,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=w("Toast",t);return Object.keys(Cg).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:Cg[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:xg,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(E,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(I,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(D,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(A,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:mg,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:vg,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(C,{css:bg,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),Cg[t].dismiss()}}):null,o.meta?.closable?r.jsx(C,{css:yg,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(T,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>Cg[t].dismiss()}):null]}):null]})})},t)))},exports.Toolbar=me,exports.Tooltip=ge,exports.designSystemStyles=p,exports.designSystemStylesForTailwind=u,exports.getThemedColor=h,exports.showToast=e=>{Cg[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};
+`)}):r.jsx("div",{css:Ii,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:Di,children:t?.map((e=>r.jsx("div",{style:{width:i?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:Ai,children:e})},e)))}),n&&n.length?r.jsx("div",{css:Di,children:n.map((e=>r.jsx("div",{style:{width:i?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:Ni,style:{width:"100%"},children:e})},e)))}):null]});var a},exports.Search=({placeholder:t,disabled:o,size:i="default",options:a=[],resultsMaxHeight:s=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:u,onClear:p,renderResults:f,labels:g})=>{const x=w("Search",g),[m,v]=n.useState(""),{open:b,onOpen:y,onClose:C}=e.useDisclosure(),[j,k]=n.useState(a),[$,S]=n.useState(-1),[E,L]=n.useState(!1),R=n.useRef(null),T=`search-results-${n.useId()}`,O=e=>{const t=a.find((t=>t.id===e||t.label===e));t&&(d?.(t),v(""),C())};n.useEffect((()=>{if(u?.(m),!m)return void k(a);const e=a.filter((e=>e.id?.toLowerCase().includes(m.toLowerCase())||e.label.toLowerCase().includes(m.toLowerCase())||e.caption?.toLowerCase().includes(m.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>O(e.id||e.label)})));k(e),y()}),[m]),n.useEffect((()=>{function e(e){b&&R.current&&!R.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[b]);const P=m.length?r.jsx(de,{style:{marginTop:"0.5rem"},onClick:()=>{v(""),p?.()}}):null,M="none"!==c&&!!m.length&&j.length>0&&b;let _=h("neutral",500);o?_=h("neutral",500):E&&(_=h("primary",700));const I="small"===i?"1rem":"1.25rem",D=ms(s);return r.jsxs("div",{ref:R,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(ie,{width:I,height:I,fill:_,style:{marginTop:"0.5rem"}}),endElement:P,children:r.jsx(Ot,{autoComplete:"off",placeholder:t||x.filterPlaceholder,onChange:e=>{const{value:t}=e.target;v(t)},onFocus:()=>L(!0),onBlur:()=>L(!1),value:m,label:"",style:{paddingLeft:"2.5rem",borderColor:h("neutral",500)},type:"search","aria-label":t||x.filterAriaLabel,"aria-expanded":M,"aria-controls":T,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(M){if("ArrowDown"===e.key&&(e.preventDefault(),S((e=>Math.min(e+1,j.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),S((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=j[$];O(e.id||e.label)}"Escape"===e.key&&C()}}})}),(M||l&&!!m.length)&&"custom"===c&&f&&!l&&f({items:j,highlightedIndex:$,query:m,onSelect:O}),(M||l&&!!m.length)&&r.jsx(e.Portal,{container:R,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:D,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(Af,{highlightedIndex:$,items:j,query:m,onSelect:O}),"list"===c&&!l&&r.jsx(Ji,{items:j,highlightedIndex:$})]})})]})},exports.Select=rn,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:a,minimizedHeight:s,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:p,zIndex:h=1e3})=>{const f=n.useRef(null),g=n.useRef([]),[x,m]=n.useState(null),v=window.innerWidth>768,b=g.current;let y="Expand sheet";if(null!=x){const e=Vh(x,b);e>0&&e<b.length-1?y="Make full screen":e===b.length-1&&(y="Expanded sheet")}const w=!(null==x||!b.length||Vh(x,b)!==b.length-1);return r.jsx(Dh,{ref:f,css:Nh(!!e,h),className:u,open:i,onDismiss:a,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":y,css:Ah,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=b[b.length-1];if(v)return void f.current?.snapTo?.((()=>t));const n=x??b[0];let r=b.findIndex((e=>e>n));-1===r&&(r=b.length-1);const o=b[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:y}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,s||e,l+(o?n:0),c||t-t/6];return g.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&m(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=s||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:p,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:a="simple-pin"})=>t.jsx(Nn,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:a}),exports.Slider=lt,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:a,onChange:s})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const a=i.min||0,s=i.max||100;o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>s?s:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const a=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?a:o;const e=l[0],n=l[1];0===t?(o=o<a?a:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),s&&s(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:bn(o),"aria-label":e,children:[a?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:yn(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:wn,children:[i.step&&i.marks?r.jsx(rn,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),s&&s(t)}}):r.jsx(Ot,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(lt,{css:{},...i,value:l,onValueChangeEnd:e=>{c(e.value),s&&s(e.value)}}),2===l?.length?r.jsx(Ot,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=w("StepProgressIndicator",n);return r.jsxs("div",{css:dg,children:[e.map(((e,n)=>r.jsxs("div",{css:ug,children:[r.jsx("button",{css:pg(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx($,{height:"16px",width:"16px"}):n+1}),e.label?r.jsx("p",{css:hg(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:fg,children:r.jsx("div",{css:gg})})]})},exports.Switch=dt,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:a,activationMode:s="manual"})=>{const[l,c]=n.useState(_f(i,o)||0);return r.jsx("div",{css:Lf(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(_f(i,t=e)),void(a&&a(t));var t},activationMode:s,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===If(l)?r.jsx("div",{css:Of}):null,r.jsx(e.Tabs.Trigger,{css:[Rf,"view"===t&&Pf,"panel"===t&&Tf,"transparent"===t&&Mf],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===If(l)?r.jsx("div",{css:Of}):null]},o.label)))})})})},exports.Table=({columns:t,data:o=[],renderRow:i,striped:a,stickyHeader:s,pagination:l,selectable:c,selectedRows:d,variant:u="default",onSortColumn:p,onPageSizeChange:f,onPageChange:g,onAllItemsSelected:x,loading:m,labels:v})=>{const b=w("Table",v),[y,C]=n.useState({key:"",order:""}),{totalItems:j=o.length,currentPage:k=1,pageSize:$=10,showItemCount:S,showItemCountText:E}=l||{},R=(e,t)=>{C({key:e,order:t}),p&&p({key:e,order:t})},T=d?.length===o?.length,O=d&&d.length>0&&!T;return r.jsxs("div",{children:[r.jsxs(e.Table.Root,{css:oa(u),striped:a,stickyHeader:s,interactive:!0,children:[r.jsx(e.Table.Header,{css:ia(u),children:r.jsxs(e.Table.Row,{children:[c?r.jsx(e.Table.ColumnHeader,{children:r.jsx(De,{name:"header-checkbox",checked:T,indeterminate:O,onCheckedChange:({checked:e})=>{x&&x(e)}})}):null,t.map((t=>r.jsx(e.Table.ColumnHeader,{role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===y.order?"ascending":t.sortable&&"desc"===y.order?"descending":void 0,children:r.jsxs("div",{css:aa,children:[t.label,t.sortable?r.jsxs("div",{css:sa,children:[r.jsx(ce,{css:la(y.key===t.key&&"asc"===y.order),icon:r.jsx(L,{style:{transform:"rotate(180deg)"}}),onClick:()=>R(t.key,"asc"),"aria-label":b.ascendingLabel}),r.jsx(ce,{css:la(y.key===t.key&&"desc"===y.order),icon:r.jsx(L,{}),onClick:()=>R(t.key,"desc"),"aria-label":b.descendingLabel})]}):null]})},t.key)))]})}),r.jsx(e.Table.Body,{css:ua,children:o.map((e=>r.jsx(n.Fragment,{children:i(e,{className:d?.some((t=>t.id===e.id))?"selected":void 0})},e.id)))})]}),m?r.jsx("div",{css:pa,children:r.jsx(e.Spinner,{size:"lg",color:h("primary",500)})}):null,r.jsxs("div",{css:ca,children:[r.jsx("div",{children:S?r.jsx(Fi,{pageSize:$,currentPage:k,totalItems:j,onPageSizeChange:f,showItemCountText:E}):null}),l?r.jsx("div",{css:da,children:r.jsx(ra,{totalItems:j,pageSize:$,currentPage:k,onPageChange:g})}):null]})]})},exports.TableCell=fa,exports.TableRow=ha,exports.Tag=en,exports.TextInput=Ot,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:a,required:s,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:p,maxLength:h,labels:f,...g})=>{const x=w("Textarea",f),[m,v]=n.useState(d),[b,y]=n.useState(!1),[C,j]=n.useState(!1),[k,$]=n.useState(""),S=n.useId(),E=n.useId(),L=n.useId();n.useEffect((()=>{const{length:e}=d;p&&e<p&&e>0?(y(e<p),j(!1),$(x.enterAtLeastChars(p-e))):p&&0===e&&$(x.minChars(p)),h&&e>0?(y(!1),j(e>h),$(x.charsRemaining(h-e))):h&&0===e&&$(x.maxChars(h))}),[]);const R=!!a||b||C,T=[o?S:null,R?E:null,k?L:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:Cn(c),children:[R?r.jsx("div",{css:jn}):null,r.jsxs(e.Field.Root,{required:s,invalid:R,gap:"0",style:{marginLeft:R?"19px":"0px"},children:[t?r.jsxs(e.Field.Label,{css:kn(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":x.requiredSymbolLabel}),t,s?"":r.jsx("span",{children:x.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:S,css:$n(c,l),children:o}):null,a?r.jsx(e.Field.ErrorText,{id:E,css:En,"aria-label":`${x.errorPrefix} ${a}`,"aria-live":"polite",children:a}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:Ln(c,m,d),onChange:e=>{v(e.target.value);const{length:t}=e.target.value;p&&h?(y(t<p),j(t>h),$(x.charsRemaining(h-t))):p?(y(t<p),j(!1),$(t<p?x.enterAtLeastChars(p-t):"")):h&&(j(t>h),y(!1),$(x.charsRemaining(h-t))),u&&u(e)},value:m,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...g}),b&&p?r.jsx(e.Field.ErrorText,{id:E,css:En,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:x.needMoreChars(p-m.length)}):null,C&&h?r.jsx(e.Field.ErrorText,{id:E,css:En,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:x.tooManyChars(m.length-h)}):null,!k||C||b?null:r.jsx(e.Field.HelperText,{id:L,css:Sn,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=w("Toast",t);return Object.keys(Cg).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:Cg[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:xg,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(E,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(I,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(D,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(A,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:mg,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:vg,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(C,{css:bg,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),Cg[t].dismiss()}}):null,o.meta?.closable?r.jsx(C,{css:yg,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(T,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>Cg[t].dismiss()}):null]}):null]})})},t)))},exports.Toolbar=me,exports.Tooltip=ge,exports.designSystemStyles=p,exports.designSystemStylesForTailwind=u,exports.getThemedColor=h,exports.showToast=e=>{Cg[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};

package/dist/index.esm.js

@@ -2282,6 +2282,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     background-color: ${Re("neutral",200)};
   }
 `,Nl=({id:e,label:t,caption:n,icon:o,value:a,variant:l="data",onItemClick:s,isExpanded:c=!1,ariaLabel:d,disabled:u=!1,isHighlighted:p=!1})=>{const h=("navigation"===l||"select"===l)&&!!s,f=h?T.button:T.div,g=d||("data"===l&&a?`${t}, ${a}`:t);return ve(f,{id:e,css:["data"===l?_l:Dl,p&&{backgroundColor:Re("neutral",200)}],onClick:h?s:void 0,tabIndex:h?0:void 0,onKeyDown:e=>{h&&("Enter"!==e.key&&" "!==e.key||s?.())},role:h?"button":void 0,"aria-expanded":h?c:void 0,"aria-label":g,disabled:u,"aria-selected":p,children:[ve(P,{gap:3,flex:"1",overflow:"hidden",children:[o,ve(r,{flex:"1",minWidth:0,children:[be(M,{fontWeight:"data"===l?"400":"700",css:Ol(u),children:t}),n&&be(M,{css:Tl,children:n})]})]}),"data"===l&&a&&be(M,{css:Pl,children:a}),"navigation"===l&&be(i,{as:Ze,boxSize:4,"aria-hidden":"true",css:Ml(u)})]})},Il=({items:e,noBorder:t,highlightedIndex:n})=>be(r,{css:Rl(t),children:e.map(((e,t)=>be(Nl,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick,isHighlighted:t===n},e.id??e.label)))}),Vl=ye`
+  background: transparent;
   svg {
     path {
       fill: ${Re("primary",500)};
@@ -2307,7 +2308,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
   line-height: 1.5rem;
   font-weight: 400;
   color: ${Re("neutral",700)};
-
+  background: transparent;
   &[data-selected] {
     color: ${Re("neutral",900)};
     font-weight: 700;
@@ -2356,7 +2357,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
 `,Wl=e=>ye`
   svg {
     path {
-      fill: ${e?Re("primary",600):Re("neutral",500)} !important;
+      fill: ${Re("accessible",e?"controls-on-neutral-lights":100)} !important;
     }
   }
 `,Gl=ye`
@@ -2376,13 +2377,17 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     :hover {
       background-color: ${Re("neutral",200)};
     }
+
+    &.selected {
+      background-color: ${Re("primary",100)} !important;
+    }
   }
 `,Yl=ye`
   height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
-`,Kl=({columns:e,data:t=[],renderRow:n,striped:r,stickyHeader:i,pagination:a,selectable:l,selectedRows:s,variant:c="default",onSortColumn:d,onPageSizeChange:u,onPageChange:p,onAllItemsSelected:h,loading:f,labels:g})=>{const m=Ve("Table",g),[v,b]=ae({key:"",order:""}),{totalItems:x=t.length,currentPage:y=1,pageSize:w=10,showItemCount:C,showItemCountText:$}=a||{},k=(e,t)=>{b({key:e,order:t}),d&&d({key:e,order:t})},S=s?.length===t?.length,E=s&&s.length>0&&!S;return ve("div",{children:[ve(N.Root,{css:Bl(c),striped:r,stickyHeader:i,interactive:!0,children:[be(N.Header,{css:Fl(c),children:ve(N.Row,{children:[l?be(N.ColumnHeader,{children:be(tn,{name:"header-checkbox",checked:S,indeterminate:E,onCheckedChange:({checked:e})=>{h&&h(e)}})}):null,e.map((e=>be(N.ColumnHeader,{role:e.sortable?"columnheader":void 0,"aria-sort":e.sortable&&"asc"===v.order?"ascending":e.sortable&&"desc"===v.order?"descending":void 0,children:ve("div",{css:ql,children:[e.label,e.sortable?ve("div",{css:Zl,children:[be(St,{css:Wl(v.key===e.key&&"asc"===v.order),icon:be(qe,{style:{transform:"rotate(180deg)"}}),onClick:()=>k(e.key,"asc"),"aria-label":m.ascendingLabel}),be(St,{css:Wl(v.key===e.key&&"desc"===v.order),icon:be(qe,{}),onClick:()=>k(e.key,"desc"),"aria-label":m.descendingLabel})]}):null]})},e.key)))]})}),be(N.Body,{css:Xl,children:t.map((e=>be(te.Fragment,{children:n(e)},e.id)))})]}),f?be("div",{css:Yl,children:be(o,{size:"lg",color:Re("primary",500)})}):null,ve("div",{css:Gl,children:[be("div",{children:C?be(Ll,{pageSize:w,currentPage:y,totalItems:x,onPageSizeChange:u,showItemCountText:$}):null}),a?be("div",{css:Ul,children:be(Hl,{totalItems:x,pageSize:w,currentPage:y,onPageChange:p})}):null]})]})},Jl=N.Row,Ql=N.Cell,es=ye`
+`,Kl=({columns:e,data:t=[],renderRow:n,striped:r,stickyHeader:i,pagination:a,selectable:l,selectedRows:s,variant:c="default",onSortColumn:d,onPageSizeChange:u,onPageChange:p,onAllItemsSelected:h,loading:f,labels:g})=>{const m=Ve("Table",g),[v,b]=ae({key:"",order:""}),{totalItems:x=t.length,currentPage:y=1,pageSize:w=10,showItemCount:C,showItemCountText:$}=a||{},k=(e,t)=>{b({key:e,order:t}),d&&d({key:e,order:t})},S=s?.length===t?.length,E=s&&s.length>0&&!S;return ve("div",{children:[ve(N.Root,{css:Bl(c),striped:r,stickyHeader:i,interactive:!0,children:[be(N.Header,{css:Fl(c),children:ve(N.Row,{children:[l?be(N.ColumnHeader,{children:be(tn,{name:"header-checkbox",checked:S,indeterminate:E,onCheckedChange:({checked:e})=>{h&&h(e)}})}):null,e.map((e=>be(N.ColumnHeader,{role:e.sortable?"columnheader":void 0,"aria-sort":e.sortable&&"asc"===v.order?"ascending":e.sortable&&"desc"===v.order?"descending":void 0,children:ve("div",{css:ql,children:[e.label,e.sortable?ve("div",{css:Zl,children:[be(St,{css:Wl(v.key===e.key&&"asc"===v.order),icon:be(qe,{style:{transform:"rotate(180deg)"}}),onClick:()=>k(e.key,"asc"),"aria-label":m.ascendingLabel}),be(St,{css:Wl(v.key===e.key&&"desc"===v.order),icon:be(qe,{}),onClick:()=>k(e.key,"desc"),"aria-label":m.descendingLabel})]}):null]})},e.key)))]})}),be(N.Body,{css:Xl,children:t.map((e=>be(te.Fragment,{children:n(e,{className:s?.some((t=>t.id===e.id))?"selected":void 0})},e.id)))})]}),f?be("div",{css:Yl,children:be(o,{size:"lg",color:Re("primary",500)})}):null,ve("div",{css:Gl,children:[be("div",{children:C?be(Ll,{pageSize:w,currentPage:y,totalItems:x,onPageSizeChange:u,showItemCountText:$}):null}),a?be("div",{css:Ul,children:be(Hl,{totalItems:x,pageSize:w,currentPage:y,onPageChange:p})}):null]})]})},Jl=N.Row,Ql=N.Cell,es=ye`
   border: 1px solid ${Re("neutral",300)};
 `,ts=ye`
   padding: 16px;

package/package.json

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