First draft done
This commit is contained in:
Lewis Dale committed
1 parent
2fc934e324
commit
85bf38b5d5
13 files changed
+806
-11
No files matched your search
@@ -7,6 +7,8 @@ module.exports = function (config) {
|
|||||||
config.addPlugin(syntaxHighlight);
|
config.addPlugin(syntaxHighlight);
|
||||||
config.addPlugin(markdown);
|
config.addPlugin(markdown);
|
||||||
|
|
||||||
|
config.addPassthroughCopy("src/assets");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
passthroughFileCopy: true,
|
passthroughFileCopy: true,
|
||||||
dataTemplateEngine: false,
|
dataTemplateEngine: false,
|
||||||
|
|||||||
@@ -10,4 +10,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/assets/js/react-examples.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
Vendored
+231
@@ -0,0 +1,231 @@
|
|||||||
|
"use strict";(()=>{var bm=Object.create;var ta=Object.defineProperty;var e0=Object.getOwnPropertyDescriptor;var t0=Object.getOwnPropertyNames;var n0=Object.getPrototypeOf,r0=Object.prototype.hasOwnProperty;var C=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var o0=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of t0(t))!r0.call(e,o)&&o!==n&&ta(e,o,{get:()=>t[o],enumerable:!(r=e0(t,o))||r.enumerable});return e};var ie=(e,t,n)=>(n=e!=null?bm(n0(e)):{},o0(t||!e||!e.__esModule?ta(n,"default",{value:e,enumerable:!0}):n,e));var da=C(O=>{"use strict";var ir=Symbol.for("react.element"),i0=Symbol.for("react.portal"),l0=Symbol.for("react.fragment"),s0=Symbol.for("react.strict_mode"),u0=Symbol.for("react.profiler"),a0=Symbol.for("react.provider"),c0=Symbol.for("react.context"),f0=Symbol.for("react.forward_ref"),d0=Symbol.for("react.suspense"),p0=Symbol.for("react.memo"),h0=Symbol.for("react.lazy"),na=Symbol.iterator;function m0(e){return e===null||typeof e!="object"?null:(e=na&&e[na]||e["@@iterator"],typeof e=="function"?e:null)}var ia={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},la=Object.assign,sa={};function pn(e,t,n){this.props=e,this.context=t,this.refs=sa,this.updater=n||ia}pn.prototype.isReactComponent={};pn.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};pn.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function ua(){}ua.prototype=pn.prototype;function il(e,t,n){this.props=e,this.context=t,this.refs=sa,this.updater=n||ia}var ll=il.prototype=new ua;ll.constructor=il;la(ll,pn.prototype);ll.isPureReactComponent=!0;var ra=Array.isArray,aa=Object.prototype.hasOwnProperty,sl={current:null},ca={key:!0,ref:!0,__self:!0,__source:!0};function fa(e,t,n){var r,o={},i=null,l=null;if(t!=null)for(r in t.ref!==void 0&&(l=t.ref),t.key!==void 0&&(i=""+t.key),t)aa.call(t,r)&&!ca.hasOwnProperty(r)&&(o[r]=t[r]);var s=arguments.length-2;if(s===1)o.children=n;else if(1<s){for(var u=Array(s),c=0;c<s;c++)u[c]=arguments[c+2];o.children=u}if(e&&e.defaultProps)for(r in s=e.defaultProps,s)o[r]===void 0&&(o[r]=s[r]);return{$$typeof:ir,type:e,key:i,ref:l,props:o,_owner:sl.current}}function y0(e,t){return{$$typeof:ir,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function ul(e){return typeof e=="object"&&e!==null&&e.$$typeof===ir}function v0(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(n){return t[n]})}var oa=/\/+/g;function ol(e,t){return typeof e=="object"&&e!==null&&e.key!=null?v0(""+e.key):t.toString(36)}function yo(e,t,n,r,o){var i=typeof e;(i==="undefined"||i==="boolean")&&(e=null);var l=!1;if(e===null)l=!0;else switch(i){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case ir:case i0:l=!0}}if(l)return l=e,o=o(l),e=r===""?"."+ol(l,0):r,ra(o)?(n="",e!=null&&(n=e.replace(oa,"$&/")+"/"),yo(o,t,n,"",function(c){return c})):o!=null&&(ul(o)&&(o=y0(o,n+(!o.key||l&&l.key===o.key?"":(""+o.key).replace(oa,"$&/")+"/")+e)),t.push(o)),1;if(l=0,r=r===""?".":r+":",ra(e))for(var s=0;s<e.length;s++){i=e[s];var u=r+ol(i,s);l+=yo(i,t,n,u,o)}else if(u=m0(e),typeof u=="function")for(e=u.call(e),s=0;!(i=e.next()).done;)i=i.value,u=r+ol(i,s++),l+=yo(i,t,n,u,o);else if(i==="object")throw t=String(e),Error("Objects are not valid as a React child (found: "+(t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return l}function mo(e,t,n){if(e==null)return e;var r=[],o=0;return yo(e,r,"","",function(i){return t.call(n,i,o++)}),r}function g0(e){if(e._status===-1){var t=e._result;t=t(),t.then(function(n){(e._status===0||e._status===-1)&&(e._status=1,e._result=n)},function(n){(e._status===0||e._status===-1)&&(e._status=2,e._result=n)}),e._status===-1&&(e._status=0,e._result=t)}if(e._status===1)return e._result.default;throw e._result}var de={current:null},vo={transition:null},w0={ReactCurrentDispatcher:de,ReactCurrentBatchConfig:vo,ReactCurrentOwner:sl};O.Children={map:mo,forEach:function(e,t,n){mo(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return mo(e,function(){t++}),t},toArray:function(e){return mo(e,function(t){return t})||[]},only:function(e){if(!ul(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};O.Component=pn;O.Fragment=l0;O.Profiler=u0;O.PureComponent=il;O.StrictMode=s0;O.Suspense=d0;O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=w0;O.cloneElement=function(e,t,n){if(e==null)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var r=la({},e.props),o=e.key,i=e.ref,l=e._owner;if(t!=null){if(t.ref!==void 0&&(i=t.Line truncated
|
||||||
|
`+gl+e}var wl=!1;function Sl(e,t){if(!e||wl)return"";wl=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var r=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){r=c}e.call(t.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&typeof c.stack=="string"){for(var o=c.stack.split(`
|
||||||
|
`),i=r.stack.split(`
|
||||||
|
`),l=o.length-1,s=i.length-1;1<=l&&0<=s&&o[l]!==i[s];)s--;for(;1<=l&&0<=s;l--,s--)if(o[l]!==i[s]){if(l!==1||s!==1)do if(l--,s--,0>s||o[l]!==i[s]){var u=`
|
||||||
|
`+o[l].replace(" at new "," at ");return e.displayName&&u.includes("<anonymous>")&&(u=u.replace("<anonymous>",e.displayName)),u}while(1<=l&&0<=s);break}}}finally{wl=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?vr(e):""}function C0(e){switch(e.tag){case 5:return vr(e.type);case 16:return vr("Lazy");case 13:return vr("Suspense");case 19:return vr("SuspenseList");case 0:case 2:case 15:return e=Sl(e.type,!1),e;case 11:return e=Sl(e.type.render,!1),e;case 1:return e=Sl(e.type,!0),e;default:return""}}function Wl(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case vn:return"Fragment";case yn:return"Portal";case Vl:return"Profiler";case Ls:return"StrictMode";case Hl:return"Suspense";case Bl:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case Lc:return(e.displayName||"Context")+".Consumer";case Dc:return(e._context.displayName||"Context")+".Provider";case js:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case As:return t=e.displayName||null,t!==null?t:Wl(e.type)||"Memo";case kt:t=e._payload,e=e._init;try{return Wl(e(t))}catch{}}return null}function P0(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=t.render,e=e.displayName||e.name||"",t.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return Wl(t);case 8:return t===Ls?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t}return null}function jt(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function Ac(e){var t=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(t==="checkbox"||t==="radio")}function N0(e){var t=Ac(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&typeof n<"u"&&typeof n.get=="function"&&typeof n.set=="function"){var o=n.get,i=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(l){r=""+l,i.call(this,l)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(l){r=""+l},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}function _o(e){e._valueTracker||(e._valueTracker=N0(e))}function Fc(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=Ac(e)?e.checked?"true":"false":e.value),e=r,e!==n?(t.setValue(e),!0):!1}function Jo(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function ql(e,t){var n=t.checked;return W({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:n??e._wrapperState.initialChecked})}function Oa(e,t){var n=t.defaultValue==null?"":t.defaultValue,r=t.checked!=null?t.checked:t.defaultChecked;n=jt(t.value!=null?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:t.type==="checkbox"||t.type==="radio"?t.checked!=null:t.value!=null}}function $c(e,t){t=t.checked,t!=null&&Ds(e,"checked",t,!1)}function Ql(e,t){$c(e,t);var n=jt(t.value),r=t.type;if(n!=null)r==="number"?(n===0&&e.value===""||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}t.hasOwnProperty("value")?Gl(e,t.type,n):t.hasOwnProperty("defaultValue")&&Gl(e,t.type,jt(t.defaultValue)),t.checked==null&&t.defaultChecked!=null&&(e.defaultChecked=!!t.defaultChecked)}function za(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!(r!=="submit"&&r!=="reset"||t.value!==void 0&&t.value!==null))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}n=e.name,n!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,n!==""&&(e.name=n)}function Gl(e,t,n){(t!=="number"||Jo(e.ownerDocument)!==e)&&(n==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var gr=Array.isArray;function Tn(e,t,n,r){if(e=e.options,t){t={};for(var o=0;o<n.length;o++)t["$"+n[o]]=!0;for(n=0;n<e.length;n++)o=t.hasOwnProperty("$"+e[n].value),e[n].selected!==o&&(e[n].selected=o),o&&r&&(e[n].defaultSelected=!0)}else{for(n=""+jt(n),t=null,o=0;o<e.length;o++){if(e[o].value===n){e[o].selected=!0,r&&(e[o].defaultSelected=!0);return}t!==null||e[o].disabled||(t=e[o])}t!==null&&(t.selected=!0)}}function Kl(e,t){if(t.dang
Line truncated
|
||||||
|
`).replace(Ly,"")}function jo(e,t,n){if(t=ec(t),ec(e)!==t&&n)throw Error(g(425))}function li(){}var ss=null,us=null;function as(e,t){return e==="textarea"||e==="noscript"||typeof t.children=="string"||typeof t.children=="number"||typeof t.dangerouslySetInnerHTML=="object"&&t.dangerouslySetInnerHTML!==null&&t.dangerouslySetInnerHTML.__html!=null}var cs=typeof setTimeout=="function"?setTimeout:void 0,jy=typeof clearTimeout=="function"?clearTimeout:void 0,tc=typeof Promise=="function"?Promise:void 0,Ay=typeof queueMicrotask=="function"?queueMicrotask:typeof tc<"u"?function(e){return tc.resolve(null).then(e).catch(Fy)}:cs;function Fy(e){setTimeout(function(){throw e})}function zl(e,t){var n=t,r=0;do{var o=n.nextSibling;if(e.removeChild(n),o&&o.nodeType===8)if(n=o.data,n==="/$"){if(r===0){e.removeChild(o),Lr(t);return}r--}else n!=="$"&&n!=="$?"&&n!=="$!"||r++;n=o}while(n);Lr(t)}function It(e){for(;e!=null;e=e.nextSibling){var t=e.nodeType;if(t===1||t===3)break;if(t===8){if(t=e.data,t==="$"||t==="$!"||t==="$?")break;if(t==="/$")return null}}return e}function nc(e){e=e.previousSibling;for(var t=0;e;){if(e.nodeType===8){var n=e.data;if(n==="$"||n==="$!"||n==="$?"){if(t===0)return e;t--}else n==="/$"&&t++}e=e.previousSibling}return null}var Hn=Math.random().toString(36).slice(2),Ze="__reactFiber$"+Hn,Ur="__reactProps$"+Hn,at="__reactContainer$"+Hn,fs="__reactEvents$"+Hn,$y="__reactListeners$"+Hn,Uy="__reactHandles$"+Hn;function Yt(e){var t=e[Ze];if(t)return t;for(var n=e.parentNode;n;){if(t=n[at]||n[Ze]){if(n=t.alternate,t.child!==null||n!==null&&n.child!==null)for(e=nc(e);e!==null;){if(n=e[Ze])return n;e=nc(e)}return t}e=n,n=e.parentNode}return null}function Yr(e){return e=e[Ze]||e[at],!e||e.tag!==5&&e.tag!==6&&e.tag!==13&&e.tag!==3?null:e}function xn(e){if(e.tag===5||e.tag===6)return e.stateNode;throw Error(g(33))}function Pi(e){return e[Ur]||null}var ds=[],kn=-1;function $t(e){return{current:e}}function $(e){0>kn||(e.current=ds[kn],ds[kn]=null,kn--)}function A(e,t){kn++,ds[kn]=e.current,e.current=t}var At={},ce=$t(At),we=$t(!1),en=At;function Ln(e,t){var n=e.type.contextTypes;if(!n)return At;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o={},i;for(i in n)o[i]=t[i];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function Se(e){return e=e.childContextTypes,e!=null}function si(){$(we),$(ce)}function rc(e,t,n){if(ce.current!==At)throw Error(g(168));A(ce,t),A(we,n)}function Tf(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,typeof r.getChildContext!="function")return n;r=r.getChildContext();for(var o in r)if(!(o in t))throw Error(g(108,P0(e)||"Unknown",o));return W({},n,r)}function ui(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||At,en=ce.current,A(ce,e),A(we,we.current),!0}function oc(e,t,n){var r=e.stateNode;if(!r)throw Error(g(169));n?(e=Tf(e,t,en),r.__reactInternalMemoizedMergedChildContext=e,$(we),$(ce),A(ce,e)):$(we),A(we,n)}var ot=null,Ni=!1,Il=!1;function Of(e){ot===null?ot=[e]:ot.push(e)}function Vy(e){Ni=!0,Of(e)}function Ut(){if(!Il&&ot!==null){Il=!0;var e=0,t=D;try{var n=ot;for(D=1;e<n.length;e++){var r=n[e];do r=r(!0);while(r!==null)}ot=null,Ni=!1}catch(o){throw ot!==null&&(ot=ot.slice(e+1)),bc($s,Ut),o}finally{D=t,Il=!1}}return null}var En=[],_n=0,ai=null,ci=0,ze=[],Ie=0,tn=null,it=1,lt="";function Gt(e,t){En[_n++]=ci,En[_n++]=ai,ai=e,ci=t}function zf(e,t,n){ze[Ie++]=it,ze[Ie++]=lt,ze[Ie++]=tn,tn=e;var r=it;e=lt;var o=32-Be(r)-1;r&=~(1<<o),n+=1;var i=32-Be(t)+o;if(30<i){var l=o-o%5;i=(r&(1<<l)-1).toString(32),r>>=l,o-=l,it=1<<32-Be(t)+o|n<<o|r,lt=i+e}else it=1<<i|n<<o|r,lt=e}function Ks(e){e.return!==null&&(Gt(e,1),zf(e,1,0))}function Ys(e){for(;e===ai;)ai=En[--_n],En[_n]=null,ci=En[--_n],En[_n]=null;for(;e===tn;)tn=ze[--Ie],ze[Ie]=null,lt=ze[--Ie],ze[Ie]=null,it=ze[--Ie],ze[Ie]=null}var Ce=null,_e=null,V=!1,He=null;function If(e,t){var n=Re(5,null,null,0);n.elementType="DELETED",n.stateNode=t,n.return=e,t=e.deletions,t===null?(e.deletions=[n],e.flags|=16):t.push(n)}function ic(e,t){switch(e.tag){case 5:var n=e.type;return t=t.nodeType!==1||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t,t!==null?(e.stateNode=t,Ce=e,_e=It(t.firstChild),!0):!1;case 6:return t=e.pendingProps===""||t.nodeType!==3?null:t,t!==null?(e.stateNode=t,Ce=e,_e=null,!0):!1;case 13:return t=t.nodeType!==8?null:t,t!==null?(n=tn!==null?{id:it,overflow:lt}:null,e.memoizedState={dehydrated:t,treeContext:n,retryLane:1073741824},n=Re(18,null,null,0),n.stateNode=t,n.return=e,e.child=n,Ce=e,_e=null,!0):!1;default:return!1}}function ps(e){return(e.mode&1)!==0&&(e.flags&128)===0}function hs(e){if(V){var t=_e;if(t){var n=t;if(!ic(e,t)){if(ps(e))throw Error(g(418));t=It(n.nextSibling);var r=Ce;t&&ic(e,t)?If(r,n):(e.flags=e.flags&-4097|2,V=!1,Ce=e)}}else{if(ps(e))throw Error(g(418));e.flags=e.flags&-4097|2,V=!1,Ce=e}}}function lc(e){for(e=e.return;e!==null&&e.t
Line truncated
|
||||||
|
Error generating stack: `+i.message+`
|
||||||
|
`+i.stack}return{value:e,source:t,stack:o,digest:null}}function jl(e,t,n){return{value:e,source:null,stack:n??null,digest:t??null}}function gs(e,t){try{console.error(t.value)}catch(n){setTimeout(function(){throw n})}}var Xy=typeof WeakMap=="function"?WeakMap:Map;function id(e,t,n){n=st(-1,n),n.tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){gi||(gi=!0,Ts=r),gs(e,t)},n}function ld(e,t,n){n=st(-1,n),n.tag=3;var r=e.type.getDerivedStateFromError;if(typeof r=="function"){var o=t.value;n.payload=function(){return r(o)},n.callback=function(){gs(e,t)}}var i=e.stateNode;return i!==null&&typeof i.componentDidCatch=="function"&&(n.callback=function(){gs(e,t),typeof r!="function"&&(Mt===null?Mt=new Set([this]):Mt.add(this));var l=t.stack;this.componentDidCatch(t.value,{componentStack:l!==null?l:""})}),n}function hc(e,t,n){var r=e.pingCache;if(r===null){r=e.pingCache=new Xy;var o=new Set;r.set(t,o)}else o=r.get(t),o===void 0&&(o=new Set,r.set(t,o));o.has(n)||(o.add(n),e=cv.bind(null,e,t,n),t.then(e,e))}function mc(e){do{var t;if((t=e.tag===13)&&(t=e.memoizedState,t=t!==null?t.dehydrated!==null:!0),t)return e;e=e.return}while(e!==null);return null}function yc(e,t,n,r,o){return e.mode&1?(e.flags|=65536,e.lanes=o,e):(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,n.tag===1&&(n.alternate===null?n.tag=17:(t=st(-1,1),t.tag=2,Rt(n,t,1))),n.lanes|=1),e)}var Zy=dt.ReactCurrentOwner,ge=!1;function pe(e,t,n,r){t.child=e===null?Ff(t,null,n,r):An(t,e.child,n,r)}function vc(e,t,n,r,o){n=n.render;var i=t.ref;return Rn(t,o),r=lu(e,t,n,r,i,o),n=su(),e!==null&&!ge?(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,ft(e,t,o)):(V&&n&&Ks(t),t.flags|=1,pe(e,t,r,o),t.child)}function gc(e,t,n,r,o){if(e===null){var i=n.type;return typeof i=="function"&&!vu(i)&&i.defaultProps===void 0&&n.compare===null&&n.defaultProps===void 0?(t.tag=15,t.type=i,sd(e,t,i,r,o)):(e=Zo(n.type,null,r,t,t.mode,o),e.ref=t.ref,e.return=t,t.child=e)}if(i=e.child,!(e.lanes&o)){var l=i.memoizedProps;if(n=n.compare,n=n!==null?n:Ar,n(l,r)&&e.ref===t.ref)return ft(e,t,o)}return t.flags|=1,e=Lt(i,r),e.ref=t.ref,e.return=t,t.child=e}function sd(e,t,n,r,o){if(e!==null){var i=e.memoizedProps;if(Ar(i,r)&&e.ref===t.ref)if(ge=!1,t.pendingProps=r=i,(e.lanes&o)!==0)e.flags&131072&&(ge=!0);else return t.lanes=e.lanes,ft(e,t,o)}return ws(e,t,n,r,o)}function ud(e,t,n){var r=t.pendingProps,o=r.children,i=e!==null?e.memoizedState:null;if(r.mode==="hidden")if(!(t.mode&1))t.memoizedState={baseLanes:0,cachePool:null,transitions:null},A(Nn,Ee),Ee|=n;else{if(!(n&1073741824))return e=i!==null?i.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,A(Nn,Ee),Ee|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=i!==null?i.baseLanes:n,A(Nn,Ee),Ee|=r}else i!==null?(r=i.baseLanes|n,t.memoizedState=null):r=n,A(Nn,Ee),Ee|=r;return pe(e,t,o,n),t.child}function ad(e,t){var n=t.ref;(e===null&&n!==null||e!==null&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function ws(e,t,n,r,o){var i=Se(n)?en:ce.current;return i=Ln(t,i),Rn(t,o),n=lu(e,t,n,r,i,o),r=su(),e!==null&&!ge?(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,ft(e,t,o)):(V&&r&&Ks(t),t.flags|=1,pe(e,t,n,o),t.child)}function wc(e,t,n,r,o){if(Se(n)){var i=!0;ui(t)}else i=!1;if(Rn(t,o),t.stateNode===null)Ko(e,t),jf(t,n,r),vs(t,n,r,o),r=!0;else if(e===null){var l=t.stateNode,s=t.memoizedProps;l.props=s;var u=l.context,c=n.contextType;typeof c=="object"&&c!==null?c=De(c):(c=Se(n)?en:ce.current,c=Ln(t,c));var p=n.getDerivedStateFromProps,m=typeof p=="function"||typeof l.getSnapshotBeforeUpdate=="function";m||typeof l.UNSAFE_componentWillReceiveProps!="function"&&typeof l.componentWillReceiveProps!="function"||(s!==r||u!==c)&&cc(t,l,r,c),Et=!1;var h=t.memoizedState;l.state=h,pi(t,r,l,o),u=t.memoizedState,s!==r||h!==u||we.current||Et?(typeof p=="function"&&(ys(t,n,p,r),u=t.memoizedState),(s=Et||ac(t,n,s,r,h,u,c))?(m||typeof l.UNSAFE_componentWillMount!="function"&&typeof l.componentWillMount!="function"||(typeof l.componentWillMount=="function"&&l.componentWillMount(),typeof l.UNSAFE_componentWillMount=="function"&&l.UNSAFE_componentWillMount()),typeof l.componentDidMount=="function"&&(t.flags|=4194308)):(typeof l.componentDidMount=="function"&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=u),l.props=r,l.state=u,l.context=c,r=s):(typeof l.componentDidMount=="function"&&(t.flags|=4194308),r=!1)}else{l=t.stateNode,Df(e,t),s=t.memoizedProps,c=t.type===t.elementType?s:Ue(t.type,s),l.props=c,m=t.pendingProps,h=l.context,u=n.contextType,typeof u=="object"&&u!==null?u=De(u):(u=Se(n)?en:ce.current,u=Ln(t,u));var v=n.getDerivedStateFromProps;(p=typeof v=="function"||typeof l.getSnapshotBeforeUpdate=="function")||typeof l.UNSAFE_componentWillReceiveProps!="function"&&typeof l.componentWillReceiveProps!="function"||(s!==m||h!==u)&&cc(t,l,r,u),Et=!1,h=t.memoizedState,l.state=h,pi(t,r,l,o);var S=t.memoizedState;s
Line truncated
|
||||||
|
`);return n},e}(),Qi=new Map,Ki=new Map,zu=1,qi=function(e){if(Qi.has(e))return Qi.get(e);for(;Ki.has(zu);)zu++;var t=zu++;return Qi.set(e,t),Ki.set(t,e),t},Fv=function(e,t){Qi.set(e,t),Ki.set(t,e)},$v="style[".concat(mt,"][").concat("data-styled-version",'="').concat("6.0.8",'"]'),Uv=new RegExp("^".concat(mt,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Vv=function(e,t,n){for(var r,o=n.split(","),i=0,l=o.length;i<l;i++)(r=o[i])&&e.registerName(t,r)},Hv=function(e,t){for(var n,r=((n=t.textContent)!==null&&n!==void 0?n:"").split(`/*!sc*/
|
||||||
|
`),o=[],i=0,l=r.length;i<l;i++){var s=r[i].trim();if(s){var u=s.match(Uv);if(u){var c=0|parseInt(u[1],10),p=u[2];c!==0&&(Fv(p,c),Vv(e,p,u[3]),e.getTag().insertRules(c,o)),o.length=0}else o.push(s)}}};function Du(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:null}var Ep=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(s){var u=Array.from(s.querySelectorAll("style[".concat(mt,"]")));return u[u.length-1]}(n),i=o!==void 0?o.nextSibling:null;r.setAttribute(mt,"active"),r.setAttribute("data-styled-version","6.0.8");var l=Du();return l&&r.setAttribute("nonce",l),n.insertBefore(r,i),r},Bv=function(){function e(t){this.element=Ep(t),this.element.appendChild(document.createTextNode("")),this.sheet=function(n){if(n.sheet)return n.sheet;for(var r=document.styleSheets,o=0,i=r.length;o<i;o++){var l=r[o];if(l.ownerNode===n)return l}throw ht(17)}(this.element),this.length=0}return e.prototype.insertRule=function(t,n){try{return this.sheet.insertRule(n,t),this.length++,!0}catch{return!1}},e.prototype.deleteRule=function(t){this.sheet.deleteRule(t),this.length--},e.prototype.getRule=function(t){var n=this.sheet.cssRules[t];return n&&n.cssText?n.cssText:""},e}(),Wv=function(){function e(t){this.element=Ep(t),this.nodes=this.element.childNodes,this.length=0}return e.prototype.insertRule=function(t,n){if(t<=this.length&&t>=0){var r=document.createTextNode(n);return this.element.insertBefore(r,this.nodes[t]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(t){this.element.removeChild(this.nodes[t]),this.length--},e.prototype.getRule=function(t){return t<this.length?this.nodes[t].textContent:""},e}(),qv=function(){function e(t){this.rules=[],this.length=0}return e.prototype.insertRule=function(t,n){return t<=this.length&&(this.rules.splice(t,0,n),this.length++,!0)},e.prototype.deleteRule=function(t){this.rules.splice(t,1),this.length--},e.prototype.getRule=function(t){return t<this.length?this.rules[t]:""},e}(),dp=Fu,Qv={isServer:!Fu,useCSSOMInjection:!kv},ro=function(){function e(t,n,r){t===void 0&&(t=Yn),n===void 0&&(n={});var o=this;this.options=fe(fe({},Qv),t),this.gs=n,this.names=new Map(r),this.server=!!t.isServer,!this.server&&Fu&&dp&&(dp=!1,function(i){for(var l=document.querySelectorAll($v),s=0,u=l.length;s<u;s++){var c=l[s];c&&c.getAttribute(mt)!=="active"&&(Hv(i,c),c.parentNode&&c.parentNode.removeChild(c))}}(this)),Uu(this,function(){return function(i){for(var l=i.getTag(),s=l.length,u="",c=function(m){var h=function(f){return Ki.get(f)}(m);if(h===void 0)return"continue";var v=i.names.get(h),S=l.getGroup(m);if(v===void 0||S.length===0)return"continue";var x="".concat(mt,".g").concat(m,'[id="').concat(h,'"]'),z="";v!==void 0&&v.forEach(function(f){f.length>0&&(z+="".concat(f,","))}),u+="".concat(S).concat(x,'{content:"').concat(z,'"}').concat(`/*!sc*/
|
||||||
|
`)},p=0;p<s;p++)c(p);return u}(o)})}return e.registerId=function(t){return qi(t)},e.prototype.reconstructWithOptions=function(t,n){return n===void 0&&(n=!0),new e(fe(fe({},this.options),t),this.gs,n&&this.names||void 0)},e.prototype.allocateGSInstance=function(t){return this.gs[t]=(this.gs[t]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(t=function(n){var r=n.useCSSOMInjection,o=n.target;return n.isServer?new qv(o):r?new Bv(o):new Wv(o)}(this.options),new Av(t)));var t},e.prototype.hasNameForId=function(t,n){return this.names.has(t)&&this.names.get(t).has(n)},e.prototype.registerName=function(t,n){if(qi(t),this.names.has(t))this.names.get(t).add(n);else{var r=new Set;r.add(n),this.names.set(t,r)}},e.prototype.insertRules=function(t,n,r){this.registerName(t,n),this.getTag().insertRules(qi(t),r)},e.prototype.clearNames=function(t){this.names.has(t)&&this.names.get(t).clear()},e.prototype.clearRules=function(t){this.getTag().clearGroup(qi(t)),this.clearNames(t)},e.prototype.clearTag=function(){this.tag=void 0},e}(),Gv=/&/g,Kv=/^\s*\/\/.*$/gm;function _p(e,t){return e.map(function(n){return n.type==="rule"&&(n.value="".concat(t," ").concat(n.value),n.value=n.value.replaceAll(",",",".concat(t," ")),n.props=n.props.map(function(r){return"".concat(t," ").concat(r)})),Array.isArray(n.children)&&n.type!=="@keyframes"&&(n.children=_p(n.children,t)),n})}function Cp(e){var t,n,r,o=e===void 0?Yn:e,i=o.options,l=i===void 0?Yn:i,s=o.plugins,u=s===void 0?Yi:s,c=function(h,v,S){return S===n||S.startsWith(n)&&S.endsWith(n)&&S.replaceAll(n,"").length>0?".".concat(t):h},p=u.slice();p.push(function(h){h.type===Vt&&h.value.includes("&")&&(h.props[0]=h.props[0].replace(Gv,n).replace(r,c))}),l.prefix&&p.push(ip),p.push(np);var m=function(h,v,S,x){v===void 0&&(v=""),S===void 0&&(S=""),x===void 0&&(x="&"),t=x,n=v,r=new RegExp("\\".concat(n,"\\b"),"g");var z=h.replace(Kv,""),f=tp(S||v?"".concat(S," ").concat(v," { ").concat(z," }"):z);l.namespace&&(f=_p(f,l.namespace));var a=[];return Gn(f,rp(p.concat(op(function(d){return a.push(d)})))),a};return m.hash=u.length?u.reduce(function(h,v){return v.name||ht(15),Kn(h,v.name)},5381).toString():"",m}var Yv=new ro,Lu=Cp(),Vu=G.default.createContext({shouldForwardProp:void 0,styleSheet:Yv,stylis:Lu}),ox=Vu.Consumer,Xv=G.default.createContext(void 0);function ju(){return(0,G.useContext)(Vu)}function Zv(e){var t=(0,G.useState)(e.stylisPlugins),n=t[0],r=t[1],o=ju().styleSheet,i=(0,G.useMemo)(function(){var u=o;return e.sheet?u=e.sheet:e.target&&(u=u.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(u=u.reconstructWithOptions({useCSSOMInjection:!1})),u},[e.disableCSSOMInjection,e.sheet,e.target,o]),l=(0,G.useMemo)(function(){return Cp({options:{namespace:e.namespace,prefix:e.enableVendorPrefixes},plugins:n})},[e.enableVendorPrefixes,e.namespace,n]);(0,G.useEffect)(function(){(0,yp.default)(n,e.stylisPlugins)||r(e.stylisPlugins)},[e.stylisPlugins]);var s=(0,G.useMemo)(function(){return{shouldForwardProp:e.shouldForwardProp,styleSheet:i,stylis:l}},[e.shouldForwardProp,i,l]);return G.default.createElement(Vu.Provider,{value:s},G.default.createElement(Xv.Provider,{value:l},e.children))}var Jv=function(){function e(t,n){var r=this;this.inject=function(o,i){i===void 0&&(i=Lu);var l=r.name+i.hash;o.hasNameForId(r.id,l)||o.insertRules(r.id,l,i(r.rules,l,"@keyframes"))},this.name=t,this.id="sc-keyframes-".concat(t),this.rules=n,Uu(this,function(){throw ht(12,String(r.name))})}return e.prototype.getName=function(t){return t===void 0&&(t=Lu),this.name+t.hash},e}(),bv=function(e){return e>="A"&&e<="Z"};function pp(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(n===1&&r==="-"&&e[0]==="-")return e;bv(r)?t+="-"+r.toLowerCase():t+=r}return t.startsWith("ms-")?"-"+t:t}var Pp=function(e){return e==null||e===!1||e===""},Np=function(e){var t,n,r=[];for(var o in e){var i=e[o];e.hasOwnProperty(o)&&!Pp(i)&&(Array.isArray(i)&&i.isCss||Xn(i)?r.push("".concat(pp(o),":"),i,";"):no(i)?r.push.apply(r,Zr(Zr(["".concat(o," {")],Np(i),!1),["}"],!1)):r.push("".concat(pp(o),": ").concat((t=o,(n=i)==null||typeof n=="boolean"||n===""?"":typeof n!="number"||n===0||t in lp||t.startsWith("--")?String(n).trim():"".concat(n,"px")),";")))}return r};function Bt(e,t,n,r){if(Pp(e))return[];if($u(e))return[".".concat(e.styledComponentId)];if(Xn(e)){if(!Xn(i=e)||i.prototype&&i.prototype.isReactComponent||!t)return[e];var o=e(t);return Bt(o,t,n,r)}var i;return e instanceof Jv?n?(e.inject(n,r),[e.getName(r)]):[e]:no(e)?Np(e):Array.isArray(e)?Array.prototype.concat.apply(Yi,e.map(function(l){return Bt(l,t,n,r)})):[e.toString()]}function Tp(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(Xn(n)&&!$u(n))return!1}return!0}var eg=gp("6.0.8"),tg=function(){function e(t,n,r){this.rules=t,this.staticRulesId="",this.isStatic=(r===void 0||r.isStatic)&&Tp(t),this.componentId=n,this.baseHash=Kn(eg,n),this.baseStyle=r,ro.registerId(n)}return e.prototype.generateAndInjectStyles=function(t,n,r){var o=this.baseStyle?th
Line truncated
|
||||||
|
width: ${e=>e.size}px;
|
||||||
|
color: ${e=>e.color};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`,tt=class extends er.Component{static defaultProps={size:32,color:"currentColor"};calculateRatio(t){let n=(0,Rm.default)(t,"defaultProps.viewBox");if(n){let[r,o]=n.split(" ").slice(2);return parseInt(o)/parseInt(r)}return 1}render(){let{icon:t,size:n,color:r,className:o,onClick:i,ariaLabel:l}=this.props,s=Im[t]||er.default.Fragment;return er.default.createElement(Gw,{size:n,color:r,className:o,onClick:i,"aria-label":l},er.default.createElement(s,{size:n,color:r,id:`svg-icon-${t}`,"data-testid":`svg-icon-${t}`}))}};var Mm={primary800:"hsl(253,91%,21%)",primary700:"hsl(253,61%,31%)",primary600:"hsl(253,56%,41%)",primary500:"hsl(253,51%,51%)",primary400:"hsl(252,56%,61%)",primary300:"hsl(253,61%,71%)",primary200:"hsl(252,71%,81%)",primary100:"hsl(252,91%,91%)",secondary700:"hsl(20,92%,35%)",secondary600:"hsl(21,87%,45%)",secondary550:"hsl(20,84%,55%)",secondary500:"hsl(20,95%,67%)",secondary400:"hsl(20,84%,65%)",secondary300:"hsl(20,87%,75%)",secondary200:"hsl(20,92%,85%)",secondary100:"hsl(20,98%,95%)",black:"hsl(225,18%,13%)",gray900:"hsl(0,0%,17%)",gray800:"hsl(0,0%,27%)",gray700:"hsl(0,0%,37%)",gray600:"hsl(0,0%,47%)",gray500:"hsl(0,0%,57%)",gray400:"hsl(0,0%,67%)",gray300:"hsl(0,0%,77%)",gray200:"hsl(0,0%,87%)",gray150:"hsl(0,0%,93%)",gray100:"hsl(0,0%,97%)",white:"hsl(0,0%,100%)",confirmation800:"hsl(123,90%,19%)",confirmation700:"hsl(122,70%,29%)",confirmation600:"hsl(122,50%,39%)",confirmation500:"hsl(122,40%,49%)",confirmation400:"hsl(122,40%,59%)",confirmation300:"hsl(122,50%,69%)",confirmation200:"hsl(123,70%,79%)",confirmation100:"hsl(123,90%,89%)",alert800:"hsl(4,90%,22%)",alert700:"hsl(4,77%,32%)",alert600:"hsl(4,70%,42%)",alert500:"hsl(4,67%,52%)",alert400:"hsl(4,67%,62%)",alert300:"hsl(4,70%,72%)",alert200:"hsl(4,77%,82%)",alert100:"hsl(4,90%,92%)",information800:"hsl(44,100%,48%)",information700:"hsl(44,100%,28%)",information600:"hsl(44,90%,38%)",information500:"hsl(44,85%,48%)",information400:"hsl(44,83%,58%)",information300:"hsl(44,85%,68%)",information200:"hsl(44,90%,78%)",information100:"hsl(44,100%,88%)"};var Kw={fontFamily:'"Roboto", sans-serif',fontFamilySerif:'"Noe Text", "PT Serif", serif',fontWeightBold:"700",fontWeightMedium:"500",fontWeightNormal:"300",colours:Mm,fontSize:{xsmall:"0.5rem",small:"0.875rem",base:"1rem",medium:"1.5rem",large:"2rem",xlarge:"2.5rem",xxlarge:"3rem"},newColours:{text:{600:"hsl(253, 2%, 5%)",500:"hsl(253, 2%, 20%)",400:"hsl(253, 2%, 40%)",300:"hsl(253, 2%, 62%)",200:"hsl(253, 2%, 81%)",100:"hsl(253, 100%, 100%)"},primary:{500:"hsl(253,51%,31%)",400:"hsl(253,51%,51%)",300:"hsl(253,51%,66%)",200:"hsl(253,51%,76%)",100:"hsl(253,51%,91%)",50:"hsla(254, 52%, 95%, 1)"},secondary:{500:"hsl(20,84%,35%)",400:"hsl(20,84%,55%)",300:"hsl(20,73%,74%)",100:"hsl(20,84%,94%)"},gray:{900:"hsl(244,18%,13%)",800:"hsl(244,18%,22%)",700:"hsl(244,18%,31%)",500:"hsl(253,5%,85%)",400:"hsl(253,5%,88%)",300:"hsl(253,5%,93%)",200:"hsl(253,0%,98%)",100:"hsl(253,100%,100%)"},confirmation:{300:"hsl(122,40%,49%)",100:"hsl(122,100%,95%)"},alert:{300:"hsl(4,67%,52%)",100:"hsl(4,100%,98%)"},information:{300:"hsl(44,100%,28%)",200:"hsl(44,100%,48%)",100:"hsl(44,100%,96%)"}},borderRadius:"4px",boxShadow:{smallHover:"0px 2px 5px rgba(0, 0, 0, 0.1)",large:"0px 2px 20px rgba(0, 0, 0, 0.1)",largeHover:"0px 10px 20px rgba(0, 0, 0, 0.2)"},easing:"cubic-bezier(0.165, 0.84, 0.44, 1)"},Y=Kw;var Yw=T.div`
|
||||||
|
width: 100%;
|
||||||
|
`,Xw=T.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
`,Zw=T(tt).attrs({icon:"dropdownArrow",size:15,color:Y.colours.primary500})`
|
||||||
|
position: relative;
|
||||||
|
transform: rotate(${({expanded:e})=>e?"180deg":"0"});
|
||||||
|
`,Jw=T.span`
|
||||||
|
font-weight: ${({expanded:e})=>e?"bold":"normal"};
|
||||||
|
`,bw=T.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`,eS=({title:e="Test Title",items:t=["Test Item","Test Item 2"]})=>{let[n,r]=(0,yt.useState)(!1);return yt.default.createElement(Yw,null,yt.default.createElement(Xw,{onClick:()=>{r(!n)}},yt.default.createElement(Jw,{expanded:n},e),yt.default.createElement(Zw,{expanded:n,icon:"dropdownArrow"})),n&&yt.default.createElement(bw,null,t.map(o=>yt.default.createElement("div",{key:o},o))))},Dm=eS;var nt=ie(ke()),Um=ie(jm());var Ju="0.25s",Am=T.div`
|
||||||
|
[type='checkbox'] {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
& + label {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
width: 56px;
|
||||||
|
height: 26px;
|
||||||
|
color: ${Y.colours.gray700};
|
||||||
|
background-color: ${Y.colours.gray700};
|
||||||
|
border-radius: 18px;
|
||||||
|
position: relative;
|
||||||
|
padding: 2px;
|
||||||
|
transition: color ${Ju}, background-color ${Ju};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${Y.colours.gray800};
|
||||||
|
background-color: ${Y.colours.gray800};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
color: ${Y.colours.confirmation500};
|
||||||
|
background-color: ${Y.colours.confirmation500};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${Y.colours.confirmation600};
|
||||||
|
background-color: ${Y.colours.confirmation600};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[disabled] + label {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
`,Fm=T.div`
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
right: 33px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: white;
|
||||||
|
transition: right ${Ju};
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
right: 3px;
|
||||||
|
}
|
||||||
|
`,$m=T.div`
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
`;var uo=class extends nt.Component{static defaultProps={active:!1,disabled:!1,onActivate:()=>{},onDeactivate:()=>{}};id=(0,Um.default)("toggle-");state={active:this.props.active};componentDidUpdate(t,n){if(n.active!==this.state.active)return;let{active:r}=this.props;t.active!==r&&this.state.active!==r&&this.setState({active:r})}toggle=()=>{let t=!this.state.active;t?this.props.onActivate():this.props.onDeactivate(),this.setState({active:t})};render(){let{disabled:t,className:n}=this.props,{active:r}=this.state;return nt.default.createElement(Am,{className:n},nt.default.createElement("input",{id:this.id,type:"checkbox",checked:r,disabled:t,readOnly:!0,onChange:this.toggle,onClick:o=>o.stopPropagation(),"aria-label":"toggle"}),nt.default.createElement("label",{htmlFor:this.id},nt.default.createElement(Fm,{className:r?"active":void 0},nt.default.createElement($m,null,r?nt.default.createElement(tt,{icon:"tick",size:14}):nt.default.createElement(tt,{icon:"close",size:18})))))}};var dn=ie(ke());var Wt=ie(ke());function Vm(e){return e&&e.keyCode&&e.keyCode===27}var tr=ie(ke()),Hm=ie(ku());var oS=T(tt).attrs({size:20})`
|
||||||
|
color: ${Y.colours.primary500};
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
top: 30px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([disabled]) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
`,iS=T.div`
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
`,lS=T.div`
|
||||||
|
min-width: 500px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 30px;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.43;
|
||||||
|
max-height: 80%;
|
||||||
|
|
||||||
|
${({scrollable:e})=>e?Hu`
|
||||||
|
overflow-y: auto;
|
||||||
|
`:""};
|
||||||
|
`,ao=class extends tr.PureComponent{componentDidMount(){document.addEventListener("keydown",this.onEscapePress)}componentWillUnmount(){document.removeEventListener("keydown",this.onEscapePress)}overlayClicked=t=>{t.stopPropagation(),!this.props.disabled&&t.target===t.currentTarget&&this.props.onClose(t)};onEscapePress=t=>{t.stopPropagation(),!this.props.disabled&&Vm(t)&&this.props.onClose(t)};onClose=t=>{t.stopPropagation(),this.props.disabled||this.props.onClose(t)};render(){let t=tr.default.createElement(iS,{onClick:this.overlayClicked},tr.default.createElement(lS,{className:this.props.className,scrollable:this.props.scrollable},tr.default.createElement(oS,{onClick:this.onClose,icon:"close"}),this.props.children)),n=document.getElementById("app-container")||document.body;return Hm.default.createPortal(t,n)}};var W2=T.h1`
|
||||||
|
font-family: ${Y.fontFamilySerif};
|
||||||
|
font-size: 42px;
|
||||||
|
line-height: normal;
|
||||||
|
`,q2=T.h2`
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 45px;
|
||||||
|
font-weight: ${Y.fontWeightMedium};
|
||||||
|
`,Q2=T.h3`
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 34px;
|
||||||
|
font-weight: ${Y.fontWeightMedium};
|
||||||
|
`,Bm=T.h4`
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
font-weight: ${Y.fontWeightMedium};
|
||||||
|
`,G2=T.h5`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: ${Y.fontWeightMedium};
|
||||||
|
`,sS=T.p`
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 30px;
|
||||||
|
`,K2=T(sS)`
|
||||||
|
color: #777777;
|
||||||
|
`,Wm=T.p`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
`,Y2=T(Wm)`
|
||||||
|
font-weight: bold;
|
||||||
|
`,uS=T.p`
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 21px;
|
||||||
|
`,X2=T(Wm)`
|
||||||
|
color: #777777;
|
||||||
|
`,Z2=T(uS)`
|
||||||
|
color: #777777;
|
||||||
|
`,J2=T.a`
|
||||||
|
font-weight: ${Y.fontWeightMedium};
|
||||||
|
color: ${Y.colours.primary500};
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.4em;
|
||||||
|
`,b2=T.label`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
`;var aS=T.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`,cS=T(Bm)`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
`,fS=T.div`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
`,dS=T.div`
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
& > {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
`,bu=class extends Wt.PureComponent{render(){let{visible:t,header:n,body:r,footer:o,onClose:i,loading:l}=this.props;return t?Wt.default.createElement(ao,{onClose:i,disabled:l,scrollable:!0},Wt.default.createElement(aS,null,Wt.default.createElement(cS,null,n),Wt.default.createElement(fS,null,r),Wt.default.createElement(dS,null,o))):null}},qm=bu;var Qm=()=>{let[e,t]=(0,dn.useState)(!1);return dn.default.createElement(dn.default.Fragment,null,dn.default.createElement("button",{onClick:()=>t(!0)},"Show this modal"),dn.default.createElement(qm,{visible:e,onClose:()=>t(!1),header:"Modal Header",body:"And a body!",footer:"And a footer??"}))};var pS={accordion:Dm,modal:Qm,toggle:uo};Object.entries(pS).forEach(([e,t])=>{let n=document.querySelector(`[data-react-root="${e}"]`);n&&(0,Km.createRoot)(n).render(Gm.createElement(t,null))});})();
|
||||||
|
/*! Bundled license information:
|
||||||
|
|
||||||
|
react/cjs/react.production.min.js:
|
||||||
|
(**
|
||||||
|
* @license React
|
||||||
|
* react.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*)
|
||||||
|
|
||||||
|
scheduler/cjs/scheduler.production.min.js:
|
||||||
|
(**
|
||||||
|
* @license React
|
||||||
|
* scheduler.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*)
|
||||||
|
|
||||||
|
react-dom/cjs/react-dom.production.min.js:
|
||||||
|
(**
|
||||||
|
* @license React
|
||||||
|
* react-dom.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*)
|
||||||
|
*/
|
||||||
|
//# sourceMappingURL=out.js.map
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": ["../node_modules/react/cjs/react.production.min.js", "../node_modules/react/index.js", "../node_modules/scheduler/cjs/scheduler.production.min.js", "../node_modules/scheduler/index.js", "../node_modules/react-dom/cjs/react-dom.production.min.js", "../node_modules/react-dom/index.js", "../node_modules/react-dom/client.js", "../node_modules/shallowequal/index.js", "../node_modules/lodash/isArray.js", "../node_modules/lodash/_freeGlobal.js", "../node_modules/lodash/_root.js", "../node_modules/lodash/_Symbol.js", "../node_modules/lodash/_getRawTag.js", "../node_modules/lodash/_objectToString.js", "../node_modules/lodash/_baseGetTag.js", "../node_modules/lodash/isObjectLike.js", "../node_modules/lodash/isSymbol.js", "../node_modules/lodash/_isKey.js", "../node_modules/lodash/isObject.js", "../node_modules/lodash/isFunction.js", "../node_modules/lodash/_coreJsData.js", "../node_modules/lodash/_isMasked.js", "../node_modules/lodash/_toSource.js", "../node_modules/lodash/_baseIsNative.js", "../node_modules/lodash/_getValue.js", "../node_modules/lodash/_getNative.js", "../node_modules/lodash/_nativeCreate.js", "../node_modules/lodash/_hashClear.js", "../node_modules/lodash/_hashDelete.js", "../node_modules/lodash/_hashGet.js", "../node_modules/lodash/_hashHas.js", "../node_modules/lodash/_hashSet.js", "../node_modules/lodash/_Hash.js", "../node_modules/lodash/_listCacheClear.js", "../node_modules/lodash/eq.js", "../node_modules/lodash/_assocIndexOf.js", "../node_modules/lodash/_listCacheDelete.js", "../node_modules/lodash/_listCacheGet.js", "../node_modules/lodash/_listCacheHas.js", "../node_modules/lodash/_listCacheSet.js", "../node_modules/lodash/_ListCache.js", "../node_modules/lodash/_Map.js", "../node_modules/lodash/_mapCacheClear.js", "../node_modules/lodash/_isKeyable.js", "../node_modules/lodash/_getMapData.js", "../node_modules/lodash/_mapCacheDelete.js", "../node_modules/lodash/_mapCacheGet.js", "../node_modules/lodash/_mapCacheHas.js", "../node_modules/lodash/_mapCacheSet.js", "../node_modules/lodash/_MapCache.js", "../node_modules/lodash/memoize.js", "../node_modules/lodash/_memoizeCapped.js", "../node_modules/lodash/_stringToPath.js", "../node_modules/lodash/_arrayMap.js", "../node_modules/lodash/_baseToString.js", "../node_modules/lodash/toString.js", "../node_modules/lodash/_castPath.js", "../node_modules/lodash/_toKey.js", "../node_modules/lodash/_baseGet.js", "../node_modules/lodash/get.js", "../node_modules/lodash/uniqueId.js", "../src/app.tsx", "../src/Accordion.tsx", "../node_modules/tslib/tslib.es6.mjs", "../node_modules/stylis/src/Enum.js", "../node_modules/stylis/src/Utility.js", "../node_modules/stylis/src/Tokenizer.js", "../node_modules/stylis/src/Parser.js", "../node_modules/stylis/src/Prefixer.js", "../node_modules/stylis/src/Serializer.js", "../node_modules/stylis/src/Middleware.js", "../node_modules/@emotion/unitless/dist/emotion-unitless.esm.js", "../node_modules/styled-components/src/constants.ts", "../node_modules/styled-components/src/utils/checkDynamicCreation.ts", "../node_modules/styled-components/src/utils/empties.ts", "../node_modules/styled-components/src/utils/determineTheme.ts", "../node_modules/styled-components/src/utils/domElements.ts", "../node_modules/styled-components/src/utils/escape.ts", "../node_modules/styled-components/src/utils/generateAlphabeticName.ts", "../node_modules/styled-components/src/utils/hash.ts", "../node_modules/styled-components/src/utils/generateComponentId.ts", "../node_modules/styled-components/src/utils/getComponentName.ts", "../node_modules/styled-components/src/utils/isTag.ts", "../node_modules/styled-components/src/utils/hoist.ts", "../node_modules/styled-components/src/utils/isFunction.ts", "../node_modules/styled-components/src/utils/isStyledComponent.ts", "../node_modules/styled-components/src/utils/joinStrings.ts", "../node_modules/styled-components/src/utils/isPlainObject.ts", "../node_modules/styled-components/src/utils/mixinDeep.ts", "../node_modules/styled-components/src/utils/setToString.ts", "../node_modules/styled-components/src/utils/errors.ts", "../node_modules/styled-components/src/utils/error.ts", "../node_modules/styled-components/src/sheet/GroupedTag.ts", "../node_modules/styled-components/src/sheet/GroupIDAllocator.ts", "../node_modules/styled-components/src/sheet/Rehydration.ts", "../node_modules/styled-components/src/utils/nonce.ts", "../node_modules/styled-components/src/sheet/dom.ts", "../node_modules/styled-components/src/sheet/Tag.ts", "../node_modules/styled-components/src/sheet/Sheet.ts", "../node_modules/styled-components/src/utils/stylis.ts", "../node_modules/styled-components/src/models/StyleSheetManager.tsx", "../node_modules/styled-components/src/models/Keyframes.ts", "../node_modules/styled-components/src/utils/hyphenateStyleName.ts", "../node_modules/styled-components/src/utils/flatten.ts", "../node_modules/styled-components/src/utils/addUnitIfNeeded.ts", "../node_modules/styled-components/src/uLine truncated
|
||||||
|
"sourcesContent": ["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,\"\",\"\",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;}\nvar U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};exports.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments)},e)},count:function(a){var b=0;S(a,function(){b++});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error(\"React.Children.only expected to receive a single React element child.\");return a}};exports.Component=E;exports.Fragment=p;\nexports.Profiler=r;exports.PureComponent=G;exports.StrictMode=q;exports.Suspense=w;exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;\nexports.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error(\"React.cloneElement(...): The argument must be a React element, but you passed \"+a+\".\");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=\"\"+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]Line truncated
|
||||||
|
"mappings": "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 truncated
|
||||||
|
"names": ["require_react_production_min", "__commonJSMin", "exports", "l", "n", "p", "q", "r", "t", "u", "v", "w", "x", "y", "z", "A", "a", "B", "C", "D", "E", "b", "e", "F", "G", "H", "I", "J", "K", "L", "M", "d", "c", "k", "h", "g", "f", "m", "N", "O", "escape", "P", "Q", "R", "S", "T", "U", "V", "W", "require_react", "__commonJSMin", "exports", "module", "require_scheduler_production_min", "__commonJSMin", "exports", "f", "a", "b", "c", "d", "e", "g", "h", "k", "w", "m", "C", "n", "x", "l", "p", "q", "r", "t", "u", "v", "y", "z", "A", "B", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "require_scheduler", "__commonJSMin", "exports", "module", "require_react_dom_production_min", "__commonJSMin", "exports", "aa", "ca", "p", "a", "b", "c", "da", "ea", "fa", "ha", "ia", "ja", "ka", "la", "ma", "oa", "pa", "d", "qa", "v", "e", "f", "g", "z", "ra", "sa", "ta", "ua", "va", "wa", "ya", "za", "Aa", "Ba", "Ca", "Da", "Ea", "Fa", "Ga", "Ha", "Ia", "Ja", "Ka", "A", "La", "Ma", "Na", "Oa", "l", "h", "k", "Pa", "Qa", "Ra", "Sa", "Ta", "Ua", "Va", "Wa", "Xa", "Ya", "Za", "ab", "bb", "cb", "db", "eb", "fb", "gb", "hb", "ib", "jb", "kb", "lb", "mb", "nb", "ob", "pb", "qb", "rb", "sb", "tb", "ub", "vb", "wb", "xb", "yb", "zb", "Ab", "Bb", "Cb", "Db", "Eb", "Fb", "Gb", "Hb", "Ib", "Jb", "Kb", "Lb", "Mb", "Nb", "m", "Ob", "Pb", "Qb", "Rb", "Sb", "Tb", "Ub", "Vb", "Wb", "Xb", "Yb", "Zb", "$b", "ac", "bc", "cc", "dc", "B", "ec", "fc", "gc", "hc", "ic", "jc", "kc", "lc", "mc", "oc", "nc", "pc", "qc", "rc", "sc", "tc", "uc", "vc", "wc", "xc", "yc", "zc", "Ac", "Bc", "Cc", "C", "Dc", "Ec", "Fc", "Gc", "Hc", "Ic", "Jc", "Kc", "Lc", "Mc", "Nc", "Oc", "Pc", "Qc", "Rc", "Sc", "Tc", "Uc", "Vc", "Wc", "Xc", "Yc", "Zc", "$c", "ad", "bd", "cd", "dd", "ed", "fd", "gd", "hd", "id", "jd", "kd", "ld", "md", "nd", "od", "pd", "qd", "rd", "sd", "td", "ud", "vd", "wd", "xd", "yd", "Ad", "zd", "Bd", "Cd", "Dd", "Ed", "Fd", "Gd", "Hd", "Id", "Jd", "Kd", "Ld", "Md", "Nd", "Od", "Pd", "Qd", "Rd", "Sd", "Td", "Ud", "Vd", "Wd", "Xd", "Yd", "Zd", "$d", "ae", "be", "ce", "de", "ee", "fe", "ge", "he", "ie", "je", "ke", "le", "me", "ne", "oe", "pe", "qe", "re", "se", "te", "ue", "ve", "we", "ye", "ze", "xe", "Ae", "Be", "Ce", "De", "Ee", "Fe", "Ge", "He", "Ie", "Je", "Ke", "Le", "Me", "Ne", "Oe", "Pe", "Qe", "Re", "Se", "Te", "Ue", "Ve", "We", "Xe", "Ye", "Ze", "$e", "af", "bf", "cf", "df", "ef", "ff", "gf", "hf", "jf", "kf", "lf", "mf", "nf", "D", "of", "pf", "qf", "rf", "sf", "n", "t", "J", "x", "w", "u", "F", "tf", "uf", "vf", "wf", "na", "xa", "$a", "ba", "xf", "yf", "zf", "Af", "Bf", "Cf", "Df", "Ef", "Ff", "Gf", "Hf", "Jf", "If", "Kf", "Lf", "Mf", "Nf", "Of", "Pf", "Qf", "Rf", "Sf", "Tf", "Uf", "E", "G", "Vf", "H", "Wf", "Xf", "Yf", "Zf", "$f", "ag", "bg", "cg", "dg", "eg", "fg", "gg", "hg", "ig", "jg", "kg", "lg", "mg", "ng", "og", "pg", "qg", "rg", "sg", "tg", "ug", "vg", "wg", "xg", "yg", "I", "zg", "Ag", "Bg", "Cg", "Dg", "Eg", "Fg", "Gg", "Hg", "Ig", "Jg", "Kg", "Lg", "Mg", "Ng", "Og", "Pg", "Qg", "Rg", "Sg", "Tg", "Ug", "Vg", "Wg", "Xg", "Yg", "Zg", "$g", "ah", "bh", "ch", "dh", "K", "eh", "fh", "gh", "q", "r", "y", "hh", "ih", "jh", "kh", "nh", "L", "lh", "mh", "oh", "ph", "qh", "rh", "sh", "th", "uh", "vh", "wh", "xh", "yh", "zh", "Ah", "Bh", "Ch", "Dh", "Eh", "Fh", "Gh", "Hh", "Ih", "Jh", "Kh", "Lh", "M", "Mh", "Nh", "Oh", "Ph", "Qh", "Rh", "N", "O", "P", "Sh", "Th", "Uh", "Vh", "Q", "Wh", "Xh", "Yh", "Zh", "$h", "ai", "bi", "ci", "di", "ei", "fi", "gi", "hi", "ii", "ji", "ki", "li", "mi", "R", "ni", "oi", "pi", "qi", "ri", "si", "ti", "ui", "vi", "wi", "xi", "yi", "zi", "Ai", "Bi", "Ci", "Di", "Ei", "Fi", "Gi", "Hi", "Ii", "Ji", "Ki", "Li", "Mi", "Ni", "Oi", "Pi", "Qi", "Ri", "Si", "Ti", "Ui", "Vi", "Wi", "Xi", "Yi", "Zi", "$i", "aj", "bj", "cj", "dj", "ej", "fj", "gj", "hj", "ij", "jj", "kj", "lj", "mj", "nj", "oj", "pj", "qj", "rj", "sj", "tj", "uj", "vj", "wj", "xj", "yj", "zj", "Aj", "Bj", "Cj", "Dj", "Ej", "S", "Fj", "Gj", "T", "Hj", "Ij", "Jj", "Kj", "U", "Lj", "V", "Mj", "W", "Nj", "Oj", "Pj", "Qj", "Rj", "Sj", "Tj", "Uj", "Vj", "Wj", "Xj", "X", "Yj", "Zj", "ak", "bk", "ck", "dk", "ek", "fk", "gk", "hk", "ik", "jk", "kk", "lk", "mk", "nk", "ok", "pk", "Y", "Z", "qk", "rk", "sk", "tk", "uk", "vk", "wk", "xk", "yk", "zk", "Ak", "Bk", "Ck", "Dk", "Ek", "Fk", "Gk", "Hk", "Ik", "Jk", "Kk", "Lk", "Mk", "Nk", "Ok", "Pk", "Qk", "Rk", "Sk", "Tk", "Uk", "Vk", "Wk", "Xk", "Yk", "Zk", "$k", "al", "bl", "cl", "dl", "el", "fl", "gl", "hl", "il", "jl", "kl", "ll", "ml", "nl", "ol", "pl", "ql", "rl", "sl", "tl", "ul", "vl", "wl", "require_react_dom", "__commonJSMin", "exports", "module", "checkDCE", "err", "require_client", "__commonJSMin", "exports", "m", "i", "require_shallowequal", "__commonJSMin", "exports", "module", "objA", "objB", "compare", "compareContext", "ret", "keysA", "keysB", "bHasOwnProperty", "idx", "key", "valueA", "valueB", "require_isArray", "__commonJSMin", "exports", "module", "Line truncated
|
||||||
|
}
|
||||||
@@ -1,4 +1,8 @@
|
|||||||
## What do you mean?
|
---
|
||||||
|
type: statement
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huh?
|
||||||
|
|
||||||
* When we create a custom component, often we have to tell the browser how it should treat it
|
* When we create a custom component, often we have to tell the browser how it should treat it
|
||||||
* But often browsers already give us the tools to do that natively
|
* But often browsers already give us the tools to do that natively
|
||||||
|
|||||||
@@ -147,6 +147,8 @@ export default class Toggle extends Component<Props, State> {
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
<div data-react-root="toggle"></div>
|
||||||
|
|
||||||
* 139 lines of code (+ the Icons, theme, 3 libraries required)
|
* 139 lines of code (+ the Icons, theme, 3 libraries required)
|
||||||
* Manual state management
|
* Manual state management
|
||||||
* Have to import all of this everywhere we use it
|
* Have to import all of this everywhere we use it
|
||||||
|
|||||||
@@ -0,0 +1,191 @@
|
|||||||
|
## Example 2: Modals
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import React, { MouseEventHandler, PureComponent, ReactNode } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
|
||||||
|
import { H4 } from '../Typography';
|
||||||
|
|
||||||
|
import Icon from 'components/Icon';
|
||||||
|
import isEventEscapeKey from 'helpers/isEventEscapeKey';
|
||||||
|
import theme from 'theme';
|
||||||
|
|
||||||
|
export const CloseIcon = styled(Icon).attrs({
|
||||||
|
size: 20,
|
||||||
|
})`
|
||||||
|
color: ${theme.colours.primary500};
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
top: 30px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([disabled]) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ModalOverlay = styled.div`
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ModalContent = styled.div<StyleProps>`
|
||||||
|
min-width: 500px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 30px;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.43;
|
||||||
|
max-height: 80%;
|
||||||
|
|
||||||
|
${({ scrollable }) =>
|
||||||
|
scrollable
|
||||||
|
? css`
|
||||||
|
overflow-y: auto;
|
||||||
|
`
|
||||||
|
: ''};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export type StyleProps = {
|
||||||
|
scrollable?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Props = StyleProps & {
|
||||||
|
children: ReactNode;
|
||||||
|
onClose: MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
class ModalContainer extends PureComponent<Props> {
|
||||||
|
componentDidMount() {
|
||||||
|
document.addEventListener('keydown', this.onEscapePress);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
document.removeEventListener('keydown', this.onEscapePress);
|
||||||
|
}
|
||||||
|
|
||||||
|
overlayClicked: MouseEventHandler<HTMLDivElement> = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!this.props.disabled && e.target === e.currentTarget) {
|
||||||
|
this.props.onClose(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onEscapePress: EventListenerOrEventListenerObject = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!this.props.disabled && isEventEscapeKey(e as KeyboardEvent)) {
|
||||||
|
this.props.onClose(e as any);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onClose: MouseEventHandler<HTMLDivElement> = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!this.props.disabled) {
|
||||||
|
this.props.onClose(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const modal = (
|
||||||
|
<ModalOverlay onClick={this.overlayClicked}>
|
||||||
|
<ModalContent className={this.props.className} scrollable={this.props.scrollable}>
|
||||||
|
<CloseIcon onClick={this.onClose} icon="close" />
|
||||||
|
{this.props.children}
|
||||||
|
</ModalContent>
|
||||||
|
</ModalOverlay>
|
||||||
|
);
|
||||||
|
|
||||||
|
// defaulting to document.body mostly for the benefit of tests, which don't have a #app-container element.
|
||||||
|
const rootElement = document.getElementById('app-container') || document.body;
|
||||||
|
|
||||||
|
return ReactDOM.createPortal(modal, rootElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const ModalContents = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ModalHeader = styled(H4)`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ModalBody = styled.div`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ModalFooter = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
& > {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
visible: boolean;
|
||||||
|
header: ReactNode;
|
||||||
|
body: ReactNode;
|
||||||
|
footer?: ReactNode;
|
||||||
|
loading?: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
class Modal extends PureComponent<Props> {
|
||||||
|
render() {
|
||||||
|
const { visible, header, body, footer, onClose, loading } = this.props;
|
||||||
|
|
||||||
|
if (!visible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContainer onClose={onClose} disabled={loading} scrollable={true}>
|
||||||
|
<ModalContents>
|
||||||
|
<ModalHeader>{header}</ModalHeader>
|
||||||
|
<ModalBody>{body}</ModalBody>
|
||||||
|
<ModalFooter>{footer}</ModalFooter>
|
||||||
|
</ModalContents>
|
||||||
|
</ModalContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div data-react-root="modal"></div>
|
||||||
|
|
||||||
|
* 171 lines of code
|
||||||
|
* Requires state updates to display
|
||||||
|
* Separate component just to manage the backdrop
|
||||||
|
* How does a screen reader announce that the modal is displayed? (hint: it doesn't)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<h2>Example 2: Modals are just Dialogs</h2>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
{% highlight "html" %}
|
||||||
|
<style>
|
||||||
|
dialog {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<dialog id="displayDialog">
|
||||||
|
<form method="dialog">
|
||||||
|
<button autofocus>Close</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h1>I'm a dialog!</h1>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<button onclick="showModal()">Open the dialog as a modal</button>
|
||||||
|
<button onclick="showDialog()">Open the dialog as a popup</button>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
const dialog = document.getElementById("displayDialog");
|
||||||
|
|
||||||
|
function showModal() {
|
||||||
|
dialog.showModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDialog() {
|
||||||
|
dialog.show();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<dialog id="displayDialog">
|
||||||
|
<form method="dialog">
|
||||||
|
<button autofocus>Close</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h1>I'm a dialog!</h1>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<button onclick="showModal()">Open the dialog as a modal</button>
|
||||||
|
<button onclick="showDialog()">Open the dialog as a popup</button>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>31 lines of code</li>
|
||||||
|
<li>A teensy bit of Javascript - I know, I'm a hypocrite</li>
|
||||||
|
<li>Option to use as a popup <i>or</i> a modal</li>
|
||||||
|
<li><code>::backdrop</code> pseudo-element for easy styling</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
const dialog = document.getElementById("displayDialog");
|
||||||
|
|
||||||
|
function showModal() {
|
||||||
|
dialog.showModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDialog() {
|
||||||
|
dialog.show();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
## Example 3: Accordions
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import Icon from '../../../../../components/Icon';
|
||||||
|
import theme from '../../../../../theme';
|
||||||
|
|
||||||
|
type AccordionProps = {
|
||||||
|
title: string;
|
||||||
|
items: (string | null)[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const AccordionSummary = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
|
||||||
|
interface ExpandedProps {
|
||||||
|
expanded: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StyledArrow = styled(Icon).attrs({
|
||||||
|
icon: 'dropdownArrow',
|
||||||
|
size: 15,
|
||||||
|
color: theme.colours.primary500,
|
||||||
|
})<ExpandedProps>`
|
||||||
|
position: relative;
|
||||||
|
transform: rotate(${({ expanded }) => (expanded ? '180deg' : '0')});
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = styled.span<ExpandedProps>`
|
||||||
|
font-weight: ${({ expanded }) => (expanded ? 'bold' : 'normal')};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemList = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Accordion = ({ title, items }: AccordionProps) => {
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<AccordionSummary
|
||||||
|
onClick={() => {
|
||||||
|
setExpanded(!expanded);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Title expanded={expanded}>{title}</Title>
|
||||||
|
<StyledArrow expanded={expanded} />
|
||||||
|
</AccordionSummary>
|
||||||
|
{expanded && (
|
||||||
|
<ItemList>
|
||||||
|
{items.map((item) => {
|
||||||
|
return <div key={item}>{item}</div>;
|
||||||
|
})}
|
||||||
|
</ItemList>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Accordion;
|
||||||
|
```
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div data-react-root="accordion"></div>
|
||||||
|
|
||||||
|
* 67 lines of code
|
||||||
|
* Manual state management
|
||||||
|
* Divs with onClick handlers - unreachable by keyboard, no screen reader support
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
## Example 3: The discloure element
|
||||||
|
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
details {
|
||||||
|
position: relative;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 20ch;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid darkgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
padding: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary svg {
|
||||||
|
width: 12px;
|
||||||
|
height: auto;
|
||||||
|
transform: rotate(180deg) translate(-1px);
|
||||||
|
transition: transform .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] > summary {
|
||||||
|
border-color: darkgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] summary svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Test Title <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 7">
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
fillRule="evenodd"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M1 1l4.025 4L9 1.05"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Test item 1</li>
|
||||||
|
<li>Test item 2</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
```
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Test Title <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 7">
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
fillRule="evenodd"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M1 1l4.025 4L9 1.05"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Test item 1</li>
|
||||||
|
<li>Test item 2</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
type: statement
|
||||||
|
---
|
||||||
|
|
||||||
|
## Final points
|
||||||
|
|
||||||
|
* The minified, optimized React bundle I produced to showcase just _3_ components was 190kb before Gzipping
|
||||||
|
* The majority of that is React - 143kb
|
||||||
|
* This entire presentation, with lots of duplication, and every single slide included, is only 92kb
|
||||||
|
* When we build new components, let's see if the browser can't do it for us instead
|
||||||
|
* Modern CSS is great
|
||||||
|
* Javascript as a garnish, not a main course
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
type: statement
|
||||||
|
---
|
||||||
|
|
||||||
|
## Useful links
|
||||||
|
|
||||||
|
* W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/
|
||||||
|
* Every Layout - https://every-layout.dev/
|
||||||
|
* Web.dev - https://web.dev/
|
||||||
+96
-10
@@ -7,6 +7,26 @@ body {
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--color-slate-800);
|
||||||
|
outline: 1px solid var(--color-slate-800);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@@ -23,18 +43,11 @@ main {
|
|||||||
.slide {
|
.slide {
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid black;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%;
|
||||||
font-size: var(--text-size-m);
|
font-size: var(--text-size-m);
|
||||||
|
|
||||||
&.title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-size-sm);
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: var(--text-size-2xl);
|
font-size: var(--text-size-2xl);
|
||||||
@@ -46,6 +59,25 @@ main {
|
|||||||
padding-inline: var(--space-size-xs);
|
padding-inline: var(--space-size-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-size-sm);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
border-bottom: 0px solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.statement {
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
margin: var(--space-size-3xl) auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
h1, h2, h3, h4 {
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -84,8 +116,9 @@ main {
|
|||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: " ";
|
content: "";
|
||||||
width: 20px;
|
width: 20px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
background: gray;
|
background: gray;
|
||||||
@@ -113,7 +146,6 @@ main {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: space-around;
|
align-items: space-around;
|
||||||
gap: var(--space-size-m);
|
|
||||||
padding: var(--space-size-s);
|
padding: var(--space-size-s);
|
||||||
|
|
||||||
> :not(:first-child) {
|
> :not(:first-child) {
|
||||||
@@ -123,6 +155,7 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: var(--space-size-s);
|
padding: var(--space-size-s);
|
||||||
|
flex-basis: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
> :first-child {
|
> :first-child {
|
||||||
@@ -132,4 +165,57 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-block-start: var(--space-size-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
position: relative;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 20ch;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid darkgray;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
padding: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: var(--text-size-s);
|
||||||
|
height: auto;
|
||||||
|
transform: rotate(180deg) translate(-1px);
|
||||||
|
transition: transform .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[open] summary {
|
||||||
|
border-color: darkgray;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in new issue
Block a user