@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 +25 -4
- package/dist/index.esm.js +25 -4
- package/package.json +1 -1
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":"
|
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
|
3025
|
-
|
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":"
|
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
|
2968
|
-
|
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;
|