@raspberrypifoundation/design-system-react 2.2.0 → 2.4.0
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/CHANGELOG.md +31 -4
- package/dist/design-system-react.css +1 -1
- package/dist/design-system-react.js +199 -184
- package/dist/design-system-react.umd.cjs +6 -6
- package/dist/scss/components/alert.scss +39 -16
- package/dist/scss/components/forms/error-message.scss +1 -0
- package/dist/scss/components/forms/fieldset.scss +13 -17
- package/dist/scss/components/forms/input-checkbox.scss +18 -12
- package/dist/scss/components/forms/input-label.scss +2 -1
- package/dist/scss/components/forms/input-radio.scss +17 -12
- package/dist/scss/components/progress-bar.scss +61 -17
- package/package.json +2 -3
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
(function(A,
|
|
1
|
+
(function(A,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],a):(A=typeof globalThis<"u"?globalThis:A||self,a(A["RPF Design System React"]={},A.jsxRuntime,A.React))})(this,function(A,a,Ue){"use strict";function be(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var Q={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/var he;function Ve(){return he||(he=1,function(r){(function(){var
|
|
5
|
+
*/var he;function Ve(){return he||(he=1,function(r){(function(){var c={}.hasOwnProperty;function o(){for(var n="",p=0;p<arguments.length;p++){var d=arguments[p];d&&(n=i(n,s(d)))}return n}function s(n){if(typeof n=="string"||typeof n=="number")return n;if(typeof n!="object")return"";if(Array.isArray(n))return o.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var p="";for(var d in n)c.call(n,d)&&n[d]&&(p=i(p,d));return p}function i(n,p){return p?n?n+" "+p:n+p:n}r.exports?(o.default=o,r.exports=o):window.classNames=o})()}(Q)),Q.exports}var He=Ve();const M=be(He);var H={exports:{}},J={exports:{}},C={};/** @license React v16.13.1
|
|
6
6
|
* react-is.production.min.js
|
|
7
7
|
*
|
|
8
8
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
9
9
|
*
|
|
10
10
|
* This source code is licensed under the MIT license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
12
|
-
*/var ve;function Je(){if(ve)return C;ve=1;var r=typeof Symbol=="function"&&Symbol.for,
|
|
12
|
+
*/var ve;function Je(){if(ve)return C;ve=1;var r=typeof Symbol=="function"&&Symbol.for,c=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,s=r?Symbol.for("react.fragment"):60107,i=r?Symbol.for("react.strict_mode"):60108,n=r?Symbol.for("react.profiler"):60114,p=r?Symbol.for("react.provider"):60109,d=r?Symbol.for("react.context"):60110,g=r?Symbol.for("react.async_mode"):60111,_=r?Symbol.for("react.concurrent_mode"):60111,m=r?Symbol.for("react.forward_ref"):60112,E=r?Symbol.for("react.suspense"):60113,q=r?Symbol.for("react.suspense_list"):60120,I=r?Symbol.for("react.memo"):60115,k=r?Symbol.for("react.lazy"):60116,N=r?Symbol.for("react.block"):60121,R=r?Symbol.for("react.fundamental"):60117,Y=r?Symbol.for("react.responder"):60118,z=r?Symbol.for("react.scope"):60119;function $(l){if(typeof l=="object"&&l!==null){var L=l.$$typeof;switch(L){case c:switch(l=l.type,l){case g:case _:case s:case n:case i:case E:return l;default:switch(l=l&&l.$$typeof,l){case d:case m:case k:case I:case p:return l;default:return L}}case o:return L}}}function j(l){return $(l)===_}return C.AsyncMode=g,C.ConcurrentMode=_,C.ContextConsumer=d,C.ContextProvider=p,C.Element=c,C.ForwardRef=m,C.Fragment=s,C.Lazy=k,C.Memo=I,C.Portal=o,C.Profiler=n,C.StrictMode=i,C.Suspense=E,C.isAsyncMode=function(l){return j(l)||$(l)===g},C.isConcurrentMode=j,C.isContextConsumer=function(l){return $(l)===d},C.isContextProvider=function(l){return $(l)===p},C.isElement=function(l){return typeof l=="object"&&l!==null&&l.$$typeof===c},C.isForwardRef=function(l){return $(l)===m},C.isFragment=function(l){return $(l)===s},C.isLazy=function(l){return $(l)===k},C.isMemo=function(l){return $(l)===I},C.isPortal=function(l){return $(l)===o},C.isProfiler=function(l){return $(l)===n},C.isStrictMode=function(l){return $(l)===i},C.isSuspense=function(l){return $(l)===E},C.isValidElementType=function(l){return typeof l=="string"||typeof l=="function"||l===s||l===_||l===n||l===i||l===E||l===q||typeof l=="object"&&l!==null&&(l.$$typeof===k||l.$$typeof===I||l.$$typeof===p||l.$$typeof===d||l.$$typeof===m||l.$$typeof===R||l.$$typeof===Y||l.$$typeof===z||l.$$typeof===N)},C.typeOf=$,C}var w={};/** @license React v16.13.1
|
|
13
13
|
* react-is.development.js
|
|
14
14
|
*
|
|
15
15
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
16
16
|
*
|
|
17
17
|
* This source code is licensed under the MIT license found in the
|
|
18
18
|
* LICENSE file in the root directory of this source tree.
|
|
19
|
-
*/var ge;function Xe(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){var r=typeof Symbol=="function"&&Symbol.for,
|
|
19
|
+
*/var ge;function Xe(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){var r=typeof Symbol=="function"&&Symbol.for,c=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,s=r?Symbol.for("react.fragment"):60107,i=r?Symbol.for("react.strict_mode"):60108,n=r?Symbol.for("react.profiler"):60114,p=r?Symbol.for("react.provider"):60109,d=r?Symbol.for("react.context"):60110,g=r?Symbol.for("react.async_mode"):60111,_=r?Symbol.for("react.concurrent_mode"):60111,m=r?Symbol.for("react.forward_ref"):60112,E=r?Symbol.for("react.suspense"):60113,q=r?Symbol.for("react.suspense_list"):60120,I=r?Symbol.for("react.memo"):60115,k=r?Symbol.for("react.lazy"):60116,N=r?Symbol.for("react.block"):60121,R=r?Symbol.for("react.fundamental"):60117,Y=r?Symbol.for("react.responder"):60118,z=r?Symbol.for("react.scope"):60119;function $(f){return typeof f=="string"||typeof f=="function"||f===s||f===_||f===n||f===i||f===E||f===q||typeof f=="object"&&f!==null&&(f.$$typeof===k||f.$$typeof===I||f.$$typeof===p||f.$$typeof===d||f.$$typeof===m||f.$$typeof===R||f.$$typeof===Y||f.$$typeof===z||f.$$typeof===N)}function j(f){if(typeof f=="object"&&f!==null){var W=f.$$typeof;switch(W){case c:var Z=f.type;switch(Z){case g:case _:case s:case n:case i:case E:return Z;default:var Be=Z&&Z.$$typeof;switch(Be){case d:case m:case k:case I:case p:return Be;default:return W}}case o:return W}}}var l=g,L=_,ie=d,le=p,ce=c,fe=m,G=s,ue=k,pe=I,U=o,de=n,D=i,B=E,K=!1;function ye(f){return K||(K=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),t(f)||j(f)===g}function t(f){return j(f)===_}function u(f){return j(f)===d}function T(f){return j(f)===p}function h(f){return typeof f=="object"&&f!==null&&f.$$typeof===c}function y(f){return j(f)===m}function O(f){return j(f)===s}function b(f){return j(f)===k}function v(f){return j(f)===I}function S(f){return j(f)===o}function x(f){return j(f)===n}function P(f){return j(f)===i}function F(f){return j(f)===E}w.AsyncMode=l,w.ConcurrentMode=L,w.ContextConsumer=ie,w.ContextProvider=le,w.Element=ce,w.ForwardRef=fe,w.Fragment=G,w.Lazy=ue,w.Memo=pe,w.Portal=U,w.Profiler=de,w.StrictMode=D,w.Suspense=B,w.isAsyncMode=ye,w.isConcurrentMode=t,w.isContextConsumer=u,w.isContextProvider=T,w.isElement=h,w.isForwardRef=y,w.isFragment=O,w.isLazy=b,w.isMemo=v,w.isPortal=S,w.isProfiler=x,w.isStrictMode=P,w.isSuspense=F,w.isValidElementType=$,w.typeOf=j}()),w}var me;function Te(){return me||(me=1,process.env.NODE_ENV==="production"?J.exports=Je():J.exports=Xe()),J.exports}/*
|
|
20
20
|
object-assign
|
|
21
21
|
(c) Sindre Sorhus
|
|
22
22
|
@license MIT
|
|
23
|
-
*/var ee,_e;function Ge(){if(_e)return ee;_e=1;var r=Object.getOwnPropertySymbols,
|
|
24
|
-
Valid keys: `+JSON.stringify(Object.keys(n),null," "));var c=F(v,P,y,O,b+"."+P,f);if(c)return c}return null}return $(u)}function U(n){switch(typeof n){case"number":case"string":case"undefined":return!0;case"boolean":return!n;case"object":if(Array.isArray(n))return n.every(U);if(n===null||d(n))return!0;var u=E(n);if(u){var T=u.call(n),h;if(u!==n.entries){for(;!(h=T.next()).done;)if(!U(h.value))return!1}else for(;!(h=T.next()).done;){var y=h.value;if(y&&!U(y[1]))return!1}}else return!1;return!0;default:return!1}}function de(n,u){return n==="symbol"?!0:u?u["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&u instanceof Symbol:!1}function D(n){var u=typeof n;return Array.isArray(n)?"array":n instanceof RegExp?"object":de(u,n)?"symbol":u}function B(n){if(typeof n>"u"||n===null)return""+n;var u=D(n);if(u==="object"){if(n instanceof Date)return"date";if(n instanceof RegExp)return"regexp"}return u}function K(n){var u=B(n);switch(u){case"array":case"object":return"an "+u;case"boolean":case"date":case"regexp":return"a "+u;default:return u}}function ye(n){return!n.constructor||!n.constructor.name?q:n.constructor.name}return I.checkPropTypes=o,I.resetWarningCache=o.resetWarningCache,I.PropTypes=I,I},se}var oe,we;function Qe(){if(we)return oe;we=1;var r=te();function l(){}function f(){}return f.resetWarningCache=l,oe=function(){function s(p,d,g,_,m,E){if(E!==r){var q=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw q.name="Invariant Violation",q}}s.isRequired=s;function o(){return s}var a={array:s,bigint:s,bool:s,func:s,number:s,object:s,string:s,symbol:s,any:s,arrayOf:o,element:s,elementType:s,instanceOf:o,node:s,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:f,resetWarningCache:l};return a.PropTypes=a,a},oe}var xe;function er(){if(xe)return H.exports;if(xe=1,process.env.NODE_ENV!=="production"){var r=Te(),l=!0;H.exports=Ze()(r.isElement,l)}else H.exports=Qe()();return H.exports}var rr=er();const e=be(rr),Ne=({content:r,title:l,className:f,id:s="accordion"})=>{const o=k("rpf-accordion",f);return t.jsxs("details",{className:o,id:`${s}`,children:[t.jsxs("summary",{className:"rpf-accordion__title",role:"button",children:[l,t.jsx("span",{className:"rpf-accordion__icon"})]}),t.jsx("p",{className:"rpf-accordion__text",children:r})]})};Ne.propTypes={content:e.string.isRequired,title:e.string.isRequired,id:e.string,className:e.string};const X=({text:r,href:l,title:f,className:s,type:o="primary",variant:a="",size:p="default",icon:d="",iconOnly:g=!1,iconPosition:_="left",fullWidth:m=!1,disabled:E=!1,onClick:q=()=>{},"aria-label":I="",linkComponent:M})=>{const N=d&&g,$=k("rpf-button",{[`rpf-button--${o}`]:o,"rpf-button--danger":a==="danger","rpf-button--sm":p==="small","rpf-button--icon-only":N,"rpf-button--full-width":m,disabled:E},s);let Y="rpf-button__icon";Ue.isValidElement(d)?(Y+=" icon",console.warn("DEPRECATED: icons as React elements will not be supported in future releases")):Y+=" material-symbols-sharp";const z=i=>d&&_===i&&t.jsx("span",{className:Y,children:d}),R=()=>r&&!N&&t.jsx("span",{className:"text",children:r}),j=t.jsxs(t.Fragment,{children:[z("left"),R(),z("right")]});if(l){const i=M||"a",L=M?{to:l}:{href:l,role:"button"};return t.jsx(i,{className:$,...L,onClick:q,"aria-label":I,children:j})}return t.jsx("button",{className:$,title:f,onClick:q,disabled:E,"aria-label":I,children:j})};X.propTypes={type:e.string,className:e.string,disabled:e.bool,icon:e.oneOfType([e.string,e.element]),href:e.string,onClick:e.func,text:e.string,iconOnly:e.bool,title:e.string,iconPosition:e.oneOf(["left","right"]),size:e.oneOf(["default","small"]),"aria-label":e.string,fullWidth:e.bool,variant:e.string,linkComponent:e.elementType};const Ae=({title:r,text:l,children:f,type:s,actions:o,onClose:a})=>t.jsxs("div",{className:`rpf-alert rpf-alert--${s}`,children:[t.jsxs("div",{className:"rpf-alert__header",children:[t.jsx("span",{className:"rpf-alert__icon material-symbols-sharp"}),t.jsx("p",{className:"rpf-alert__title",children:r}),!!a&&t.jsx("div",{className:"rpf-alert__close",children:t.jsx(X,{type:"tertiary",icon:"close",size:"small",iconOnly:!0,onClick:a})})]}),(l||f||o)&&t.jsxs("div",{className:"rpf-alert__body",children:[!f&&l&&t.jsx("p",{children:l}),f&&t.jsx("div",{children:f}),o&&o.length>0&&t.jsx("div",{className:"rpf-alert__actions",children:o.map(p=>t.jsx(X,{text:p.label,size:"small",type:"tertiary",href:p.href,onClick:p.onClick},p.key||p.label))})]})]});Ae.propTypes={title:e.string,text:e.string,type:e.oneOf(["error","warning","information","success"]),actions:e.arrayOf(e.shape({href:e.string,label:e.string,onClick:e.func})),children:e.node,onClose:e.func};const qe=({id:r,label:l,name:f,checked:s=!1,disabled:o=!1,error:a="",onChange:p=()=>{},value:d="",className:g=""})=>t.jsxs(t.Fragment,{children:[t.jsxs("label",{className:k("rpf-input-checkbox",{"rpf-input-checkbox--error":a,className:g}),children:[t.jsx("span",{children:t.jsx("input",{checked:!!s,disabled:o,id:r,name:f,onChange:p,type:"checkbox",value:d})}),t.jsx("span",{className:"checkmark"}),l]}),a&&t.jsxs("div",{className:"rpf-error-message",children:[t.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),a]})]});qe.propTypes={checked:e.bool,disabled:e.bool,error:e.string,id:e.string.isRequired,label:e.oneOfType([e.string,e.object]).isRequired,name:e.string.isRequired,onChange:e.func,value:e.string,className:e.string};const Ie=({disabled:r=!1,errorText:l="",fullWidth:f=!1,legendText:s,legendHintText:o="",children:a})=>t.jsxs("fieldset",{className:k("rpf-fieldset",{"rpf-fieldset--disabled":r,"rpf-fieldset--full-width":f,"rpf-fieldset--error":l}),disabled:r,children:[t.jsxs("legend",{className:"rpf-label",children:[s,o.length>0?t.jsx("small",{className:"rpf-label__hint",children:o}):null]}),t.jsx("div",{className:"rpf-fieldset__inputs",children:a}),l.length>0?t.jsxs("div",{className:"rpf-error-message",children:[t.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),l]}):null]});Ie.propTypes={disabled:e.bool,errorText:e.string,fullWidth:e.bool,legendText:e.string.isRequired,legendHintText:e.string,children:e.node};const V=({id:r,label:l,children:f,disabled:s=!1,error:o="",hint:a=""})=>t.jsxs("div",{className:"rpf-input-field",children:[(l||a)&&t.jsxs("label",{htmlFor:r,className:k("rpf-label",{"rpf-label--disabled":s}),children:[l,t.jsx("small",{className:"rpf-label__hint",children:a})]}),f,o&&t.jsxs("div",{className:"rpf-error-message",children:[t.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),o]})]});V.propTypes={disabled:e.bool,error:e.string,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,children:e.node};const je=({label:r,inputFieldId:l,disabled:f=!1,hint:s=""})=>t.jsx("div",{className:"rpf-label",children:t.jsxs("label",{htmlFor:l,className:k("rpf-label",{"rpf-label--disabled":f}),children:[r,s&&t.jsx("div",{className:"rpf-label__hint",children:s})]})});je.propTypes={disabled:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,inputFieldId:e.string.isRequired};const $e=({text:r="",percent:l})=>t.jsx("div",{className:"rpf-progress-bar",children:t.jsxs("label",{className:"rpf-progress-bar__label",children:[t.jsx("span",{children:r}),t.jsx("progress",{className:"rpf-progress-bar__bar",value:l,max:"100",children:`${l}%`})]})});$e.propTypes={text:e.string,percent:e.number.isRequired};const Re=({id:r,label:l,name:f,checked:s=!1,disabled:o=!1,fullWidth:a=!1,onChange:p=()=>{},value:d=""})=>t.jsx(t.Fragment,{children:t.jsxs("label",{className:k("rpf-input-radio",{"rpf-input-radio--disabled":o,"rpf-input--full-width":a}),children:[t.jsx("input",{checked:!!s,disabled:o,id:r,name:f,onChange:p,type:"radio",value:d}),l]})});Re.propTypes={checked:e.bool,disabled:e.bool,fullWidth:e.bool,id:e.string.isRequired,label:e.oneOfType([e.string,e.object]).isRequired,name:e.string.isRequired,onChange:e.func,value:e.string};const ke=({label:r,inputFieldId:l,disabled:f=!1,error:s="",hint:o="",placeholder:a="",defaultValue:p="",onClick:d=()=>{},onChange:g=_=>{}})=>t.jsxs("div",{className:"rpf-input-field",children:[t.jsxs("label",{htmlFor:l,className:k("rpf-label",{"rpf-label--disabled":f}),children:[r,o&&t.jsx("small",{className:"rpf-label__hint",children:o})]}),t.jsxs("div",{className:"rpf-input-search-container",children:[t.jsx("input",{className:k("rpf-input rpf-input-search",{"rpf-input--disabled":f,"rpf-input--error":s}),disabled:f,id:l,name:"search",type:"search","aria-label":"Search",defaultValue:p,placeholder:a,onChange:g}),t.jsx("button",{type:"button",className:k("rpf-button rpf-button-search",{"rpf-button--disabled":f,"rpf-button--error":s}),disabled:f,onClick:d,children:t.jsx("span",{className:"rpf-button__icon material-symbols-sharp",children:"search"})})]}),s&&t.jsxs("div",{className:"rpf-error-message",children:[t.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"info"}),s]})]});ke.propTypes={disabled:e.bool,error:e.string,hint:e.string,inputFieldId:e.string.isRequired,label:e.string.isRequired,onClick:e.func,onChange:e.func,placeholder:e.string,defaultValue:e.string};const Me=({id:r,label:l,name:f,options:s,disabled:o=!1,error:a="",fullWidth:p=!1,hint:d="",onChange:g=()=>{},placeholder:_="",value:m=""})=>t.jsx(V,{id:r,disabled:o,error:a,hint:d,label:l,children:t.jsxs("select",{className:k("rpf-input rpf-input-select",{"rpf-input--error":a,"rpf-input--full-width":p}),disabled:o,id:r,name:f,onChange:g,type:"text",value:m,children:[!m&&!!_&&t.jsx("option",{value:"",disabled:!0,children:_}),s.map(E=>t.jsx("option",{value:E.key,children:E.value},E.key))]})});Me.propTypes={disabled:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,options:e.array.isRequired,placeholder:e.string,value:e.string};const Ye=({headerRow:r,bodyRows:l,fullWidth:f})=>t.jsx("div",{"data-testid":"table-container",className:k("rpf-table",{"rpf-table--full-width":f}),children:t.jsxs("table",{className:k("rpf-table__table",{"rpf-table__table--full-width":f}),children:[t.jsx("thead",{children:t.jsx("tr",{className:"rpf-table-row",children:r})}),t.jsx("tbody",{children:l.map((s,o)=>t.jsx("tr",{className:"rpf-table-row",children:s},o))})]})});Ye.propTypes={headerRow:e.node.isRequired,bodyRows:e.arrayOf(e.node).isRequired,fullWidth:e.bool};const Fe=({children:r})=>t.jsx("td",{className:"rpf-table-cell rpf-table-cell--body",children:t.jsx("div",{className:"rpf-table-cell__content",children:r})});Fe.propTypes={children:e.node};const De=({sortDirection:r,children:l})=>{if(r!==void 0){const s=r==="up"?"arrow_drop_up":"arrow_drop_down";l=t.jsxs("div",{className:"rpf-table-cell__sort-header",children:[l,t.jsx("span",{className:"material-symbols-sharp",children:s})]})}const f=r!==void 0?"rpf-table-cell--sortable-header":"rpf-table-cell--header";return t.jsx("th",{className:`rpf-table-cell ${f}`,children:t.jsx("div",{className:"rpf-table-cell__content",children:l})})};De.propTypes={sortDirection:e.oneOf(["up","down"]),children:e.node};const We=({text:r,variant:l,secondary:f,icon:s,iconPosition:o})=>(s&&(s=t.jsx("span",{className:"rpf-tag__icon material-symbols-sharp",children:s})),s&&!o&&(o="left"),l&&l!=="default"?l=`rpf-tag--${l}`:l=null,t.jsxs("span",{className:k("rpf-tag",l,{"rpf-tag--secondary":f}),children:[o==="left"&&s,r,o==="right"&&s]}));We.propTypes={text:e.string.isRequired,variant:e.oneOf(["default","information","success","warning","error"]),secondary:e.bool,icon:e.string,iconPosition:e.oneOf(["left","right"])};const Le=({id:r,label:l,name:f,value:s,disabled:o=!1,readOnly:a=!1,error:p="",fullWidth:d=!1,hint:g="",onChange:_=()=>{}})=>t.jsx(V,{id:r,disabled:o,error:p,hint:g,label:l,children:t.jsx("textarea",{className:k("rpf-input rpf-input-textarea",{"rpf-input--error":p,"rpf-input--full-width":d,"rpf-input--disabled":o}),disabled:o,readOnly:a,id:r,name:f,onChange:_,type:"text",value:s})});Le.propTypes={disabled:e.bool,readOnly:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,value:e.string.isRequired};const ze=({id:r,label:l,name:f,value:s,disabled:o=!1,error:a="",fullWidth:p=!1,hint:d="",onChange:g=()=>{}})=>t.jsx(V,{id:r,disabled:o,error:a,hint:d,label:l,children:t.jsx("input",{className:k("rpf-input rpf-input-text",{"rpf-input--error":a,"rpf-input--full-width":p}),disabled:o,id:r,name:f,onChange:g,type:"text",value:s})});ze.propTypes={disabled:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,value:e.string.isRequired},A.Accordion=Ne,A.Alert=Ae,A.Button=X,A.CheckboxInput=qe,A.Fieldset=Ie,A.InputField=V,A.InputLabel=je,A.ProgressBar=$e,A.RadioInput=Re,A.SearchInput=ke,A.SelectInput=Me,A.Table=Ye,A.TableBodyCell=Fe,A.TableHeaderCell=De,A.Tag=We,A.TextInput=ze,A.TextareaInput=Le,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
|
|
23
|
+
*/var ee,_e;function Ge(){if(_e)return ee;_e=1;var r=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function s(n){if(n==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(n)}function i(){try{if(!Object.assign)return!1;var n=new String("abc");if(n[5]="de",Object.getOwnPropertyNames(n)[0]==="5")return!1;for(var p={},d=0;d<10;d++)p["_"+String.fromCharCode(d)]=d;var g=Object.getOwnPropertyNames(p).map(function(m){return p[m]});if(g.join("")!=="0123456789")return!1;var _={};return"abcdefghijklmnopqrst".split("").forEach(function(m){_[m]=m}),Object.keys(Object.assign({},_)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}return ee=i()?Object.assign:function(n,p){for(var d,g=s(n),_,m=1;m<arguments.length;m++){d=Object(arguments[m]);for(var E in d)c.call(d,E)&&(g[E]=d[E]);if(r){_=r(d);for(var q=0;q<_.length;q++)o.call(d,_[q])&&(g[_[q]]=d[_[q]])}}return g},ee}var re,Ee;function te(){if(Ee)return re;Ee=1;var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return re=r,re}var ne,Oe;function Se(){return Oe||(Oe=1,ne=Function.call.bind(Object.prototype.hasOwnProperty)),ne}var ae,Pe;function Ke(){if(Pe)return ae;Pe=1;var r=function(){};if(process.env.NODE_ENV!=="production"){var c=te(),o={},s=Se();r=function(n){var p="Warning: "+n;typeof console<"u"&&console.error(p);try{throw new Error(p)}catch{}}}function i(n,p,d,g,_){if(process.env.NODE_ENV!=="production"){for(var m in n)if(s(n,m)){var E;try{if(typeof n[m]!="function"){var q=Error((g||"React class")+": "+d+" type `"+m+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof n[m]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw q.name="Invariant Violation",q}E=n[m](p,m,g,d,null,c)}catch(k){E=k}if(E&&!(E instanceof Error)&&r((g||"React class")+": type specification of "+d+" `"+m+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof E+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),E instanceof Error&&!(E.message in o)){o[E.message]=!0;var I=_?_():"";r("Failed "+d+" type: "+E.message+(I??""))}}}}return i.resetWarningCache=function(){process.env.NODE_ENV!=="production"&&(o={})},ae=i,ae}var se,Ce;function Ze(){if(Ce)return se;Ce=1;var r=Te(),c=Ge(),o=te(),s=Se(),i=Ke(),n=function(){};process.env.NODE_ENV!=="production"&&(n=function(d){var g="Warning: "+d;typeof console<"u"&&console.error(g);try{throw new Error(g)}catch{}});function p(){return null}return se=function(d,g){var _=typeof Symbol=="function"&&Symbol.iterator,m="@@iterator";function E(t){var u=t&&(_&&t[_]||t[m]);if(typeof u=="function")return u}var q="<<anonymous>>",I={array:Y("array"),bigint:Y("bigint"),bool:Y("boolean"),func:Y("function"),number:Y("number"),object:Y("object"),string:Y("string"),symbol:Y("symbol"),any:z(),arrayOf:$,element:j(),elementType:l(),instanceOf:L,node:fe(),objectOf:le,oneOf:ie,oneOfType:ce,shape:ue,exact:pe};function k(t,u){return t===u?t!==0||1/t===1/u:t!==t&&u!==u}function N(t,u){this.message=t,this.data=u&&typeof u=="object"?u:{},this.stack=""}N.prototype=Error.prototype;function R(t){if(process.env.NODE_ENV!=="production")var u={},T=0;function h(O,b,v,S,x,P,F){if(S=S||q,P=P||v,F!==o){if(g){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}else if(process.env.NODE_ENV!=="production"&&typeof console<"u"){var W=S+":"+v;!u[W]&&T<3&&(n("You are manually calling a React.PropTypes validation function for the `"+P+"` prop on `"+S+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),u[W]=!0,T++)}}return b[v]==null?O?b[v]===null?new N("The "+x+" `"+P+"` is marked as required "+("in `"+S+"`, but its value is `null`.")):new N("The "+x+" `"+P+"` is marked as required in "+("`"+S+"`, but its value is `undefined`.")):null:t(b,v,S,x,P)}var y=h.bind(null,!1);return y.isRequired=h.bind(null,!0),y}function Y(t){function u(T,h,y,O,b,v){var S=T[h],x=D(S);if(x!==t){var P=B(S);return new N("Invalid "+O+" `"+b+"` of type "+("`"+P+"` supplied to `"+y+"`, expected ")+("`"+t+"`."),{expectedType:t})}return null}return R(u)}function z(){return R(p)}function $(t){function u(T,h,y,O,b){if(typeof t!="function")return new N("Property `"+b+"` of component `"+y+"` has invalid PropType notation inside arrayOf.");var v=T[h];if(!Array.isArray(v)){var S=D(v);return new N("Invalid "+O+" `"+b+"` of type "+("`"+S+"` supplied to `"+y+"`, expected an array."))}for(var x=0;x<v.length;x++){var P=t(v,x,y,O,b+"["+x+"]",o);if(P instanceof Error)return P}return null}return R(u)}function j(){function t(u,T,h,y,O){var b=u[T];if(!d(b)){var v=D(b);return new N("Invalid "+y+" `"+O+"` of type "+("`"+v+"` supplied to `"+h+"`, expected a single ReactElement."))}return null}return R(t)}function l(){function t(u,T,h,y,O){var b=u[T];if(!r.isValidElementType(b)){var v=D(b);return new N("Invalid "+y+" `"+O+"` of type "+("`"+v+"` supplied to `"+h+"`, expected a single ReactElement type."))}return null}return R(t)}function L(t){function u(T,h,y,O,b){if(!(T[h]instanceof t)){var v=t.name||q,S=ye(T[h]);return new N("Invalid "+O+" `"+b+"` of type "+("`"+S+"` supplied to `"+y+"`, expected ")+("instance of `"+v+"`."))}return null}return R(u)}function ie(t){if(!Array.isArray(t))return process.env.NODE_ENV!=="production"&&(arguments.length>1?n("Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."):n("Invalid argument supplied to oneOf, expected an array.")),p;function u(T,h,y,O,b){for(var v=T[h],S=0;S<t.length;S++)if(k(v,t[S]))return null;var x=JSON.stringify(t,function(F,f){var W=B(f);return W==="symbol"?String(f):f});return new N("Invalid "+O+" `"+b+"` of value `"+String(v)+"` "+("supplied to `"+y+"`, expected one of "+x+"."))}return R(u)}function le(t){function u(T,h,y,O,b){if(typeof t!="function")return new N("Property `"+b+"` of component `"+y+"` has invalid PropType notation inside objectOf.");var v=T[h],S=D(v);if(S!=="object")return new N("Invalid "+O+" `"+b+"` of type "+("`"+S+"` supplied to `"+y+"`, expected an object."));for(var x in v)if(s(v,x)){var P=t(v,x,y,O,b+"."+x,o);if(P instanceof Error)return P}return null}return R(u)}function ce(t){if(!Array.isArray(t))return process.env.NODE_ENV!=="production"&&n("Invalid argument supplied to oneOfType, expected an instance of array."),p;for(var u=0;u<t.length;u++){var T=t[u];if(typeof T!="function")return n("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+K(T)+" at index "+u+"."),p}function h(y,O,b,v,S){for(var x=[],P=0;P<t.length;P++){var F=t[P],f=F(y,O,b,v,S,o);if(f==null)return null;f.data&&s(f.data,"expectedType")&&x.push(f.data.expectedType)}var W=x.length>0?", expected one of type ["+x.join(", ")+"]":"";return new N("Invalid "+v+" `"+S+"` supplied to "+("`"+b+"`"+W+"."))}return R(h)}function fe(){function t(u,T,h,y,O){return U(u[T])?null:new N("Invalid "+y+" `"+O+"` supplied to "+("`"+h+"`, expected a ReactNode."))}return R(t)}function G(t,u,T,h,y){return new N((t||"React class")+": "+u+" type `"+T+"."+h+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+y+"`.")}function ue(t){function u(T,h,y,O,b){var v=T[h],S=D(v);if(S!=="object")return new N("Invalid "+O+" `"+b+"` of type `"+S+"` "+("supplied to `"+y+"`, expected `object`."));for(var x in t){var P=t[x];if(typeof P!="function")return G(y,O,b,x,B(P));var F=P(v,x,y,O,b+"."+x,o);if(F)return F}return null}return R(u)}function pe(t){function u(T,h,y,O,b){var v=T[h],S=D(v);if(S!=="object")return new N("Invalid "+O+" `"+b+"` of type `"+S+"` "+("supplied to `"+y+"`, expected `object`."));var x=c({},T[h],t);for(var P in x){var F=t[P];if(s(t,P)&&typeof F!="function")return G(y,O,b,P,B(F));if(!F)return new N("Invalid "+O+" `"+b+"` key `"+P+"` supplied to `"+y+"`.\nBad object: "+JSON.stringify(T[h],null," ")+`
|
|
24
|
+
Valid keys: `+JSON.stringify(Object.keys(t),null," "));var f=F(v,P,y,O,b+"."+P,o);if(f)return f}return null}return R(u)}function U(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(U);if(t===null||d(t))return!0;var u=E(t);if(u){var T=u.call(t),h;if(u!==t.entries){for(;!(h=T.next()).done;)if(!U(h.value))return!1}else for(;!(h=T.next()).done;){var y=h.value;if(y&&!U(y[1]))return!1}}else return!1;return!0;default:return!1}}function de(t,u){return t==="symbol"?!0:u?u["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&u instanceof Symbol:!1}function D(t){var u=typeof t;return Array.isArray(t)?"array":t instanceof RegExp?"object":de(u,t)?"symbol":u}function B(t){if(typeof t>"u"||t===null)return""+t;var u=D(t);if(u==="object"){if(t instanceof Date)return"date";if(t instanceof RegExp)return"regexp"}return u}function K(t){var u=B(t);switch(u){case"array":case"object":return"an "+u;case"boolean":case"date":case"regexp":return"a "+u;default:return u}}function ye(t){return!t.constructor||!t.constructor.name?q:t.constructor.name}return I.checkPropTypes=i,I.resetWarningCache=i.resetWarningCache,I.PropTypes=I,I},se}var oe,we;function Qe(){if(we)return oe;we=1;var r=te();function c(){}function o(){}return o.resetWarningCache=c,oe=function(){function s(p,d,g,_,m,E){if(E!==r){var q=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw q.name="Invariant Violation",q}}s.isRequired=s;function i(){return s}var n={array:s,bigint:s,bool:s,func:s,number:s,object:s,string:s,symbol:s,any:s,arrayOf:i,element:s,elementType:s,instanceOf:i,node:s,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:o,resetWarningCache:c};return n.PropTypes=n,n},oe}var xe;function er(){if(xe)return H.exports;if(xe=1,process.env.NODE_ENV!=="production"){var r=Te(),c=!0;H.exports=Ze()(r.isElement,c)}else H.exports=Qe()();return H.exports}var rr=er();const e=be(rr),Ne=({content:r,title:c,className:o,id:s="accordion"})=>{const i=M("rpf-accordion",o);return a.jsxs("details",{className:i,id:`${s}`,children:[a.jsxs("summary",{className:"rpf-accordion__title",role:"button",children:[c,a.jsx("span",{className:"rpf-accordion__icon"})]}),a.jsx("p",{className:"rpf-accordion__text",children:r})]})};Ne.propTypes={content:e.string.isRequired,title:e.string.isRequired,id:e.string,className:e.string};const X=({text:r,href:c,title:o,className:s,type:i="primary",variant:n="",size:p="default",icon:d="",iconOnly:g=!1,iconPosition:_="left",fullWidth:m=!1,disabled:E=!1,onClick:q=()=>{},"aria-label":I="",linkComponent:k})=>{const N=d&&g,R=M("rpf-button",{[`rpf-button--${i}`]:i,"rpf-button--danger":n==="danger","rpf-button--sm":p==="small","rpf-button--icon-only":N,"rpf-button--full-width":m,disabled:E},s);let Y="rpf-button__icon";Ue.isValidElement(d)?(Y+=" icon",console.warn("DEPRECATED: icons as React elements will not be supported in future releases")):Y+=" material-symbols-sharp";const z=l=>d&&_===l&&a.jsx("span",{className:Y,children:d}),$=()=>r&&!N&&a.jsx("span",{className:"text",children:r}),j=a.jsxs(a.Fragment,{children:[z("left"),$(),z("right")]});if(c){const l=k||"a",L=k?{to:c}:{href:c,role:"button"};return a.jsx(l,{className:R,...L,onClick:q,"aria-label":I,children:j})}return a.jsx("button",{className:R,title:o,onClick:q,disabled:E,"aria-label":I,children:j})};X.propTypes={type:e.string,className:e.string,disabled:e.bool,icon:e.oneOfType([e.string,e.element]),href:e.string,onClick:e.func,text:e.string,iconOnly:e.bool,title:e.string,iconPosition:e.oneOf(["left","right"]),size:e.oneOf(["default","small"]),"aria-label":e.string,fullWidth:e.bool,variant:e.string,linkComponent:e.elementType};const Ae=({title:r,text:c,children:o,type:s,actions:i,onClose:n})=>a.jsxs("div",{className:`rpf-alert rpf-alert--${s}`,children:[a.jsxs("div",{className:"rpf-alert__header",children:[a.jsx("span",{className:"rpf-alert__icon material-symbols-sharp"}),a.jsx("p",{className:"rpf-alert__title",children:r}),!!n&&a.jsx("div",{className:"rpf-alert__close",children:a.jsx(X,{type:"tertiary",icon:"close",size:"small",iconOnly:!0,onClick:n})})]}),(c||o||i)&&a.jsxs("div",{className:"rpf-alert__body",children:[!o&&c&&a.jsx("p",{children:c}),o&&a.jsx("div",{children:o}),i&&i.length>0&&a.jsx("div",{className:"rpf-alert__actions",children:i.map(p=>a.jsx(X,{text:p.label,size:"small",type:"tertiary",href:p.href,onClick:p.onClick},p.key||p.label))})]})]});Ae.propTypes={title:e.string,text:e.string,type:e.oneOf(["error","warning","information","success"]),actions:e.arrayOf(e.shape({href:e.string,label:e.string,onClick:e.func})),children:e.node,onClose:e.func};const qe=({id:r,label:c,name:o,checked:s=!1,disabled:i=!1,error:n="",onChange:p=()=>{},value:d="",className:g=""})=>a.jsxs(a.Fragment,{children:[a.jsxs("label",{className:M("rpf-input-checkbox",{"rpf-input-checkbox--error":n,className:g}),children:[a.jsx("input",{checked:!!s,disabled:i,id:r,name:o,onChange:p,type:"checkbox",value:d}),c]}),n&&a.jsxs("div",{className:"rpf-error-message",children:[a.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),n]})]});qe.propTypes={checked:e.bool,disabled:e.bool,error:e.string,id:e.string.isRequired,label:e.oneOfType([e.string,e.object]).isRequired,name:e.string.isRequired,onChange:e.func,value:e.string,className:e.string};const Ie=({disabled:r=!1,errorText:c="",fullWidth:o=!1,legendText:s,legendHintText:i="",children:n})=>a.jsxs("fieldset",{className:M("rpf-fieldset",{"rpf-fieldset--disabled":r,"rpf-fieldset--full-width":o,"rpf-fieldset--error":c}),disabled:r,children:[a.jsxs("legend",{className:"rpf-label",children:[s,i.length>0?a.jsx("small",{className:"rpf-label__hint",children:i}):null]}),a.jsx("div",{className:"rpf-fieldset__inputs",children:n}),c.length>0?a.jsxs("div",{className:"rpf-error-message",children:[a.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),c]}):null]});Ie.propTypes={disabled:e.bool,errorText:e.string,fullWidth:e.bool,legendText:e.string.isRequired,legendHintText:e.string,children:e.node};const V=({id:r,label:c,children:o,disabled:s=!1,error:i="",hint:n=""})=>a.jsxs("div",{className:"rpf-input-field",children:[(c||n)&&a.jsxs("label",{htmlFor:r,className:M("rpf-label",{"rpf-label--disabled":s}),children:[c,a.jsx("small",{className:"rpf-label__hint",children:n})]}),o,i&&a.jsxs("div",{className:"rpf-error-message",children:[a.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"error"}),i]})]});V.propTypes={disabled:e.bool,error:e.string,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,children:e.node};const je=({label:r,inputFieldId:c,disabled:o=!1,hint:s=""})=>a.jsx("div",{className:"rpf-label",children:a.jsxs("label",{htmlFor:c,className:M("rpf-label",{"rpf-label--disabled":o}),children:[r,s&&a.jsx("div",{className:"rpf-label__hint",children:s})]})});je.propTypes={disabled:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,inputFieldId:e.string.isRequired};const Re=({text:r="",percent:c,complete:o=!1,className:s})=>a.jsx("div",{className:M("rpf-progress-bar",{"rpf-progress-bar--complete":o,className:s}),children:a.jsxs("label",{className:"rpf-progress-bar__label",children:[a.jsx("span",{children:r}),a.jsx("progress",{className:"rpf-progress-bar__bar",value:c,max:"100",children:`${c}%`})]})});Re.propTypes={text:e.string,percent:e.number.isRequired,complete:e.bool,className:e.string};const $e=({id:r,label:c,name:o,checked:s=!1,disabled:i=!1,fullWidth:n=!1,onChange:p=()=>{},value:d=""})=>a.jsx(a.Fragment,{children:a.jsxs("label",{className:M("rpf-input-radio",{"rpf-input-radio--disabled":i,"rpf-input--full-width":n}),children:[a.jsx("input",{checked:!!s,disabled:i,id:r,name:o,onChange:p,type:"radio",value:d}),c]})});$e.propTypes={checked:e.bool,disabled:e.bool,fullWidth:e.bool,id:e.string.isRequired,label:e.oneOfType([e.string,e.object]).isRequired,name:e.string.isRequired,onChange:e.func,value:e.string};const Me=({label:r,inputFieldId:c,disabled:o=!1,error:s="",hint:i="",placeholder:n="",defaultValue:p="",onClick:d=()=>{},onChange:g=_=>{}})=>a.jsxs("div",{className:"rpf-input-field",children:[a.jsxs("label",{htmlFor:c,className:M("rpf-label",{"rpf-label--disabled":o}),children:[r,i&&a.jsx("small",{className:"rpf-label__hint",children:i})]}),a.jsxs("div",{className:"rpf-input-search-container",children:[a.jsx("input",{className:M("rpf-input rpf-input-search",{"rpf-input--disabled":o,"rpf-input--error":s}),disabled:o,id:c,name:"search",type:"search","aria-label":"Search",defaultValue:p,placeholder:n,onChange:g}),a.jsx("button",{type:"button",className:M("rpf-button rpf-button-search",{"rpf-button--disabled":o,"rpf-button--error":s}),disabled:o,onClick:d,children:a.jsx("span",{className:"rpf-button__icon material-symbols-sharp",children:"search"})})]}),s&&a.jsxs("div",{className:"rpf-error-message",children:[a.jsx("span",{className:"rpf-error-message__icon material-symbols-sharp",children:"info"}),s]})]});Me.propTypes={disabled:e.bool,error:e.string,hint:e.string,inputFieldId:e.string.isRequired,label:e.string.isRequired,onClick:e.func,onChange:e.func,placeholder:e.string,defaultValue:e.string};const ke=({id:r,label:c,name:o,options:s,disabled:i=!1,error:n="",fullWidth:p=!1,hint:d="",onChange:g=()=>{},placeholder:_="",value:m=""})=>a.jsx(V,{id:r,disabled:i,error:n,hint:d,label:c,children:a.jsxs("select",{className:M("rpf-input rpf-input-select",{"rpf-input--error":n,"rpf-input--full-width":p}),disabled:i,id:r,name:o,onChange:g,type:"text",value:m,children:[!m&&!!_&&a.jsx("option",{value:"",disabled:!0,children:_}),s.map(E=>a.jsx("option",{value:E.key,children:E.value},E.key))]})});ke.propTypes={disabled:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,options:e.array.isRequired,placeholder:e.string,value:e.string};const Ye=({headerRow:r,bodyRows:c,fullWidth:o})=>a.jsx("div",{"data-testid":"table-container",className:M("rpf-table",{"rpf-table--full-width":o}),children:a.jsxs("table",{className:M("rpf-table__table",{"rpf-table__table--full-width":o}),children:[a.jsx("thead",{children:a.jsx("tr",{className:"rpf-table-row",children:r})}),a.jsx("tbody",{children:c.map((s,i)=>a.jsx("tr",{className:"rpf-table-row",children:s},i))})]})});Ye.propTypes={headerRow:e.node.isRequired,bodyRows:e.arrayOf(e.node).isRequired,fullWidth:e.bool};const Fe=({children:r})=>a.jsx("td",{className:"rpf-table-cell rpf-table-cell--body",children:a.jsx("div",{className:"rpf-table-cell__content",children:r})});Fe.propTypes={children:e.node};const De=({sortDirection:r,children:c})=>{if(r!==void 0){const s=r==="up"?"arrow_drop_up":"arrow_drop_down";c=a.jsxs("div",{className:"rpf-table-cell__sort-header",children:[c,a.jsx("span",{className:"material-symbols-sharp",children:s})]})}const o=r!==void 0?"rpf-table-cell--sortable-header":"rpf-table-cell--header";return a.jsx("th",{className:`rpf-table-cell ${o}`,children:a.jsx("div",{className:"rpf-table-cell__content",children:c})})};De.propTypes={sortDirection:e.oneOf(["up","down"]),children:e.node};const We=({text:r,variant:c,secondary:o,icon:s,iconPosition:i})=>(s&&(s=a.jsx("span",{className:"rpf-tag__icon material-symbols-sharp",children:s})),s&&!i&&(i="left"),c&&c!=="default"?c=`rpf-tag--${c}`:c=null,a.jsxs("span",{className:M("rpf-tag",c,{"rpf-tag--secondary":o}),children:[i==="left"&&s,r,i==="right"&&s]}));We.propTypes={text:e.string.isRequired,variant:e.oneOf(["default","information","success","warning","error"]),secondary:e.bool,icon:e.string,iconPosition:e.oneOf(["left","right"])};const Le=({id:r,label:c,name:o,value:s,disabled:i=!1,readOnly:n=!1,error:p="",fullWidth:d=!1,hint:g="",onChange:_=()=>{}})=>a.jsx(V,{id:r,disabled:i,error:p,hint:g,label:c,children:a.jsx("textarea",{className:M("rpf-input rpf-input-textarea",{"rpf-input--error":p,"rpf-input--full-width":d,"rpf-input--disabled":i}),disabled:i,readOnly:n,id:r,name:o,onChange:_,type:"text",value:s})});Le.propTypes={disabled:e.bool,readOnly:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,value:e.string.isRequired};const ze=({id:r,label:c,name:o,value:s,disabled:i=!1,error:n="",fullWidth:p=!1,hint:d="",onChange:g=()=>{}})=>a.jsx(V,{id:r,disabled:i,error:n,hint:d,label:c,children:a.jsx("input",{className:M("rpf-input rpf-input-text",{"rpf-input--error":n,"rpf-input--full-width":p}),disabled:i,id:r,name:o,onChange:g,type:"text",value:s})});ze.propTypes={disabled:e.bool,error:e.string,fullWidth:e.bool,hint:e.oneOfType([e.string,e.object]),label:e.oneOfType([e.string,e.object]).isRequired,id:e.string.isRequired,name:e.string.isRequired,onChange:e.func,value:e.string.isRequired},A.Accordion=Ne,A.Alert=Ae,A.Button=X,A.CheckboxInput=qe,A.Fieldset=Ie,A.InputField=V,A.InputLabel=je,A.ProgressBar=Re,A.RadioInput=$e,A.SearchInput=Me,A.SelectInput=ke,A.Table=Ye,A.TableBodyCell=Fe,A.TableHeaderCell=De,A.Tag=We,A.TextInput=ze,A.TextareaInput=Le,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -10,8 +10,26 @@
|
|
|
10
10
|
|
|
11
11
|
:root,
|
|
12
12
|
:host {
|
|
13
|
-
--rpf-alert-
|
|
14
|
-
--rpf-alert-
|
|
13
|
+
--rpf-alert-body-font-size: var(--font-size-1);
|
|
14
|
+
--rpf-alert-body-line-height: var(--font-size-1-5);
|
|
15
|
+
--rpf-alert-title-font-size: var(--font-size-1);
|
|
16
|
+
--rpf-alert-title-line-height: var(--font-size-1-5);
|
|
17
|
+
|
|
18
|
+
--rpf-alert-information-background-color: var(--rpf-alert-information-highlight);
|
|
19
|
+
--rpf-alert-information-accent-color: var(--rpf-alert-information);
|
|
20
|
+
--rpf-alert-information-icon: 'info';
|
|
21
|
+
|
|
22
|
+
--rpf-alert-error-background-color: var(--rpf-alert-error-highlight);
|
|
23
|
+
--rpf-alert-error-accent-color: var(--rpf-alert-error);
|
|
24
|
+
--rpf-alert-error-icon: 'error_outline';
|
|
25
|
+
|
|
26
|
+
--rpf-alert-warning-background-color: var(--rpf-alert-warning-background-color);
|
|
27
|
+
--rpf-alert-warning-accent-color: var(--rpf-alert-warning);
|
|
28
|
+
--rpf-alert-warning-icon: 'warning_amber';
|
|
29
|
+
|
|
30
|
+
--rpf-alert-success-background-color: var(--rpf-alert-success-highlight);
|
|
31
|
+
--rpf-alert-success-accent-color: var(--rpf-alert-success);
|
|
32
|
+
--rpf-alert-success-icon: 'check_circle';
|
|
15
33
|
}
|
|
16
34
|
|
|
17
35
|
.rpf-alert {
|
|
@@ -46,12 +64,13 @@
|
|
|
46
64
|
}
|
|
47
65
|
|
|
48
66
|
&__body {
|
|
49
|
-
@include typography.style-1;
|
|
50
|
-
|
|
51
67
|
align-self: stretch;
|
|
52
68
|
display: flex;
|
|
53
69
|
flex-direction: column;
|
|
70
|
+
font-size: var(--rpf-alert-body-font-size);
|
|
71
|
+
font-weight: var(--font-weight-regular);
|
|
54
72
|
gap: var(--space-2);
|
|
73
|
+
line-height: var(--rpf-alert-body-line-height);
|
|
55
74
|
padding-block-end: var(--space-2);
|
|
56
75
|
padding-inline: var(--space-2);
|
|
57
76
|
text-align: start;
|
|
@@ -63,9 +82,10 @@
|
|
|
63
82
|
}
|
|
64
83
|
|
|
65
84
|
&__title {
|
|
66
|
-
|
|
67
|
-
|
|
85
|
+
font-size: var(--rpf-alert-title-font-size);
|
|
86
|
+
font-weight: var(--font-weight-bold);
|
|
68
87
|
inline-size: 100%;
|
|
88
|
+
line-height: var(--rpf-alert-title-line-height);
|
|
69
89
|
margin-block: var(--space-2);
|
|
70
90
|
margin-inline: 0;
|
|
71
91
|
text-align: start;
|
|
@@ -97,35 +117,38 @@
|
|
|
97
117
|
}
|
|
98
118
|
|
|
99
119
|
&--error {
|
|
100
|
-
--rpf-alert-background-color: var(--rpf-alert-error-
|
|
101
|
-
--rpf-alert-color: var(--rpf-alert-error);
|
|
120
|
+
--rpf-alert-background-color: var(--rpf-alert-error-background-color);
|
|
121
|
+
--rpf-alert-color: var(--rpf-alert-error-accent-color);
|
|
102
122
|
|
|
103
123
|
.rpf-alert__icon::after {
|
|
104
|
-
content:
|
|
124
|
+
content: var(--rpf-alert-error-icon);
|
|
105
125
|
}
|
|
106
126
|
}
|
|
107
127
|
|
|
108
128
|
&--information {
|
|
129
|
+
--rpf-alert-background-color: var(--rpf-alert-information-background-color);
|
|
130
|
+
--rpf-alert-color: var(--rpf-alert-information-accent-color);
|
|
131
|
+
|
|
109
132
|
.rpf-alert__icon::after {
|
|
110
|
-
content:
|
|
133
|
+
content: var(--rpf-alert-information-icon);
|
|
111
134
|
}
|
|
112
135
|
}
|
|
113
136
|
|
|
114
137
|
&--warning {
|
|
115
|
-
--rpf-alert-background-color: var(--rpf-alert-warning-
|
|
116
|
-
--rpf-alert-color: var(--rpf-alert-warning);
|
|
138
|
+
--rpf-alert-background-color: var(--rpf-alert-warning-background-color);
|
|
139
|
+
--rpf-alert-color: var(--rpf-alert-warning-accent-color);
|
|
117
140
|
|
|
118
141
|
.rpf-alert__icon::after {
|
|
119
|
-
content:
|
|
142
|
+
content: var(--rpf-alert-warning-icon);
|
|
120
143
|
}
|
|
121
144
|
}
|
|
122
145
|
|
|
123
146
|
&--success {
|
|
124
|
-
--rpf-alert-background-color: var(--rpf-alert-success-
|
|
125
|
-
--rpf-alert-color: var(--rpf-alert-success);
|
|
147
|
+
--rpf-alert-background-color: var(--rpf-alert-success-background-color);
|
|
148
|
+
--rpf-alert-color: var(--rpf-alert-success-accent-color);
|
|
126
149
|
|
|
127
150
|
.rpf-alert__icon::after {
|
|
128
|
-
content:
|
|
151
|
+
content: var(--rpf-alert-success-icon);
|
|
129
152
|
}
|
|
130
153
|
}
|
|
131
154
|
}
|
|
@@ -11,12 +11,6 @@
|
|
|
11
11
|
margin-block-end: var(--space-3);
|
|
12
12
|
max-inline-size: fit-content;
|
|
13
13
|
|
|
14
|
-
legend {
|
|
15
|
-
background-color: var(--rpf-input-background-color);
|
|
16
|
-
color: var(--rpf-input-color);
|
|
17
|
-
inline-size: 100%;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
14
|
&--full-width,
|
|
21
15
|
&--full-width &__inputs * {
|
|
22
16
|
max-inline-size: none;
|
|
@@ -26,17 +20,19 @@
|
|
|
26
20
|
margin-block-end: 0;
|
|
27
21
|
}
|
|
28
22
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
//Adds error style to all checkbox and radio within fieldset
|
|
24
|
+
&--error {
|
|
25
|
+
.rpf-input-checkbox,
|
|
26
|
+
.rpf-input-radio {
|
|
27
|
+
--rpf-input-border-colour: var(--rpf-input-color-error);
|
|
28
|
+
|
|
29
|
+
input[type='checkbox']:checked {
|
|
30
|
+
background-color: var(--rpf-input-color-error);
|
|
31
|
+
}
|
|
35
32
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
color: var(--rpf-input-color);
|
|
33
|
+
input[type='radio']:checked {
|
|
34
|
+
background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>');
|
|
35
|
+
}
|
|
36
|
+
}
|
|
41
37
|
}
|
|
42
38
|
}
|
|
@@ -4,25 +4,24 @@
|
|
|
4
4
|
.rpf-input-checkbox {
|
|
5
5
|
--rpf-input-checkbox-hit-target: var(--min-target-size);
|
|
6
6
|
--rpf-input-checkbox-size: var(--space-3);
|
|
7
|
+
--rpf-input-border-colour: var(--rpf-grey-850);
|
|
7
8
|
|
|
8
9
|
align-items: center;
|
|
9
10
|
border-radius: var(--space-1);
|
|
10
11
|
box-sizing: border-box;
|
|
11
12
|
display: flex;
|
|
12
13
|
gap: var(--space-1-5);
|
|
13
|
-
margin-block-end: var(--space-1);
|
|
14
14
|
max-width: 50ch;
|
|
15
15
|
min-height: var(--rpf-input-checkbox-hit-target);
|
|
16
16
|
min-width: 240px;
|
|
17
17
|
padding-block: calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);
|
|
18
|
-
padding-inline: var(--space-1);
|
|
19
18
|
width: 100%;
|
|
20
19
|
|
|
21
20
|
input[type='checkbox'] {
|
|
22
21
|
align-self: flex-start;
|
|
23
22
|
appearance: none;
|
|
24
23
|
background: var(--rpf-white);
|
|
25
|
-
border: var(--space-0-25) solid var(--rpf-
|
|
24
|
+
border: var(--space-0-25) solid var(--rpf-input-border-colour);
|
|
26
25
|
border-radius: var(--space-0-5);
|
|
27
26
|
flex-shrink: 0;
|
|
28
27
|
height: var(--rpf-input-checkbox-size);
|
|
@@ -35,7 +34,8 @@
|
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
&:disabled {
|
|
38
|
-
border-color: var(--rpf-
|
|
37
|
+
border-color: var(--rpf-input-background-color-disabled);
|
|
38
|
+
background-color: var(--rpf-input-background-color-disabled);
|
|
39
39
|
|
|
40
40
|
&:checked {
|
|
41
41
|
background-color: var(--rpf-grey-600);
|
|
@@ -43,20 +43,26 @@
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
&--error {
|
|
47
|
+
input[type='checkbox'] {
|
|
48
|
+
border-color: var(--rpf-input-color-error);
|
|
49
|
+
}
|
|
50
|
+
input[type='checkbox']:checked {
|
|
51
|
+
background-color: var(--rpf-input-color-error);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
46
55
|
&.rpf-input--full-width {
|
|
47
56
|
max-width: none;
|
|
48
57
|
}
|
|
49
58
|
|
|
50
|
-
&:has(> input[type='checkbox']:disabled),
|
|
51
|
-
|
|
52
|
-
color: var(--rpf-
|
|
59
|
+
&:has(> input[type='checkbox']:disabled),
|
|
60
|
+
&--disabled {
|
|
61
|
+
color: var(--rpf-label-text-color-disabled);
|
|
53
62
|
}
|
|
54
63
|
|
|
55
|
-
|
|
64
|
+
input[type='checkbox']:focus-visible {
|
|
56
65
|
outline: 3px solid var(--rpf-input-outline-color);
|
|
57
|
-
|
|
58
|
-
> input[type='checkbox']:focus-visible {
|
|
59
|
-
outline: none;
|
|
60
|
-
}
|
|
66
|
+
outline-offset: 0;
|
|
61
67
|
}
|
|
62
68
|
}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
@forward '../../properties/spacing';
|
|
5
5
|
@forward '../../properties/line-height';
|
|
6
6
|
|
|
7
|
-
:root,
|
|
7
|
+
:root,
|
|
8
|
+
:host {
|
|
8
9
|
--rpf-label-hint-color: var(--rpf-text-secondary);
|
|
9
10
|
--rpf-label-text-color: var(--rpf-text-primary);
|
|
10
11
|
--rpf-label-text-color-disabled: var(--rpf-grey-500);
|
|
@@ -4,25 +4,24 @@
|
|
|
4
4
|
.rpf-input-radio {
|
|
5
5
|
--rpf-input-radio-hit-target: var(--min-target-size);
|
|
6
6
|
--rpf-input-radio-size: var(--space-3);
|
|
7
|
+
--rpf-input-border-colour: var(--rpf-grey-850);
|
|
7
8
|
|
|
8
9
|
align-items: center;
|
|
9
10
|
border-radius: var(--space-1);
|
|
10
11
|
box-sizing: border-box;
|
|
11
12
|
display: flex;
|
|
12
13
|
gap: var(--space-1-5);
|
|
13
|
-
margin-block-end: var(--space-1);
|
|
14
14
|
max-width: 50ch;
|
|
15
15
|
min-height: var(--rpf-input-radio-hit-target);
|
|
16
16
|
min-width: 240px;
|
|
17
17
|
padding-block: calc((var(--rpf-input-radio-hit-target) - var(--rpf-input-radio-size)) / 2);
|
|
18
|
-
padding-inline: var(--space-1);
|
|
19
18
|
width: 100%;
|
|
20
19
|
|
|
21
20
|
input[type='radio'] {
|
|
22
21
|
align-self: flex-start;
|
|
23
22
|
appearance: none;
|
|
24
23
|
background: var(--rpf-white);
|
|
25
|
-
border: var(--space-0-25) solid var(--rpf-
|
|
24
|
+
border: var(--space-0-25) solid var(--rpf-input-border-colour);
|
|
26
25
|
border-radius: var(--rpf-input-radio-size);
|
|
27
26
|
flex-shrink: 0;
|
|
28
27
|
height: var(--rpf-input-radio-size);
|
|
@@ -36,7 +35,8 @@
|
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
&:disabled {
|
|
39
|
-
border-color: var(--rpf-
|
|
38
|
+
border-color: var(--rpf-input-background-color-disabled);
|
|
39
|
+
background-color: var(--rpf-input-background-color-disabled);
|
|
40
40
|
|
|
41
41
|
&:checked {
|
|
42
42
|
background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(229, 8%, 61%, 1)"/></svg>');
|
|
@@ -44,20 +44,25 @@
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
&--error {
|
|
48
|
+
input[type='radio'] {
|
|
49
|
+
border-color: var(--rpf-input-color-error);
|
|
50
|
+
}
|
|
51
|
+
input[type='radio']:checked {
|
|
52
|
+
background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
47
55
|
&.rpf-input--full-width {
|
|
48
56
|
max-width: none;
|
|
49
57
|
}
|
|
50
58
|
|
|
51
|
-
&:has(> input[type='radio']:disabled),
|
|
52
|
-
|
|
53
|
-
color: var(--rpf-
|
|
59
|
+
&:has(> input[type='radio']:disabled),
|
|
60
|
+
&--disabled {
|
|
61
|
+
color: var(--rpf-label-text-color-disabled);
|
|
54
62
|
}
|
|
55
63
|
|
|
56
|
-
|
|
64
|
+
input[type='radio']:focus-visible {
|
|
57
65
|
outline: 3px solid var(--rpf-input-outline-color);
|
|
58
|
-
|
|
59
|
-
> input[type='radio']:focus-visible {
|
|
60
|
-
outline: none;
|
|
61
|
-
}
|
|
66
|
+
outline-offset: 0;
|
|
62
67
|
}
|
|
63
68
|
}
|
|
@@ -1,43 +1,87 @@
|
|
|
1
1
|
@use '../mixins/typography' as typography;
|
|
2
2
|
|
|
3
|
-
@forward
|
|
4
|
-
@forward
|
|
5
|
-
@forward
|
|
3
|
+
@forward '../properties/spacing';
|
|
4
|
+
@forward '../properties/colors/greys';
|
|
5
|
+
@forward '../properties/colors/decorative';
|
|
6
|
+
@forward '../properties/colors/alert';
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
:
|
|
8
|
+
:root,
|
|
9
|
+
:host {
|
|
10
|
+
// Deprecated - to be removed in a future release
|
|
9
11
|
--color-progress-bar-complete: var(--rpf-navy-800);
|
|
10
12
|
--color-progress-bar-incomplete: var(--rpf-grey-150);
|
|
13
|
+
|
|
14
|
+
// Component Tokens
|
|
15
|
+
--rpf-progress-bar-background-color: var(--color-progress-bar-incomplete);
|
|
16
|
+
--rpf-progress-bar-accent-color: var(--color-progress-bar-complete);
|
|
17
|
+
--rpf-progress-bar-block-size: var(--space-1);
|
|
18
|
+
--rpf-progress-bar-border-radius: var(--space-1);
|
|
19
|
+
--rpf-progress-bar-gap: var(--space-3);
|
|
20
|
+
--rpf-progress-bar-font-size: var(--font-size-1);
|
|
21
|
+
--rpf-progress-bar-font-weight: var(--font-weight-regular);
|
|
22
|
+
--rpf-progress-bar-complete-color: var(--rpf-alert-success);
|
|
23
|
+
--rpf-progress-bar-complete-icon: url('data:image/svg+xml,<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m424-296 282-282-56-56-226 226-114-114-56 56zm56 216q-83 0-156-31.5t-127-85.5q-54-54-85.5-127t-31.5-156q0-83 31.5-156t85.5-127q54-54 127-85.5t156-31.5q83 0 156 31.5t127 85.5q54 54 85.5 127t31.5 156q0 83-31.5 156t-85.5 127q-54 54-127 85.5t-156 31.5z"/></svg>');
|
|
11
24
|
}
|
|
12
25
|
|
|
13
26
|
.rpf-progress-bar {
|
|
14
27
|
&__label {
|
|
15
|
-
|
|
28
|
+
font-size: var(--rpf-progress-bar-font-size);
|
|
29
|
+
line-height: 1.5em; // Relative to the font-size
|
|
30
|
+
font-weight: var(--rpf-progress-bar-font-weight);
|
|
16
31
|
align-items: center;
|
|
17
32
|
display: grid;
|
|
18
|
-
|
|
33
|
+
gap: var(--rpf-progress-bar-gap);
|
|
19
34
|
grid-template-columns: max-content 1fr;
|
|
20
35
|
}
|
|
21
36
|
|
|
22
|
-
&__bar{
|
|
23
|
-
background: var(--
|
|
24
|
-
block-size:
|
|
25
|
-
border-radius:
|
|
37
|
+
&__bar {
|
|
38
|
+
background: var(--rpf-progress-bar-background-color);
|
|
39
|
+
block-size: var(--rpf-progress-bar-block-size);
|
|
40
|
+
border-radius: var(--rpf-progress-bar-border-radius);
|
|
26
41
|
inline-size: 100%;
|
|
42
|
+
border: none;
|
|
27
43
|
|
|
28
44
|
&::-webkit-progress-bar {
|
|
29
|
-
background: var(--
|
|
30
|
-
border-radius:
|
|
45
|
+
background: var(--rpf-progress-bar-background-color);
|
|
46
|
+
border-radius: var(--rpf-progress-bar-border-radius);
|
|
31
47
|
}
|
|
32
48
|
|
|
33
49
|
&::-webkit-progress-value {
|
|
34
|
-
background: var(--
|
|
35
|
-
border-radius:
|
|
50
|
+
background: var(--rpf-progress-bar-accent-color);
|
|
51
|
+
border-radius: var(--rpf-progress-bar-border-radius);
|
|
36
52
|
}
|
|
37
53
|
|
|
38
54
|
&::-moz-progress-bar {
|
|
39
|
-
background: var(--
|
|
40
|
-
border-radius:
|
|
55
|
+
background: var(--rpf-progress-bar-accent-color);
|
|
56
|
+
border-radius: var(--rpf-progress-bar-border-radius);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--complete {
|
|
61
|
+
--rpf-progress-bar-accent-color: var(--rpf-progress-bar-complete-color);
|
|
62
|
+
|
|
63
|
+
.rpf-progress-bar__label span {
|
|
64
|
+
display: flex;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.rpf-progress-bar__label span::before {
|
|
68
|
+
content: '';
|
|
69
|
+
display: inline-block;
|
|
70
|
+
block-size: 1.5em; // Relative to the font-size
|
|
71
|
+
aspect-ratio: 1/1;
|
|
72
|
+
margin-inline-end: var(--space-1);
|
|
73
|
+
vertical-align: middle;
|
|
74
|
+
background-color: var(--rpf-progress-bar-complete-color);
|
|
75
|
+
mask-image: var(--rpf-progress-bar-complete-icon);
|
|
76
|
+
mask-size: contain;
|
|
77
|
+
mask-repeat: no-repeat;
|
|
78
|
+
mask-position: center;
|
|
79
|
+
|
|
80
|
+
// Could be removed if we auto-prefixed in build
|
|
81
|
+
-webkit-mask-image: var(--rpf-progress-bar-complete-icon);
|
|
82
|
+
-webkit-mask-size: contain;
|
|
83
|
+
-webkit-mask-repeat: no-repeat;
|
|
84
|
+
-webkit-mask-position: center;
|
|
41
85
|
}
|
|
42
86
|
}
|
|
43
87
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raspberrypifoundation/design-system-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/design-system-react.umd.cjs",
|
|
6
6
|
"module": "./dist/design-system-react.js",
|
|
@@ -32,9 +32,8 @@
|
|
|
32
32
|
"test:update-snapshots": "vitest --update"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@raspberrypifoundation/design-system-core": "^2.
|
|
35
|
+
"@raspberrypifoundation/design-system-core": "^2.3.0",
|
|
36
36
|
"classnames": "^2.5.1",
|
|
37
|
-
"material-symbols": "^0.27.2",
|
|
38
37
|
"react": "^18.3.1",
|
|
39
38
|
"react-dom": "^18.3.1",
|
|
40
39
|
"react-router-dom": "^7.0.2"
|