=h?p=0:(-1===p||h component higher in the tree to provide a loading indicator or placeholder to display."+ct(s))}Oa=!0,f=oa(f,s),l=c;do{switch(l.tag){case 3:l.effectTag|=2048,l.expirationTime=i,Zo(l,i=Ea(l,f,i));break e;case 1:if(p=f,m=l.type,s=l.stateNode,0==(64&l.effectTag)&&("function"==typeof m.getDerivedStateFromError||null!==s&&"function"==typeof s.componentDidCatch&&(null===Ma||!Ma.has(s)))){l.effectTag|=2048,l.expirationTime=i,Zo(l,i=Ca(l,p,i));break e}}l=l.return}while(null!==l)}Sa=Ka(o);continue}u=!0,ji(t)}}break}if(Aa=!1,xa.current=n,Mo=Io=Ro=null,Gu(),u)Ta=null,e.finishedWork=null;else if(null!==Sa)e.finishedWork=null;else{if(null===(n=e.current.alternate)&&a("281"),Ta=null,Oa){if(u=e.latestPendingTime,o=e.latestSuspendedTime,i=e.latestPingedTime,0!==u&&ut?0:t)):(e.pendingCommitExpirationTime=r,e.finishedWork=n)}}function Ya(e,t){for(var n=e.return;null!==n;){switch(n.tag){case 1:var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Ma||!Ma.has(r)))return Jo(n,e=Ca(n,e=oa(t,e),1073741823)),void ei(n,1073741823);break;case 3:return Jo(n,e=Ea(n,e=oa(t,e),1073741823)),void ei(n,1073741823)}n=n.return}3===e.tag&&(Jo(e,n=Ea(e,n=oa(t,e),1073741823)),ei(e,1073741823))}function Xa(e,t){var n=o.unstable_getCurrentPriorityLevel(),r=void 0;if(0==(1&t.mode))r=1073741823;else if(Aa&&!Na)r=Ba;else{switch(n){case o.unstable_ImmediatePriority:r=1073741823;break;case o.unstable_UserBlockingPriority:r=1073741822-10*(1+((1073741822-e+15)/10|0));break;case o.unstable_NormalPriority:r=1073741822-25*(1+((1073741822-e+500)/25|0));break;case o.unstable_LowPriority:case o.unstable_IdlePriority:r=1;break;default:a("313")}null!==Ta&&r===Ba&&--r}return n===o.unstable_UserBlockingPriority&&(0===ci||r=r&&(e.didError=!1,(0===(t=e.latestPingedTime)||t>n)&&(e.latestPingedTime=n),nu(n,e),0!==(n=e.expirationTime)&&ki(e,n)))}function Ja(e,t){var n=e.stateNode;null!==n&&n.delete(t),null!==(e=Za(e,t=Xa(t=Fi(),e)))&&(Zr(e,t),0!==(t=e.expirationTime)&&ki(e,t))}function Za(e,t){e.expirationTimeBa&&La(),Zr(e,t),Aa&&!Na&&Ta===e||ki(e,e.expirationTime),Di>gi&&(Di=0,a("185")))}function ti(e,t,n,r,u){return o.unstable_runWithPriority(o.unstable_ImmediatePriority,(function(){return e(t,n,r,u)}))}var ni=null,ri=null,ui=0,oi=void 0,ai=!1,ii=null,li=0,ci=0,si=!1,fi=null,di=!1,pi=!1,mi=null,hi=o.unstable_now(),vi=1073741822-(hi/10|0),bi=vi,gi=50,Di=0,yi=null;function Ei(){vi=1073741822-((o.unstable_now()-hi)/10|0)}function Ci(e,t){if(0!==ui){if(te.expirationTime&&(e.expirationTime=t),ai||(di?pi&&(ii=e,li=1073741823,Pi(e,1073741823,!1)):1073741823===t?_i(1073741823,!1):Ci(e,t))}function Ai(){var e=0,t=null;if(null!==ri)for(var n=ri,r=ni;null!==r;){var u=r.expirationTime;if(0===u){if((null===n||null===ri)&&a("244"),r===r.nextScheduledRoot){ni=ri=r.nextScheduledRoot=null;break}if(r===ni)ni=u=r.nextScheduledRoot,ri.nextScheduledRoot=u,r.nextScheduledRoot=null;else{if(r===ri){(ri=n).nextScheduledRoot=ni,r.nextScheduledRoot=null;break}n.nextScheduledRoot=r.nextScheduledRoot,r.nextScheduledRoot=null}r=n.nextScheduledRoot}else{if(u>e&&(e=u,t=r),r===ri)break;if(1073741823===e)break;n=r,r=r.nextScheduledRoot}}ii=t,li=e}var Si=!1;function Ti(){return!!Si||!!o.unstable_shouldYield()&&(Si=!0)}function Bi(){try{if(!Ti()&&null!==ni){Ei();var e=ni;do{var t=e.expirationTime;0!==t&&vi<=t&&(e.nextExpirationTimeToWorkOn=vi),e=e.nextScheduledRoot}while(e!==ni)}_i(0,!0)}finally{Si=!1}}function _i(e,t){if(Ai(),t)for(Ei(),bi=vi;null!==ii&&0!==li&&e<=li&&!(Si&&vi>li);)Pi(ii,li,vi>li),Ai(),Ei(),bi=vi;else for(;null!==ii&&0!==li&&e<=li;)Pi(ii,li,!1),Ai();if(t&&(ui=0,oi=null),0!==li&&Ci(ii,li),Di=0,yi=null,null!==mi)for(e=mi,mi=null,t=0;t=n&&(null===mi?mi=[r]:mi.push(r),r._defer))return e.finishedWork=t,void(e.expirationTime=0);e.finishedWork=null,e===yi?Di++:(yi=e,Di=0),o.unstable_runWithPriority(o.unstable_ImmediatePriority,(function(){$a(e,t)}))}function ji(e){null===ii&&a("246"),ii.expirationTime=0,si||(si=!0,fi=e)}function Ri(e,t){var n=di;di=!0;try{return e(t)}finally{(di=n)||ai||_i(1073741823,!1)}}function Ii(e,t){if(di&&!pi){pi=!0;try{return e(t)}finally{pi=!1}}return e(t)}function Mi(e,t,n){di||ai||0===ci||(_i(ci,!1),ci=0);var r=di;di=!0;try{return o.unstable_runWithPriority(o.unstable_UserBlockingPriority,(function(){return e(t,n)}))}finally{(di=r)||ai||_i(1073741823,!1)}}function Li(e,t,n,r,u){var o=t.current;e:if(n){t:{2===nn(n=n._reactInternalFiber)&&1===n.tag||a("170");var i=n;do{switch(i.tag){case 3:i=i.stateNode.context;break t;case 1:if(Nr(i.type)){i=i.stateNode.__reactInternalMemoizedMergedChildContext;break t}}i=i.return}while(null!==i);a("171"),i=void 0}if(1===n.tag){var l=n.type;if(Nr(l)){n=Mr(n,l,i);break e}}n=i}else n=Tr;return null===t.context?t.context=n:t.pendingContext=n,t=u,(u=Xo(r)).payload={element:e},null!==(t=void 0===t?null:t)&&(u.callback=t),Ha(),Jo(o,u),ei(o,r),r}function zi(e,t,n,r){var u=t.current;return Li(e,t,n,u=Xa(Fi(),u),r)}function Ui(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Vi(e){var t=1073741822-25*(1+((1073741822-Fi()+500)/25|0));t>=ka&&(t=ka-1),this._expirationTime=ka=t,this._root=e,this._callbacks=this._next=null,this._hasChildren=this._didComplete=!1,this._children=null,this._defer=!0}function Wi(){this._callbacks=null,this._didCommit=!1,this._onCommit=this._onCommit.bind(this)}function Hi(e,t,n){e={current:t=$r(3,null,null,t?3:0),containerInfo:e,pendingChildren:null,pingCache:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:n,nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null},this._internalRoot=t.stateNode=e}function $i(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function Ki(e,t,n,r,u){var o=n._reactRootContainer;if(o){if("function"==typeof u){var a=u;u=function(){var e=Ui(o._internalRoot);a.call(e)}}null!=e?o.legacy_renderSubtreeIntoContainer(e,t,u):o.render(t,u)}else{if(o=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute("data-reactroot"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new Hi(e,!1,t)}(n,r),"function"==typeof u){var i=u;u=function(){var e=Ui(o._internalRoot);i.call(e)}}Ii((function(){null!=e?o.legacy_renderSubtreeIntoContainer(e,t,u):o.render(t,u)}))}return Ui(o._internalRoot)}function qi(e,t){var n=2=t;)n=r,r=r._next;e._next=r,null!==n&&(n._next=e)}return e},Pe=Ri,Ne=Mi,je=function(){ai||0===ci||(_i(ci,!1),ci=0)};var Qi,Yi,Xi={createPortal:qi,findDOMNode:function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternalFiber;return void 0===t&&("function"==typeof e.render?a("188"):a("268",Object.keys(e))),e=null===(e=un(t))?null:e.stateNode},hydrate:function(e,t,n){return $i(t)||a("200"),Ki(null,e,t,!0,n)},render:function(e,t,n){return $i(t)||a("200"),Ki(null,e,t,!1,n)},unstable_renderSubtreeIntoContainer:function(e,t,n,r){return $i(n)||a("200"),(null==e||void 0===e._reactInternalFiber)&&a("38"),Ki(e,t,n,!1,r)},unmountComponentAtNode:function(e){return $i(e)||a("40"),!!e._reactRootContainer&&(Ii((function(){Ki(null,null,e,!1,(function(){e._reactRootContainer=null}))})),!0)},unstable_createPortal:function(){return qi.apply(void 0,arguments)},unstable_batchedUpdates:Ri,unstable_interactiveUpdates:Mi,flushSync:function(e,t){ai&&a("187");var n=di;di=!0;try{return ti(e,t)}finally{di=n,_i(1073741823,!1)}},unstable_createRoot:function(e,t){return $i(e)||a("299","unstable_createRoot"),new Hi(e,!0,null!=t&&!0===t.hydrate)},unstable_flushControlled:function(e){var t=di;di=!0;try{ti(e)}finally{(di=t)||ai||_i(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[I,M,L,B.injectEventPluginsByName,D,$,function(e){A(e,H)},_e,Oe,Tn,O]}};Yi=(Qi={findFiberByHostInstance:R,bundleType:0,version:"16.8.6",rendererPackageName:"react-dom"}).findFiberByHostInstance,function(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);Ur=Wr((function(e){return t.onCommitFiberRoot(n,e)})),Vr=Wr((function(e){return t.onCommitFiberUnmount(n,e)}))}catch(e){}}(u({},Qi,{overrideProps:null,currentDispatcherRef:$e.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=un(e))?null:e.stateNode},findFiberByHostInstance:function(e){return Yi?Yi(e):null}}));var Gi={default:Xi},Ji=Gi&&Xi||Gi;e.exports=Ji.default||Ji},function(e,t,n){"use strict";e.exports=n(20)},function(e,t,n){"use strict";(function(e){
+/** @license React v0.13.6
+ * 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.
+ */
+Object.defineProperty(t,"__esModule",{value:!0});var n=null,r=!1,u=3,o=-1,a=-1,i=!1,l=!1;function c(){if(!i){var e=n.expirationTime;l?w():l=!0,C(d,e)}}function s(){var e=n,t=n.next;if(n===t)n=null;else{var r=n.previous;n=r.next=t,t.previous=r}e.next=e.previous=null,r=e.callback,t=e.expirationTime,e=e.priorityLevel;var o=u,i=a;u=e,a=t;try{var l=r()}finally{u=o,a=i}if("function"==typeof l)if(l={callback:l,priorityLevel:e,expirationTime:t,next:null,previous:null},null===n)n=l.next=l.previous=l;else{r=null,e=n;do{if(e.expirationTime>=t){r=e;break}e=e.next}while(e!==n);null===r?r=n:r===n&&(n=l,c()),(t=r.previous).next=r.previous=l,l.next=r,l.previous=t}}function f(){if(-1===o&&null!==n&&1===n.priorityLevel){i=!0;try{do{s()}while(null!==n&&1===n.priorityLevel)}finally{i=!1,null!==n?c():l=!1}}}function d(e){i=!0;var u=r;r=e;try{if(e)for(;null!==n;){var o=t.unstable_now();if(!(n.expirationTime<=o))break;do{s()}while(null!==n&&n.expirationTime<=o)}else if(null!==n)do{s()}while(null!==n&&!x())}finally{i=!1,r=u,null!==n?c():l=!1,f()}}var p,m,h=Date,v="function"==typeof setTimeout?setTimeout:void 0,b="function"==typeof clearTimeout?clearTimeout:void 0,g="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,D="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;function y(e){p=g((function(t){b(m),e(t)})),m=v((function(){D(p),e(t.unstable_now())}),100)}if("object"==typeof performance&&"function"==typeof performance.now){var E=performance;t.unstable_now=function(){return E.now()}}else t.unstable_now=function(){return h.now()};var C,w,x,F=null;if("undefined"!=typeof window?F=window:void 0!==e&&(F=e),F&&F._schedMock){var k=F._schedMock;C=k[0],w=k[1],x=k[2],t.unstable_now=k[3]}else if("undefined"==typeof window||"function"!=typeof MessageChannel){var A=null,S=function(e){if(null!==A)try{A(e)}finally{A=null}};C=function(e){null!==A?setTimeout(C,0,e):(A=e,setTimeout(S,0,!1))},w=function(){A=null},x=function(){return!1}}else{"undefined"!=typeof console&&("function"!=typeof g&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof D&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var T=null,B=!1,_=-1,O=!1,P=!1,N=0,j=33,R=33;x=function(){return N<=t.unstable_now()};var I=new MessageChannel,M=I.port2;I.port1.onmessage=function(){B=!1;var e=T,n=_;T=null,_=-1;var r=t.unstable_now(),u=!1;if(0>=N-r){if(!(-1!==n&&n<=r))return O||(O=!0,y(L)),T=e,void(_=n);u=!0}if(null!==e){P=!0;try{e(u)}finally{P=!1}}};var L=function(e){if(null!==T){y(L);var t=e-N+R;tt&&(t=8),R=tt?M.postMessage(void 0):O||(O=!0,y(L))},w=function(){T=null,B=!1,_=-1}}t.unstable_ImmediatePriority=1,t.unstable_UserBlockingPriority=2,t.unstable_NormalPriority=3,t.unstable_IdlePriority=5,t.unstable_LowPriority=4,t.unstable_runWithPriority=function(e,n){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var r=u,a=o;u=e,o=t.unstable_now();try{return n()}finally{u=r,o=a,f()}},t.unstable_next=function(e){switch(u){case 1:case 2:case 3:var n=3;break;default:n=u}var r=u,a=o;u=n,o=t.unstable_now();try{return e()}finally{u=r,o=a,f()}},t.unstable_scheduleCallback=function(e,r){var a=-1!==o?o:t.unstable_now();if("object"==typeof r&&null!==r&&"number"==typeof r.timeout)r=a+r.timeout;else switch(u){case 1:r=a+-1;break;case 2:r=a+250;break;case 5:r=a+1073741823;break;case 4:r=a+1e4;break;default:r=a+5e3}if(e={callback:e,priorityLevel:u,expirationTime:r,next:null,previous:null},null===n)n=e.next=e.previous=e,c();else{a=null;var i=n;do{if(i.expirationTime>r){a=i;break}i=i.next}while(i!==n);null===a?a=n:a===n&&(n=e,c()),(r=a.previous).next=a.previous=e,e.next=a,e.previous=r}return e},t.unstable_cancelCallback=function(e){var t=e.next;if(null!==t){if(t===e)n=null;else{e===n&&(n=t);var r=e.previous;r.next=t,t.previous=r}e.next=e.previous=null}},t.unstable_wrapCallback=function(e){var n=u;return function(){var r=u,a=o;u=n,o=t.unstable_now();try{return e.apply(this,arguments)}finally{u=r,o=a,f()}}},t.unstable_getCurrentPriorityLevel=function(){return u},t.unstable_shouldYield=function(){return!r&&(null!==n&&n.expirationTime where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it\'s border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e2e8f0; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n color: #a0aec0;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n color: #a0aec0;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n color: #a0aec0;\n}\n\ninput::-ms-input-placeholder, textarea::-ms-input-placeholder {\n color: #a0aec0;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n color: #a0aec0;\n}\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don\'t inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured \'mono\' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * \'mono\' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that\'s\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*tailwind start components */\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n\n/*tailwind end components */\n\nbody {\n font-family: Inter, sans-serif;\n font-size: 0.875rem;\n}\n\n.heading {\n font-size: 1.5rem;\n font-weight: 700;\n --text-opacity: 1;\n color: #1a202c;\n color: rgba(26, 32, 44, var(--text-opacity));\n line-height: 1;\n text-transform: capitalize;\n}\n\n.heading-small {\n font-size: 0.75rem;\n}\n\n.navbar {\n transform: translateY(-1px);\n}\n\n.property-wrapper {\n margin-bottom: 0.5rem;\n border-radius: 0.25rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n border-width: 1px;\n --border-opacity: 1;\n border-color: #edf2f7;\n border-color: rgba(237, 242, 247, var(--border-opacity));\n}\n\n.property-wrapper .heading {\n font-size: 0.65rem;\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n margin-top: -0.75rem;\n margin-left: -0.25rem;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n display: inline-flex;\n}\n\n.property-wrapper .property-wrapper {\n margin-bottom: 0;\n border-radius: 0;\n padding: 0.25rem;\n border-top-width: 1px;\n --border-opacity: 1;\n border-color: #e2e8f0;\n border-color: rgba(226, 232, 240, var(--border-opacity));\n}\n\n.property-wrapper:last-of-type {\n margin-bottom: 0;\n}\n\n.property-value {\n --text-opacity: 1;\n color: #a0aec0;\n color: rgba(160, 174, 192, var(--text-opacity));\n font-size: 0.75rem;\n font-weight: 400;\n}\n\n.button-group {\n border-radius: 0.25rem;\n display: inline-flex;\n border-width: 1px;\n --border-opacity: 1;\n border-color: #cbd5e0;\n border-color: rgba(203, 213, 224, var(--border-opacity));\n overflow: hidden;\n}\n\n.button-value {\n --text-opacity: 1;\n color: #718096;\n color: rgba(113, 128, 150, var(--text-opacity));\n font-size: 0.75rem;\n font-weight: 700;\n}\n\n.button-extra {\n border-left-width: 1px;\n --border-opacity: 1;\n border-color: #000;\n border-color: rgba(0, 0, 0, var(--border-opacity));\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.button-disabled .button-extra {\n --border-opacity: 1;\n border-color: #a0aec0;\n border-color: rgba(160, 174, 192, var(--border-opacity));\n}\n\n.rotate {\n -webkit-animation: rotate 1000ms linear infinite;\n animation: rotate 1000ms linear infinite;\n}\n\n@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.button-group .button {\n border-style: none;\n border-radius: 0;\n}\n\n.button {\n border-width: 1px;\n --border-opacity: 1;\n border-color: #000;\n border-color: rgba(0, 0, 0, var(--border-opacity));\n border-radius: 0.25rem;\n --text-opacity: 1;\n color: #2d3748;\n color: rgba(45, 55, 72, var(--text-opacity));\n font-weight: 700;\n font-size: 0.65rem;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.button-disabled {\n --border-opacity: 1;\n border-color: #a0aec0;\n border-color: rgba(160, 174, 192, var(--border-opacity));\n}\n\n.button:hover {\n --bg-opacity: 1;\n background-color: #f7fafc;\n background-color: rgba(247, 250, 252, var(--bg-opacity));\n}\n\n.button-ghost {\n border-color: transparent;\n background-color: transparent;\n}\n\n.button-property {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.button-active {\n box-shadow: inset 0 0 0 1px black;\n}\n\n.button-active.button-active-fill {\n border: none;\n}\n\n.button-active-fill::before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 0;\n border-radius: 100%;\n width: 100%;\n height: 100%;\n transform: scale(0.9);\n border: 2px solid white;\n pointer-events: none;\n}\n\n.button-text {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.button-edit:hover .button-text {\n opacity: 0.25;\n}\n\n.button-edit-overlay {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button-edit:hover .button-edit-overlay {\n opacity: 1;\n}\n\n.button-link {\n background-color: transparent;\n border-color: transparent;\n}\n\n.button-secondary {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n --text-opacity: 1;\n color: #000;\n color: rgba(0, 0, 0, var(--text-opacity));\n border-width: 1px;\n --border-opacity: 1;\n border-color: #edf2f7;\n border-color: rgba(237, 242, 247, var(--border-opacity));\n}\n\n.button-secondary:hover {\n --bg-opacity: 1;\n background-color: #f7fafc;\n background-color: rgba(247, 250, 252, var(--bg-opacity));\n}\n\n.button-primary {\n --bg-opacity: 1;\n background-color: #206AC3;\n background-color: rgba(32, 106, 195, var(--bg-opacity));\n --text-opacity: 1;\n color: #fff;\n color: rgba(255, 255, 255, var(--text-opacity));\n border-color: transparent;\n}\n\n.button-primary:hover {\n --bg-opacity: 1;\n background-color: #3A84DF;\n background-color: rgba(58, 132, 223, var(--bg-opacity));\n}\n\n.button-large {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\nbutton[disabled] {\n opacity: 0.5;\n}\n\ntextarea {\n width: 100%;\n border-width: 1px;\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n font-size: 0.65rem;\n padding: 0.75rem;\n border-radius: 0.25rem;\n}\n\n[data-reach-dialog-content] {\n width: 75vw !important;\n}\n\n[data-reach-dialog-overlay] {\n z-index: 1;\n}\n\n.modal-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.4);\n padding: 0.5rem;\n z-index: 20;\n}\n\n.modal-content {\n overflow-y: auto;\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n height: 100%;\n border-radius: 0.25rem;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n padding: 0.5rem;\n}\n\n.input {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n border-width: 1px;\n --border-opacity: 1;\n border-color: #e2e8f0;\n border-color: rgba(226, 232, 240, var(--border-opacity));\n font-size: 0.875rem;\n padding: 0.5rem;\n border-radius: 0.25rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n width: 6rem;\n}\n\n.space-y-1 > :not(template) ~ :not(template) {\n --space-y-reverse: 0 !important;\n margin-top: calc(0.25rem * calc(1 - var(--space-y-reverse))) !important;\n margin-bottom: calc(0.25rem * var(--space-y-reverse)) !important;\n}\n\n.space-y-2 > :not(template) ~ :not(template) {\n --space-y-reverse: 0 !important;\n margin-top: calc(0.5rem * calc(1 - var(--space-y-reverse))) !important;\n margin-bottom: calc(0.5rem * var(--space-y-reverse)) !important;\n}\n\n.space-x-2 > :not(template) ~ :not(template) {\n --space-x-reverse: 0 !important;\n margin-right: calc(0.5rem * var(--space-x-reverse)) !important;\n margin-left: calc(0.5rem * calc(1 - var(--space-x-reverse))) !important;\n}\n\n.space-y-4 > :not(template) ~ :not(template) {\n --space-y-reverse: 0 !important;\n margin-top: calc(1rem * calc(1 - var(--space-y-reverse))) !important;\n margin-bottom: calc(1rem * var(--space-y-reverse)) !important;\n}\n\n.space-x-4 > :not(template) ~ :not(template) {\n --space-x-reverse: 0 !important;\n margin-right: calc(1rem * var(--space-x-reverse)) !important;\n margin-left: calc(1rem * calc(1 - var(--space-x-reverse))) !important;\n}\n\n.bg-white {\n --bg-opacity: 1 !important;\n background-color: #fff !important;\n background-color: rgba(255, 255, 255, var(--bg-opacity)) !important;\n}\n\n.bg-gray-100 {\n --bg-opacity: 1 !important;\n background-color: #f7fafc !important;\n background-color: rgba(247, 250, 252, var(--bg-opacity)) !important;\n}\n\n.bg-gray-300 {\n --bg-opacity: 1 !important;\n background-color: #e2e8f0 !important;\n background-color: rgba(226, 232, 240, var(--bg-opacity)) !important;\n}\n\n.bg-gray-700 {\n --bg-opacity: 1 !important;\n background-color: #4a5568 !important;\n background-color: rgba(74, 85, 104, var(--bg-opacity)) !important;\n}\n\n.hover\\:bg-gray-200:hover {\n --bg-opacity: 1 !important;\n background-color: #edf2f7 !important;\n background-color: rgba(237, 242, 247, var(--bg-opacity)) !important;\n}\n\n.border-gray-200 {\n --border-opacity: 1 !important;\n border-color: #edf2f7 !important;\n border-color: rgba(237, 242, 247, var(--border-opacity)) !important;\n}\n\n.rounded {\n border-radius: 0.25rem !important;\n}\n\n.border {\n border-width: 1px !important;\n}\n\n.border-b {\n border-bottom-width: 1px !important;\n}\n\n.cursor-pointer {\n cursor: pointer !important;\n}\n\n.block {\n display: block !important;\n}\n\n.flex {\n display: flex !important;\n}\n\n.inline-flex {\n display: inline-flex !important;\n}\n\n.flex-row {\n flex-direction: row !important;\n}\n\n.flex-col {\n flex-direction: column !important;\n}\n\n.flex-col-reverse {\n flex-direction: column-reverse !important;\n}\n\n.flex-wrap {\n flex-wrap: wrap !important;\n}\n\n.items-center {\n align-items: center !important;\n}\n\n.justify-start {\n justify-content: flex-start !important;\n}\n\n.justify-end {\n justify-content: flex-end !important;\n}\n\n.justify-between {\n justify-content: space-between !important;\n}\n\n.flex-grow {\n flex-grow: 1 !important;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0 !important;\n}\n\n.font-bold {\n font-weight: 700 !important;\n}\n\n.h-auto {\n height: auto !important;\n}\n\n.h-full {\n height: 100% !important;\n}\n\n.text-xxs {\n font-size: 0.65rem !important;\n}\n\n.m-2 {\n margin: 0.5rem !important;\n}\n\n.my-auto {\n margin-top: auto !important;\n margin-bottom: auto !important;\n}\n\n.-mx-2 {\n margin-left: -0.5rem !important;\n margin-right: -0.5rem !important;\n}\n\n.mt-1 {\n margin-top: 0.25rem !important;\n}\n\n.mr-1 {\n margin-right: 0.25rem !important;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem !important;\n}\n\n.ml-1 {\n margin-left: 0.25rem !important;\n}\n\n.mt-2 {\n margin-top: 0.5rem !important;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem !important;\n}\n\n.mb-4 {\n margin-bottom: 1rem !important;\n}\n\n.focus\\:outline-none:focus {\n outline: 0 !important;\n}\n\n.p-1 {\n padding: 0.25rem !important;\n}\n\n.p-2 {\n padding: 0.5rem !important;\n}\n\n.p-4 {\n padding: 1rem !important;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem !important;\n}\n\n.fixed {\n position: fixed !important;\n}\n\n.relative {\n position: relative !important;\n}\n\n.sticky {\n position: -webkit-sticky !important;\n position: sticky !important;\n}\n\n.top-0 {\n top: 0 !important;\n}\n\n.focus\\:shadow-none:focus {\n box-shadow: none !important;\n}\n\n.text-black {\n --text-opacity: 1 !important;\n color: #000 !important;\n color: rgba(0, 0, 0, var(--text-opacity)) !important;\n}\n\n.text-white {\n --text-opacity: 1 !important;\n color: #fff !important;\n color: rgba(255, 255, 255, var(--text-opacity)) !important;\n}\n\n.text-gray-500 {\n --text-opacity: 1 !important;\n color: #a0aec0 !important;\n color: rgba(160, 174, 192, var(--text-opacity)) !important;\n}\n\n.text-gray-600 {\n --text-opacity: 1 !important;\n color: #718096 !important;\n color: rgba(113, 128, 150, var(--text-opacity)) !important;\n}\n\n.w-full {\n width: 100% !important;\n}\n\n.z-1 {\n z-index: 1 !important;\n}\n\n.z-20 {\n z-index: 20 !important;\n}\n\n.transform {\n --transform-translate-x: 0 !important;\n --transform-translate-y: 0 !important;\n --transform-rotate: 0 !important;\n --transform-skew-x: 0 !important;\n --transform-skew-y: 0 !important;\n --transform-scale-x: 1 !important;\n --transform-scale-y: 1 !important;\n transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;\n}\n',""])},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,r=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(e,t){var u,o=t.trim().replace(/^"(.*)"$/,(function(e,t){return t})).replace(/^'(.*)'$/,(function(e,t){return t}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(o)?e:(u=0===o.indexOf("//")?o:0===o.indexOf("/")?n+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(u)+")")}))}},function(e,t,n){"use strict";var r=n(25);function u(){}function o(){}o.resetWarningCache=u,e.exports=function(){function e(e,t,n,u,o,a){if(a!==r){var i=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 i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:u};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){var r=n(27);"string"==typeof r&&(r=[[e.i,r,""]]);var u={hmr:!0,transform:void 0,insertInto:void 0};n(7)(r,u);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(6)(!1)).push([e.i,"/* This code is subject to LICENSE in root of this repository */\n\n/* Used to detect in JavaScript if apps have loaded styles or not. */\n:root {\n --reach-dialog: 1;\n}\n\n[data-reach-dialog-overlay] {\n background: hsla(0, 0%, 0%, 0.33);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n}\n\n[data-reach-dialog-content] {\n width: 50vw;\n margin: 10vh auto;\n background: white;\n padding: 2rem;\n outline: none;\n}\n",""])},function(e,t,n){var r=n(29);"string"==typeof r&&(r=[[e.i,r,""]]);var u={hmr:!0,transform:void 0,insertInto:void 0};n(7)(r,u);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(6)(!1)).push([e.i,":root {\n --reach-tooltip: 1;\n}\n\n[data-reach-tooltip] {\n z-index: 1;\n pointer-events: none;\n position: absolute;\n padding: 0.25em 0.5em;\n box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);\n white-space: nowrap;\n font-size: 85%;\n background: #f0f0f0;\n color: #444;\n border: solid 1px #ccc;\n}\n",""])},function(e,t,n){var r=n(31);"string"==typeof r&&(r=[[e.i,r,""]]);var u={hmr:!0,transform:void 0,insertInto:void 0};n(7)(r,u);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(6)(!1)).push([e.i,"/* Used to detect in JavaScript if apps have loaded styles or not. */\n:root {\n --reach-menu-button: 1;\n}\n\n[data-reach-menu],\n[data-reach-menu-popover] {\n display: block;\n position: absolute;\n}\n\n[data-reach-menu][hidden],\n[data-reach-menu-popover][hidden] {\n display: none;\n}\n\n[data-reach-menu-list],\n[data-reach-menu-items] {\n display: block;\n white-space: nowrap;\n border: solid 1px hsla(0, 0%, 0%, 0.25);\n background: hsla(0, 100%, 100%, 0.99);\n outline: none;\n padding: 1rem 0;\n font-size: 85%;\n}\n\n[data-reach-menu-item] {\n display: block;\n user-select: none;\n}\n\n/*\n The dom structure of a MenuLink is reach-menu-item > a,\n so to target all items we can use `data-reach-menu-item`\n*/\n[data-reach-menu-item] {\n /*\n These are styled in one rule instead of something like a[data-reach-menu-item]\n and li[data-reach-menu-item] so that apps don't have to fight specificity and\n can style both li and a menu items with one rule,\n ie: `[data-selected] { background: red; }`.\n Otherwise they'd have to define two styles, one for a and one for li.\n */\n\n /* reach-menu-item */\n cursor: pointer;\n\n /* a */\n display: block;\n color: inherit;\n font: inherit;\n text-decoration: initial;\n\n /* both */\n padding: 5px 20px;\n}\n\n/* pseudo pseudo selector */\n[data-reach-menu-item][data-selected] {\n background: hsl(211, 81%, 36%);\n color: white;\n outline: none;\n}\n",""])},,,function(e,t,n){"use strict";n.r(t);var r=n(0),u=n.n(r),o=n(8),a=(n(21),n(3)),i=n.n(a),l=n(5),c=n.n(l);var s=({className:e="",rows:t=2,value:n,placeholder:u,isDisabled:o=!1,onChange:a})=>(e=e||"",r.createElement("textarea",{rows:t,className:`textarea ${e}`,placeholder:u,value:n,disabled:o,onChange:e=>a&&a(e.target.value,e)}));var f=({handlesetStringTokens:e,stringTokens:t,error:n,onUpdate:u})=>r.createElement("div",{className:"space-y-2"},r.createElement(s,{placeholder:"Enter JSON",rows:20,onChange:e,value:t}),r.createElement("div",null,n),r.createElement("button",{className:"button",type:"button",onClick:u},"Save & update"));var d=({selectionValues:e,tokens:t,removeTokenValues:n})=>{return r.createElement("div",{className:"space-y-2"},r.createElement("div",{className:"space-y-1"},Object.entries(e).map(([e,n])=>r.createElement("div",{key:e},r.createElement("code",{className:"flex space-x-2"},r.createElement("div",{style:{fontWeight:"bold"}},e),":"," ",r.createElement("div",{className:"p-1 bg-gray-700 rounded text-white text-xxs"},"$","string"==typeof n&&n.split(".").join("-")),r.createElement("div",{className:"text-gray-500"},`/* ${(e=>i.a.get(t,e))(n)} */`))))),r.createElement("button",{className:"button",type:"button",onClick:n},"Remove tokens from layer"))},p=(n(12),h()?u.a.useLayoutEffect:u.a.useEffect),m=w;"undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math&&self;function h(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function v(e,t){var n=Object(r.createContext)(t);return n.displayName=e,n}function b(e){return u.a.forwardRef(e)}function g(e){return e&&e.ownerDocument?e.ownerDocument:h()?document:null}function D(e){var t=e?g(e):null;return t?t.defaultView||window:null}function y(e){return!(!e||"[object Function]"!={}.toString.call(e))}function E(e){return"string"==typeof e}function C(){for(var e=arguments.length,t=new Array(e),n=0;n=0})).sort(te)},re=["button:enabled:not([readonly])","select:enabled:not([readonly])","textarea:enabled:not([readonly])","input:enabled:not([readonly])","a[href]","area[href]","iframe","object","embed","[tabindex]","[contenteditable]","[autofocus]"],ue=re.join(","),oe=ue+", [data-focus-guard]",ae=function(e,t){return e.reduce((function(e,n){return e.concat(Q(n.querySelectorAll(t?oe:ue)),n.parentNode?Q(n.parentNode.querySelectorAll(re.join(","))).filter((function(e){return e===n})):[])}),[])},ie=function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return n.push(t),t.parentNode&&e(t.parentNode,n),n},le=function(e,t){for(var n=ie(e),r=ie(t),u=0;u=0)return o}return!1},ce=function(e){return Q(e).filter((function(e){return function e(t){return!t||t===document||t.nodeType===Node.DOCUMENT_NODE||!((n=window.getComputedStyle(t,null))&&n.getPropertyValue&&("none"===n.getPropertyValue("display")||"hidden"===n.getPropertyValue("visibility")))&&e(t.parentNode);var n}(e)})).filter((function(e){return function(e){return!(("INPUT"===e.tagName||"BUTTON"===e.tagName)&&("hidden"===e.type||e.disabled))}(e)}))},se=function(e,t){return ne(ce(ae(e,t)),!0,t)},fe=function(e){return ce(function(e){var t=e.querySelectorAll("[data-autofocus-inside]");return Q(t).map((function(e){return ae([e])})).reduce((function(e,t){return e.concat(t)}),[])}(e))},de=function(e){return"INPUT"===e.tagName&&"radio"===e.type},pe=function(e,t){return t.filter(de).filter((function(t){return t.name===e.name})).filter((function(e){return e.checked}))[0]||e},me=function(e,t){return e.length>1&&de(e[t])&&e[t].name?e.indexOf(pe(e[t],e)):t},he=function(e){return e[0]&&e.length>1&&de(e[0])&&e[0].name?pe(e[0],e):e[0]},ve=function(e){return e&&e.dataset&&e.dataset.focusGuard},be=function(e){return!ve(e)},ge=function(e,t,n){var r=Y(e),u=Y(t),o=r[0],a=null;return u.filter(Boolean).forEach((function(e){a=le(a||e,e)||a,n.filter(Boolean).forEach((function(e){var t=le(o,e);t&&(a=!a||t.contains(a)?t:le(t,a))}))})),a},De=function(e,t){var n=document&&document.activeElement,r=J(e).filter(be),u=ge(n||e,e,r),o=se(r).filter((function(e){var t=e.node;return be(t)}));if(o[0]||(o=(a=r,ne(ce(ae(a)),!1)).filter((function(e){var t=e.node;return be(t)})))[0]){var a,i,l,c,s,f=se([u]).map((function(e){return e.node})),d=(i=f,l=o,c=new Map,l.forEach((function(e){return c.set(e.node,e)})),i.map((function(e){return c.get(e)})).filter(Boolean)),p=d.map((function(e){return e.node})),m=function(e,t,n,r,u){var o=e.length,a=e[0],i=e[o-1],l=ve(n);if(!(e.indexOf(n)>=0)){var c=t.indexOf(n),s=t.indexOf(r||c),f=e.indexOf(r),d=c-s,p=t.indexOf(a),m=t.indexOf(i),h=me(e,0),v=me(e,o-1);return-1===c||-1===f?e.indexOf(u&&u.length?he(u):he(e)):!d&&f>=0?f:c<=p&&l&&Math.abs(d)>1?v:c>=p&&l&&Math.abs(d)>1?h:d&&Math.abs(d)>1?f:c<=p?v:c>m?h:d?Math.abs(d)>1?f:(o+f+d)%o:void 0}}(p,f,n,t,p.filter((s=function(e){return e.reduce((function(e,t){return e.concat(fe(t))}),[])}(r),function(e){return!!e.autofocus||e.dataset&&!!e.dataset.autofocus||s.indexOf(e)>=0})));return void 0===m?m:d[m]}},ye=0,Ee=!1,Ce=function(e,t){var n,r=De(e,t);if(!Ee&&r){if(ye>2)return console.error("FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting"),Ee=!0,void setTimeout((function(){Ee=!1}),1);ye++,(n=r.node).focus(),n.contentWindow&&n.contentWindow.focus(),ye--}};function we(e){var t=window.setImmediate;void 0!==t?t(e):setTimeout(e,1)}var xe=function(){return document&&document.activeElement===document.body||X()},Fe=null,ke=null,Ae=null,Se=!1,Te=function(){return!0};function Be(e,t,n,r){var u=null,o=e;do{var a=r[o];if(a.guard)a.node.dataset.focusAutoGuard&&(u=a);else{if(!a.lockItem)break;if(o!==e)return;u=null}}while((o+=n)!==t);u&&(u.node.tabIndex=0)}var _e=function(e){return e&&"current"in e?e.current:e},Oe=function(){var e,t,n,r,u,o,a=!1;if(Fe){var i=Fe,l=i.observed,c=i.persistentFocus,s=i.autoFocus,f=i.shards,d=i.crossFrame,p=l||Ae&&Ae.portaledElement,m=document&&document.activeElement;if(p){var h=[p].concat(f.map(_e).filter(Boolean));if(m&&!function(e){return(Fe.whiteList||Te)(e)}(m)||(c||(d?Boolean(Se):"meanwhile"===Se)||!xe()||!ke&&s)&&(!p||ee(h)||(o=m,Ae&&Ae.portaledElement===o)||(document&&!ke&&m&&!s?(m.blur(),document.body.focus()):(a=Ce(h,ke),Ae={})),Se=!1,ke=document&&document.activeElement),document){var v=document&&document.activeElement,b=(t=J(e=h).filter(be),n=ge(e,e,t),r=se([n],!0),u=se(t).filter((function(e){var t=e.node;return be(t)})).map((function(e){return e.node})),r.map((function(e){var t=e.node;return{node:t,index:e.index,lockItem:u.indexOf(t)>=0,guard:ve(t)}}))),g=b.find((function(e){return e.node===v}));if(g){b.filter((function(e){var t=e.guard,n=e.node;return t&&n.dataset.focusAutoGuard})).forEach((function(e){return e.node.removeAttribute("tabIndex")}));var D=b.indexOf(g);Be(D,b.length,1,b),Be(D,-1,-1,b)}}}}return a},Pe=function(e){Oe()&&e&&(e.stopPropagation(),e.preventDefault())},Ne=function(){return we(Oe)},je=function(e){var t=e.target,n=e.currentTarget;n.contains(t)||(Ae={observerNode:n,portaledElement:t})},Re=function(){Se="just",setTimeout((function(){Se="meanwhile"}),0)},Ie=function(){document.addEventListener("focusin",Pe,!0),document.addEventListener("focusout",Ne),window.addEventListener("blur",Re)},Me=function(){document.removeEventListener("focusin",Pe,!0),document.removeEventListener("focusout",Ne),window.removeEventListener("blur",Re)};z.assignSyncMedium(je),U.assignMedium(Ne),V.assignMedium((function(e){return e({moveFocusInside:Ce,focusInside:ee})}));var Le=q((function(e){return e.filter((function(e){return!e.disabled}))}),(function(e){var t=e.slice(-1)[0];t&&!Fe&&Ie();var n=Fe,r=n&&t&&t.id===n.id;Fe=t,n&&!r&&(n.onDeactivation(),e.filter((function(e){return e.id===n.id})).length||n.returnFocus(!t)),t?(ke=null,r&&n.observed===t.observed||t.onActivation(),Oe(!0),we(Oe)):(Me(),ke=null)}))((function(){return null})),ze=r.forwardRef((function(e,t){return r.createElement(K,S({sideCar:Le,ref:t},e))})),Ue=K.propTypes||{},Ve=(Ue.sideCar,function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r=0||(u[n]=e[n]);return u}(Ue,["sideCar"]));ze.propTypes=Ve;var We=ze,He=L(),$e=function(){},Ke=r.forwardRef((function(e,t){var n=r.useRef(null),u=r.useState({onScrollCapture:$e,onWheelCapture:$e,onTouchMoveCapture:$e}),o=u[0],a=u[1],i=e.forwardProps,l=e.children,c=e.className,s=e.removeScrollBar,f=e.enabled,d=e.shards,p=e.sideCar,m=e.noIsolation,h=e.inert,v=e.allowPinchZoom,b=j(e,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom"]),g=p,D=N({ref:_([n,t])},b,o);return r.createElement(r.Fragment,null,f&&r.createElement(g,{sideCar:He,removeScrollBar:s,shards:d,noIsolation:m,inert:h,setCallbacks:a,allowPinchZoom:!!v,lockRef:n}),i?r.cloneElement(r.Children.only(l),D):r.createElement("div",N({},D,{className:c}),l))}));Ke.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},Ke.classNames={fullWidth:"width-before-scroll-bar",zeroRight:"right-scroll-bar-position"};var qe,Qe=function(e){var t=e.sideCar,n=j(e,["sideCar"]);if(!t)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var u=t.read();if(!u)throw new Error("Sidecar medium not found");return r.createElement(u,N({},n))};Qe.isSideCarExport=!0;var Ye=function(){return qe||n.nc};var Xe=function(){var e=0,t=null;return{add:function(n){var r,u;0==e&&(t=function(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var t=Ye();return t&&e.setAttribute("nonce",t),e}())&&(u=n,(r=t).styleSheet?r.styleSheet.cssText=u:r.appendChild(document.createTextNode(u)),function(e){(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}(t)),e++},remove:function(){!--e&&t&&(t.parentNode&&t.parentNode.removeChild(t),t=null)}}},Ge=function(){var e,t=(e=Xe(),function(t){r.useEffect((function(){return e.add(t),function(){e.remove()}}),[])});return function(e){var n=e.styles;return t(n),null}},Je={left:0,top:0,right:0,gap:0},Ze=function(e){return parseInt(e||"",10)||0},et=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return Je;var t=function(e){var t=window.getComputedStyle(document.body),n=t["padding"===e?"paddingLeft":"marginLeft"],r=t["padding"===e?"paddingTop":"marginTop"],u=t["padding"===e?"paddingRight":"marginRight"];return[Ze(n),Ze(r),Ze(u)]}(e),n=document.documentElement.clientWidth,r=window.innerWidth;return{left:t[0],top:t[1],right:t[2],gap:Math.max(0,r-n+t[2]-t[0])}},tt=Ge(),nt=function(e,t,n,r){var u=e.left,o=e.top,a=e.right,i=e.gap;return void 0===n&&(n="margin"),"\n .with-scroll-bars-hidden {\n overflow: hidden "+r+";\n padding-right: "+i+"px "+r+";\n }\n body {\n overflow: hidden "+r+";\n "+[t&&"position: relative "+r+";","margin"===n&&"\n padding-left: "+u+"px;\n padding-top: "+o+"px;\n padding-right: "+a+"px;\n margin-left:0;\n margin-top:0;\n margin-right: "+i+"px "+r+";\n ","padding"===n&&"padding-right: "+i+"px "+r+";"].filter(Boolean).join("")+"\n }\n \n .right-scroll-bar-position {\n right: "+i+"px "+r+";\n }\n \n .width-before-scroll-bar {\n margin-right: "+i+"px "+r+";\n }\n \n .right-scroll-bar-position .right-scroll-bar-position {\n right: 0 "+r+";\n }\n \n .width-before-scroll-bar .width-before-scroll-bar {\n margin-right: 0 "+r+";\n }\n"},rt=function(e){var t=r.useState(et(e.gapMode)),n=t[0],u=t[1];r.useEffect((function(){u(et(e.gapMode))}),[e.gapMode]);var o=e.noRelative,a=e.noImportant,i=e.gapMode,l=void 0===i?"margin":i;return r.createElement(tt,{styles:nt(n,!o,l,a?"":"!important")})},ut=function(e,t){var n=t;do{if(ot(e,n)){var r=at(e,n);if(r[1]>r[2])return!0}n=n.parentNode}while(n&&n!==document.body);return!1},ot=function(e,t){return"v"===e?function(e){var t=window.getComputedStyle(e);return"hidden"!==t.overflowY&&!(t.overflowY===t.overflowX&&"visible"===t.overflowY)}(t):function(e){var t=window.getComputedStyle(e);return"hidden"!==t.overflowX&&!(t.overflowY===t.overflowX&&"visible"===t.overflowX)}(t)},at=function(e,t){return"v"===e?[(n=t).scrollTop,n.scrollHeight,n.clientHeight]:function(e){return[e.scrollLeft,e.scrollWidth,e.clientWidth]}(t);var n},it=function(e,t,n,r,u){var o=r,a=n.target,i=t.contains(a),l=!1,c=o>0,s=0,f=0;do{var d=at(e,a),p=d[0],m=d[1]-d[2]-p;(p||m)&&ot(e,a)&&(s+=m,f+=p),a=a.parentNode}while(!i&&a!==document.body||i&&(t.contains(a)||t===a));return c&&(u&&0===s||!u&&o>s)?l=!0:!c&&(u&&0===f||!u&&-o>f)&&(l=!0),l},lt=!1;if("undefined"!=typeof window)try{var ct=Object.defineProperty({},"passive",{get:function(){return lt=!0,!0}});window.addEventListener("test",ct,ct),window.removeEventListener("test",ct,ct)}catch(e){lt=!1}var st=!!lt&&{passive:!1},ft=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},dt=function(e){return[e.deltaX,e.deltaY]},pt=function(e){return e&&"current"in e?e.current:e},mt=function(e,t){return e[0]===t[0]&&e[1]===t[1]},ht=function(e){return"\n .block-interactivity-"+e+" {pointer-events: none;}\n .allow-interactivity-"+e+" {pointer-events: all;}\n"},vt=0,bt=[];var gt,Dt=(gt=function(e){var t=r.useRef([]),n=r.useRef([0,0]),u=r.useRef(),o=r.useState(vt++)[0],a=r.useState((function(){return Ge()}))[0],i=r.useRef(e);r.useEffect((function(){i.current=e}),[e]),r.useEffect((function(){if(e.inert){document.body.classList.add("block-interactivity-"+o);var t=[e.lockRef.current].concat((e.shards||[]).map(pt)).filter(Boolean);return t.forEach((function(e){return e.classList.add("allow-interactivity-"+o)})),function(){document.body.classList.remove("block-interactivity-"+o),t.forEach((function(e){return e.classList.remove("allow-interactivity-"+o)}))}}}),[e.inert,e.lockRef.current,e.shards]);var l=r.useCallback((function(e,t){if("touches"in e&&2===e.touches.length)return!i.current.allowPinchZoom;var r,o=ft(e),a=n.current,l="deltaX"in e?e.deltaX:a[0]-o[0],c="deltaY"in e?e.deltaY:a[1]-o[1],s=e.target,f=Math.abs(l)>Math.abs(c)?"h":"v",d=ut(f,s);if(!d)return!0;if(d?r=f:(r="v"===f?"h":"v",d=ut(f,s)),!d)return!1;if(!u.current&&"changedTouches"in e&&(l||c)&&(u.current=r),!r)return!0;var p=u.current||r;return it(p,t,e,"h"==p?l:c,!0)}),[]),c=r.useCallback((function(e){var n=e;if(bt.length&&bt[bt.length-1]===a){var r="deltaY"in n?dt(n):ft(n),u=t.current.filter((function(e){return e.name===n.type&&e.target===n.target&&mt(e.delta,r)}))[0];if(u&&u.should)n.preventDefault();else if(!u){var o=(i.current.shards||[]).map(pt).filter(Boolean).filter((function(e){return e.contains(n.target)}));(o.length>0?l(n,o[0]):!i.current.noIsolation)&&n.preventDefault()}}}),[]),s=r.useCallback((function(e,n,r,u){var o={name:e,delta:n,target:r,should:u};t.current.push(o),setTimeout((function(){t.current=t.current.filter((function(e){return e!==o}))}),1)}),[]),f=r.useCallback((function(e){n.current=ft(e),u.current=void 0}),[]),d=r.useCallback((function(t){s(t.type,dt(t),t.target,l(t,e.lockRef.current))}),[]),p=r.useCallback((function(t){s(t.type,ft(t),t.target,l(t,e.lockRef.current))}),[]);r.useEffect((function(){return bt.push(a),e.setCallbacks({onScrollCapture:d,onWheelCapture:d,onTouchMoveCapture:p}),document.addEventListener("wheel",c,st),document.addEventListener("touchmove",c,st),document.addEventListener("touchstart",f,st),function(){bt=bt.filter((function(e){return e!==a})),document.removeEventListener("wheel",c,st),document.removeEventListener("touchmove",c,st),document.removeEventListener("touchstart",f,st)}}),[]);var m=e.removeScrollBar,h=e.inert;return r.createElement(r.Fragment,null,h?r.createElement(a,{styles:ht(o)}):null,m?r.createElement(rt,{gapMode:"margin"}):null)},He.useMedium(gt),Qe),yt=r.forwardRef((function(e,t){return r.createElement(Ke,N({},e,{ref:t,sideCar:Dt}))}));yt.classNames=Ke.classNames;var Et=yt;function Ct(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r=0||(u[n]=e[n]);return u}B.a.bool,B.a.func;var wt=Object(r.forwardRef)((function(e,t){var n=e.isOpen,o=void 0===n||n,a=Ct(e,["isOpen"]);return Object(r.useEffect)((function(){return m("dialog")}),[]),Object(r.useEffect)((function(){o?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[o]),o?u.a.createElement(A,{"data-reach-dialog-wrapper":""},u.a.createElement(xt,Object.assign({ref:t},a))):null}));var xt=Object(r.forwardRef)((function(e,t){var n=e.allowPinchZoom,o=e.initialFocusRef,a=e.onClick,i=e.onDismiss,l=void 0===i?w:i,c=e.onMouseDown,s=e.onKeyDown,f=e.unstable_lockFocusAcrossFrames,d=void 0===f||f,p=Ct(e,["allowPinchZoom","initialFocusRef","onClick","onDismiss","onMouseDown","onKeyDown","unstable_lockFocusAcrossFrames"]),m=Object(r.useRef)(null),h=Object(r.useRef)(null),v=x(h,t),b=Object(r.useCallback)((function(){o&&o.current&&o.current.focus()}),[o]);return Object(r.useEffect)((function(){return h.current?function(e){var t=[],n=[],r=g(e)||document;if(!e)return w;return Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var u,o;if(r!==(null===(u=e.parentNode)||void 0===u?void 0:null===(o=u.parentNode)||void 0===o?void 0:o.parentNode)){var a=r.getAttribute("aria-hidden");null!==a&&"false"!==a||(t.push(a),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=t[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}}(h.current):void 0}),[]),u.a.createElement(We,{autoFocus:!0,returnFocus:!0,onActivation:b,crossFrame:d},u.a.createElement(Et,{allowPinchZoom:n},u.a.createElement("div",Object.assign({},p,{ref:v,"data-reach-dialog-overlay":"",onClick:k(a,(function(e){m.current===e.target&&(e.stopPropagation(),l(e))})),onKeyDown:k(s,(function(e){"Escape"===e.key&&(e.stopPropagation(),l(e))})),onMouseDown:k(c,(function(e){m.current=e.target}))}))))}));var Ft=Object(r.forwardRef)((function(e,t){var n=e.onClick,r=(e.onKeyDown,Ct(e,["onClick","onKeyDown"]));return u.a.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},r,{ref:t,"data-reach-dialog-content":"",onClick:k(n,(function(e){e.stopPropagation()}))}))}));n(26);var kt=({isOpen:e,close:t,children:n})=>r.createElement(wt,{isOpen:e,onDismiss:t},r.createElement(Ft,null,n));var At=({size:e="",children:t})=>r.createElement("p",{className:`flex items-center heading ${"small"===e?"heading-small":""}`},t);const St={edit:()=>r.createElement("svg",{width:"15",height:"16",viewBox:"0 0 15 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("rect",{x:"10.9999",width:"1.33332",height:"15.9999",fill:"black"}),r.createElement("rect",{x:"3.5",y:"15.9999",width:"1.33332",height:"15.9999",transform:"rotate(-180 3.5 15.9999)",fill:"black"}),r.createElement("circle",{cx:"12",cy:"6",r:"2.5",fill:"white",stroke:"black"}),r.createElement("circle",{cx:"3",cy:"11",r:"2.5",fill:"white",stroke:"black"})),add:()=>r.createElement("svg",{width:"17",height:"17",viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.27267 0H7.72722V7.72725L0 7.72725V9.2727H7.72722V17H9.27267V9.2727H17V7.72725L9.27267 7.72725V0Z",fill:"#333333"})),loading:()=>r.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M12 2V6",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M12 18V22",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M4.93005 4.93005L7.76005 7.76005",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M16.24 16.24L19.07 19.07",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M2 12H6",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M18 12H22",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M4.93005 19.07L7.76005 16.24",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M16.24 7.76005L19.07 4.93005",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})),style:()=>r.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 4V2H12V4H14V5H12V7H11V5H9V4H11ZM2.6875 4.45833C2.6875 5.43634 3.48033 6.22917 4.45833 6.22917C5.43634 6.22917 6.22917 5.43634 6.22917 4.45833C6.22917 3.48033 5.43634 2.6875 4.45833 2.6875C3.48033 2.6875 2.6875 3.48033 2.6875 4.45833ZM9.77087 11.5416C9.77087 12.5196 10.5637 13.3124 11.5417 13.3124C12.5197 13.3124 13.3125 12.5196 13.3125 11.5416C13.3125 10.5636 12.5197 9.77077 11.5417 9.77077C10.5637 9.77077 9.77087 10.5636 9.77087 11.5416ZM2.6875 11.5416C2.6875 12.5196 3.48033 13.3124 4.45833 13.3124C5.43634 13.3124 6.22917 12.5196 6.22917 11.5416C6.22917 10.5636 5.43634 9.77077 4.45833 9.77077C3.48033 9.77077 2.6875 10.5636 2.6875 11.5416Z",fill:"black",fillOpacity:"0.8"})),help:()=>r.createElement("svg",{width:"17",height:"17",viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M8.35612 14.8729C12.038 14.8729 15.0228 11.8881 15.0228 8.20622C15.0228 4.52432 12.038 1.53955 8.35612 1.53955C4.67422 1.53955 1.68945 4.52432 1.68945 8.20622C1.68945 11.8881 4.67422 14.8729 8.35612 14.8729Z",stroke:"black",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M6.41626 6.20595C6.573 5.76039 6.88236 5.38468 7.28956 5.14537C7.69676 4.90605 8.17552 4.81857 8.64104 4.89842C9.10656 4.97827 9.5288 5.2203 9.83298 5.58163C10.1372 5.94297 10.3036 6.40029 10.3029 6.87261C10.3029 8.20595 8.30293 8.87261 8.30293 8.87261",stroke:"black",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M8.3562 11.5396H8.36287",stroke:"black",strokeLinecap:"round",strokeLinejoin:"round"})),github:()=>r.createElement("svg",{version:"1.1",x:"0px",y:"0px",width:"18.94px",height:"18.47px",viewBox:"0 0 18.94 18.47"},r.createElement("path",{d:"M9.47,0C4.24,0,0,4.24,0,9.47c0,4.18,2.71,7.73,6.47,8.98\n\tc0.47,0.09,0.65-0.21,0.65-0.46c0-0.22-0.01-0.82-0.01-1.61c-2.63,0.57-3.19-1.27-3.19-1.27c-0.43-1.09-1.05-1.38-1.05-1.38\n\tc-0.86-0.59,0.07-0.58,0.07-0.58c0.95,0.07,1.45,0.98,1.45,0.98c0.84,1.45,2.22,1.03,2.76,0.79c0.09-0.61,0.33-1.03,0.6-1.27\n\tc-2.1-0.24-4.31-1.05-4.31-4.68c0-1.03,0.37-1.88,0.97-2.54c-0.1-0.24-0.42-1.2,0.09-2.51c0,0,0.79-0.25,2.6,0.97\n\tc0.76-0.21,1.57-0.32,2.37-0.32c0.8,0,1.61,0.11,2.37,0.32c1.81-1.23,2.6-0.97,2.6-0.97c0.52,1.3,0.19,2.27,0.09,2.51\n\tc0.61,0.66,0.97,1.51,0.97,2.54c0,3.64-2.21,4.44-4.32,4.67c0.34,0.29,0.64,0.87,0.64,1.75c0,1.27-0.01,2.29-0.01,2.6\n\tc0,0.25,0.17,0.55,0.65,0.46c3.76-1.25,6.47-4.8,6.47-8.98C18.94,4.24,14.7,0,9.47,0z"}))};var Tt=({name:e})=>{const t=St[e];return r.createElement(t,null)};var Bt=({name:e,required:t=!1,tabindex:n=null,label:u,full:o,onChange:a,value:i,type:l})=>r.createElement("label",{htmlFor:e,className:"text-xxs font-bold block"},r.createElement("div",null,u),r.createElement("input",{tabIndex:n,type:l,value:i,className:`input ${o&&"w-full"}`,name:e,onChange:a,required:t}));var _t=({submitTokenValue:e,explainer:t="",property:n,setShowEditForm:u,isPristine:o,initialToken:a,initialName:i,path:l})=>{const c={token:a,name:i,path:l},[s,f]=r.useState(c);r.useEffect(()=>()=>{u(!1)},[u]);const d=e=>{e.persist(),f(t=>Object.assign(Object.assign({},t),{[e.target.name]:e.target.value}))};return r.createElement("form",{onSubmit:t=>{t.preventDefault(),e(s),u(!1)},className:"space-y-4 border p-2 border-gray-200 rounded"},r.createElement(Bt,{required:!0,full:!0,label:"Name",value:s.name,onChange:d,type:"text",name:"name"}),r.createElement("div",null,r.createElement(Bt,{full:!0,label:n,value:s.token,onChange:d,type:"text",name:"token",required:!0}),t&&r.createElement("div",{className:"mt-1 text-xxs text-gray-600"},t)),r.createElement("div",{className:"flex space-x-2 justify-end"},r.createElement("button",{className:"button button-link",type:"button",onClick:()=>{u(!1)}},"Cancel"),r.createElement("button",{className:"button button-primary",type:"submit"},o?"Create":"Update")))},Ot=!1,Pt=0,Nt=function(){return++Pt},jt=function(e){var t=e||(Ot?Nt():null),n=Object(r.useState)(t),u=n[0],o=n[1];return p((function(){null===u&&o(Nt())}),[]),Object(r.useEffect)((function(){!1===Ot&&(Ot=!0)}),[]),null!=u?String(u):void 0};var Rt,It=Object(r.forwardRef)((function(e,t){return u.a.createElement("span",Object.assign({ref:t,style:{border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"}},e))})),Mt=["bottom","height","left","right","top","width"],Lt=new Map,zt=function e(){var t=[];Lt.forEach((function(e,n){var r,u,o=n.getBoundingClientRect();r=o,u=e.rect,void 0===r&&(r={}),void 0===u&&(u={}),Mt.some((function(e){return r[e]!==u[e]}))&&(e.rect=o,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),Rt=window.requestAnimationFrame(e)};var Ut=function(e,t){return{observe:function(){var n=0===Lt.size;Lt.has(e)?Lt.get(e).callbacks.push(t):Lt.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),n&&zt()},unobserve:function(){var n=Lt.get(e);if(n){var r=n.callbacks.indexOf(t);r>=0&&n.callbacks.splice(r,1),n.callbacks.length||Lt.delete(e),Lt.size||cancelAnimationFrame(Rt)}}}};function Vt(e,t,n){void 0===t&&(t=!0);var u=Object(r.useRef)(!1),o=Object(r.useState)(null),a=o[0],i=o[1],l=Object(r.useRef)(null);return p((function(){var r=function(){l.current&&l.current.unobserve()};return e.current?(l.current||(l.current=Ut(e.current,(function(e){n&&n(e),i(e)}))),u.current||(u.current=!0,i(e.current.getBoundingClientRect())),t&&l.current.observe(),r):(console.warn("You need to place the ref"),r)}),[t,n]),a}var Wt,Ht,$t,Kt,qt,Qt;function Yt(){return(Yt=Object.assign||function(e){for(var t=1;t=0||(u[n]=e[n]);return u}var Gt,Jt,Zt=100,en=500,tn="IDLE",nn="VISIBLE",rn="LEAVING_VISIBLE",un="BLUR",on="FOCUS",an="MOUSE_DOWN",ln="MOUSE_ENTER",cn="MOUSE_LEAVE",sn="MOUSE_MOVE",fn="REST",dn="SELECT_WITH_KEYBOARD",pn="TIME_COMPLETE",mn={initial:tn,states:(Qt={},Qt.IDLE={enter:gn,on:(Wt={},Wt[ln]="FOCUSED",Wt[on]=nn,Wt)},Qt.FOCUSED={enter:function(){window.clearTimeout(Gt),Gt=window.setTimeout((function(){return Fn(fn)}),Zt)},leave:function(){window.clearTimeout(Gt)},on:(Ht={},Ht[sn]="FOCUSED",Ht[cn]=tn,Ht[an]="DISMISSED",Ht[un]=tn,Ht[fn]=nn,Ht)},Qt[nn]={on:($t={},$t[on]="FOCUSED",$t[ln]="FOCUSED",$t[cn]=rn,$t[un]=rn,$t[an]="DISMISSED",$t[dn]="DISMISSED",$t.GLOBAL_MOUSE_MOVE=rn,$t)},Qt[rn]={enter:function(){window.clearTimeout(Jt),Jt=window.setTimeout((function(){return Fn(pn)}),en)},leave:function(){window.clearTimeout(Jt),gn()},on:(Kt={},Kt[ln]=nn,Kt[on]=nn,Kt[pn]=tn,Kt)},Qt.DISMISSED={leave:function(){hn.id=null},on:(qt={},qt[cn]=tn,qt[un]=tn,qt)},Qt)},hn={id:null},vn=mn.initial,bn=[];function gn(){hn.id=null}function Dn(e){var t=void 0===e?{}:e,n=t.id,u=t.onMouseEnter,o=t.onMouseMove,a=t.onMouseLeave,i=t.onFocus,l=t.onBlur,c=t.onKeyDown,s=t.onMouseDown,f=t.ref,d=t.DEBUG_STYLE,p=String(jt(n)),h=Object(r.useState)(!!d||null!==p&&(hn.id===p&&vn===nn)),v=h[0],b=h[1],D=Object(r.useRef)(null),y=x(f,D),E=Vt(D,v);return Object(r.useEffect)((function(){return e=function(){hn.id!==p||vn!==nn&&vn!==rn?b(!1):b(!0)},bn.push(e),function(){bn.splice(bn.indexOf(e),1)};var e}),[p]),Object(r.useEffect)((function(){return m("tooltip")}),[]),Object(r.useEffect)((function(){var e=g(D.current)||document;function t(e){"Escape"!==e.key&&"Esc"!==e.key||vn!==nn||Fn(dn)}return e.addEventListener("keydown",t),function(){return e.removeEventListener("keydown",t)}}),[]),[{"aria-describedby":v?C("tooltip",p):void 0,"data-reach-tooltip-trigger":"",ref:y,onMouseEnter:k(u,(function(){Fn(ln,{id:p})})),onMouseMove:k(o,(function(){Fn(sn,{id:p})})),onFocus:k(i,(function(){window.__REACH_DISABLE_TOOLTIPS||Fn(on,{id:p})})),onBlur:k(l,(function(){hn.id===p&&Fn(un)})),onMouseLeave:k(a,(function(){Fn(cn)})),onKeyDown:k(c,(function(e){"Enter"!==e.key&&" "!==e.key||Fn(dn)})),onMouseDown:k(s,(function(){hn.id===p&&Fn(an)}))},{id:p,triggerRect:E,isVisible:v},v]}var yn=b((function(e,t){var n=e.children,o=e.label,a=e.ariaLabel,i=e.id,l=e.DEBUG_STYLE,c=Xt(e,["children","label","ariaLabel","id","DEBUG_STYLE"]),s=r.Children.only(n),f=Dn({id:i,onMouseEnter:s.props.onMouseEnter,onMouseMove:s.props.onMouseMove,onMouseLeave:s.props.onMouseLeave,onFocus:s.props.onFocus,onBlur:s.props.onBlur,onKeyDown:s.props.onKeyDown,onMouseDown:s.props.onMouseDown,ref:s.ref,DEBUG_STYLE:l}),d=f[0],p=f[1];return u.a.createElement(r.Fragment,null,Object(r.cloneElement)(s,d),u.a.createElement(En,Object.assign({ref:t,label:o,"aria-label":a},p,c)))}));var En=b((function(e,t){var n=e.label,r=e.ariaLabel,o=e.isVisible,a=e.id,i=Xt(e,["label","ariaLabel","isVisible","id"]);return o?u.a.createElement(A,null,u.a.createElement(Cn,Object.assign({ref:t,label:n,"aria-label":r,isVisible:o},i,{id:C("tooltip",String(a))}))):null}));var Cn=b((function(e,t){var n=e.ariaLabel,o=e["aria-label"],a=e.as,i=void 0===a?"div":a,l=e.id,c=e.isVisible,s=e.label,f=e.position,d=void 0===f?xn:f,p=e.style,m=e.triggerRect,h=Xt(e,["ariaLabel","aria-label","as","id","isVisible","label","position","style","triggerRect"]),v=null!=(o||n),b=Object(r.useRef)(null),g=x(t,b),D=Vt(b,c);return u.a.createElement(r.Fragment,null,u.a.createElement(i,Object.assign({role:v?void 0:"tooltip"},h,{ref:g,"data-reach-tooltip":"",id:v?void 0:l,style:Yt(Yt({},p),wn(d,m,D))}),s),v&&u.a.createElement(It,{role:"tooltip",id:l},o||n))}));function wn(e,t,n){return!n?{visibility:"hidden"}:e(t,n)}var xn=function(e,t){var n=function(e){if(!h())return{width:0,height:0};var t=e?g(e):document,n=e?D(e):window;return{width:t.documentElement.clientWidth||n.innerWidth,height:t.documentElement.clientHeight||n.innerHeight}}(),r=n.width,u=n.height;if(!e||!t)return{};var o={top:e.top-t.height<0,right:rr.createElement(kn,{label:e},t),Sn=n(1),Tn=n.n(Sn);function Bn(){return(Bn=Object.assign||function(e){for(var t=1;t=0||(u[n]=e[n]);return u}(e,["targetRef","position","unstable_observableRefs"]),s=Object(r.useRef)(null),f=Vt(s),d=Vt(n),p=x(s,t);return function(e,t){var n=g(e.current);function u(r){"Tab"===r.key&&t.current&&0===Tn()(t.current).length||("Tab"===r.key&&r.shiftKey?function(e){if(!e.shiftKey)return;var t=o();return e.target===t}(r)?function(e){var n=t.current&&Tn()(t.current),r=n&&n[n.length-1];r&&(e.preventDefault(),r.focus())}(r):function(e){var n=t.current&&Tn()(t.current);if(n)return 0!==n.length&&e.target===n[0];return!1}(r)?function(t){var n;t.preventDefault(),null===(n=e.current)||void 0===n||n.focus()}(r):function(e){return!!n&&e.target===Tn()(n)[0]}(r)&&i():"Tab"===r.key&&(e.current&&n&&e.current===n.activeElement?function(e){var n=t.current&&Tn()(t.current);n&&n[0]&&(e.preventDefault(),n[0].focus())}(r):function(){if(t.current&&n&&t.current.contains(n.activeElement||null)){var e=t.current&&Tn()(t.current);return Boolean(e&&n&&e[e.length-1]===n.activeElement)}return!1}()?function(e){var t=o();t&&(e.preventDefault(),t.focus())}(r):function(e){var r=n&&t.current?Tn()(n).filter((function(e){return!t.current.contains(e)})):null;return!!r&&e.target===r[r.length-1]}(r)&&i()))}function o(){var t=n&&Tn()(n),r=t&&e.current?t.indexOf(e.current):-1;return t&&t[r+1]}Object(r.useEffect)((function(){if(n)return n.addEventListener("keydown",u),function(){n.removeEventListener("keydown",u)}}),[]);var a=[];function i(){var e=t.current&&Tn()(t.current);e&&(e.forEach((function(e){a.push([e,e.tabIndex]),e.tabIndex=-1})),n&&n.addEventListener("focusin",l))}function l(){n&&n.removeEventListener("focusin",l),a.forEach((function(e){var t=e[0],n=e[1];t.tabIndex=n}))}}(n,s),u.a.createElement("div",Object.assign({"data-reach-popover":"",ref:p},c,{style:Bn(Bn({position:"absolute"},Pn.apply(void 0,[a,d,f].concat(l))),c.style)}))}));function Pn(e,t,n){if(!n)return{visibility:"hidden"};for(var r=arguments.length,u=new Array(r>3?r-3:0),o=3;o=0||(u[n]=e[n]);return u}(e,["element","index"]);t&&a((function(e){var u;if(null!=n)u=[].concat(e,[Mn(Mn({},r),{},{element:t,index:n})]);else if(0===e.length)u=[].concat(e,[Mn(Mn({},r),{},{element:t,index:0})]);else if(e.find((function(e){return e.element===t})))u=e;else{var o=e.findIndex((function(e){return!(!e.element||!t)&&Boolean(e.element.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_PRECEDING)})),a=Mn(Mn({},r),{},{element:t,index:o});u=-1===o?[].concat(e,[a]):[].concat(e.slice(0,o),[a],e.slice(o))}return u.map((function(e,t){return Mn(Mn({},e),{},{index:t})}))}))}),[]),l=Object(r.useCallback)((function(e){e&&a((function(t){return t.filter((function(t){return e!==t.element}))}))}),[]);return u.a.createElement(t.Provider,{value:Object(r.useMemo)((function(){return{descendants:o,registerDescendant:i,unregisterDescendant:l}}),[o,i,l])},n)}function Un(){return(Un=Object.assign||function(e){for(var t=1;t=0||(u[n]=e[n]);return u}var Wn="CLEAR_SELECTION_INDEX",Hn="CLICK_MENU_ITEM",$n="CLOSE_MENU",Kn="OPEN_MENU_AT_FIRST_ITEM",qn="OPEN_MENU_CLEARED",Qn="SEARCH_FOR_ITEM",Yn="SELECT_ITEM_AT_INDEX",Xn="SET_BUTTON_ID",Gn=Ln("MenuDescendantContext"),Jn=v("MenuContext",{}),Zn={buttonId:null,isExpanded:!1,typeaheadQuery:"",selectionIndex:-1},er=function(e){var t=e.id,n=e.children,o=Object(r.useRef)(null),a=Object(r.useRef)(null),i=Object(r.useRef)(null),l=Object(r.useState)([]),c=l[0],s=l[1],f=Object(r.useReducer)(sr,Zn),d=f[0],p=f[1],h=jt(t),v=t||C("menu",h),b=Object(r.useRef)(!1),g=Object(r.useRef)([]),D={buttonRef:o,dispatch:p,menuId:v,menuRef:a,popoverRef:i,buttonClickedRef:b,selectCallbacks:g,state:d};return Object(r.useEffect)((function(){d.isExpanded?(window.__REACH_DISABLE_TOOLTIPS=!0,window.requestAnimationFrame((function(){cr(a.current)}))):window.__REACH_DISABLE_TOOLTIPS=!1}),[d.isExpanded]),Object(r.useEffect)((function(){return m("menu-button")}),[]),u.a.createElement(zn,{context:Gn,items:c,set:s},u.a.createElement(Jn.Provider,{value:D},y(n)?n({isExpanded:d.isExpanded,isOpen:d.isExpanded}):n))};var tr=b((function(e,t){var n=e.as,o=void 0===n?"button":n,a=e.onKeyDown,i=e.onMouseDown,l=e.id,c=Vn(e,["as","onKeyDown","onMouseDown","id"]),s=Object(r.useContext)(Jn),f=s.buttonRef,d=s.buttonClickedRef,p=s.menuId,m=s.state,h=m.buttonId,v=m.isExpanded,b=s.dispatch,g=x(f,t);return Object(r.useEffect)((function(){var e=null!=l?l:p?C("menu-button",p):"menu-button";h!==e&&b({type:Xn,payload:e})}),[h,b,l,p]),u.a.createElement(o,Object.assign({"aria-expanded":!!v||void 0,"aria-haspopup":!0,"aria-controls":p},c,{ref:g,"data-reach-menu-button":"",id:h||void 0,onKeyDown:k(a,(function(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),b({type:Kn});break;case"Enter":case" ":b({type:Kn})}})),onMouseDown:k(i,(function(e){v||(d.current=!0),lr(e.nativeEvent)||b(v?{type:$n,payload:{buttonRef:f}}:{type:qn})})),type:"button"}))}));var nr=b((function(e,t){var n=e.as,o=e.index,a=e.isLink,i=void 0!==a&&a,l=e.onClick,c=e.onDragStart,s=e.onMouseDown,f=e.onMouseEnter,d=e.onMouseLeave,m=e.onMouseMove,h=e.onMouseUp,v=e.onSelect,b=e.valueText,D=Vn(e,["as","index","isLink","onClick","onDragStart","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onSelect","valueText"]),y=Object(r.useContext)(Jn),E=y.buttonRef,C=y.dispatch,w=y.selectCallbacks,F=y.state.selectionIndex,A=Object(r.useRef)(null),S=Object(r.useState)(b||""),T=S[0],B=S[1],_=x(t,Object(r.useCallback)((function(e){e&&(A.current=e,(!b||e.textContent&&T!==e.textContent)&&B(e.textContent))}),[T,b])),O=Object(r.useRef)(!1),P=function(e,t,n){var u=Object(r.useState)()[1],o=Object(r.useContext)(t),a=o.registerDescendant,i=o.unregisterDescendant,l=o.descendants;return p((function(){return e.element||u({}),a(Mn(Mn({},e),{},{index:n})),function(){return i(e.element)}}),[].concat(Object.values(e))),null!=n?n:l.findIndex((function(t){return t.element===e.element}))}({element:A.current,key:T,isLink:i},Gn,o),N=P===F;function j(){cr(E.current),v&&v(),C({type:Hn})}return w.current[P]=v,Object(r.useEffect)((function(){var e=g(A.current)||document,t=function(){return O.current=!1};return e.addEventListener("mouseup",t),function(){return e.removeEventListener("mouseup",t)}}),[]),u.a.createElement(n,Object.assign({role:"menuitem",id:ir(P),tabIndex:-1},D,{ref:_,"data-reach-menu-item":"","data-selected":N?"":void 0,"data-valuetext":T,onClick:k(l,(function(e){i&&!lr(e.nativeEvent)&&j()})),onDragStart:k(c,(function(e){i&&e.preventDefault()})),onMouseDown:k(s,(function(e){lr(e.nativeEvent)||(i?O.current=!0:e.preventDefault())})),onMouseEnter:k(f,(function(e){N||null==P||C({type:Yn,payload:{index:P}})})),onMouseLeave:k(d,(function(e){C({type:Wn})})),onMouseMove:k(m,(function(e){N||null==P||C({type:Yn,payload:{index:P}})})),onMouseUp:k(h,(function(e){lr(e.nativeEvent)||(i?O.current?O.current=!1:A.current&&A.current.click():j())}))}))})),rr=b((function(e,t){var n=e.as,r=void 0===n?"div":n,o=Vn(e,["as"]);return u.a.createElement(nr,Object.assign({},o,{ref:t,as:r}))}));var ur=b((function(e,t){var n,o=e.as,a=void 0===o?"div":o,i=e.children,l=(e.id,e.onKeyDown),c=Vn(e,["as","children","id","onKeyDown"]),s=Object(r.useContext)(Jn),f=s.menuId,d=s.dispatch,p=s.buttonRef,m=s.menuRef,h=s.selectCallbacks,v=s.state,b=v.isExpanded,g=v.buttonId,D=v.selectionIndex,y=v.typeaheadQuery,C=(n=Gn,Object(r.useContext)(n).descendants),w=x(m,t);Object(r.useEffect)((function(){var e=function(e,t){void 0===t&&(t="");if(!t)return null;var n=e.find((function(e){var n,r,u=e.element;return null==u?void 0:null===(n=u.dataset)||void 0===n?void 0:null===(r=n.valuetext)||void 0===r?void 0:r.toLowerCase().startsWith(t)}));return n?e.indexOf(n):null}(C,y);y&&null!=e&&d({type:Yn,payload:{index:e}});var t=window.setTimeout((function(){return y&&d({type:Qn,payload:""})}),1e3);return function(){return window.clearTimeout(t)}}),[d,C,y]);var A=F(C.length),S=F(C[D]),T=F(D);Object(r.useEffect)((function(){D>C.length-1?d({type:Yn,payload:{index:C.length-1}}):A!==C.length&&D>-1&&S&&T===D&&C[D]!==S&&d({type:Yn,payload:{index:C.findIndex((function(e){return e.key===S.key}))}})}),[d,C,A,S,T,D]);var B=k((function(e){var t=e.key;if(b)switch(t){case"Enter":case" ":var n=C.find((function(e){return e.index===D}));n&&(n.isLink&&n.element?n.element.click():(e.preventDefault(),cr(p.current),h.current[n.index]&&h.current[n.index](),d({type:Hn})));break;case"Escape":cr(p.current),d({type:$n,payload:{buttonRef:p}});break;case"Tab":e.preventDefault();break;default:if(E(t)&&1===t.length){var r=y+t.toLowerCase();d({type:Qn,payload:r})}}}),function(e,t){var n=Object(r.useContext)(e).descendants,u=t.callback,o=t.currentIndex,a=t.filter,i=t.key,l=void 0===i?"index":i,c=t.orientation,s=void 0===c?"vertical":c,f=t.rotate,d=void 0===f||f,p=t.rtl,m=void 0!==p&&p,h=null!=o?o:-1;return function(e){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","PageUp","PageDown","Home","End"].includes(e.key)){var t=a?n.filter(a):n;if(a&&(h=t.findIndex((function(e){return e.index===o}))),t.length)switch(e.key){case"ArrowDown":if("vertical"===s||"both"===s){e.preventDefault();var r=D();u("option"===l?r:r[l])}break;case"ArrowUp":if("vertical"===s||"both"===s){e.preventDefault();var i=y();u("option"===l?i:i[l])}break;case"ArrowLeft":if("horizontal"===s||"both"===s){e.preventDefault();var c=(m?D:y)();u("option"===l?c:c[l])}break;case"ArrowRight":if("horizontal"===s||"both"===s){e.preventDefault();var f=(m?y:D)();u("option"===l?f:f[l])}break;case"PageUp":e.preventDefault();var p=(e.ctrlKey?y:E)();u("option"===l?p:p[l]);break;case"Home":e.preventDefault();var v=E();u("option"===l?v:v[l]);break;case"PageDown":e.preventDefault();var b=(e.ctrlKey?D:C)();u("option"===l?b:b[l]);break;case"End":e.preventDefault();var g=C();u("option"===l?g:g[l])}}function D(){return h===t.length-1?d?E():t[h]:t[(h+1)%t.length]}function y(){return 0===h?d?C():t[h]:t[(h-1+t.length)%t.length]}function E(){return t[0]}function C(){return t[t.length-1]}}}(Gn,{currentIndex:D,orientation:"vertical",rotate:!1,callback:function(e){d({type:Yn,payload:{index:e}})},key:"index"}));return(u.a.createElement(a,Object.assign({"aria-activedescendant":ir(D)||void 0,"aria-labelledby":g||void 0,role:"menu",tabIndex:-1},c,{ref:w,"data-reach-menu-items":"",id:f,onKeyDown:k(l,B)}),i))}));var or=Object(r.forwardRef)((function(e,t){var n=e.portal,r=void 0===n||n,o=Vn(e,["portal"]);return u.a.createElement(ar,{portal:r},u.a.createElement(ur,Object.assign({},o,{ref:t,"data-reach-menu-list":""})))}));var ar=Object(r.forwardRef)((function(e,t){var n=e.children,o=e.portal,a=void 0===o||o,i=e.position,l=Vn(e,["children","portal","position"]),c=Object(r.useContext)(Jn),s=c.buttonRef,f=c.buttonClickedRef,d=c.dispatch,p=c.menuRef,m=c.popoverRef,h=c.state.isExpanded,v=x(m,t);Object(r.useEffect)((function(){function e(e){if(f.current)f.current=!1;else{var t,n=e.relatedTarget,r=e.target;if(h&&m.current)(null===(t=m.current)||void 0===t?void 0:t.contains(n||r))||d({type:$n,payload:{buttonRef:s}})}}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[f,s,d,h,p,m]);var b=Un({ref:v,"data-reach-menu":"","data-reach-menu-popover":"",hidden:!h,children:n},l);return a?u.a.createElement(In,Object.assign({},b,{targetRef:s,position:i})):u.a.createElement("div",Object.assign({},b))}));function ir(e){var t=Object(r.useContext)(Jn).menuId;return null!=e&&e>-1?C("option-"+e,t):void 0}function lr(e){return 3===e.which||2===e.button}function cr(e){e&&e.focus()}function sr(e,t){switch(void 0===t&&(t={}),t.type){case Hn:case $n:return Un(Un({},e),{},{isExpanded:!1,selectionIndex:-1});case Kn:return Un(Un({},e),{},{isExpanded:!0,selectionIndex:0});case qn:return Un(Un({},e),{},{isExpanded:!0,selectionIndex:-1});case Yn:return t.payload.index>=0?Un(Un({},e),{},{selectionIndex:null!=t.payload.max?Math.min(Math.max(t.payload.index,0),t.payload.max):Math.max(t.payload.index,0)}):e;case Wn:return Un(Un({},e),{},{selectionIndex:-1});case Xn:return Un(Un({},e),{},{buttonId:t.payload});case Qn:return void 0!==t.payload?Un(Un({},e),{},{typeaheadQuery:t.payload}):e;default:return e}}n(30);var fr=({properties:e,disabled:t,path:n,value:u,selectionValues:o,onClick:a})=>r.createElement("div",null,r.createElement(er,null,({isExpanded:i})=>r.createElement(r.Fragment,null,r.createElement(tr,{disabled:t,className:"button-extra"},r.createElement("span",{"aria-hidden":"true"},i?"⏶":"⏷")),r.createElement(or,null,e.map(e=>{const t=o[e.name]===`${n}.${u}`;return r.createElement(rr,{key:e.label,onSelect:()=>a([e.name],t)},t&&"✔",e.label)})))));var dr=({type:e,name:t,path:n,token:u,disabled:o,editMode:a,selectionValues:i,setPluginValue:l,showForm:c})=>{let s,f=!0,d=[e];const p=[],m=i[e]===[n,t].join(".");a&&p.push("button-edit"),m&&p.push("button-active");const h=(e,r=m)=>{const o=e;if(a)c({name:t,token:u,path:n});else{const u=[n,t].join(".");let a=r?"delete":u;o[0].clear&&!m&&(a="delete",o[0].forcedValue=u);const i=e.map(e=>[[e.name||e],e.forcedValue||a]).reduce((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n}),{});l(i)}};switch(e){case"borderRadius":s={borderRadius:`${u}px`},d=[{label:"All",name:"borderRadius",clear:["borderRadiusTopLeft","borderRadiusTopRight","borderRadiusBottomRight","borderRadiusBottomLeft"]},{label:"Top Left",name:"borderRadiusTopLeft"},{label:"Top Right",name:"borderRadiusTopRight"},{label:"Bottom Right",name:"borderRadiusBottomRight"},{label:"Bottom Left",name:"borderRadiusBottomLeft"}];break;case"opacity":s={opacity:`${u}%`};break;case"spacing":d=[{label:"All",name:"spacing",clear:["horizontalPadding","verticalPadding","itemSpacing"]},{label:"Horizontal",name:"horizontalPadding"},{label:"Vertical",name:"verticalPadding"},{label:"Gap",name:"itemSpacing"}];break;case"fill":s={width:"24px",height:"24px",borderRadius:"100%",backgroundColor:u,borderColor:"#ccc"},m&&p.push("button-active-fill"),f=!1;break;default:s={}}return r.createElement(An,{label:`${t}: ${u}`},r.createElement("div",{className:`relative flex button button-property ${p.join(" ")} ${o&&"button-disabled"} `,style:s},r.createElement("button",{className:"w-full h-full",disabled:!a&&o,type:"button",onClick:()=>h(d)},f&&r.createElement("div",{className:"button-text"},t),a&&r.createElement("div",{className:"button-edit-overlay"},"Edit")),!a&&d.length>1&&r.createElement(fr,{disabled:o,selectionValues:i,properties:d,onClick:h,value:t,path:n})))};var pr=({createStyles:e,setSingleTokenValue:t,setPluginValue:n,onUpdate:u,tokens:o,selectionValues:a,disabled:i})=>{const[l,c]=r.useState({token:"",name:"",path:""}),[s,f]=r.useState(!1),[d,p]=r.useState(""),m=({token:e,name:n,path:r})=>{c({token:e,name:n,path:r}),t({name:[r,n].join("."),token:e}),u()},h=({token:e,name:t,path:n})=>{f(!0),c({token:e,name:t,path:n})},v=e=>{h({token:"",name:"",path:e})},b=({tokenValues:e,path:t="",type:u="",editMode:o=!1})=>r.createElement("div",{className:"flex justify-start flex-row flex-wrap"},e.map(e=>{const[l,c]=e,s=[t,l].filter(e=>e).join(".");return r.createElement(r.Fragment,{key:s},"object"==typeof c?r.createElement("div",{className:"property-wrapper w-full mt-2"},r.createElement(At,{size:"small"},l),b({tokenValues:Object.entries(c),path:s,type:u,editMode:o})):r.createElement("div",{className:"flex mb-1 mr-1"},r.createElement(dr,{type:u,editMode:o,name:l,path:t,token:c,disabled:i,setPluginValue:n,showForm:h,selectionValues:a})))})),g=({label:t,explainer:n="",help:u="",createButton:o=!1,property:a,type:i="",values:c})=>{const[h,g]=r.useState(!1);return r.createElement("div",{className:"mb-2 pb-2 border-b border-gray-200"},r.createElement("div",{className:"flex justify-between space-x-4 items-center"},r.createElement(At,{size:"small"},t,u&&r.createElement(An,{label:h?"Hide help":"Show help"},r.createElement("button",{className:"ml-1",type:"button",onClick:()=>g(!h)},r.createElement(Tt,{name:"help"})))),r.createElement("div",null,o&&r.createElement(An,{label:"Create Styles"},r.createElement("button",{onClick:e,type:"button",className:"button button-ghost"},r.createElement(Tt,{name:"style"}))),r.createElement(An,{label:"Edit token values"},r.createElement("button",{className:"button button-ghost",type:"button",onClick:()=>p(c[0])},r.createElement(Tt,{name:"edit"}))),r.createElement(An,{label:"Add a new token"},r.createElement("button",{className:"button button-ghost",type:"button",onClick:()=>{p(c[0]),v(c[0])}},r.createElement(Tt,{name:"add"})))),d===c[0]&&r.createElement(kt,{isOpen:d,close:()=>p("")},r.createElement("div",{className:"flex flex-col-reverse"},s&&r.createElement(_t,{explainer:n,submitTokenValue:m,initialName:l.name,path:l.path,property:a,isPristine:""===l.name,initialToken:l.token,setShowEditForm:f}),r.createElement("div",{className:"mb-4"},b({tokenValues:Object.entries(c[1]),path:c[0],type:i,editMode:!0})),r.createElement("div",{className:"flex items-center justify-between mb-4"},r.createElement(At,{size:"small"},a),r.createElement(An,{label:"Add a new token"},r.createElement("button",{type:"button",className:"button button-ghost",onClick:()=>v(c[0])},r.createElement(Tt,{name:"add"}))))))),h&&r.createElement("div",{className:"mb-4 text-xxs text-gray-600"},u),b({tokenValues:Object.entries(c[1]),path:c[0],type:i}))};return r.createElement("div",null,r.createElement("div",null,(e=>Object.entries(Object.assign({sizing:{},spacing:{},colors:{},borderRadius:{},opacity:{}},e)))(o).map(e=>{switch(e[0]){case"borderRadius":return r.createElement(g,{key:e[0],label:"Border Radius",property:"Border Radius",type:"borderRadius",values:e});case"opacity":return r.createElement(g,{key:e[0],label:"Opacity",property:"Opacity",explainer:"Set as 50%",type:"opacity",values:e});case"colors":return r.createElement("div",{key:e[0]},r.createElement(g,{createButton:!0,help:"If a (local) style is found with the same name it will match to that, if not, will use hex value. Use 'Create Style' to batch-create styles from your tokens (e.g. in your design library). In the future we'll load all 'remote' styles and reference them inside the JSON.",label:"Fill",property:"Fill",type:"fill",values:e}));case"sizing":return r.createElement(r.Fragment,{key:e[0]},r.createElement(g,{label:"Width",property:"Sizing",type:"width",values:e}),r.createElement(g,{label:"Height",property:"Sizing",type:"height",values:e}));case"spacing":return r.createElement(r.Fragment,{key:e[0]},r.createElement(g,{property:"Spacing",label:"Spacing",type:"spacing",values:e}));default:return r.createElement(g,{key:e[0],property:e[0],label:e[0],values:e,type:e[0]})}})))};var mr=({size:e="small",type:t="button",onClick:n,variant:u,children:o})=>{let a,i;switch(u){case"secondary":a="button-secondary";break;case"ghost":a="button-ghost";break;default:a="button-primary"}switch(e){case"large":i="button-large"}return r.createElement("button",{type:t,className:`button ${[a,i].join(" ")}`,onClick:n},o)};const hr={spacing:{xs:4,sm:8,md:16,lg:32,xl:96},sizing:{xs:4,sm:8,md:16,lg:32,xl:96},borderRadius:{sm:"4",lg:"8",xl:"16"},colors:{primary:"#18A0FB",indigo:"#5c6ac4",blue:"#007ace",red:"#de3618",grey:{100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"}},opacity:{low:"10%",md:"50%",high:"90%"}};var vr=({setActive:e,setStringTokens:t})=>{return r.createElement("div",{className:"my-auto h-auto space-y-4"},r.createElement("div",null,r.createElement(At,{size:"small"},"Welcome to"),r.createElement(At,null,"Figma Tokens")),r.createElement("div",null,"A place to make Tokens A Single Source of Truth. Read more about it"," ",r.createElement("a",{href:"https://blog.prototypr.io/making-design-tokens-a-single-source-of-truth-for-figma-tool-76618abdeb88",target:"_blank",rel:"noreferrer"},"here"),"."),r.createElement("div",{className:"space-y-2 p-4 bg-gray-300 rounded"},r.createElement("p",null,"Seems like you don't have any tokens defined. Start by defining your tokens or use our preset."),r.createElement("div",{className:"space-x-2"},r.createElement(mr,{size:"large",variant:"secondary",onClick:()=>{e("json"),t(c.a.stringify({},null,2))}},"Edit JSON"),r.createElement(mr,{size:"large",variant:"primary",onClick:()=>{e("tokens"),t(c.a.stringify(hr,null,2))}},"Use Preset"))))};const br=({name:e,label:t,active:n,setActive:u})=>r.createElement("button",{type:"button",className:`w-14 p-2 text-xxs focus:outline-none focus:shadow-none cursor-pointer hover:bg-gray-200 ${n===e?"text-black font-bold":"text-gray-600"}`,name:"text",onClick:()=>u(e)},t);var gr=({active:e,setActive:t})=>r.createElement("div",{className:"sticky top-0 navbar bg-white -mx-2 flex justify-content-between z-1"},r.createElement(br,{name:"tokens",label:"Tokens",active:e,setActive:t}),r.createElement(br,{name:"json",label:"JSON",active:e,setActive:t}),r.createElement(br,{name:"inspector",label:"Inspector",active:e,setActive:t}));var Dr=()=>{const[e,t]=r.useState(!1),[n,u]=r.useState({}),[o,a]=r.useState("start"),[l,s]=r.useState(""),[p,m]=r.useState(!0),[h,v]=r.useState([]),[b,g]=r.useState({}),[D,y]=r.useState(JSON.stringify(b,null,4));r.useEffect(()=>{let e;try{e=c.a.parse(D),s("")}catch(e){console.log({e:e},D),s("Invalid JSON")}e&&g(e)},[D]);const E=()=>{m(!0),setTimeout(()=>{parent.postMessage({pluginMessage:{type:"update",values:n,tokens:b}},"*")},100)},C=(e={})=>{m(!0),setTimeout(()=>{parent.postMessage({pluginMessage:{type:"set-node-data",values:Object.assign(Object.assign({},n),e),tokens:b}},"*")},100)};return r.useEffect(()=>{parent.postMessage({pluginMessage:{type:"initiate"}},"*"),window.onmessage=e=>{const{type:n,values:r}=e.data.pluginMessage;"selection"===n?(t(!1),u(r||{})):"noselection"===n?(t(!0),u({})):"remotecomponents"===n?(m(!1),v(r.remotes)):"tokenvalues"===n&&(m(!1),r&&(y(JSON.stringify(r,null,2)),a("tokens")))}},[]),r.createElement(r.Fragment,null,p&&r.createElement("div",{className:"fixed w-full z-20"},r.createElement("div",{className:"flex items-center space-x-2 bg-gray-300 p-2 rounded m-2"},r.createElement("div",{className:"inline-flex rotate"},r.createElement(Tt,{name:"loading"})),r.createElement("div",{className:"font-bold text-xxs"},"Hold on, updating..."))),r.createElement("div",{className:"h-full flex flex-col"},r.createElement("div",{className:"flex-grow flex flex-col space-y-4 p-4"},"start"!==o&&r.createElement(gr,{active:o,setActive:a}),h.length>0&&r.createElement("div",null,r.createElement(At,{size:"small"},"Unable to update remote components"),h.map(e=>r.createElement("button",{type:"button",className:"p-2 text-xxs font-bold bg-gray-100",onClick:()=>(e=>{parent.postMessage({pluginMessage:{type:"gotonode",id:e}},"*")})(e.id)},e.id))),"start"===o&&!p&&r.createElement(vr,{setActive:a,setStringTokens:y}),"tokens"===o&&r.createElement(pr,{disabled:e,setSingleTokenValue:function({name:e,token:t}){const n=b;i.a.set(n,e,t),y(c.a.stringify(n,null,2))},setPluginValue:function(e){u(t=>{const n=Object.assign(Object.assign({},t),e);return C(n),Object.assign({},n)})},tokens:b,onUpdate:E,selectionValues:n,createStyles:()=>{setTimeout(()=>{parent.postMessage({pluginMessage:{type:"create-styles",tokens:b}},"*")},100)}}),"json"===o&&r.createElement(f,{handlesetStringTokens:function(e){y(e)},stringTokens:D,error:l,onUpdate:E}),"inspector"===o&&r.createElement(d,{tokens:b,removeTokenValues:()=>{m(!0),setTimeout(()=>{parent.postMessage({pluginMessage:{type:"remove-node-data"}},"*")},100)},selectionValues:n})),r.createElement("div",{className:"p-4 flex-shrink-0 flex items-center justify-between"},r.createElement("div",{className:"text-gray-600 text-xxs"},"Figma Tokens 0.1.0"),r.createElement("div",{className:"text-gray-600 text-xxs"},r.createElement("a",{className:"flex items-center",href:"https://github.com/six7/figma-tokens",target:"_blank",rel:"noreferrer"},r.createElement("span",{className:"mr-1"},"Feedback / Issues"),r.createElement(Tt,{name:"github"}))))))};o.render(r.createElement(Dr,null),document.getElementById("react-page"))}]);
\ No newline at end of file
diff --git a/figma.d.ts b/figma.d.ts
new file mode 100644
index 000000000..f3ccb9ef5
--- /dev/null
+++ b/figma.d.ts
@@ -0,0 +1,847 @@
+// https://www.figma.com/plugin-docs/api/typings/
+// Figma Plugin API version 1, update 14
+
+declare global {
+// Global variable with Figma's plugin API.
+const figma: PluginAPI
+const __html__: string
+
+interface PluginAPI {
+ readonly apiVersion: "1.0.0"
+ readonly command: string
+ readonly viewport: ViewportAPI
+ closePlugin(message?: string): void
+
+ notify(message: string, options?: NotificationOptions): NotificationHandler
+
+ showUI(html: string, options?: ShowUIOptions): void
+ readonly ui: UIAPI
+
+ readonly clientStorage: ClientStorageAPI
+
+ getNodeById(id: string): BaseNode | null
+ getStyleById(id: string): BaseStyle | null
+
+ readonly root: DocumentNode
+ currentPage: PageNode
+
+ on(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void
+ once(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void
+ off(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void
+
+ readonly mixed: unique symbol
+
+ createRectangle(): RectangleNode
+ createLine(): LineNode
+ createEllipse(): EllipseNode
+ createPolygon(): PolygonNode
+ createStar(): StarNode
+ createVector(): VectorNode
+ createText(): TextNode
+ createFrame(): FrameNode
+ createComponent(): ComponentNode
+ createPage(): PageNode
+ createSlice(): SliceNode
+ /**
+ * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead.
+ */
+ createBooleanOperation(): BooleanOperationNode
+
+ createPaintStyle(): PaintStyle
+ createTextStyle(): TextStyle
+ createEffectStyle(): EffectStyle
+ createGridStyle(): GridStyle
+
+ // The styles are returned in the same order as displayed in the UI. Only
+ // local styles are returned. Never styles from team library.
+ getLocalPaintStyles(): PaintStyle[]
+ getLocalTextStyles(): TextStyle[]
+ getLocalEffectStyles(): EffectStyle[]
+ getLocalGridStyles(): GridStyle[]
+
+ importComponentByKeyAsync(key: string): Promise
+ importStyleByKeyAsync(key: string): Promise
+
+ listAvailableFontsAsync(): Promise
+ loadFontAsync(fontName: FontName): Promise
+ readonly hasMissingFont: boolean
+
+ createNodeFromSvg(svg: string): FrameNode
+
+ createImage(data: Uint8Array): Image
+ getImageByHash(hash: string): Image
+
+ group(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): GroupNode
+ flatten(nodes: ReadonlyArray, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode
+
+ union(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+ subtract(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+ intersect(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+ exclude(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+}
+
+interface ClientStorageAPI {
+ getAsync(key: string): Promise
+ setAsync(key: string, value: any): Promise
+}
+
+interface NotificationOptions {
+ timeout?: number
+}
+
+interface NotificationHandler {
+ cancel: () => void
+}
+
+interface ShowUIOptions {
+ visible?: boolean
+ width?: number
+ height?: number
+}
+
+interface UIPostMessageOptions {
+ origin?: string
+}
+
+interface OnMessageProperties {
+ origin: string
+}
+
+type MessageEventHandler = (pluginMessage: any, props: OnMessageProperties) => void
+
+interface UIAPI {
+ show(): void
+ hide(): void
+ resize(width: number, height: number): void
+ close(): void
+
+ postMessage(pluginMessage: any, options?: UIPostMessageOptions): void
+ onmessage: MessageEventHandler | undefined
+ on(type: "message", callback: MessageEventHandler): void
+ once(type: "message", callback: MessageEventHandler): void
+ off(type: "message", callback: MessageEventHandler): void
+}
+
+interface ViewportAPI {
+ center: Vector
+ zoom: number
+ scrollAndZoomIntoView(nodes: ReadonlyArray): void
+ readonly bounds: Rect
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Datatypes
+
+type Transform = [
+ [number, number, number],
+ [number, number, number]
+]
+
+interface Vector {
+ readonly x: number
+ readonly y: number
+}
+
+interface Rect {
+ readonly x: number
+ readonly y: number
+ readonly width: number
+ readonly height: number
+}
+
+interface RGB {
+ readonly r: number
+ readonly g: number
+ readonly b: number
+}
+
+interface RGBA {
+ readonly r: number
+ readonly g: number
+ readonly b: number
+ readonly a: number
+}
+
+interface FontName {
+ readonly family: string
+ readonly style: string
+}
+
+type TextCase = "ORIGINAL" | "UPPER" | "LOWER" | "TITLE"
+
+type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH"
+
+interface ArcData {
+ readonly startingAngle: number
+ readonly endingAngle: number
+ readonly innerRadius: number
+}
+
+interface ShadowEffect {
+ readonly type: "DROP_SHADOW" | "INNER_SHADOW"
+ readonly color: RGBA
+ readonly offset: Vector
+ readonly radius: number
+ readonly visible: boolean
+ readonly blendMode: BlendMode
+}
+
+interface BlurEffect {
+ readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR"
+ readonly radius: number
+ readonly visible: boolean
+}
+
+type Effect = ShadowEffect | BlurEffect
+
+type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE"
+
+interface Constraints {
+ readonly horizontal: ConstraintType
+ readonly vertical: ConstraintType
+}
+
+interface ColorStop {
+ readonly position: number
+ readonly color: RGBA
+}
+
+interface ImageFilters {
+ readonly exposure?: number
+ readonly contrast?: number
+ readonly saturation?: number
+ readonly temperature?: number
+ readonly tint?: number
+ readonly highlights?: number
+ readonly shadows?: number
+}
+
+interface SolidPaint {
+ readonly type: "SOLID"
+ readonly color: RGB
+
+ readonly visible?: boolean
+ readonly opacity?: number
+ readonly blendMode?: BlendMode
+}
+
+interface GradientPaint {
+ readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND"
+ readonly gradientTransform: Transform
+ readonly gradientStops: ReadonlyArray
+
+ readonly visible?: boolean
+ readonly opacity?: number
+ readonly blendMode?: BlendMode
+}
+
+interface ImagePaint {
+ readonly type: "IMAGE"
+ readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE"
+ readonly imageHash: string | null
+ readonly imageTransform?: Transform // setting for "CROP"
+ readonly scalingFactor?: number // setting for "TILE"
+ readonly filters?: ImageFilters
+
+ readonly visible?: boolean
+ readonly opacity?: number
+ readonly blendMode?: BlendMode
+}
+
+type Paint = SolidPaint | GradientPaint | ImagePaint
+
+interface Guide {
+ readonly axis: "X" | "Y"
+ readonly offset: number
+}
+
+interface RowsColsLayoutGrid {
+ readonly pattern: "ROWS" | "COLUMNS"
+ readonly alignment: "MIN" | "MAX" | "STRETCH" | "CENTER"
+ readonly gutterSize: number
+
+ readonly count: number // Infinity when "Auto" is set in the UI
+ readonly sectionSize?: number // Not set for alignment: "STRETCH"
+ readonly offset?: number // Not set for alignment: "CENTER"
+
+ readonly visible?: boolean
+ readonly color?: RGBA
+}
+
+interface GridLayoutGrid {
+ readonly pattern: "GRID"
+ readonly sectionSize: number
+
+ readonly visible?: boolean
+ readonly color?: RGBA
+}
+
+type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid
+
+interface ExportSettingsConstraints {
+ readonly type: "SCALE" | "WIDTH" | "HEIGHT"
+ readonly value: number
+}
+
+interface ExportSettingsImage {
+ readonly format: "JPG" | "PNG"
+ readonly contentsOnly?: boolean // defaults to true
+ readonly suffix?: string
+ readonly constraint?: ExportSettingsConstraints
+}
+
+interface ExportSettingsSVG {
+ readonly format: "SVG"
+ readonly contentsOnly?: boolean // defaults to true
+ readonly suffix?: string
+ readonly svgOutlineText?: boolean // defaults to true
+ readonly svgIdAttribute?: boolean // defaults to false
+ readonly svgSimplifyStroke?: boolean // defaults to true
+}
+
+interface ExportSettingsPDF {
+ readonly format: "PDF"
+ readonly contentsOnly?: boolean // defaults to true
+ readonly suffix?: string
+}
+
+type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF
+
+type WindingRule = "NONZERO" | "EVENODD"
+
+interface VectorVertex {
+ readonly x: number
+ readonly y: number
+ readonly strokeCap?: StrokeCap
+ readonly strokeJoin?: StrokeJoin
+ readonly cornerRadius?: number
+ readonly handleMirroring?: HandleMirroring
+}
+
+interface VectorSegment {
+ readonly start: number
+ readonly end: number
+ readonly tangentStart?: Vector // Defaults to { x: 0, y: 0 }
+ readonly tangentEnd?: Vector // Defaults to { x: 0, y: 0 }
+}
+
+interface VectorRegion {
+ readonly windingRule: WindingRule
+ readonly loops: ReadonlyArray>
+}
+
+interface VectorNetwork {
+ readonly vertices: ReadonlyArray
+ readonly segments: ReadonlyArray
+ readonly regions?: ReadonlyArray // Defaults to []
+}
+
+interface VectorPath {
+ readonly windingRule: WindingRule | "NONE"
+ readonly data: string
+}
+
+type VectorPaths = ReadonlyArray
+
+interface LetterSpacing {
+ readonly value: number
+ readonly unit: "PIXELS" | "PERCENT"
+}
+
+type LineHeight = {
+ readonly value: number
+ readonly unit: "PIXELS" | "PERCENT"
+} | {
+ readonly unit: "AUTO"
+}
+
+type BlendMode =
+ "PASS_THROUGH" |
+ "NORMAL" |
+ "DARKEN" |
+ "MULTIPLY" |
+ "LINEAR_BURN" |
+ "COLOR_BURN" |
+ "LIGHTEN" |
+ "SCREEN" |
+ "LINEAR_DODGE" |
+ "COLOR_DODGE" |
+ "OVERLAY" |
+ "SOFT_LIGHT" |
+ "HARD_LIGHT" |
+ "DIFFERENCE" |
+ "EXCLUSION" |
+ "HUE" |
+ "SATURATION" |
+ "COLOR" |
+ "LUMINOSITY"
+
+interface Font {
+ fontName: FontName
+}
+
+type Reaction = { action: Action, trigger: Trigger }
+
+type Action =
+ { readonly type: "BACK" | "CLOSE" } |
+ { readonly type: "URL", url: string } |
+ { readonly type: "NODE"
+ readonly destinationId: string | null
+ readonly navigation: Navigation
+ readonly transition: Transition | null
+ readonly preserveScrollPosition: boolean
+
+ // Only present if navigation == "OVERLAY" and the destination uses
+ // overlay position type "RELATIVE"
+ readonly overlayRelativePosition?: Vector
+ }
+
+interface SimpleTransition {
+ readonly type: "DISSOLVE" | "SMART_ANIMATE"
+ readonly easing: Easing
+ readonly duration: number
+}
+
+interface DirectionalTransition {
+ readonly type: "MOVE_IN" | "MOVE_OUT" | "PUSH" | "SLIDE_IN" | "SLIDE_OUT"
+ readonly direction: "LEFT" | "RIGHT" | "TOP" | "BOTTOM"
+ readonly matchLayers: boolean
+
+ readonly easing: Easing
+ readonly duration: number
+}
+
+type Transition = SimpleTransition | DirectionalTransition
+
+type Trigger =
+ { readonly type: "ON_CLICK" | "ON_HOVER" | "ON_PRESS" | "ON_DRAG" } |
+ { readonly type: "AFTER_TIMEOUT", readonly timeout: number } |
+ { readonly type: "MOUSE_ENTER" | "MOUSE_LEAVE" | "MOUSE_UP" | "MOUSE_DOWN"
+ readonly delay: number
+ }
+
+type Navigation = "NAVIGATE" | "SWAP" | "OVERLAY"
+
+interface Easing {
+ readonly type: "EASE_IN" | "EASE_OUT" | "EASE_IN_AND_OUT" | "LINEAR"
+}
+
+type OverflowDirection = "NONE" | "HORIZONTAL" | "VERTICAL" | "BOTH"
+
+type OverlayPositionType = "CENTER" | "TOP_LEFT" | "TOP_CENTER" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_CENTER" | "BOTTOM_RIGHT" | "MANUAL"
+
+type OverlayBackground =
+ { readonly type: "NONE" } |
+ { readonly type: "SOLID_COLOR", readonly color: RGBA }
+
+type OverlayBackgroundInteraction = "NONE" | "CLOSE_ON_CLICK_OUTSIDE"
+
+////////////////////////////////////////////////////////////////////////////////
+// Mixins
+
+interface BaseNodeMixin {
+ readonly id: string
+ readonly parent: (BaseNode & ChildrenMixin) | null
+ name: string // Note: setting this also sets `autoRename` to false on TextNodes
+ readonly removed: boolean
+ toString(): string
+ remove(): void
+
+ getPluginData(key: string): string
+ setPluginData(key: string, value: string): void
+
+ // Namespace is a string that must be at least 3 alphanumeric characters, and should
+ // be a name related to your plugin. Other plugins will be able to read this data.
+ getSharedPluginData(namespace: string, key: string): string
+ setSharedPluginData(namespace: string, key: string, value: string): void
+ setRelaunchData(data: { [command: string]: /* description */ string }): void
+}
+
+interface SceneNodeMixin {
+ visible: boolean
+ locked: boolean
+}
+
+interface ChildrenMixin {
+ readonly children: ReadonlyArray
+
+ appendChild(child: SceneNode): void
+ insertChild(index: number, child: SceneNode): void
+
+ findChildren(callback?: (node: SceneNode) => boolean): SceneNode[]
+ findChild(callback: (node: SceneNode) => boolean): SceneNode | null
+
+ /**
+ * If you only need to search immediate children, it is much faster
+ * to call node.children.filter(callback) or node.findChildren(callback)
+ */
+ findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
+
+ /**
+ * If you only need to search immediate children, it is much faster
+ * to call node.children.find(callback) or node.findChild(callback)
+ */
+ findOne(callback: (node: SceneNode) => boolean): SceneNode | null
+}
+
+interface ConstraintMixin {
+ constraints: Constraints
+}
+
+interface LayoutMixin {
+ readonly absoluteTransform: Transform
+ relativeTransform: Transform
+ x: number
+ y: number
+ rotation: number // In degrees
+
+ readonly width: number
+ readonly height: number
+ constrainProportions: boolean
+
+ layoutAlign: "MIN" | "CENTER" | "MAX" | "STRETCH" // applicable only inside auto-layout frames
+
+ resize(width: number, height: number): void
+ resizeWithoutConstraints(width: number, height: number): void
+}
+
+interface BlendMixin {
+ opacity: number
+ blendMode: BlendMode
+ isMask: boolean
+ effects: ReadonlyArray
+ effectStyleId: string
+}
+
+interface ContainerMixin {
+ expanded: boolean
+ backgrounds: ReadonlyArray // DEPRECATED: use 'fills' instead
+ backgroundStyleId: string // DEPRECATED: use 'fillStyleId' instead
+}
+
+type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL"
+type StrokeJoin = "MITER" | "BEVEL" | "ROUND"
+type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH"
+
+interface GeometryMixin {
+ fills: ReadonlyArray | PluginAPI['mixed']
+ strokes: ReadonlyArray
+ strokeWeight: number
+ strokeMiterLimit: number
+ strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
+ strokeCap: StrokeCap | PluginAPI['mixed']
+ strokeJoin: StrokeJoin | PluginAPI['mixed']
+ dashPattern: ReadonlyArray
+ fillStyleId: string | PluginAPI['mixed']
+ strokeStyleId: string
+ outlineStroke(): VectorNode | null
+}
+
+interface CornerMixin {
+ cornerRadius: number | PluginAPI['mixed']
+ cornerSmoothing: number
+}
+
+interface RectangleCornerMixin {
+ topLeftRadius: number
+ topRightRadius: number
+ bottomLeftRadius: number
+ bottomRightRadius: number
+}
+
+interface ExportMixin {
+ exportSettings: ReadonlyArray
+ exportAsync(settings?: ExportSettings): Promise // Defaults to PNG format
+}
+
+interface ReactionMixin {
+ readonly reactions: ReadonlyArray
+}
+
+interface DefaultShapeMixin extends
+ BaseNodeMixin, SceneNodeMixin, ReactionMixin,
+ BlendMixin, GeometryMixin, LayoutMixin,
+ ExportMixin {
+}
+
+interface DefaultFrameMixin extends
+ BaseNodeMixin, SceneNodeMixin, ReactionMixin,
+ ChildrenMixin, ContainerMixin,
+ GeometryMixin, CornerMixin, RectangleCornerMixin,
+ BlendMixin, ConstraintMixin, LayoutMixin,
+ ExportMixin {
+
+ layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL"
+ counterAxisSizingMode: "FIXED" | "AUTO" // applicable only if layoutMode != "NONE"
+ horizontalPadding: number // applicable only if layoutMode != "NONE"
+ verticalPadding: number // applicable only if layoutMode != "NONE"
+ itemSpacing: number // applicable only if layoutMode != "NONE"
+
+ layoutGrids: ReadonlyArray
+ gridStyleId: string
+ clipsContent: boolean
+ guides: ReadonlyArray
+
+ overflowDirection: OverflowDirection
+ numberOfFixedChildren: number
+
+ readonly overlayPositionType: OverlayPositionType
+ readonly overlayBackground: OverlayBackground
+ readonly overlayBackgroundInteraction: OverlayBackgroundInteraction
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Nodes
+
+interface DocumentNode extends BaseNodeMixin {
+ readonly type: "DOCUMENT"
+
+ readonly children: ReadonlyArray
+
+ appendChild(child: PageNode): void
+ insertChild(index: number, child: PageNode): void
+ findChildren(callback?: (node: PageNode) => boolean): Array
+ findChild(callback: (node: PageNode) => boolean): PageNode | null
+
+ /**
+ * If you only need to search immediate children, it is much faster
+ * to call node.children.filter(callback) or node.findChildren(callback)
+ */
+ findAll(callback?: (node: PageNode | SceneNode) => boolean): Array
+
+ /**
+ * If you only need to search immediate children, it is much faster
+ * to call node.children.find(callback) or node.findChild(callback)
+ */
+ findOne(callback: (node: PageNode | SceneNode) => boolean): PageNode | SceneNode | null
+}
+
+interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
+
+ readonly type: "PAGE"
+ clone(): PageNode
+
+ guides: ReadonlyArray
+ selection: ReadonlyArray
+ selectedTextRange: { node: TextNode, start: number, end: number } | null
+
+ backgrounds: ReadonlyArray
+
+ readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null
+}
+
+interface FrameNode extends DefaultFrameMixin {
+ readonly type: "FRAME"
+ clone(): FrameNode
+}
+
+interface GroupNode extends
+ BaseNodeMixin, SceneNodeMixin, ReactionMixin,
+ ChildrenMixin, ContainerMixin, BlendMixin,
+ LayoutMixin, ExportMixin {
+
+ readonly type: "GROUP"
+ clone(): GroupNode
+}
+
+interface SliceNode extends
+ BaseNodeMixin, SceneNodeMixin, LayoutMixin,
+ ExportMixin {
+
+ readonly type: "SLICE"
+ clone(): SliceNode
+}
+
+interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin, RectangleCornerMixin {
+ readonly type: "RECTANGLE"
+ clone(): RectangleNode
+}
+
+interface LineNode extends DefaultShapeMixin, ConstraintMixin {
+ readonly type: "LINE"
+ clone(): LineNode
+}
+
+interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+ readonly type: "ELLIPSE"
+ clone(): EllipseNode
+ arcData: ArcData
+}
+
+interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+ readonly type: "POLYGON"
+ clone(): PolygonNode
+ pointCount: number
+}
+
+interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+ readonly type: "STAR"
+ clone(): StarNode
+ pointCount: number
+ innerRadius: number
+}
+
+interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+ readonly type: "VECTOR"
+ clone(): VectorNode
+ vectorNetwork: VectorNetwork
+ vectorPaths: VectorPaths
+ handleMirroring: HandleMirroring | PluginAPI['mixed']
+}
+
+interface TextNode extends DefaultShapeMixin, ConstraintMixin {
+ readonly type: "TEXT"
+ clone(): TextNode
+ readonly hasMissingFont: boolean
+ textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
+ textAlignVertical: "TOP" | "CENTER" | "BOTTOM"
+ textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT"
+ paragraphIndent: number
+ paragraphSpacing: number
+ autoRename: boolean
+
+ textStyleId: string | PluginAPI['mixed']
+ fontSize: number | PluginAPI['mixed']
+ fontName: FontName | PluginAPI['mixed']
+ textCase: TextCase | PluginAPI['mixed']
+ textDecoration: TextDecoration | PluginAPI['mixed']
+ letterSpacing: LetterSpacing | PluginAPI['mixed']
+ lineHeight: LineHeight | PluginAPI['mixed']
+
+ characters: string
+ insertCharacters(start: number, characters: string, useStyle?: "BEFORE" | "AFTER"): void
+ deleteCharacters(start: number, end: number): void
+
+ getRangeFontSize(start: number, end: number): number | PluginAPI['mixed']
+ setRangeFontSize(start: number, end: number, value: number): void
+ getRangeFontName(start: number, end: number): FontName | PluginAPI['mixed']
+ setRangeFontName(start: number, end: number, value: FontName): void
+ getRangeTextCase(start: number, end: number): TextCase | PluginAPI['mixed']
+ setRangeTextCase(start: number, end: number, value: TextCase): void
+ getRangeTextDecoration(start: number, end: number): TextDecoration | PluginAPI['mixed']
+ setRangeTextDecoration(start: number, end: number, value: TextDecoration): void
+ getRangeLetterSpacing(start: number, end: number): LetterSpacing | PluginAPI['mixed']
+ setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void
+ getRangeLineHeight(start: number, end: number): LineHeight | PluginAPI['mixed']
+ setRangeLineHeight(start: number, end: number, value: LineHeight): void
+ getRangeFills(start: number, end: number): Paint[] | PluginAPI['mixed']
+ setRangeFills(start: number, end: number, value: Paint[]): void
+ getRangeTextStyleId(start: number, end: number): string | PluginAPI['mixed']
+ setRangeTextStyleId(start: number, end: number, value: string): void
+ getRangeFillStyleId(start: number, end: number): string | PluginAPI['mixed']
+ setRangeFillStyleId(start: number, end: number, value: string): void
+}
+
+interface ComponentNode extends DefaultFrameMixin {
+ readonly type: "COMPONENT"
+ clone(): ComponentNode
+
+ createInstance(): InstanceNode
+ description: string
+ readonly remote: boolean
+ readonly key: string // The key to use with "importComponentByKeyAsync"
+}
+
+interface InstanceNode extends DefaultFrameMixin {
+ readonly type: "INSTANCE"
+ clone(): InstanceNode
+ masterComponent: ComponentNode
+ scaleFactor: number
+}
+
+interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin {
+ readonly type: "BOOLEAN_OPERATION"
+ clone(): BooleanOperationNode
+ booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
+
+ expanded: boolean
+}
+
+type BaseNode =
+ DocumentNode |
+ PageNode |
+ SceneNode
+
+type SceneNode =
+ SliceNode |
+ FrameNode |
+ GroupNode |
+ ComponentNode |
+ InstanceNode |
+ BooleanOperationNode |
+ VectorNode |
+ StarNode |
+ LineNode |
+ EllipseNode |
+ PolygonNode |
+ RectangleNode |
+ TextNode
+
+type NodeType =
+ "DOCUMENT" |
+ "PAGE" |
+ "SLICE" |
+ "FRAME" |
+ "GROUP" |
+ "COMPONENT" |
+ "INSTANCE" |
+ "BOOLEAN_OPERATION" |
+ "VECTOR" |
+ "STAR" |
+ "LINE" |
+ "ELLIPSE" |
+ "POLYGON" |
+ "RECTANGLE" |
+ "TEXT"
+
+////////////////////////////////////////////////////////////////////////////////
+// Styles
+type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID"
+
+interface BaseStyle {
+ readonly id: string
+ readonly type: StyleType
+ name: string
+ description: string
+ remote: boolean
+ readonly key: string // The key to use with "importStyleByKeyAsync"
+ remove(): void
+}
+
+interface PaintStyle extends BaseStyle {
+ type: "PAINT"
+ paints: ReadonlyArray
+}
+
+interface TextStyle extends BaseStyle {
+ type: "TEXT"
+ fontSize: number
+ textDecoration: TextDecoration
+ fontName: FontName
+ letterSpacing: LetterSpacing
+ lineHeight: LineHeight
+ paragraphIndent: number
+ paragraphSpacing: number
+ textCase: TextCase
+}
+
+interface EffectStyle extends BaseStyle {
+ type: "EFFECT"
+ effects: ReadonlyArray
+}
+
+interface GridStyle extends BaseStyle {
+ type: "GRID"
+ layoutGrids: ReadonlyArray
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Other
+
+interface Image {
+ readonly hash: string
+ getBytesAsync(): Promise
+}
+} // declare global
+
+export {}
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 000000000..903ce55be
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,10 @@
+{
+ "name": "Tokens",
+ "id": "843461159747178978",
+ "api": "1.0.0",
+ "main": "dist/code.js",
+ "ui": "dist/ui.html",
+ "relaunchButtons": [
+ {"command": "edit", "name": "Tokens"}
+ ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..774619708
--- /dev/null
+++ b/package.json
@@ -0,0 +1,64 @@
+{
+ "name": "figma-tokens",
+ "version": "0.0.3",
+ "description": "Figma Design Tokens",
+ "license": "ISC",
+ "scripts": {
+ "build-css": "postcss src/app/styles/tailwind.css -o src/app/styles/main.css",
+ "watch-css": "postcss src/app/styles/tailwind.css -o src/app/styles/main.css -w",
+ "watch-js": "/usr/local/bin/node node_modules/.bin/webpack --mode=development --watch",
+ "build-js": "/usr/local/bin/node node_modules/.bin/webpack --mode=production",
+ "build": "npm run build-css && npm run build-js",
+ "build:watch": "concurrently 'npm:watch-css' 'npm:watch-js'",
+ "prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' "
+ },
+ "dependencies": {
+ "@figma-plugin/helpers": "^0.13.2",
+ "@reach/dialog": "^0.10.3",
+ "@reach/menu-button": "^0.10.3",
+ "@reach/tooltip": "^0.10.3",
+ "dot-object": "^2.1.3",
+ "json5": "^2.1.3",
+ "object-path": "^0.11.4",
+ "react": "^16.8.6",
+ "react-dom": "^16.8.6",
+ "react-svg-loader": "^3.0.3"
+ },
+ "devDependencies": {
+ "@figma/plugin-typings": "^1.15.0",
+ "@types/react": "^16.8.24",
+ "@types/react-dom": "^16.8.5",
+ "autoprefixer": "^9.8.0",
+ "concurrently": "^5.2.0",
+ "css-loader": "^3.1.0",
+ "eslint": "^7.0.0",
+ "eslint-config-airbnb-typescript-prettier": "^2.1.1",
+ "html-webpack-inline-source-plugin": "^0.0.10",
+ "html-webpack-plugin": "^3.2.0",
+ "husky": "^3.0.2",
+ "lint-staged": "^9.2.1",
+ "npm-run-all": "^4.1.5",
+ "postcss-cli": "^7.1.1",
+ "prettier": "^2.0.5",
+ "style-loader": "^0.23.1",
+ "tailwindcss": "^1.4.6",
+ "ts-loader": "^6.0.4",
+ "tslint": "^5.18.0",
+ "tslint-react": "^4.0.0",
+ "typescript": "^3.7.4",
+ "url-loader": "^2.1.0",
+ "webpack": "^4.41.4",
+ "webpack-cli": "^3.3.6"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx,css,json}": [
+ "prettier --write",
+ "git add"
+ ]
+ }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..9d8cd171c
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+ plugins: [
+ tailwindcss('./tailwind.js'),
+ require('autoprefixer')
+ ],
+};
\ No newline at end of file
diff --git a/src/app/assets/logo.svg b/src/app/assets/logo.svg
new file mode 100644
index 000000000..2abafcd6a
--- /dev/null
+++ b/src/app/assets/logo.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
new file mode 100644
index 000000000..be732e1f5
--- /dev/null
+++ b/src/app/components/App.tsx
@@ -0,0 +1,256 @@
+import * as React from 'react';
+import '../styles/main.css';
+import objectPath from 'object-path';
+import JSON5 from 'json5';
+import JSONEditor from './JSONEditor';
+import Inspector from './Inspector';
+import Tokens from './Tokens';
+import StartScreen from './StartScreen';
+import Heading from './Heading';
+import Navbar from './Navbar';
+import Icon from './Icon';
+
+interface SelectionValue {
+ borderRadius: string | undefined;
+ horizontalPadding: string | undefined;
+ verticalPadding: string | undefined;
+ itemSpacing: string | undefined;
+}
+
+// interface Target {
+// property: string | undefined;
+// name: string | undefined;
+// }
+
+const goToNodeId = (id) => {
+ parent.postMessage(
+ {
+ pluginMessage: {
+ type: 'gotonode',
+ id,
+ },
+ },
+ '*'
+ );
+};
+
+const App = () => {
+ const [disabled, setDisabled] = React.useState(false);
+ const [selectionValues, setSelectionValues] = React.useState({} as SelectionValue);
+ // const [target, setTarget] = React.useState({} as Target);
+ const [active, setActive] = React.useState('start');
+ const [error, setError] = React.useState('');
+ const [loading, setLoading] = React.useState(true);
+ const [remoteComponents, setRemoteComponents] = React.useState([]);
+ const [tokens, setTokens] = React.useState({});
+
+ const [stringTokens, setStringTokens] = React.useState(JSON.stringify(tokens, null, 4));
+
+ React.useEffect(() => {
+ let newTokensFromString;
+ try {
+ newTokensFromString = JSON5.parse(stringTokens);
+ setError('');
+ } catch (e) {
+ console.log({e}, stringTokens);
+ setError('Invalid JSON');
+ }
+ if (newTokensFromString) {
+ setTokens(newTokensFromString);
+ }
+ }, [stringTokens]);
+
+ const onUpdate = () => {
+ setLoading(true);
+ setTimeout(() => {
+ parent.postMessage(
+ {
+ pluginMessage: {
+ type: 'update',
+ values: selectionValues,
+ tokens,
+ },
+ },
+ '*'
+ );
+ }, 100);
+ };
+
+ const onSetNodeData = (data = {}) => {
+ setLoading(true);
+ setTimeout(() => {
+ parent.postMessage(
+ {
+ pluginMessage: {
+ type: 'set-node-data',
+ values: {
+ ...selectionValues,
+ ...data,
+ },
+ tokens,
+ },
+ },
+ '*'
+ );
+ }, 100);
+ };
+
+ const removeTokenValues = () => {
+ setLoading(true);
+ setTimeout(() => {
+ parent.postMessage(
+ {
+ pluginMessage: {
+ type: 'remove-node-data',
+ },
+ },
+ '*'
+ );
+ }, 100);
+ };
+
+ const createStyles = () => {
+ setTimeout(() => {
+ parent.postMessage(
+ {
+ pluginMessage: {
+ type: 'create-styles',
+ tokens,
+ },
+ },
+ '*'
+ );
+ }, 100);
+ };
+
+ const onInitiate = () => {
+ parent.postMessage({pluginMessage: {type: 'initiate'}}, '*');
+ };
+
+ function setSingleTokenValue({name, token}) {
+ const obj = tokens;
+ objectPath.set(obj, name, token);
+ setStringTokens(JSON5.stringify(obj, null, 2));
+ }
+
+ function handlesetStringTokens(val) {
+ setStringTokens(val);
+ }
+
+ function setPluginValue(value) {
+ setSelectionValues((prevState) => {
+ const newPluginValue = {
+ ...prevState,
+ ...value,
+ };
+ onSetNodeData(newPluginValue);
+ return {...newPluginValue};
+ });
+ }
+
+ React.useEffect(() => {
+ onInitiate();
+ window.onmessage = (event) => {
+ const {type, values} = event.data.pluginMessage;
+ if (type === 'selection') {
+ setDisabled(false);
+ if (values) {
+ setSelectionValues(values);
+ } else {
+ setSelectionValues({} as SelectionValue);
+ }
+ } else if (type === 'noselection') {
+ setDisabled(true);
+ setSelectionValues({} as SelectionValue);
+ } else if (type === 'remotecomponents') {
+ setLoading(false);
+ setRemoteComponents(values.remotes);
+ } else if (type === 'tokenvalues') {
+ setLoading(false);
+ if (values) {
+ setStringTokens(JSON.stringify(values, null, 2));
+ setActive('tokens');
+ }
+ }
+ };
+ }, []);
+
+ return (
+ <>
+ {loading && (
+
+
+
+
+
+
Hold on, updating...
+
+
+ )}
+
+
+ {active !== 'start' &&
}
+ {remoteComponents.length > 0 && (
+
+ Unable to update remote components
+ {remoteComponents.map((comp) => (
+
+ ))}
+
+ )}
+ {active === 'start' && !loading && (
+
+ )}
+ {active === 'tokens' && (
+
+ )}
+ {active === 'json' && (
+
+ )}
+ {active === 'inspector' && (
+
+ )}
+
+
+
+ >
+ );
+};
+
+export default App;
diff --git a/src/app/components/Button.tsx b/src/app/components/Button.tsx
new file mode 100644
index 000000000..cae8590d5
--- /dev/null
+++ b/src/app/components/Button.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+type ButtonProps = {
+ type?: 'button' | 'submit';
+ variant: 'secondary' | 'primary' | 'ghost';
+ onClick: any;
+ size?: 'large' | 'small';
+};
+
+const Button: React.FunctionComponent = ({
+ size = 'small',
+ type = 'button',
+ onClick,
+ variant,
+ children,
+}) => {
+ let variantClass;
+ switch (variant) {
+ case 'secondary':
+ variantClass = 'button-secondary';
+ break;
+ case 'ghost':
+ variantClass = 'button-ghost';
+ break;
+ default:
+ variantClass = 'button-primary';
+ break;
+ }
+ let sizeClass;
+ switch (size) {
+ case 'large':
+ sizeClass = 'button-large';
+ break;
+ default:
+ break;
+ }
+ return (
+ // eslint-disable-next-line react/button-has-type
+
+ );
+};
+
+export default Button;
diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx
new file mode 100644
index 000000000..fc95d42b2
--- /dev/null
+++ b/src/app/components/EditTokenForm.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Input from './Input';
+
+const EditTokenForm = ({
+ submitTokenValue,
+ explainer = '',
+ property,
+ setShowEditForm,
+ isPristine,
+ initialToken,
+ initialName,
+ path,
+}) => {
+ const defaultValue = {
+ token: initialToken,
+ name: initialName,
+ path,
+ };
+ const [tokenValue, setTokenValue] = React.useState(defaultValue);
+
+ React.useEffect(() => {
+ return () => {
+ setShowEditForm(false);
+ };
+ }, [setShowEditForm]);
+
+ const handleChange = (e) => {
+ e.persist();
+ setTokenValue((prevState) => ({...prevState, [e.target.name]: e.target.value}));
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ submitTokenValue(tokenValue);
+ setShowEditForm(false);
+ };
+
+ const handleReset = () => {
+ setShowEditForm(false);
+ };
+ return (
+
+ );
+};
+
+export default EditTokenForm;
diff --git a/src/app/components/Heading.tsx b/src/app/components/Heading.tsx
new file mode 100644
index 000000000..f61147a0a
--- /dev/null
+++ b/src/app/components/Heading.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const Heading = ({size = '', children}) => (
+ {children}
+);
+
+export default Heading;
diff --git a/src/app/components/Icon.tsx b/src/app/components/Icon.tsx
new file mode 100644
index 000000000..e370e347b
--- /dev/null
+++ b/src/app/components/Icon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import IconEdit from './icons/IconEdit';
+import IconAdd from './icons/IconAdd';
+import IconLoading from './icons/IconLoading';
+import IconStyle from './icons/IconStyle';
+import IconHelp from './icons/IconHelp';
+import IconGithub from './icons/IconGithub';
+
+const icons = {
+ edit: IconEdit,
+ add: IconAdd,
+ loading: IconLoading,
+ style: IconStyle,
+ help: IconHelp,
+ github: IconGithub,
+};
+
+const Icon = ({name}) => {
+ const IconName = icons[name];
+ return ;
+};
+
+export default Icon;
diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx
new file mode 100644
index 000000000..686818c79
--- /dev/null
+++ b/src/app/components/Input.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+const Input = ({name, required = false, tabindex = null, label, full, onChange, value, type}) => (
+
+);
+
+export default Input;
diff --git a/src/app/components/Inspector.tsx b/src/app/components/Inspector.tsx
new file mode 100644
index 000000000..8b05598c3
--- /dev/null
+++ b/src/app/components/Inspector.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import objectPath from 'object-path';
+
+const Inspector = ({selectionValues, tokens, removeTokenValues}) => {
+ const getValue = (value) => {
+ return objectPath.get(tokens, value);
+ };
+ return (
+
+
+ {Object.entries(selectionValues).map(([key, value]) => (
+
+
+ {key}
:{' '}
+
+ ${typeof value === 'string' && value.split('.').join('-')}
+
+ {`/* ${getValue(value)} */`}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default Inspector;
diff --git a/src/app/components/JSONEditor.tsx b/src/app/components/JSONEditor.tsx
new file mode 100644
index 000000000..721dd64c8
--- /dev/null
+++ b/src/app/components/JSONEditor.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Textarea from './Textarea';
+
+const JSONEditor = ({handlesetStringTokens, stringTokens, error, onUpdate}) => (
+
+
+
{error}
+
+
+);
+export default JSONEditor;
diff --git a/src/app/components/Modal.tsx b/src/app/components/Modal.tsx
new file mode 100644
index 000000000..5bfb6fd68
--- /dev/null
+++ b/src/app/components/Modal.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {DialogOverlay, DialogContent} from '@reach/dialog';
+import '@reach/dialog/styles.css';
+
+const Modal = ({isOpen, close, children}) => (
+
+ {children}
+
+);
+
+export default Modal;
diff --git a/src/app/components/MoreButton.tsx b/src/app/components/MoreButton.tsx
new file mode 100644
index 000000000..ebdaf7100
--- /dev/null
+++ b/src/app/components/MoreButton.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
+import '@reach/menu-button/styles.css';
+
+const MoreButton = ({properties, disabled, path, value, selectionValues, onClick}) => {
+ return (
+
+
+
+ );
+};
+
+export default MoreButton;
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
new file mode 100644
index 000000000..f60c9684f
--- /dev/null
+++ b/src/app/components/Navbar.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+const TabButton = ({name, label, active, setActive}) => (
+
+);
+
+const Navbar = ({active, setActive}) => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/app/components/PropertyButton.tsx b/src/app/components/PropertyButton.tsx
new file mode 100644
index 000000000..67ca37011
--- /dev/null
+++ b/src/app/components/PropertyButton.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+const PropertyButton = ({property, disabled, name, value, chooseTarget, unsetTarget}) => (
+
+
+ {value && (
+
+ )}
+
+);
+
+export default PropertyButton;
diff --git a/src/app/components/StartScreen.tsx b/src/app/components/StartScreen.tsx
new file mode 100644
index 000000000..ed89d2e68
--- /dev/null
+++ b/src/app/components/StartScreen.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import JSON5 from 'json5';
+import Heading from './Heading';
+import Button from './Button';
+
+const defaultJSON = {
+ spacing: {
+ xs: 4,
+ sm: 8,
+ md: 16,
+ lg: 32,
+ xl: 96,
+ },
+ sizing: {
+ xs: 4,
+ sm: 8,
+ md: 16,
+ lg: 32,
+ xl: 96,
+ },
+ borderRadius: {
+ sm: '4',
+ lg: '8',
+ xl: '16',
+ },
+ colors: {
+ primary: '#18A0FB',
+ indigo: '#5c6ac4',
+ blue: '#007ace',
+ red: '#de3618',
+ grey: {
+ '100': '#f5f5f5',
+ '200': '#eeeeee',
+ '300': '#e0e0e0',
+ '400': '#bdbdbd',
+ '500': '#9e9e9e',
+ '600': '#757575',
+ '700': '#616161',
+ '800': '#424242',
+ '900': '#212121',
+ },
+ },
+ opacity: {
+ low: '10%',
+ md: '50%',
+ high: '90%',
+ },
+};
+
+const StartScreen = ({setActive, setStringTokens}) => {
+ const setEmptyTokens = () => {
+ setActive('json');
+ setStringTokens(JSON5.stringify({}, null, 2));
+ };
+ const setDefaultTokens = () => {
+ setActive('tokens');
+
+ setStringTokens(JSON5.stringify(defaultJSON, null, 2));
+ };
+ return (
+
+
+ Welcome to
+ Figma Tokens
+
+
+ A place to make Tokens A Single Source of Truth. Read more about it{' '}
+
+ here
+
+ .
+
+
+
Seems like you don't have any tokens defined. Start by defining your tokens or use our preset.
+
+
+
+
+
+
+ );
+};
+
+export default StartScreen;
diff --git a/src/app/components/Textarea.tsx b/src/app/components/Textarea.tsx
new file mode 100644
index 000000000..3cce778db
--- /dev/null
+++ b/src/app/components/Textarea.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+const Textarea = ({className = '', rows = 2, value, placeholder, isDisabled = false, onChange}) => {
+ className = className || '';
+ return (
+