@worldresources/wri-design-systems 2.201.2 → 2.202.0

package/dist/index.cjs.js

@@ -2536,12 +2536,13 @@
 `,ok=i.css`
   padding: ${k(300)};
 `,ik=e=>i.css`
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: ${e||"20rem"};
   background-color: ${w("neutral",100)};
   box-shadow: 0 0.0625rem 0.125rem -0.0625rem #0000001a;
   box-shadow: 0 0.0625rem 0.1875rem 0 #0000001a;
-  position: relative;
 `,sk=i.css`
   border-right: ${j(100)} solid
     ${w("neutral",300)};
@@ -2549,12 +2550,14 @@
   border: ${j(100)} solid ${w("neutral",300)};
   border-radius: ${$(300)};
 `,lk=i.css`
+  flex-shrink: 0;
   min-height: ${k(1200)};
   width: 100%;
   border-bottom: ${j(100)} solid
     ${w("neutral",300)};
-`,ck=(e,t)=>i.css`
-  height: ${((e,t)=>e&&t?`calc(100% - ${(e+t)/16}rem)`:e?`calc(100% - ${e/16}rem)`:t?`calc(100% - ${t/16}rem)`:"100%")(e,t)};
+`,ck=i.css`
+  flex: 1;
+  min-height: 0;
   width: 100%;
   overflow-y: auto;
 
@@ -2562,14 +2565,12 @@
     outline-color: ${w("primary",700)};
   }
 `,dk=i.css`
+  flex-shrink: 0;
   min-height: ${k(1600)};
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  position: absolute;
-  bottom: 0;
-  left: 0;
   border-top: ${j(100)} solid
     ${w("neutral",300)};
 `;var uk,hk;!function(){if(hk)return uk;hk=1;var e=function(){};if("production"!==process.env.NODE_ENV){var t=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var r=1;r<n;r++)t[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,(function(){return t[o++]}));"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};e=function(e,n,r){var o=arguments.length;r=new Array(o>2?o-2:0);for(var i=2;i<o;i++)r[i-2]=arguments[i];if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");e||t.apply(null,[n].concat(r))}}uk=e}();var pk=fk()?n.useLayoutEffect:n.useEffect;"production"!==process.env.NODE_ENV&&("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;function fk(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var mk=function(e){var t,r=e.children,i=e.type,s=void 0===i?"reach-portal":i,a=n.useRef(null),l=n.useRef(null),c=(t=n.useState(Object.create(null))[1],n.useCallback((function(){t(Object.create(null))}),[]));return pk((function(){if(a.current){var e=a.current.ownerDocument;return l.current=null==e?void 0:e.createElement(s),e.body.appendChild(l.current),c(),function(){l.current&&l.current.ownerDocument&&l.current.ownerDocument.body.removeChild(l.current)}}}),[s,c]),l.current?o.createPortal(r,l.current):n.createElement("span",{ref:a})};"production"!==process.env.NODE_ENV&&(mk.displayName="Portal");
@@ -3817,10 +3818,10 @@ function WM(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   display: flex;
   align-items: center;
   justify-content: flex-start;
-`,sL=e=>i.css`
+`,sL=(e,t)=>i.css`
   height: 100%;
   width: ${e}%;
-  background-color: ${w("primary",500)};
+  background-color: ${t??w("primary",500)};
   transition: width 0.5s ease-in-out;
 `,aL=i.css`
   width: 100%;
@@ -3984,7 +3985,7 @@ function WM(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   padding: 0;
   padding-top: ${k(200)};
   color: ${n?w("neutral",500):"inherit"};
-`),children:t.children}):null]},`${t.label}-${t.value}`);var n,o,c,d}))})}),exports.Pagination=Pw,exports.Panel=({header:e,content:t,footer:o,variant:i="fixed",width:s})=>{const a=n.useId(),[l,c]=n.useState(void 0),[d,u]=n.useState(void 0),h=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{c(h?.current?.getBoundingClientRect()?.height),u(p?.current?.getBoundingClientRect()?.height)}),[e,o]);return r.jsxs("div",{role:"region","aria-labelledby":e?a:void 0,css:[ik(s),"fixed"===i?sk:ak],children:[e?r.jsx("div",{id:a,css:lk,ref:h,children:e}):null,r.jsx("div",{css:ck(l,d),children:t}),o?r.jsx("div",{css:dk,ref:p,children:o}):null]})},exports.Password=({label:e,caption:t,required:o,disabledRules:s,onChange:a,minLength:l=8,hideValidations:c,labels:d})=>{const u=Mf("Password",d),[h,p]=n.useState(!1),[f,m]=n.useState(""),[g,v]=n.useState({strength:"very-weak",length:!1,uppercase:!1,lowercase:!1,numbers:!1,specialCharacters:!1}),b={"very-weak":u.strengthVeryWeak,weak:u.strengthWeak,medium:u.strengthMedium,strong:u.strengthStrong,"very-strong":u.strengthVeryStrong};return r.jsxs("div",{css:Bv,children:[r.jsxs("p",{css:Hv,"aria-label":e,children:[o?r.jsx("span",{children:"*"}):null,e]}),r.jsx("p",{css:_v,"aria-label":t,children:t}),r.jsxs("div",{css:Fv,children:[r.jsx(eg,{type:h?"text":"password","aria-label":e,value:f,"aria-describedby":"password-guidelines",onChange:e=>(e=>{const t={...g};let n=0,r=!1;t.length=e.length>=l,n+=e.length>=l?1:0,r=/[A-Z]/.test(e),n+=r?1:0,t.uppercase=r,r=/[a-z]/.test(e),n+=r?1:0,t.lowercase=r,r=/[0-9]/.test(e),n+=r?1:0,t.numbers=r,r=/[-'/`~!¡#*$@_%+=.,^&(){}[\]|;:“‘"<>?\\]/.test(e),n+=r?1:0,t.specialCharacters=r,t.strength="very-weak",e.length>=4&&n>=2&&(t.strength="weak"),e.length>=6&&n>=3&&(t.strength="medium"),e.length>=l&&n>=4&&(t.strength="strong"),e.length>=l+2&&n>=5&&(t.strength="very-strong"),m(e),v(t),a&&a({...t,password:e})})(e.target.value)}),r.jsx(Ef,{label:h?u.hideLabel:u.showLabel,variant:"secondary",leftIcon:h?r.jsx(Hf,{}):r.jsx(Bf,{}),"aria-label":h?u.hidePasswordLabel:u.showPasswordLabel,onClick:()=>p(!h),type:"button"})]}),f&&!c?r.jsxs("div",{id:"password-guidelines",css:qv,"aria-live":"polite",children:[r.jsxs("p",{css:(y=g.strength,i.css`
+`),children:t.children}):null]},`${t.label}-${t.value}`);var n,o,c,d}))})}),exports.Pagination=Pw,exports.Panel=({header:e,content:t,footer:o,variant:i="fixed",width:s})=>{const a=n.useId();return r.jsxs("div",{role:"region","aria-labelledby":e?a:void 0,css:[ik(s),"fixed"===i?sk:ak],children:[e?r.jsx("div",{id:a,css:lk,children:e}):null,r.jsx("div",{css:ck,children:t}),o?r.jsx("div",{css:dk,children:o}):null]})},exports.Password=({label:e,caption:t,required:o,disabledRules:s,onChange:a,minLength:l=8,hideValidations:c,labels:d})=>{const u=Mf("Password",d),[h,p]=n.useState(!1),[f,m]=n.useState(""),[g,v]=n.useState({strength:"very-weak",length:!1,uppercase:!1,lowercase:!1,numbers:!1,specialCharacters:!1}),b={"very-weak":u.strengthVeryWeak,weak:u.strengthWeak,medium:u.strengthMedium,strong:u.strengthStrong,"very-strong":u.strengthVeryStrong};return r.jsxs("div",{css:Bv,children:[r.jsxs("p",{css:Hv,"aria-label":e,children:[o?r.jsx("span",{children:"*"}):null,e]}),r.jsx("p",{css:_v,"aria-label":t,children:t}),r.jsxs("div",{css:Fv,children:[r.jsx(eg,{type:h?"text":"password","aria-label":e,value:f,"aria-describedby":"password-guidelines",onChange:e=>(e=>{const t={...g};let n=0,r=!1;t.length=e.length>=l,n+=e.length>=l?1:0,r=/[A-Z]/.test(e),n+=r?1:0,t.uppercase=r,r=/[a-z]/.test(e),n+=r?1:0,t.lowercase=r,r=/[0-9]/.test(e),n+=r?1:0,t.numbers=r,r=/[-'/`~!¡#*$@_%+=.,^&(){}[\]|;:“‘"<>?\\]/.test(e),n+=r?1:0,t.specialCharacters=r,t.strength="very-weak",e.length>=4&&n>=2&&(t.strength="weak"),e.length>=6&&n>=3&&(t.strength="medium"),e.length>=l&&n>=4&&(t.strength="strong"),e.length>=l+2&&n>=5&&(t.strength="very-strong"),m(e),v(t),a&&a({...t,password:e})})(e.target.value)}),r.jsx(Ef,{label:h?u.hideLabel:u.showLabel,variant:"secondary",leftIcon:h?r.jsx(Hf,{}):r.jsx(Bf,{}),"aria-label":h?u.hidePasswordLabel:u.showPasswordLabel,onClick:()=>p(!h),type:"button"})]}),f&&!c?r.jsxs("div",{id:"password-guidelines",css:qv,"aria-live":"polite",children:[r.jsxs("p",{css:(y=g.strength,i.css`
   font-size: ${C(400)};
   line-height: ${S(600)};
   font-weight: 400;
@@ -3995,7 +3996,7 @@ function WM(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     font-weight: 700;
     color: ${w("medium"===y?"warning":"strong"===y||"very-strong"===y?"success":"error",900)};
   }
-`),"aria-live":"polite",role:"status",children:[u.strengthPrefix," ",r.jsx("span",{children:b[g.strength]})]}),r.jsx("div",{css:Wv(g.strength),children:r.jsx("div",{})}),r.jsxs("div",{css:Uv(g.length),"aria-label":`${u.minLengthRule(l)}. ${g.length?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.length?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.minLengthRule(l)})]}),s?.uppercase?null:r.jsxs("div",{css:Uv(g.uppercase),"aria-label":`${u.uppercaseRule}. ${g.uppercase?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.uppercase?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.uppercaseRule})]}),s?.lowercase?null:r.jsxs("div",{css:Uv(g.lowercase),"aria-label":`${u.lowercaseRule}. ${g.lowercase?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.lowercase?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.lowercaseRule})]}),s?.numbers?null:r.jsxs("div",{css:Uv(g.numbers),"aria-label":`${u.numberRule}. ${g.numbers?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.numbers?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.numberRule})]}),s?.specialCharacters?null:r.jsxs("div",{css:Uv(g.specialCharacters),"aria-label":`${u.specialCharRule}. ${g.specialCharacters?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.specialCharacters?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.specialCharRule})]})]}):null]});var y},exports.ProgressBar=({progress:e,labels:t})=>{const n=Mf("ProgressBar",t);let o=e;return o>100&&(o=100),o<0&&(o=0),r.jsx("div",{css:iL,role:"progressbar","aria-label":n.progressAriaLabel(o),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":o,children:r.jsx("div",{css:sL(o)})})},exports.QualitativeAttribute=({type:e,label:t,caption:o,color:i,onActionClick:s,showActionButton:a,pointIcon:l=r.jsx(em,{color:"#006D2C"}),ariaLabelType:c="",labels:d})=>{const u=Mf("QualitativeAttribute",d),[h,p]=n.useState(!0),f=n.useId(),m=n.useId(),g="raster"===e,v="line"===e,b="point"===e,y=n.useId(),x=n.useMemo((()=>{const e=h?u.visibleText:u.hiddenText;let n=c??`${c},`;return v&&(n=u.linePrefix),u.currentlyTemplate(String(t),o,n,e)}),[h,e,t,o,c,u]),w=h?u.hideLabel:u.showLabel;return r.jsxs("div",{css:cw,children:[r.jsx("p",{id:y,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:x}),r.jsxs("div",{css:dw,children:[r.jsxs("div",{children:[g&&r.jsx("div",{css:sw(i)}),v&&r.jsx("div",{css:aw(i)}),b&&r.jsx("div",{css:lw(i),children:l})]}),r.jsxs("div",{children:[r.jsx("p",{id:f,css:uw,children:t}),o?r.jsx("p",{id:m,css:hw,children:o}):null]})]}),s&&a?r.jsx("div",{css:pw,children:r.jsx(Ef,{type:"button",variant:"borderless",label:String(w),rightIcon:h?r.jsx(Hf,{}):r.jsx(Bf,{}),"aria-pressed":h,"aria-labelledby":`${y} ${f}`,onClick:()=>{p((e=>!e)),s?.()}})}):null]})},exports.Radio=Hg,exports.RadioGroup=_g,exports.RadioList=({label:t,caption:n,name:o,radios:s,defaultValue:a,onCheckedChange:l,errorMessage:c,horizontal:d,variant:u="default",required:h,labels:p})=>{const f=Mf("RadioList",p),m=`${t}. ${n?`${n}.`:""} ${h?f.requiredLabel:f.optionalLabel} ${c?`${f.errorPrefix} ${c}.`:""} `;return r.jsxs(e.Group,{css:Kv,"aria-roledescription":"group","aria-label":m,children:[c?r.jsx("div",{css:Xv}):null,r.jsxs("div",{css:(g=!!c,i.css`
+`),"aria-live":"polite",role:"status",children:[u.strengthPrefix," ",r.jsx("span",{children:b[g.strength]})]}),r.jsx("div",{css:Wv(g.strength),children:r.jsx("div",{})}),r.jsxs("div",{css:Uv(g.length),"aria-label":`${u.minLengthRule(l)}. ${g.length?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.length?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.minLengthRule(l)})]}),s?.uppercase?null:r.jsxs("div",{css:Uv(g.uppercase),"aria-label":`${u.uppercaseRule}. ${g.uppercase?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.uppercase?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.uppercaseRule})]}),s?.lowercase?null:r.jsxs("div",{css:Uv(g.lowercase),"aria-label":`${u.lowercaseRule}. ${g.lowercase?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.lowercase?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.lowercaseRule})]}),s?.numbers?null:r.jsxs("div",{css:Uv(g.numbers),"aria-label":`${u.numberRule}. ${g.numbers?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.numbers?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.numberRule})]}),s?.specialCharacters?null:r.jsxs("div",{css:Uv(g.specialCharacters),"aria-label":`${u.specialCharRule}. ${g.specialCharacters?u.requirementMet:u.requirementNotMet}`,children:[r.jsx("div",{children:g.specialCharacters?r.jsx(Rf,{color:"var(--chakra-colors-success-500)",height:"0.5rem",width:"0.5rem"}):r.jsx(zf,{color:"var(--chakra-colors-error-900)",height:"0.5rem",width:"0.5rem"})}),r.jsx("p",{children:u.specialCharRule})]})]}):null]});var y},exports.ProgressBar=({progress:e,labels:t,color:n})=>{const o=Mf("ProgressBar",t);let i=e;return i>100&&(i=100),i<0&&(i=0),r.jsx("div",{css:iL,role:"progressbar","aria-label":o.progressAriaLabel(i),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":i,children:r.jsx("div",{css:sL(i,n)})})},exports.QualitativeAttribute=({type:e,label:t,caption:o,color:i,onActionClick:s,showActionButton:a,pointIcon:l=r.jsx(em,{color:"#006D2C"}),ariaLabelType:c="",labels:d})=>{const u=Mf("QualitativeAttribute",d),[h,p]=n.useState(!0),f=n.useId(),m=n.useId(),g="raster"===e,v="line"===e,b="point"===e,y=n.useId(),x=n.useMemo((()=>{const e=h?u.visibleText:u.hiddenText;let n=c??`${c},`;return v&&(n=u.linePrefix),u.currentlyTemplate(String(t),o,n,e)}),[h,e,t,o,c,u]),w=h?u.hideLabel:u.showLabel;return r.jsxs("div",{css:cw,children:[r.jsx("p",{id:y,css:{position:"absolute",width:1,height:1,margin:-1,padding:0,border:0,clip:"rect(0 0 0 0)",overflow:"hidden"},children:x}),r.jsxs("div",{css:dw,children:[r.jsxs("div",{children:[g&&r.jsx("div",{css:sw(i)}),v&&r.jsx("div",{css:aw(i)}),b&&r.jsx("div",{css:lw(i),children:l})]}),r.jsxs("div",{children:[r.jsx("p",{id:f,css:uw,children:t}),o?r.jsx("p",{id:m,css:hw,children:o}):null]})]}),s&&a?r.jsx("div",{css:pw,children:r.jsx(Ef,{type:"button",variant:"borderless",label:String(w),rightIcon:h?r.jsx(Hf,{}):r.jsx(Bf,{}),"aria-pressed":h,"aria-labelledby":`${y} ${f}`,onClick:()=>{p((e=>!e)),s?.()}})}):null]})},exports.Radio=Hg,exports.RadioGroup=_g,exports.RadioList=({label:t,caption:n,name:o,radios:s,defaultValue:a,onCheckedChange:l,errorMessage:c,horizontal:d,variant:u="default",required:h,labels:p})=>{const f=Mf("RadioList",p),m=`${t}. ${n?`${n}.`:""} ${h?f.requiredLabel:f.optionalLabel} ${c?`${f.errorPrefix} ${c}.`:""} `;return r.jsxs(e.Group,{css:Kv,"aria-roledescription":"group","aria-label":m,children:[c?r.jsx("div",{css:Xv}):null,r.jsxs("div",{css:(g=!!c,i.css`
   margin-left: ${g?"1.1875rem":"0"};
 `),children:[r.jsxs("p",{css:Gv,"aria-label":t,children:[h&&r.jsx("span",{"aria-label":f.requiredSymbolLabel,children:"*"}),t]}),r.jsx("p",{css:Zv,"aria-label":n,children:n}),c?r.jsx("p",{css:Yv,"aria-label":c,children:c}):null,r.jsx("div",{css:Jv,children:r.jsx(_g,{name:o,value:a,onChange:l,horizontal:d&&"card"!==u,children:s.map((e=>r.jsx(Hg,{css:"card"===u?Qv:{},...e},e.value)))})})]})]});var g},exports.RichTextEditor=({defaultValue:e="",disabled:t=!1,ariaLabel:n,placeholder:o,minHeight:i,visibleControls:s=ig,onChange:a,labels:c})=>{const d=Mf("RichTextEditor",c),u=n||d.editorAriaLabel,h=o||d.placeholder,p=i,f=pf({extensions:[ap.configure({link:!1}),ru.configure({openOnClick:!0,autolink:!0,defaultProtocol:"https"}),oc,ip,qu.configure({placeholder:h,emptyEditorClass:"is-editor-empty"}),Wu,Uu,Ku.configure({types:["paragraph","heading"]}),th],content:e,editable:!t,shouldRerenderOnTransaction:!0,immediatelyRender:!1,onUpdate:({editor:e})=>{a?.(e.getHTML())},editorProps:{attributes:{"aria-label":u}}},[h,u]);return l.useEffect((()=>{f&&f.setEditable(!t)}),[f,t]),r.jsxs(og.Root,{editor:f,disabled:t,css:{"& .ProseMirror":{minHeight:p||0}},children:[r.jsx(og.Toolbar,{children:r.jsxs(og.ControlGroup,{children:[s.includes("undo")?r.jsx(qm,{label:d.undoTooltip}):null,s.includes("redo")?r.jsx(Wm,{label:d.redoTooltip}):null,s.includes("textType")?r.jsx(Dm,{label:d.textTypeTooltip}):null,s.includes("alignment")?r.jsx(Km,{label:d.alignmentTooltip,alignLeftLabel:d.alignLeftOptionLabel,alignCenterLabel:d.alignCenterOptionLabel,alignRightLabel:d.alignRightOptionLabel,alignJustifyLabel:d.alignJustifyOptionLabel}):null,s.includes("fontSize")?r.jsx(Im,{label:d.fontSizeTooltip}):null,s.includes("bold")?r.jsx(Pm,{label:d.boldTooltip,icon:r.jsx("strong",{css:{fontSize:C(600),lineHeight:1},children:d.boldIconText})}):null,s.includes("italic")?r.jsx(zm,{label:d.italicTooltip,icon:r.jsx("em",{css:{fontStyle:"italic",fontSize:C(600),lineHeight:1},children:d.italicIconText})}):null,s.includes("underline")?r.jsx(Vm,{label:d.underlineTooltip,icon:r.jsx("span",{css:{fontSize:C(600),lineHeight:1,textDecoration:"underline"},children:d.underlineIconText})}):null,s.includes("strikethrough")?r.jsx(Bm,{label:d.strikethroughTooltip,icon:r.jsx("span",{css:{fontSize:C(600),lineHeight:1,textDecoration:"line-through"},children:d.strikethroughIconText})}):null,s.includes("bulletList")?r.jsx(Hm,{label:d.bulletListTooltip}):null,s.includes("orderedList")?r.jsx(_m,{label:d.orderedListTooltip}):null,s.includes("link")?r.jsx(tg,{label:d.linkTooltip,urlPlaceholder:d.linkUrlPlaceholder,labelPlaceholder:d.linkLabelPlaceholder,labelInputAriaLabel:d.linkLabelAriaLabel,applyLabel:d.linkApplyLabel,removeLabel:d.linkRemoveLabel,invalidUrlMessage:d.linkInvalidUrlMessage}):null,s.includes("image")?r.jsx(Fm,{label:d.imageTooltip}):null]})}),r.jsx(og.Content,{})]})},exports.SSOButtons=sg,exports.ScaleBar=({colors:e,values:t,subLabels:n,isGradient:o})=>{return r.jsxs("div",{css:fw,children:[o?r.jsx("div",{css:(s=yw(e),i.css`
   height: ${k(500)};

package/dist/index.d.ts

@@ -1747,11 +1747,12 @@ declare const AlertBanner: React$1.ForwardRefExoticComponent<AlertProps & React$
 
 type ProgressBarProps = {
     progress: number;
+    color?: string;
     /** Override internal UI labels for internationalization support. */
     labels?: Partial<ProgressBarLabels>;
 };
 
-declare const ProgressBar: ({ progress, labels }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ progress, labels, color }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StepProgressIndicatorProps = {
     steps: {

package/dist/index.esm.js

@@ -2638,12 +2638,13 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
 `,Z$=$e`
   padding: ${He(300)};
 `,G$=({header:e,content:t,footer:n,size:r="medium",width:o,height:i,maxHeight:s,draggable:l,blocking:c,open:d,onClose:u,labels:h,lazyMount:p,unmountOnExit:f,restoreFocus:m,modal:g,initialFocusEl:v,finalFocusEl:b,trapFocus:y})=>{const w=qm("Modal",h),C=ae(null);return d?ye(z.Root,{open:d,onOpenChange:u,placement:"center",scrollBehavior:"inside",closeOnInteractOutside:!l&&!c,preventScroll:!l&&!c,closeOnEscape:!c,defaultOpen:!0,trapFocus:y,lazyMount:p,unmountOnExit:f,restoreFocus:m,modal:g,initialFocusEl:v,finalFocusEl:b,children:be(a,{children:[l?null:ye(z.Backdrop,{css:{background:"rgba(0, 0, 0, 0.64)"}}),ye(q$,{disabled:!l,nodeRef:C,children:ye(z.Positioner,{ref:C,children:be(z.Content,{"aria-label":w.dialogAriaLabel,css:W$(r,o,i,s),children:[be(z.Header,{css:U$,children:[e,c?null:ye(z.CloseTrigger,{css:K$,asChild:!0,children:ye(Ev,{})})]}),ye(z.Body,{css:Z$,children:t}),n?ye(z.Footer,{padding:"0.75rem",children:n}):null]})})})]})}):null},J$=e=>$e`
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: ${e||"20rem"};
   background-color: ${ze("neutral",100)};
   box-shadow: 0 0.0625rem 0.125rem -0.0625rem #0000001a;
   box-shadow: 0 0.0625rem 0.1875rem 0 #0000001a;
-  position: relative;
 `,X$=$e`
   border-right: ${je(100)} solid
     ${ze("neutral",300)};
@@ -2651,12 +2652,14 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
   border: ${je(100)} solid ${ze("neutral",300)};
   border-radius: ${Be(300)};
 `,Q$=$e`
+  flex-shrink: 0;
   min-height: ${He(1200)};
   width: 100%;
   border-bottom: ${je(100)} solid
     ${ze("neutral",300)};
-`,eS=(e,t)=>$e`
-  height: ${((e,t)=>e&&t?`calc(100% - ${(e+t)/16}rem)`:e?`calc(100% - ${e/16}rem)`:t?`calc(100% - ${t/16}rem)`:"100%")(e,t)};
+`,eS=$e`
+  flex: 1;
+  min-height: 0;
   width: 100%;
   overflow-y: auto;
 
@@ -2664,17 +2667,15 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     outline-color: ${ze("primary",700)};
   }
 `,tS=$e`
+  flex-shrink: 0;
   min-height: ${He(1600)};
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  position: absolute;
-  bottom: 0;
-  left: 0;
   border-top: ${je(100)} solid
     ${ze("neutral",300)};
-`,nS=({header:e,content:t,footer:n,variant:r="fixed",width:o})=>{const i=he(),[s,a]=le(void 0),[l,c]=le(void 0),d=ae(null),u=ae(null);de((()=>{a(d?.current?.getBoundingClientRect()?.height),c(u?.current?.getBoundingClientRect()?.height)}),[e,n]);return be("div",{role:"region","aria-labelledby":e?i:void 0,css:[J$(o),"fixed"===r?X$:Y$],children:[e?ye("div",{id:i,css:Q$,ref:d,children:e}):null,ye("div",{css:eS(s,l),children:t}),n?ye("div",{css:tS,ref:u,children:n}):null]})};var rS,oS;!function(){if(oS)return rS;oS=1;var e=function(){};if("production"!==process.env.NODE_ENV){var t=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var r=1;r<n;r++)t[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,(function(){return t[o++]}));"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};e=function(e,n,r){var o=arguments.length;r=new Array(o>2?o-2:0);for(var i=2;i<o;i++)r[i-2]=arguments[i];if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");e||t.apply(null,[n].concat(r))}}rS=e}();var iS=sS()?ue:de;"production"!==process.env.NODE_ENV&&("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;function sS(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var aS=function(e){var t,n=e.children,r=e.type,o=void 0===r?"reach-portal":r,i=ae(null),s=ae(null),a=(t=le(Object.create(null))[1],fe((function(){t(Object.create(null))}),[]));return iS((function(){if(i.current){var e=i.current.ownerDocument;return s.current=null==e?void 0:e.createElement(o),e.body.appendChild(s.current),a(),function(){s.current&&s.current.ownerDocument&&s.current.ownerDocument.body.removeChild(s.current)}}}),[o,a]),s.current?ke(n,s.current):me("span",{ref:i})};"production"!==process.env.NODE_ENV&&(aS.displayName="Portal");
+`,nS=({header:e,content:t,footer:n,variant:r="fixed",width:o})=>{const i=he();return be("div",{role:"region","aria-labelledby":e?i:void 0,css:[J$(o),"fixed"===r?X$:Y$],children:[e?ye("div",{id:i,css:Q$,children:e}):null,ye("div",{css:eS,children:t}),n?ye("div",{css:tS,children:n}):null]})};var rS,oS;!function(){if(oS)return rS;oS=1;var e=function(){};if("production"!==process.env.NODE_ENV){var t=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var r=1;r<n;r++)t[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,(function(){return t[o++]}));"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};e=function(e,n,r){var o=arguments.length;r=new Array(o>2?o-2:0);for(var i=2;i<o;i++)r[i-2]=arguments[i];if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");e||t.apply(null,[n].concat(r))}}rS=e}();var iS=sS()?ue:de;"production"!==process.env.NODE_ENV&&("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;function sS(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var aS=function(e){var t,n=e.children,r=e.type,o=void 0===r?"reach-portal":r,i=ae(null),s=ae(null),a=(t=le(Object.create(null))[1],fe((function(){t(Object.create(null))}),[]));return iS((function(){if(i.current){var e=i.current.ownerDocument;return s.current=null==e?void 0:e.createElement(o),e.body.appendChild(s.current),a(),function(){s.current&&s.current.ownerDocument&&s.current.ownerDocument.body.removeChild(s.current)}}}),[o,a]),s.current?ke(n,s.current):me("span",{ref:i})};"production"!==process.env.NODE_ENV&&(aS.displayName="Portal");
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -3919,12 +3920,12 @@ function zO(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   display: flex;
   align-items: center;
   justify-content: flex-start;
-`,lN=e=>$e`
+`,lN=(e,t)=>$e`
   height: 100%;
   width: ${e}%;
-  background-color: ${ze("primary",500)};
+  background-color: ${t??ze("primary",500)};
   transition: width 0.5s ease-in-out;
-`,cN=({progress:e,labels:t})=>{const n=qm("ProgressBar",t);let r=e;return r>100&&(r=100),r<0&&(r=0),ye("div",{css:aN,role:"progressbar","aria-label":n.progressAriaLabel(r),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":r,children:ye("div",{css:lN(r)})})},dN=$e`
+`,cN=({progress:e,labels:t,color:n})=>{const r=qm("ProgressBar",t);let o=e;return o>100&&(o=100),o<0&&(o=0),ye("div",{css:aN,role:"progressbar","aria-label":r.progressAriaLabel(o),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":o,children:ye("div",{css:lN(o,n)})})},dN=$e`
   width: 100%;
   display: flex;
   align-items: center;

package/package.json

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