@worldresources/wri-design-systems 2.133.2 → 2.133.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -2788,7 +2788,7 @@
2788
2788
  color: ${p("error",100)};
2789
2789
  `,$i=(e,t)=>r.css`
2790
2790
  width: 100%;
2791
- min-width: ${"small"===e?"234px":"366px"};
2791
+ min-width: ${"small"===e?"234px":"320px"};
2792
2792
  border-radius: 4px;
2793
2793
  padding: ${"small"===e?"8px 8px 12px 8px":"8px 12px 12px 12px"};
2794
2794
  display: flex;
@@ -3007,7 +3007,7 @@
3007
3007
  border: 1px solid ${p("neutral",300)};
3008
3008
  border-radius: 4px;
3009
3009
  ${l?`background: ${l};`:""}
3010
- `)}):t.jsx("div",{css:Ar,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Zr,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Wr,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Zr,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Yr,style:{width:"100%"},children:e})},e)))}):null]});var l},exports.Select=Pt,exports.Sheet=({header:e,content:r,footer:n,open:i=!1,onClose:l,minimizedHeight:a=50,midHeight:s=200,maxFullHeight:c=1e3,defaultSnap:d="minimized"})=>{const[p,u]=o.useState(void 0),[x,h]=o.useState(void 0),g=o.useRef(null),f=o.useRef(null);o.useEffect((()=>{u(g?.current?.getBoundingClientRect()?.height),h(f?.current?.getBoundingClientRect()?.height)}),[e,n]);const b=o.useMemo((()=>{if("undefined"==typeof window)return 0;const e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;height:env(safe-area-inset-bottom);",document.body.appendChild(e);const t=e.getBoundingClientRect().height||0;return document.body.removeChild(e),t}),[]),C=o.useMemo((()=>{const e=(()=>{if("undefined"!=typeof window){const e=.9*(window?.screen?.height||0);return e>c?c:e}return 0})(),t=Math.max(0,e-b);return c?Math.min(t,c):t}),[b,c]),m=o.useMemo((()=>({closed:18,minimized:Math.min(a,C),mid:Math.min(Math.max(a,s),C),fullHeight:C,full:C})),[a,s,C]),[v,w]=o.useState(d),[j,y]=o.useState(0);o.useEffect((()=>{if(i){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[i]),o.useEffect((()=>{i?y(m[v]):(y(0),w(d))}),[v,m,i]);const $=o.useRef(null),k=o.useRef(null),S=o.useRef(0),L=o.useRef(0),M=o.useRef(0),R=o.useRef(0),V=o.useRef(0),I=o.useRef(!1);return o.useEffect((()=>{const e=$.current;if(!e)return;const t=t=>{i&&(I.current=!0,e.setPointerCapture(t.pointerId),S.current=t.clientY,L.current=j,M.current=t.clientY,R.current=performance.now(),V.current=0,k.current&&(k.current.style.transition="none"))},r=e=>{if(!I.current)return;const t=e.clientY-S.current,r=Math.max(0,Math.min(C,L.current-t));y(r);const n=performance.now(),o=Math.max(1,n-R.current),i=(e.clientY-M.current)/(o/1e3);V.current=i,M.current=e.clientY,R.current=n},n=()=>{if(!I.current)return;I.current=!1,k.current&&(k.current.style.transition="height 300ms ease, transform 300ms ease");const e=V.current,t=j,{closed:r,minimized:n,mid:o,full:i}=m;if(e>900&&t<=o||t<=.6*n)return y(0),void window.setTimeout((()=>l&&l()),260);const a=[{k:"closed",v:r},{k:"minimized",v:n},{k:"mid",v:o},{k:"full",v:i}];let s=v;Math.abs(e)>900?s=e<0?t<(o+i)/2?"mid":"full":t>(n+o)/2?"mid":"minimized":(a.sort(((e,r)=>Math.abs(t-e.v)-Math.abs(t-r.v))),s=a[0].k),w(s);y("full"===s?i:"mid"===s?o:n)};return e.addEventListener("pointerdown",t),window.addEventListener("pointermove",r),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{e.removeEventListener("pointerdown",t),window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}}),[i,j,C,m,v]),o.useEffect((()=>{if(i){y(0);const e=window.setTimeout((()=>y(m[v])),10);return()=>window.clearTimeout(e)}y(0)}),[i,v,m]),t.jsx("div",{css:yo,"aria-hidden":!i,children:t.jsxs("div",{ref:k,role:"dialog","aria-modal":"true",css:$o,style:{height:`${j}px`,transform:i?"translateY(0)":"translateY(100%)"},children:[t.jsx("div",{ref:$,css:ko,role:"button","aria-label":"Drag to expand or collapse",tabIndex:0,children:t.jsx("span",{css:So})}),e?t.jsx("div",{css:Lo,ref:g,children:e}):null,t.jsx("div",{css:Mo(p,x),children:r}),n&&"full"===v?t.jsx("div",{css:Ro,ref:f,children:n}):null]})})},exports.Slider=Ae,exports.SliderInput=({label:e,caption:r,size:n="default",sliderItem:i,required:l,onChange:a})=>{const[s,c]=o.useState(i.value||[]),d=(e,t)=>{const r=e.target.value,n=[...s];let o=r?parseInt(r,10):r;const l=i.min||0,a=i.max||100;o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>a?a:o,n[t]=o,c(n)},p=(e,t)=>{const r=e.target.value||"0",n=[...s];let o=parseInt(r,10);const l=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>d?d:o,2===s?.length){o=Number.isNaN(o)?l:o;const e=s[0],r=s[1];0===t?(o=o<l?l:o,o=o>r?r:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}n[t]=o,c(n),a&&a(n)};return t.jsxs("div",{children:[t.jsxs("p",{css:Kt(n),"aria-label":e,children:[l?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:Jt(n),"aria-label":r,children:r}):null,t.jsxs("div",{css:Qt,children:[i.step&&i.marks?t.jsx(Pt,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${s?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>p(e,0),className:"opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(Ae,{css:{},...i,value:s,onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===s?.length?t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>p(e,1),className:"opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:_i,children:[e.map(((e,o)=>{return t.jsxs("div",{css:Pi,children:[t.jsx("button",{css:(i=n>=o+1,r.css`
3010
+ `)}):t.jsx("div",{css:Ar,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Zr,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Wr,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Zr,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Yr,style:{width:"100%"},children:e})},e)))}):null]});var l},exports.Select=Pt,exports.Sheet=({header:e,content:r,footer:n,open:i=!1,onClose:l,minimizedHeight:a=50,midHeight:s=200,maxFullHeight:c=1e3,defaultSnap:d="minimized"})=>{const[p,u]=o.useState(void 0),[x,h]=o.useState(void 0),g=o.useRef(null),f=o.useRef(null);o.useEffect((()=>{u(g?.current?.getBoundingClientRect()?.height),h(f?.current?.getBoundingClientRect()?.height)}),[e,n]);const b=o.useMemo((()=>{if("undefined"==typeof window)return 0;const e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;height:env(safe-area-inset-bottom);",document.body.appendChild(e);const t=e.getBoundingClientRect().height||0;return document.body.removeChild(e),t}),[]),C=o.useMemo((()=>{const e=(()=>{if("undefined"!=typeof window){const e=.9*(window?.screen?.height||0);return e>c?c:e}return 0})(),t=Math.max(0,e-b);return c?Math.min(t,c):t}),[b,c]),m=o.useMemo((()=>({closed:18,minimized:Math.min(a,C),mid:Math.min(Math.max(a,s),C),fullHeight:C,full:C})),[a,s,C]),[v,w]=o.useState(d),[j,y]=o.useState(0);o.useEffect((()=>{if(i){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[i]),o.useEffect((()=>{i?y(m[v]):(y(0),w(d))}),[v,m,i]);const $=o.useRef(null),k=o.useRef(null),S=o.useRef(0),L=o.useRef(0),M=o.useRef(0),R=o.useRef(0),V=o.useRef(0),I=o.useRef(!1);return o.useEffect((()=>{const e=$.current;if(!e)return;const t=t=>{i&&(I.current=!0,e.setPointerCapture(t.pointerId),S.current=t.clientY,L.current=j,M.current=t.clientY,R.current=performance.now(),V.current=0,k.current&&(k.current.style.transition="none"))},r=e=>{if(!I.current)return;const t=e.clientY-S.current,r=Math.max(0,Math.min(C,L.current-t));y(r);const n=performance.now(),o=Math.max(1,n-R.current),i=(e.clientY-M.current)/(o/1e3);V.current=i,M.current=e.clientY,R.current=n},n=()=>{if(!I.current)return;I.current=!1,k.current&&(k.current.style.transition="height 300ms ease, transform 300ms ease");const e=V.current,t=j,{closed:r,minimized:n,mid:o,full:i}=m;if(e>900&&t<=o||t<=.6*n)return y(0),void window.setTimeout((()=>l&&l()),260);const a=[{k:"closed",v:r},{k:"minimized",v:n},{k:"mid",v:o},{k:"full",v:i}];let s=v;Math.abs(e)>900?s=e<0?t<(o+i)/2?"mid":"full":t>(n+o)/2?"mid":"minimized":(a.sort(((e,r)=>Math.abs(t-e.v)-Math.abs(t-r.v))),s=a[0].k),w(s);y("full"===s?i:"mid"===s?o:n)};return e.addEventListener("pointerdown",t),window.addEventListener("pointermove",r),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{e.removeEventListener("pointerdown",t),window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}}),[i,j,C,m,v]),o.useEffect((()=>{if(i){y(0);const e=window.setTimeout((()=>y(m[v])),10);return()=>window.clearTimeout(e)}y(0)}),[i,v,m]),t.jsx("div",{css:yo,"aria-hidden":!i,children:t.jsxs("div",{ref:k,role:"dialog","aria-modal":"true",css:$o,style:{height:`${j}px`,transform:i?"translateY(0)":"translateY(100%)"},children:[t.jsx("div",{ref:$,css:ko,role:"button","aria-label":"Drag to expand or collapse",tabIndex:0,children:t.jsx("span",{css:So})}),e?t.jsx("div",{css:Lo,ref:g,children:e}):null,t.jsx("div",{css:Mo(p,x),children:r}),n&&"full"===v?t.jsx("div",{css:Ro,ref:f,children:n}):null]})})},exports.Slider=Ae,exports.SliderInput=({label:e,caption:r,size:n="default",sliderItem:i,required:l,onChange:a})=>{const[s,c]=o.useState(i.value||[]),d=(e,t)=>{const r=e.target.value,n=[...s];let o=r?parseInt(r,10):r;const l=i.min||0,a=i.max||100;o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>a?a:o,n[t]=o,c(n)},p=(e,t)=>{const r=e.target.value||"0",n=[...s];let o=parseInt(r,10);const l=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>d?d:o,2===s?.length){o=Number.isNaN(o)?l:o;const e=s[0],r=s[1];0===t?(o=o<l?l:o,o=o>r?r:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}n[t]=o,c(n),a&&a(n)};return t.jsxs("div",{children:[t.jsxs("p",{css:Kt(n),"aria-label":e,children:[l?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:Jt(n),"aria-label":r,children:r}):null,t.jsxs("div",{css:Qt,children:[i.step&&i.marks?t.jsx(Pt,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${s?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>p(e,0),className:"opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(Ae,{css:{},...i,value:s,onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===s?.length?t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>p(e,1),className:"opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:_i,children:[e.map(((e,o)=>{return t.jsxs("div",{css:Pi,children:[t.jsx("button",{css:(i=n>=o+1,l=n<o+1,r.css`
3011
3011
  height: 32px;
3012
3012
  width: 32px;
3013
3013
  display: flex;
@@ -3021,5 +3021,26 @@
3021
3021
  font-weight: 700;
3022
3022
  cursor: not-allowed;
3023
3023
 
3024
- ${i?`\n background-color: ${p("primary",100)};\n color: ${p("primary",800)};\n border: 1px solid ${p("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
3025
- `),type:"button",onClick:e.onClick,"aria-current":n===o+1,"aria-disabled":n<o+1,disabled:n<o+1,"aria-label":`Current Step ${o}${e.label?` ${e.label}`:""}`,children:n>o+1?t.jsx(v,{height:"16px",width:"16px"}):o+1}),e.label?t.jsx("p",{css:Bi(n===o+1),children:e.label}):null]},`${e.label}-${o}`);var i})),t.jsx("div",{css:Hi,children:t.jsx("div",{css:zi})})]}),exports.Switch=We,exports.TabBar=({variant:r="panel",defaultValue:n,tabs:i,onTabClick:l})=>{const[a,s]=o.useState(gi(i,n)||0),c="view"===r;return t.jsx("div",{css:di(r),children:t.jsx(e.Tabs.Root,{width:"full",defaultValue:n||i?.[0]?.value,onValueChange:({value:e})=>{return s(gi(i,t=e)),void(l&&l(t));var t},children:t.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((r,n)=>t.jsxs(o.Fragment,{children:[c&&1===n&&"left"===fi(a)?t.jsx("div",{css:xi}):null,t.jsx(e.Tabs.Trigger,{css:[pi,c?hi:ui],"aria-label":r["aria-label"]||r.label,...r,children:t.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"5px",children:[r.icon,r.label]})},r.label),c&&1===n&&"right"===fi(a)?t.jsx("div",{css:xi}):null]},r.label)))})})})},exports.Table=({columns:r,data:n,renderRow:i,striped:l,stickyHeader:a,pagination:s,selectable:c,selectedRows:d,onSortColumn:p,onPageSizeChange:u,onPageChange:x,onAllItemsSelected:h})=>{const[g,f]=o.useState({key:"",order:""}),{totalItems:b=n.length,currentPage:C=1,pageSize:m=10,showItemCount:v,showItemCountText:w}=s||{},j=(e,t)=>{f({key:e,order:t}),p&&p({key:e,order:t})},$=d?.length===n?.length,k=d&&d.length>0&&!$;return t.jsxs("div",{children:[t.jsxs(e.Table.Root,{css:nn,striped:l,stickyHeader:a,interactive:!0,children:[t.jsx(e.Table.Header,{css:on,children:t.jsxs(e.Table.Row,{children:[c?t.jsx(e.Table.ColumnHeader,{children:t.jsx(Ce,{name:"header-checkbox",checked:$,indeterminate:k,onCheckedChange:({checked:e})=>{h&&h(e)}})}):null,r.map((r=>t.jsx(e.Table.ColumnHeader,{role:r.sortable?"columnheader":void 0,"aria-sort":r.sortable&&"asc"===g.order?"ascending":r.sortable&&"desc"===g.order?"descending":void 0,children:t.jsxs("div",{css:ln,children:[r.label,r.sortable?t.jsxs("div",{css:an,children:[t.jsx(K,{css:sn(g.key===r.key&&"asc"===g.order),icon:t.jsx(y,{style:{transform:"rotate(180deg)"}}),onClick:()=>j(r.key,"asc"),"aria-label":"Ascending"}),t.jsx(K,{css:sn(g.key===r.key&&"desc"===g.order),icon:t.jsx(y,{}),onClick:()=>j(r.key,"desc"),"aria-label":"Descending"})]}):null]})},r.key)))]})}),t.jsx(e.Table.Body,{children:n.map((e=>t.jsx(o.Fragment,{children:i(e)},e.id)))})]}),t.jsxs("div",{css:cn,children:[t.jsx("div",{children:v?t.jsx(Kr,{pageSize:m,currentPage:C,totalItems:b,onPageSizeChange:u,showItemCountText:w}):null}),s?t.jsx("div",{css:dn,children:t.jsx(rn,{totalItems:b,pageSize:m,currentPage:C,onPageChange:x})}):null]})]})},exports.TableCell=un,exports.TableRow=pn,exports.Tag=Tt,exports.TextInput=dt,exports.Textarea=({label:r,caption:n,placeholder:i,errorMessage:l,required:a,disabled:s,size:c="default",defaultValue:d="",onChange:p,minLength:u,maxLength:x,...h})=>{const[g,f]=o.useState(d),[b,C]=o.useState(!1),[m,v]=o.useState(!1),[w,j]=o.useState("");o.useEffect((()=>{const{length:e}=d;u&&e<u&&e>0?(C(e<u),v(!1),j(`Enter at least ${u-e} characters`)):u&&0===e&&j(`Min ${u} characters`),x&&e>0?(C(!1),v(e>x),j(`You have ${x-e} characters remaining`)):x&&0===e&&j(`Max ${x} characters`)}),[]);const y=!!l||b||m;return t.jsxs("div",{css:er(c),children:[y?t.jsx("div",{css:tr}):null,t.jsxs(e.Field.Root,{required:a,invalid:y,gap:"0",style:{marginLeft:y?"19px":"0px"},children:[r?t.jsxs(e.Field.Label,{css:rr(c,s),"aria-label":r,children:[t.jsx(e.Field.RequiredIndicator,{"aria-label":"required"}),r,a?"":t.jsx("span",{children:" (Optional)"})]}):null,n?t.jsx(e.Field.HelperText,{css:nr(c,s),"aria-label":n,children:n}):null,l?t.jsx(e.Field.ErrorText,{css:ir,"aria-label":l,children:l}):null,t.jsx(e.Textarea,{placeholder:i,disabled:s,css:lr(c,g,d),onChange:e=>{f(e.target.value);const{length:t}=e.target.value;u&&x?(C(t<u),v(t>x),j(`You have ${x-t} characters remaining`)):u?(C(t<u),v(!1),j(t<u?`Enter at least ${u-t} characters`:"")):x&&(v(t>x),C(!1),j(`You have ${x-t} characters remaining`)),p&&p(e)},value:g,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h}),b&&u?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",u-g.length," more characters"]}):null,m&&x?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",g.length-x," characters too many"]}):null,!w||m||b?null:t.jsx(e.Field.HelperText,{css:or,"aria-label":w,children:w})]})]})},exports.Toast=()=>Object.keys(Yi).map((r=>t.jsx(e.Portal,{children:t.jsx(e.Toaster,{toaster:Yi[r],insetInline:{mdDown:"4"},children:n=>t.jsxs(e.Toast.Root,{css:Oi,width:{md:"sm"},children:[t.jsxs(e.Stack,{flexDirection:"row",className:"icon-container",children:["info"===n.type?n.meta?.icon?n.meta.icon:t.jsx(j,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===n.type?t.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===n.type?n.meta?.icon?n.meta.icon:t.jsx(M,{color:"var(--chakra-colors-success-500)"}):null,"warning"===n.type?n.meta?.icon?n.meta.icon:t.jsx(R,{color:"var(--chakra-colors-warning-500)"}):null,"error"===n.type?n.meta?.icon?n.meta.icon:t.jsx(V,{color:"var(--chakra-colors-error-500)"}):null,t.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[t.jsx(e.Toast.Title,{css:Ni,"aria-label":`${n.title}`,children:n.title}),n.description?t.jsx(e.Toast.Title,{css:Fi,"aria-label":`${n.description}`,children:n.description}):null]})]}),n.action||n.meta?.closable?t.jsxs(e.Stack,{flexDirection:"row",children:[n.action?t.jsx(b,{css:Ai,label:n.action.label,size:"small",variant:"info"===n.type?"primary":"secondary",onClick:()=>{n?.action?.onClick&&n.action.onClick(),Yi[r].dismiss()}}):null,n.meta?.closable?t.jsx(b,{css:Zi,label:n.meta.closableLabel,"aria-label":n.meta?.closableLabel||"Dismiss",leftIcon:t.jsx($,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>Yi[r].dismiss()}):null]}):null]})})},r))),exports.designSystemStyles=d,exports.getThemedColor=p,exports.showToast=e=>{Yi[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};
3024
+ ${i?`\n background-color: ${p("primary",100)};\n color: ${p("primary",800)};\n border: 1px solid ${p("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
3025
+
3026
+ &:hover {
3027
+ background-color: ${p("primary",200)};
3028
+ box-shadow: 0px 2px 4px -2px #0000001a;
3029
+ box-shadow: 0px 4px 6px -1px #0000001a;
3030
+ }
3031
+
3032
+ &:active {
3033
+ background-color: ${p("primary",300)};
3034
+ box-shadow: 0px 2px 4px -2px #0000001a;
3035
+ box-shadow: 0px 4px 6px -1px #0000001a;
3036
+ }
3037
+
3038
+ &:focus-visible {
3039
+ outline-color: ${p("primary",700)};
3040
+ outline-offset: 3px;
3041
+ box-shadow: 0px 2px 4px -2px #0000001a;
3042
+ box-shadow: 0px 4px 6px -1px #0000001a;
3043
+ }
3044
+
3045
+ ${l?`\n background-color: ${p("neutral",300)};\n \n &:hover {\n background-color: ${p("neutral",300)};\n box-shadow: none;\n }\n `:""}
3046
+ `),type:"button",onClick:e.onClick,"aria-current":n===o+1,"aria-disabled":n<o+1,disabled:n<o+1,"aria-label":`Current Step ${o}${e.label?` ${e.label}`:""}`,"data-active":n>=o+1,children:n>o+1?t.jsx(v,{height:"16px",width:"16px"}):o+1}),e.label?t.jsx("p",{css:Bi(n===o+1),children:e.label}):null]},`${e.label}-${o}`);var i,l})),t.jsx("div",{css:Hi,children:t.jsx("div",{css:zi})})]}),exports.Switch=We,exports.TabBar=({variant:r="panel",defaultValue:n,tabs:i,onTabClick:l})=>{const[a,s]=o.useState(gi(i,n)||0),c="view"===r;return t.jsx("div",{css:di(r),children:t.jsx(e.Tabs.Root,{width:"full",defaultValue:n||i?.[0]?.value,onValueChange:({value:e})=>{return s(gi(i,t=e)),void(l&&l(t));var t},children:t.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((r,n)=>t.jsxs(o.Fragment,{children:[c&&1===n&&"left"===fi(a)?t.jsx("div",{css:xi}):null,t.jsx(e.Tabs.Trigger,{css:[pi,c?hi:ui],"aria-label":r["aria-label"]||r.label,...r,children:t.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"5px",children:[r.icon,r.label]})},r.label),c&&1===n&&"right"===fi(a)?t.jsx("div",{css:xi}):null]},r.label)))})})})},exports.Table=({columns:r,data:n,renderRow:i,striped:l,stickyHeader:a,pagination:s,selectable:c,selectedRows:d,onSortColumn:p,onPageSizeChange:u,onPageChange:x,onAllItemsSelected:h})=>{const[g,f]=o.useState({key:"",order:""}),{totalItems:b=n.length,currentPage:C=1,pageSize:m=10,showItemCount:v,showItemCountText:w}=s||{},j=(e,t)=>{f({key:e,order:t}),p&&p({key:e,order:t})},$=d?.length===n?.length,k=d&&d.length>0&&!$;return t.jsxs("div",{children:[t.jsxs(e.Table.Root,{css:nn,striped:l,stickyHeader:a,interactive:!0,children:[t.jsx(e.Table.Header,{css:on,children:t.jsxs(e.Table.Row,{children:[c?t.jsx(e.Table.ColumnHeader,{children:t.jsx(Ce,{name:"header-checkbox",checked:$,indeterminate:k,onCheckedChange:({checked:e})=>{h&&h(e)}})}):null,r.map((r=>t.jsx(e.Table.ColumnHeader,{role:r.sortable?"columnheader":void 0,"aria-sort":r.sortable&&"asc"===g.order?"ascending":r.sortable&&"desc"===g.order?"descending":void 0,children:t.jsxs("div",{css:ln,children:[r.label,r.sortable?t.jsxs("div",{css:an,children:[t.jsx(K,{css:sn(g.key===r.key&&"asc"===g.order),icon:t.jsx(y,{style:{transform:"rotate(180deg)"}}),onClick:()=>j(r.key,"asc"),"aria-label":"Ascending"}),t.jsx(K,{css:sn(g.key===r.key&&"desc"===g.order),icon:t.jsx(y,{}),onClick:()=>j(r.key,"desc"),"aria-label":"Descending"})]}):null]})},r.key)))]})}),t.jsx(e.Table.Body,{children:n.map((e=>t.jsx(o.Fragment,{children:i(e)},e.id)))})]}),t.jsxs("div",{css:cn,children:[t.jsx("div",{children:v?t.jsx(Kr,{pageSize:m,currentPage:C,totalItems:b,onPageSizeChange:u,showItemCountText:w}):null}),s?t.jsx("div",{css:dn,children:t.jsx(rn,{totalItems:b,pageSize:m,currentPage:C,onPageChange:x})}):null]})]})},exports.TableCell=un,exports.TableRow=pn,exports.Tag=Tt,exports.TextInput=dt,exports.Textarea=({label:r,caption:n,placeholder:i,errorMessage:l,required:a,disabled:s,size:c="default",defaultValue:d="",onChange:p,minLength:u,maxLength:x,...h})=>{const[g,f]=o.useState(d),[b,C]=o.useState(!1),[m,v]=o.useState(!1),[w,j]=o.useState("");o.useEffect((()=>{const{length:e}=d;u&&e<u&&e>0?(C(e<u),v(!1),j(`Enter at least ${u-e} characters`)):u&&0===e&&j(`Min ${u} characters`),x&&e>0?(C(!1),v(e>x),j(`You have ${x-e} characters remaining`)):x&&0===e&&j(`Max ${x} characters`)}),[]);const y=!!l||b||m;return t.jsxs("div",{css:er(c),children:[y?t.jsx("div",{css:tr}):null,t.jsxs(e.Field.Root,{required:a,invalid:y,gap:"0",style:{marginLeft:y?"19px":"0px"},children:[r?t.jsxs(e.Field.Label,{css:rr(c,s),"aria-label":r,children:[t.jsx(e.Field.RequiredIndicator,{"aria-label":"required"}),r,a?"":t.jsx("span",{children:" (Optional)"})]}):null,n?t.jsx(e.Field.HelperText,{css:nr(c,s),"aria-label":n,children:n}):null,l?t.jsx(e.Field.ErrorText,{css:ir,"aria-label":l,children:l}):null,t.jsx(e.Textarea,{placeholder:i,disabled:s,css:lr(c,g,d),onChange:e=>{f(e.target.value);const{length:t}=e.target.value;u&&x?(C(t<u),v(t>x),j(`You have ${x-t} characters remaining`)):u?(C(t<u),v(!1),j(t<u?`Enter at least ${u-t} characters`:"")):x&&(v(t>x),C(!1),j(`You have ${x-t} characters remaining`)),p&&p(e)},value:g,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h}),b&&u?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",u-g.length," more characters"]}):null,m&&x?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",g.length-x," characters too many"]}):null,!w||m||b?null:t.jsx(e.Field.HelperText,{css:or,"aria-label":w,children:w})]})]})},exports.Toast=()=>Object.keys(Yi).map((r=>t.jsx(e.Portal,{children:t.jsx(e.Toaster,{toaster:Yi[r],insetInline:{mdDown:"4"},children:n=>t.jsxs(e.Toast.Root,{css:Oi,width:{md:"sm"},children:[t.jsxs(e.Stack,{flexDirection:"row",className:"icon-container",children:["info"===n.type?n.meta?.icon?n.meta.icon:t.jsx(j,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===n.type?t.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===n.type?n.meta?.icon?n.meta.icon:t.jsx(M,{color:"var(--chakra-colors-success-500)"}):null,"warning"===n.type?n.meta?.icon?n.meta.icon:t.jsx(R,{color:"var(--chakra-colors-warning-500)"}):null,"error"===n.type?n.meta?.icon?n.meta.icon:t.jsx(V,{color:"var(--chakra-colors-error-500)"}):null,t.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[t.jsx(e.Toast.Title,{css:Ni,"aria-label":`${n.title}`,children:n.title}),n.description?t.jsx(e.Toast.Title,{css:Fi,"aria-label":`${n.description}`,children:n.description}):null]})]}),n.action||n.meta?.closable?t.jsxs(e.Stack,{flexDirection:"row",children:[n.action?t.jsx(b,{css:Ai,label:n.action.label,size:"small",variant:"info"===n.type?"primary":"secondary",onClick:()=>{n?.action?.onClick&&n.action.onClick(),Yi[r].dismiss()}}):null,n.meta?.closable?t.jsx(b,{css:Zi,label:n.meta.closableLabel,"aria-label":n.meta?.closableLabel||"Dismiss",leftIcon:t.jsx($,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>Yi[r].dismiss()}):null]}):null]})})},r))),exports.designSystemStyles=d,exports.getThemedColor=p,exports.showToast=e=>{Yi[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 CHANGED
@@ -2842,7 +2842,7 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
2842
2842
  color: ${ne("error",100)};
2843
2843
  `,Bl=({hasNotification:e,notificationCount:t,label:r})=>{const[n,o]=Y(!1);X((()=>{const e=()=>{window.innerWidth<1024?o(!0):o(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const i=(()=>{let e="";return t&&t>0&&(e=`${t>99?"99+":t}`),e})();let l="16px";return t&&t>99?l="28px":t&&t>9&&(l="22px"),P("div",n?{css:zl,role:"status","aria-live":"polite",children:[P("div",{css:El(),children:[T(ke,{color:"currentColor",height:"16px",width:"16px"}),!e||t||r?null:T("div",{css:Hl,"aria-hidden":!0})]}),r?T("p",{children:r}):null,i.length>0?T("div",{css:Tl,children:T("p",{css:Ol,"aria-label":`${t} unread message`,children:i})}):null]}:{css:zl,role:"status","aria-live":"polite",children:[r?T("p",{children:r}):null,P("div",{css:El(l),children:[i.length>0?T("div",{css:jl,children:T("p",{css:Pl,"aria-label":`${t} unread message`,children:i})}):null,e&&!t?T("div",{css:Hl,"aria-hidden":!0}):null,T(ke,{color:"currentColor",height:"16px",width:"16px"})]})]})},Nl=(e,t)=>B`
2844
2844
  width: 100%;
2845
- min-width: ${"small"===e?"234px":"366px"};
2845
+ min-width: ${"small"===e?"234px":"320px"};
2846
2846
  border-radius: 4px;
2847
2847
  padding: ${"small"===e?"8px 8px 12px 8px":"8px 12px 12px 12px"};
2848
2848
  display: flex;
@@ -2950,7 +2950,7 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
2950
2950
  height: 1px;
2951
2951
  width: 100%;
2952
2952
  background-color: ${ne("neutral",400)};
2953
- `,ia=({steps:e,currentStep:t})=>P("div",{css:ea,children:[e.map(((e,r)=>{return P("div",{css:ta,children:[T("button",{css:(n=t>=r+1,B`
2953
+ `,ia=({steps:e,currentStep:t})=>P("div",{css:ea,children:[e.map(((e,r)=>{return P("div",{css:ta,children:[T("button",{css:(n=t>=r+1,o=t<r+1,B`
2954
2954
  height: 32px;
2955
2955
  width: 32px;
2956
2956
  display: flex;
@@ -2964,8 +2964,29 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
2964
2964
  font-weight: 700;
2965
2965
  cursor: not-allowed;
2966
2966
 
2967
- ${n?`\n background-color: ${ne("primary",100)};\n color: ${ne("primary",800)};\n border: 1px solid ${ne("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
2968
- `),type:"button",onClick:e.onClick,"aria-current":t===r+1,"aria-disabled":t<r+1,disabled:t<r+1,"aria-label":`Current Step ${r}${e.label?` ${e.label}`:""}`,children:t>r+1?T(ue,{height:"16px",width:"16px"}):r+1}),e.label?T("p",{css:ra(t===r+1),children:e.label}):null]},`${e.label}-${r}`);var n})),T("div",{css:na,children:T("div",{css:oa})})]}),la=B`
2967
+ ${n?`\n background-color: ${ne("primary",100)};\n color: ${ne("primary",800)};\n border: 1px solid ${ne("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
2968
+
2969
+ &:hover {
2970
+ background-color: ${ne("primary",200)};
2971
+ box-shadow: 0px 2px 4px -2px #0000001a;
2972
+ box-shadow: 0px 4px 6px -1px #0000001a;
2973
+ }
2974
+
2975
+ &:active {
2976
+ background-color: ${ne("primary",300)};
2977
+ box-shadow: 0px 2px 4px -2px #0000001a;
2978
+ box-shadow: 0px 4px 6px -1px #0000001a;
2979
+ }
2980
+
2981
+ &:focus-visible {
2982
+ outline-color: ${ne("primary",700)};
2983
+ outline-offset: 3px;
2984
+ box-shadow: 0px 2px 4px -2px #0000001a;
2985
+ box-shadow: 0px 4px 6px -1px #0000001a;
2986
+ }
2987
+
2988
+ ${o?`\n background-color: ${ne("neutral",300)};\n \n &:hover {\n background-color: ${ne("neutral",300)};\n box-shadow: none;\n }\n `:""}
2989
+ `),type:"button",onClick:e.onClick,"aria-current":t===r+1,"aria-disabled":t<r+1,disabled:t<r+1,"aria-label":`Current Step ${r}${e.label?` ${e.label}`:""}`,"data-active":t>=r+1,children:t>r+1?T(ue,{height:"16px",width:"16px"}):r+1}),e.label?T("p",{css:ra(t===r+1),children:e.label}):null]},`${e.label}-${r}`);var n,o})),T("div",{css:na,children:T("div",{css:oa})})]}),la=B`
2969
2990
  justify-content: space-between;
2970
2991
  align-items: center;
2971
2992
  gap: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "2.133.2",
3
+ "version": "2.133.4",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",