@worldresources/wri-design-systems 2.133.3 → 2.133.5

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
@@ -837,6 +837,9 @@
837
837
 
838
838
  ${t?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${p("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${p("neutral",400)} !important;\n }\n }\n `:""};
839
839
  `,Ne=r=>{const{value:n}=r;return t.jsx(e.For,{each:n,children:(r,n)=>t.jsxs(e.Slider.Thumb,{css:Pe,index:n,children:[t.jsx("div",{css:Be,className:"slider-value-preview",children:r}),t.jsx(e.Slider.HiddenInput,{})]},n)})},Fe=o.forwardRef(((r,n)=>{const{marks:o,isCentred:i}=r;return o?.length?t.jsx(e.Slider.MarkerGroup,{ref:n,children:o.map(((r,n)=>{const o="number"==typeof r?r:r.value,l="number"==typeof r?void 0:r.label,a=i&&1===n;return t.jsxs(e.Slider.Marker,{css:Oe(i,a),value:o,children:[t.jsx(e.Slider.MarkerIndicator,{}),t.jsx("p",{children:l})]},o)}))}):null})),Ae=o.forwardRef(((r,n)=>{const{marks:i,onValueChange:l,isCentred:a,value:s,...c}=r,[d,p]=o.useState(s||[0]);o.useEffect((()=>{p(s||[0])}),[s]);let u=i?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(a){const e=c.min||0,t=c.max||100;u=[e,(e+t)/2,t].map((e=>({value:e,label:void 0})))}const x=!!u?.some((e=>e.label));return t.jsx(e.Slider.Root,{css:_e,ref:n,thumbAlignment:"center",onValueChange:e=>{p(e.value),l&&l(e)},origin:a?"center":"start",value:d,...c,children:t.jsxs(e.Slider.Control,{"data-has-mark-label":x||void 0,children:[t.jsx(e.Slider.Track,{css:He,children:t.jsx(e.Slider.Range,{css:ze})}),t.jsx(Ne,{value:d}),t.jsx(Fe,{marks:u,isCentred:a})]})})})),Ze=r.css`
840
+ --switch-height: 24px;
841
+ --switch-width: 40px;
842
+
840
843
  .chakra-switch__control-container {
841
844
  width: 42px;
842
845
  height: 26px;
@@ -856,8 +859,6 @@
856
859
  }
857
860
 
858
861
  .chakra-switch__control {
859
- height: 24px;
860
- width: 40px;
861
862
  display: flex;
862
863
  align-items: center;
863
864
  background-color: ${p("neutral",600)};
@@ -882,6 +883,10 @@
882
883
  }
883
884
 
884
885
  .chakra-switch__thumb {
886
+ height: 20px;
887
+ width: 20px;
888
+ translate: calc((var(--switch-width) - var(--switch-height)) / 8) 0;
889
+
885
890
  svg {
886
891
  width: 12px;
887
892
 
@@ -896,6 +901,15 @@
896
901
  color-mix(in srgb, ${p("primary",500)} 20%, transparent);
897
902
  }
898
903
 
904
+ &:is(
905
+ :checked,
906
+ [data-checked],
907
+ [aria-checked='true'],
908
+ [data-state='checked']
909
+ ) {
910
+ translate: calc(var(--switch-width) + 2px - var(--switch-height)) 0;
911
+ }
912
+
899
913
  &[data-active] {
900
914
  outline: 9px solid
901
915
  color-mix(in srgb, ${p("primary",500)} 40%, transparent);
@@ -3007,7 +3021,7 @@
3007
3021
  border: 1px solid ${p("neutral",300)};
3008
3022
  border-radius: 4px;
3009
3023
  ${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`
3024
+ `)}):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
3025
  height: 32px;
3012
3026
  width: 32px;
3013
3027
  display: flex;
@@ -3021,5 +3035,26 @@
3021
3035
  font-weight: 700;
3022
3036
  cursor: not-allowed;
3023
3037
 
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})};
3038
+ ${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 `:""}
3039
+
3040
+ &:hover {
3041
+ background-color: ${p("primary",200)};
3042
+ box-shadow: 0px 2px 4px -2px #0000001a;
3043
+ box-shadow: 0px 4px 6px -1px #0000001a;
3044
+ }
3045
+
3046
+ &:active {
3047
+ background-color: ${p("primary",300)};
3048
+ box-shadow: 0px 2px 4px -2px #0000001a;
3049
+ box-shadow: 0px 4px 6px -1px #0000001a;
3050
+ }
3051
+
3052
+ &:focus-visible {
3053
+ outline-color: ${p("primary",700)};
3054
+ outline-offset: 3px;
3055
+ box-shadow: 0px 2px 4px -2px #0000001a;
3056
+ box-shadow: 0px 4px 6px -1px #0000001a;
3057
+ }
3058
+
3059
+ ${l?`\n background-color: ${p("neutral",300)};\n \n &:hover {\n background-color: ${p("neutral",300)};\n box-shadow: none;\n }\n `:""}
3060
+ `),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
@@ -863,6 +863,9 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
863
863
 
864
864
  ${t?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${ne("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${ne("neutral",400)} !important;\n }\n }\n `:""};
865
865
  `,jt=e=>{const{value:t}=e;return T(f,{each:t,children:(e,t)=>P(g.Thumb,{css:_t,index:t,children:[T("div",{css:It,className:"slider-value-preview",children:e}),T(g.HiddenInput,{})]},t)})},Pt=W.forwardRef(((e,t)=>{const{marks:r,isCentred:n}=e;return r?.length?T(g.MarkerGroup,{ref:t,children:r.map(((e,t)=>{const r="number"==typeof e?e:e.value,o="number"==typeof e?void 0:e.label,i=n&&1===t;return P(g.Marker,{css:Ht(n,i),value:r,children:[T(g.MarkerIndicator,{}),T("p",{children:o})]},r)}))}):null})),Tt=W.forwardRef(((e,t)=>{const{marks:r,onValueChange:n,isCentred:o,value:i,...l}=e,[a,s]=Y(i||[0]);X((()=>{s(i||[0])}),[i]);let c=r?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(o){const e=l.min||0,t=l.max||100;c=[e,(e+t)/2,t].map((e=>({value:e,label:void 0})))}const d=!!c?.some((e=>e.label));return T(g.Root,{css:Dt,ref:t,thumbAlignment:"center",onValueChange:e=>{s(e.value),n&&n(e)},origin:o?"center":"start",value:a,...l,children:P(g.Control,{"data-has-mark-label":d||void 0,children:[T(g.Track,{css:zt,children:T(g.Range,{css:Et})}),T(jt,{value:a}),T(Pt,{marks:c,isCentred:o})]})})})),Ot=B`
866
+ --switch-height: 24px;
867
+ --switch-width: 40px;
868
+
866
869
  .chakra-switch__control-container {
867
870
  width: 42px;
868
871
  height: 26px;
@@ -882,8 +885,6 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
882
885
  }
883
886
 
884
887
  .chakra-switch__control {
885
- height: 24px;
886
- width: 40px;
887
888
  display: flex;
888
889
  align-items: center;
889
890
  background-color: ${ne("neutral",600)};
@@ -908,6 +909,10 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
908
909
  }
909
910
 
910
911
  .chakra-switch__thumb {
912
+ height: 20px;
913
+ width: 20px;
914
+ translate: calc((var(--switch-width) - var(--switch-height)) / 8) 0;
915
+
911
916
  svg {
912
917
  width: 12px;
913
918
 
@@ -922,6 +927,15 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
922
927
  color-mix(in srgb, ${ne("primary",500)} 20%, transparent);
923
928
  }
924
929
 
930
+ &:is(
931
+ :checked,
932
+ [data-checked],
933
+ [aria-checked='true'],
934
+ [data-state='checked']
935
+ ) {
936
+ translate: calc(var(--switch-width) + 2px - var(--switch-height)) 0;
937
+ }
938
+
925
939
  &[data-active] {
926
940
  outline: 9px solid
927
941
  color-mix(in srgb, ${ne("primary",500)} 40%, transparent);
@@ -2950,7 +2964,7 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
2950
2964
  height: 1px;
2951
2965
  width: 100%;
2952
2966
  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`
2967
+ `,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
2968
  height: 32px;
2955
2969
  width: 32px;
2956
2970
  display: flex;
@@ -2964,8 +2978,29 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
2964
2978
  font-weight: 700;
2965
2979
  cursor: not-allowed;
2966
2980
 
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`
2981
+ ${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 `:""}
2982
+
2983
+ &:hover {
2984
+ background-color: ${ne("primary",200)};
2985
+ box-shadow: 0px 2px 4px -2px #0000001a;
2986
+ box-shadow: 0px 4px 6px -1px #0000001a;
2987
+ }
2988
+
2989
+ &:active {
2990
+ background-color: ${ne("primary",300)};
2991
+ box-shadow: 0px 2px 4px -2px #0000001a;
2992
+ box-shadow: 0px 4px 6px -1px #0000001a;
2993
+ }
2994
+
2995
+ &:focus-visible {
2996
+ outline-color: ${ne("primary",700)};
2997
+ outline-offset: 3px;
2998
+ box-shadow: 0px 2px 4px -2px #0000001a;
2999
+ box-shadow: 0px 4px 6px -1px #0000001a;
3000
+ }
3001
+
3002
+ ${o?`\n background-color: ${ne("neutral",300)};\n \n &:hover {\n background-color: ${ne("neutral",300)};\n box-shadow: none;\n }\n `:""}
3003
+ `),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
3004
  justify-content: space-between;
2970
3005
  align-items: center;
2971
3006
  gap: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "2.133.3",
3
+ "version": "2.133.5",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",