חלק 4 - קומפוזיציה - פיקסל פרפקט - בית הספר ללימודי UI/UX ופיתוח קריירה

לרכישת קורסים נוספים

בחלק זה נעבור על חוקים בסיסיים בקומפוזיציה שיעזרו לכם בכל עיצוב, נגלה את הסוד הכי גדול של קומפוזיציה שבזכותו חיי העיצוב שלכם יתחלקו לשניים.

נדבר על החוקים הלא כתובים והמלצות שיקפיצו את העיצובים שלכם לתמיד, והאפקט של קומפוזיציות שלא נוכל לעשות בפרינט - להזיז אותן!

4

Module 4	חלק 4 - קומפוזיציה
Unit 1	15 - מעבר על חוקים בסיסיים בקומפוזיציה
Unit 2	16 - הסוד הכי גדול של קומפוזיציה, שאני לא מאמין כמה אנשים לא יודעים אותו
Unit 3	17 - החוקים הלא כתובים, והמלצות שיקפיצו את העיצובים שלכם לתמיד, יעלו את יחסי ההמרה ללקוחות שלכם, וימנעו מכם לצאת 'חובבנים'
Unit 4	18 - האפקט שאנחנו יכולים וצריכים לעשות עם קומפוזיציות בעיצובים שלנו שלא יכלנו אף פעם לעשות בפרינט - להזיז אותן!
Unit 5	תרגיל מס׳ 4

→ חזרה לדף הבית של הקורס

עדיין לא רשומים לניוזלטר שלנו?

בכל שבוע אנחנו שולחים את העדכונים החמים ביותר בעולם העיצוב ישר לתיבת הדואר שלכם

קורסים והדרכות

יסודות העיצוב

עושים קריירה

דיזיין ספרינט

המעצב האפקטיבי

סודות הנטוורקינג

The Elementor Business

Elementor Superpowers

What the Figma

יצירת תוכן ומותג אישי

איך סגרתי את הלקוח האהוב עליי מארה״ב

איך לגשת לעיצוב אתר ואפליקציה ולהבטיח רמה גבוהה

איך לבנות קייסטאדי מנצח

מרימים מחירים

פיסקל פרפקט

המגזין

מאסטרמיינד למעצבים

מנטורינג עם שגיא שרייבר

הקבוצה שלנו בפייסבוק

תנאי שימוש

כל הזכויות שמורות למינדפול אנד רות'לס בע"מ 2020 לרוב חומר לימודי, פרסומי וכו'….

",e=e.removeChild(e.firstChild)):"string"==typeof o.is?e=l.createElement(a,{is:o.is}):(e=l.createElement(a),"select"===a&&(l=e,o.multiple?l.multiple=!0:o.size&&(l.size=o.size))):e=l.createElementNS(e,a),e[Ni]=t,e[Pi]=o,Pl(e,t,!1,!1),t.stateNode=e,l=Ae(a,o),a){case"iframe":case"object":case"embed":Te("load",e),u=o;break;case"video":case"audio":for(u=0;u<$a.length;u++)Te($a[u],e);u=o;break;case"source":Te("error",e),u=o;break;case"img":case"image":case"link":Te("error",e),Te("load",e),u=o;break;case"form":Te("reset",e),Te("submit",e),u=o;break;case"details":Te("toggle",e),u=o;break;case"input":A(e,o),u=M(e,o),Te("invalid",e),Ie(n,"onChange");break;case"option":u=B(e,o);break;case"select":e._wrapperState={wasMultiple:!!o.multiple},u=Uo({},o,{value:void 0}),Te("invalid",e),Ie(n,"onChange");break;case"textarea":V(e,o),u=H(e,o),Te("invalid",e),Ie(n,"onChange");break;default:u=o}Me(a,u);var s=u;for(i in s)if(s.hasOwnProperty(i)){var c=s[i];"style"===i?ze(e,c):"dangerouslySetInnerHTML"===i?(c=c?c.__html:void 0,null!=c&&Aa(e,c)):"children"===i?"string"==typeof c?("textarea"!==a||""!==c)&&X(e,c):"number"==typeof c&&X(e,""+c):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(ea.hasOwnProperty(i)?null!=c&&Ie(n,i):null!=c&&x(e,i,c,l))}switch(a){case"input":L(e),j(e,o,!1);break;case"textarea":L(e),$(e);break;case"option":null!=o.value&&e.setAttribute("value",""+P(o.value));break;case"select":e.multiple=!!o.multiple,n=o.value,null!=n?q(e,!!o.multiple,n,!1):null!=o.defaultValue&&q(e,!!o.multiple,o.defaultValue,!0);break;default:"function"==typeof u.onClick&&(e.onclick=Fe)}Ve(a,o)&&(t.effectTag|=4)}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)Ll(e,t,e.memoizedProps,o);else{if("string"!=typeof o&&null===t.stateNode)throw Error(r(166));n=yn(yu.current),yn(bu.current),Jn(t)?(n=t.stateNode,o=t.memoizedProps,n[Ni]=t,n.nodeValue!==o&&(t.effectTag|=4)):(n=(9===n.nodeType?n:n.ownerDocument).createTextNode(o),n[Ni]=t,t.stateNode=n)}return null;case 13:return zt(vu),o=t.memoizedState,0!==(64&t.effectTag)?(t.expirationTime=n,t):(n=null!==o,o=!1,null===e?void 0!==t.memoizedProps.fallback&&Jn(t):(a=e.memoizedState,o=null!==a,n||null===a||(a=e.child.sibling,null!==a&&(i=t.firstEffect,null!==i?(t.firstEffect=a,a.nextEffect=i):(t.firstEffect=t.lastEffect=a,a.nextEffect=null),a.effectTag=8))),n&&!o&&0!==(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!==(1&vu.current)?rs===Qu&&(rs=Yu):(rs!==Qu&&rs!==Yu||(rs=Gu),0!==us&&null!==es&&(To(es,ns),Co(es,us)))),(n||o)&&(t.effectTag|=4),null);case 4:return wn(),Ol(t),null;case 10:return Zt(t),null;case 17:return It(t.type)&&Ft(),null;case 19:if(zt(vu),o=t.memoizedState,null===o)return null;if(a=0!==(64&t.effectTag),i=o.rendering,null===i){if(a)mr(o,!1);else if(rs!==Qu||null!==e&&0!==(64&e.effectTag))for(i=t.child;null!==i;){if(e=_n(i),null!==e){for(t.effectTag|=64,mr(o,!1),a=e.updateQueue,null!==a&&(t.updateQueue=a,t.effectTag|=4),null===o.lastEffect&&(t.firstEffect=null),t.lastEffect=o.lastEffect,o=t.child;null!==o;)a=o,i=n,a.effectTag&=2,a.nextEffect=null,a.firstEffect=null,a.lastEffect=null,e=a.alternate,null===e?(a.childExpirationTime=0,a.expirationTime=i,a.child=null,a.memoizedProps=null,a.memoizedState=null,a.updateQueue=null,a.dependencies=null):(a.childExpirationTime=e.childExpirationTime,a.expirationTime=e.expirationTime,a.child=e.child,a.memoizedProps=e.memoizedProps,a.memoizedState=e.memoizedState,a.updateQueue=e.updateQueue,i=e.dependencies,a.dependencies=null===i?null:{expirationTime:i.expirationTime,firstContext:i.firstContext,responders:i.responders}),o=o.sibling;return Mt(vu,1&vu.current|2),t.child}i=i.sibling}}else{if(!a)if(e=_n(i),null!==e){if(t.effectTag|=64,a=!0,n=e.updateQueue,null!==n&&(t.updateQueue=n,t.effectTag|=4),mr(o,!0),null===o.tail&&"hidden"===o.tailMode&&!i.alternate)return t=t.lastEffect=o.lastEffect,null!==t&&(t.nextEffect=null),null}else 2*ru()-o.renderingStartTime>o.tailExpiration&&1t)&&vs.set(e,t)))}}function Ur(e,t){e.expirationTimee?n:e,2>=e&&t!==e?0:e}function qr(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=$t(Vr.bind(null,e));else{var t=Br(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var r=Fr();if(1073741823===t?r=99:1===t||2===t?r=95:(r=10*(1073741821-t)-10*(1073741821-r),r=0>=r?99:250>=r?98:5250>=r?97:95),null!==n){var o=e.callbackPriority;if(e.callbackExpirationTime===t&&o>=r)return;n!==Yl&&Bl(n)}e.callbackExpirationTime=t,e.callbackPriority=r,t=1073741823===t?$t(Vr.bind(null,e)):Wt(r,Hr.bind(null,e),{timeout:10*(1073741821-t)-ru()}),e.callbackNode=t}}}function Hr(e,t){if(ks=0,t)return t=Fr(),No(e,t),qr(e),null;var n=Br(e);if(0!==n){if(t=e.callbackNode,(Ju&(Wu|$u))!==Hu)throw Error(r(327));if(lo(),e===es&&n===ns||Kr(e,n),null!==ts){var o=Ju;Ju|=Wu;for(var a=Yr();;)try{eo();break}catch(t){Xr(e,t)}if(Gt(),Ju=o,Bu.current=a,rs===Ku)throw t=os,Kr(e,n),To(e,n),qr(e),t;if(null===ts)switch(a=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,o=rs,es=null,o){case Qu:case Ku:throw Error(r(345));case Xu:No(e,2=n){e.lastPingedTime=n,Kr(e,n);break}}if(i=Br(e),0!==i&&i!==n)break;if(0!==o&&o!==n){e.lastPingedTime=o;break}e.timeoutHandle=Si(oo.bind(null,e),a);break}oo(e);break;case Gu:if(To(e,n),o=e.lastSuspendedTime,n===o&&(e.nextKnownPendingLevel=ro(a)),ss&&(a=e.lastPingedTime,0===a||a>=n)){e.lastPingedTime=n,Kr(e,n);break}if(a=Br(e),0!==a&&a!==n)break;if(0!==o&&o!==n){e.lastPingedTime=o;break}if(1073741823!==is?o=10*(1073741821-is)-ru():1073741823===as?o=0:(o=10*(1073741821-as)-5e3,a=ru(),n=10*(1073741821-n)-a,o=a-o,0>o&&(o=0),o=(120>o?120:480>o?480:1080>o?1080:1920>o?1920:3e3>o?3e3:4320>o?4320:1960*Uu(o/1960))-o,n=o?o=0:(a=0|l.busyDelayMs,i=ru()-(10*(1073741821-i)-(0|l.timeoutMs||5e3)),o=i<=a?0:a+o-i),10 component higher in the tree to provide a loading indicator or placeholder to display."+N(i))}rs!==Zu&&(rs=Xu),l=yr(l,i),f=a;do{switch(f.tag){case 3:u=l,f.effectTag|=4096,f.expirationTime=t;var w=Ar(f,u,t);ln(f,w); break e;case 1:u=l;var E=f.type,k=f.stateNode;if(0===(64&f.effectTag)&&("function"==typeof E.getDerivedStateFromError||null!==k&&"function"==typeof k.componentDidCatch&&(null===ms||!ms.has(k)))){f.effectTag|=4096,f.expirationTime=t;var _=Ir(f,u,t);ln(f,_);break e}}f=f.return}while(null!==f)}ts=no(ts)}catch(e){t=e;continue}break}}function Yr(){var e=Bu.current;return Bu.current=Cu,null===e?Cu:e}function Gr(e,t){eus&&(us=e)}function Jr(){for(;null!==ts;)ts=to(ts)}function eo(){for(;null!==ts&&!Gl();)ts=to(ts)}function to(e){var t=Fu(e.alternate,e,ns);return e.memoizedProps=e.pendingProps,null===t&&(t=no(e)),qu.current=null,t}function no(e){ts=e;do{var t=ts.alternate;if(e=ts.return,0===(2048&ts.effectTag)){if(t=br(t,ts,ns),1===ns||1!==ts.childExpirationTime){for(var n=0,r=ts.child;null!==r;){var o=r.expirationTime,a=r.childExpirationTime;o>n&&(n=o),a>n&&(n=a),r=r.sibling}ts.childExpirationTime=n}if(null!==t)return t;null!==e&&0===(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=ts.firstEffect),null!==ts.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=ts.firstEffect),e.lastEffect=ts.lastEffect),1e?t:e}function oo(e){var t=qt();return Vt(99,ao.bind(null,e,t)),null}function ao(e,t){do lo();while(null!==gs);if((Ju&(Wu|$u))!==Hu)throw Error(r(327));var n=e.finishedWork,o=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(r(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var a=ro(n);if(e.firstPendingTime=a,o<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:o<=e.firstSuspendedTime&&(e.firstSuspendedTime=o-1),o<=e.lastPingedTime&&(e.lastPingedTime=0),o<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===es&&(ts=es=null,ns=0),1u&&(c=u,u=l,l=c),c=Ue(w,l),f=Ue(w,u),c&&f&&(1!==k.rangeCount||k.anchorNode!==c.node||k.anchorOffset!==c.offset||k.focusNode!==f.node||k.focusOffset!==f.offset)&&(E=E.createRange(),E.setStart(c.node,c.offset),k.removeAllRanges(),l>u?(k.addRange(E),k.extend(f.node,f.offset)):(E.setEnd(f.node,f.offset),k.addRange(E)))))),E=[];for(k=w;k=k.parentNode;)1===k.nodeType&&E.push({element:k,left:k.scrollLeft,top:k.scrollTop});for("function"==typeof w.focus&&w.focus(),w=0;w=t&&e<=t}function To(e,t){var n=e.firstSuspendedTime,r=e.lastSuspendedTime;nt||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function Co(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function No(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function Po(e,t,n,o){var a=t.current,i=Fr(),l=su.suspense;i=jr(i,a,l);e:if(n){n=n._reactInternalFiber;t:{if(J(n)!==n||1!==n.tag)throw Error(r(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(It(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(r(171))}if(1===n.tag){var s=n.type;if(It(s)){n=Dt(n,s,u);break e}}n=u}else n=Al;return null===t.context?t.context=n:t.pendingContext=n,t=on(i,l),t.payload={element:e},o=void 0===o?null:o,null!==o&&(t.callback=o),an(a,t),Dr(a,i),i}function Oo(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case 5:return e.child.stateNode;default:return e.child.stateNode}}function Ro(e,t){e=e.memoizedState,null!==e&&null!==e.dehydrated&&e.retryTime"+t.valueOf().toString()+"",t=ba.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}),Ia={animationend:Y("Animation","AnimationEnd"),animationiteration:Y("Animation","AnimationIteration"),animationstart:Y("Animation","AnimationStart"),transitionend:Y("Transition","TransitionEnd")},Fa={},ja={};na&&(ja=document.createElement("div").style,"AnimationEvent"in window||(delete Ia.animationend.animation,delete Ia.animationiteration.animation,delete Ia.animationstart.animation),"TransitionEvent"in window||delete Ia.transitionend.transition);var Da,Ua,Ba,qa=G("animationend"),Ha=G("animationiteration"),Va=G("animationstart"),Wa=G("transitionend"),$a="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Qa=new("function"==typeof WeakMap?WeakMap:Map),Ka=null,Xa=[],Ya=!1,Ga=[],Za=null,Ja=null,ei=null,ti=new Map,ni=new Map,ri=[],oi="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit".split(" "),ai="focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture".split(" "),ii={},li=new Map,ui=new Map,si=["abort","abort",qa,"animationEnd",Ha,"animationIteration",Va,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Wa,"transitionEnd","waiting","waiting"];Se("blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Se("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Se(si,2);for(var ci="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),fi=0;fi=ji),Bi=String.fromCharCode(32),qi={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Hi=!1,Vi=!1,Wi={eventTypes:qi,extractEvents:function(e,t,n,r){var o;if(Fi)e:{switch(e){case"compositionstart":var a=qi.compositionStart;break e;case"compositionend":a=qi.compositionEnd;break e;case"compositionupdate":a=qi.compositionUpdate;break e}a=void 0}else Vi?dt(e,n)&&(a=qi.compositionEnd):"keydown"===e&&229===n.keyCode&&(a=qi.compositionStart);return a?(Ui&&"ko"!==n.locale&&(Vi||a!==qi.compositionStart?a===qi.compositionEnd&&Vi&&(o=at()):(Ri=r,Li="value"in Ri?Ri.value:Ri.textContent,Vi=!0)),a=Mi.getPooled(a,t,n,r),o?a.data=o:(o=pt(n),null!==o&&(a.data=o)),ot(a),o=a):o=null,(e=Di?ht(e,n):mt(e,n))?(t=Ai.getPooled(qi.beforeInput,t,n,r),t.data=e,ot(t)):t=null,null===o?t:null===t?o:[o,t]}},$i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},Qi={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}},Ki=null,Xi=null,Yi=!1;na&&(Yi=se("input")&&(!document.documentMode||9=document.documentMode,fl={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},dl=null,pl=null,hl=null,ml=!1,bl={eventTypes:fl,extractEvents:function(e,t,n,r,o,a){if(o=a||(r.window===r?r.document:9===r.nodeType?r:r.ownerDocument),!(a=!o)){e:{o=Z(o),a=ta.onSelect;for(var i=0;inu?Hl:function(){return Hl()-nu},ou={current:null},au=null,iu=null,lu=null,uu=!1,su=ma.ReactCurrentBatchConfig,cu=(new Do.Component).refs,fu={isMounted:function(e){return!!(e=e._reactInternalFiber)&&J(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternalFiber;var r=Fr(),o=su.suspense;r=jr(r,e,o),o=on(r,o),o.payload=t,void 0!==n&&null!==n&&(o.callback=n),an(e,o),Dr(e,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternalFiber;var r=Fr(),o=su.suspense;r=jr(r,e,o),o=on(r,o),o.tag=1,o.payload=t,void 0!==n&&null!==n&&(o.callback=n),an(e,o),Dr(e,r)},enqueueForceUpdate:function(e,t){e=e._reactInternalFiber;var n=Fr(),r=su.suspense;n=jr(n,e,r),r=on(n,r),r.tag=2,void 0!==t&&null!==t&&(r.callback=t),an(e,r),Dr(e,n)}},du=Array.isArray,pu=gn(!0),hu=gn(!1),mu={},bu={current:mu},gu={current:mu},yu={current:mu},vu={current:0},wu=ma.ReactCurrentDispatcher,Eu=ma.ReactCurrentBatchConfig,ku=0,_u=null,xu=null,Su=null,Tu=!1,Cu={readContext:tn,useCallback:Sn,useContext:Sn,useEffect:Sn,useImperativeHandle:Sn,useLayoutEffect:Sn,useMemo:Sn,useReducer:Sn,useRef:Sn,useState:Sn,useDebugValue:Sn,useResponder:Sn,useDeferredValue:Sn,useTransition:Sn},Nu={readContext:tn,useCallback:Vn,useContext:tn,useEffect:jn,useImperativeHandle:function(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,In(4,2,Bn.bind(null,t,e),n)},useLayoutEffect:function(e,t){return In(4,2,e,t)},useMemo:function(e,t){var n=Nn();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Nn();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},e=e.dispatch=Kn.bind(null,_u,e),[r.memoizedState,e]},useRef:function(e){var t=Nn();return e={current:e},t.memoizedState=e},useState:zn,useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=zn(e),r=n[0],o=n[1];return jn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=zn(!1),n=t[0];return t=t[1],[Vn(Qn.bind(null,t,e),[t,e]),n]}},Pu={readContext:tn,useCallback:Wn,useContext:tn,useEffect:Dn,useImperativeHandle:qn,useLayoutEffect:Un,useMemo:$n,useReducer:Rn,useRef:An,useState:function(){return Rn(On)},useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=Rn(On),r=n[0],o=n[1];return Dn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=Rn(On),n=t[0];return t=t[1],[Wn(Qn.bind(null,t,e),[t,e]),n]}},Ou={readContext:tn,useCallback:Wn,useContext:tn,useEffect:Dn,useImperativeHandle:qn,useLayoutEffect:Un,useMemo:$n,useReducer:Ln,useRef:An,useState:function(){return Ln(On)},useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=Ln(On),r=n[0],o=n[1];return Dn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=Ln(On),n=t[0];return t=t[1],[Wn(Qn.bind(null,t,e),[t,e]),n]}},Ru=null,Lu=null,zu=!1,Mu=ma.ReactCurrentOwner,Au=!1,Iu={dehydrated:null,retryTime:0};Pl=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Ol=function(){},Rl=function(e,t,n,r,o){var a=e.memoizedProps;if(a!==r){var i=t.stateNode;switch(yn(bu.current),e=null,n){case"input":a=M(i,a),r=M(i,r),e=[];break;case"option":a=B(i,a),r=B(i,r),e=[];break;case"select":a=Uo({},a,{value:void 0}),r=Uo({},r,{value:void 0}),e=[];break;case"textarea":a=H(i,a),r=H(i,r),e=[];break;default:"function"!=typeof a.onClick&&"function"==typeof r.onClick&&(i.onclick=Fe)}Me(n,r);var l,u;n=null;for(l in a)if(!r.hasOwnProperty(l)&&a.hasOwnProperty(l)&&null!=a[l])if("style"===l)for(u in i=a[l])i.hasOwnProperty(u)&&(n||(n={}),n[u]="");else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(ea.hasOwnProperty(l)?e||(e=[]):(e=e||[]).push(l,null));for(l in r){var s=r[l];if(i=null!=a?a[l]:void 0,r.hasOwnProperty(l)&&s!==i&&(null!=s||null!=i))if("style"===l)if(i){for(u in i)!i.hasOwnProperty(u)||s&&s.hasOwnProperty(u)||(n||(n={}),n[u]="");for(u in s)s.hasOwnProperty(u)&&i[u]!==s[u]&&(n||(n={}),n[u]=s[u])}else n||(e||(e=[]),e.push(l,n)),n=s;else"dangerouslySetInnerHTML"===l?(s=s?s.__html:void 0,i=i?i.__html:void 0,null!=s&&i!==s&&(e=e||[]).push(l,s)):"children"===l?i===s||"string"!=typeof s&&"number"!=typeof s||(e=e||[]).push(l,""+s):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(ea.hasOwnProperty(l)?(null!=s&&Ie(o,l),e||i===s||(e=[])):(e=e||[]).push(l,s))}n&&(e=e||[]).push("style",n),o=e,(t.updateQueue=o)&&(t.effectTag|=4)}},Ll=function(e,t,n,r){n!==r&&(t.effectTag|=4)};var Fu,ju="function"==typeof WeakSet?WeakSet:Set,Du="function"==typeof WeakMap?WeakMap:Map,Uu=Math.ceil,Bu=ma.ReactCurrentDispatcher,qu=ma.ReactCurrentOwner,Hu=0,Vu=8,Wu=16,$u=32,Qu=0,Ku=1,Xu=2,Yu=3,Gu=4,Zu=5,Ju=Hu,es=null,ts=null,ns=0,rs=Qu,os=null,as=1073741823,is=1073741823,ls=null,us=0,ss=!1,cs=0,fs=500,ds=null,ps=!1,hs=null,ms=null,bs=!1,gs=null,ys=90,vs=null,ws=0,Es=null,ks=0;Fu=function(e,t,n){var o=t.expirationTime;if(null!==e){var a=t.pendingProps;if(e.memoizedProps!==a||Fl.current)Au=!0;else{if(o=n?cr(e,t,n):(Mt(vu,1&vu.current),t=hr(e,t,n),null!==t?t.sibling:null);Mt(vu,1&vu.current);break;case 19:if(o=t.childExpirationTime>=n,0!==(64&e.effectTag)){if(o)return pr(e,t,n);t.effectTag|=64}if(a=t.memoizedState,null!==a&&(a.rendering=null,a.tail=null),Mt(vu,vu.current),!o)return null}return hr(e,t,n)}Au=!1}}else Au=!1;switch(t.expirationTime=0,t.tag){case 2:if(o=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,a=At(t,Il.current),en(t,n),a=Cn(null,t,o,e,a,n),t.effectTag|=1,"object"==typeof a&&null!==a&&"function"==typeof a.render&&void 0===a.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,It(o)){var i=!0;Ut(t)}else i=!1;t.memoizedState=null!==a.state&&void 0!==a.state?a.state:null,nn(t);var l=o.getDerivedStateFromProps;"function"==typeof l&&cn(t,o,l,e),a.updater=fu,t.stateNode=a,a._reactInternalFiber=t,hn(t,o,e,n),t=ur(null,t,o,!0,i,n)}else t.tag=0,tr(null,t,a,n),t=t.child;return t;case 16:e:{if(a=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,T(a),1!==a._status)throw a._result;switch(a=a._result,t.type=a,i=t.tag=yo(a),e=Yt(a,e),i){case 0:t=ir(null,t,a,e,n);break e;case 1:t=lr(null,t,a,e,n);break e;case 11:t=nr(null,t,a,e,n);break e;case 14:t=rr(null,t,a,Yt(a.type,e),o,n);break e}throw Error(r(306,a,""))}return t;case 0:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),ir(e,t,o,a,n);case 1:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),lr(e,t,o,a,n);case 3:if(sr(t),o=t.updateQueue,null===e||null===o)throw Error(r(282));if(o=t.pendingProps,a=t.memoizedState,a=null!==a?a.element:null,rn(e,t),un(t,o,null,n),o=t.memoizedState.element,o===a)er(),t=hr(e,t,n);else{if((a=t.stateNode.hydrate)&&(Lu=$e(t.stateNode.containerInfo.firstChild),Ru=t,a=zu=!0),a)for(n=hu(t,null,o,n),t.child=n;n;)n.effectTag=n.effectTag&-3|1024,n=n.sibling;else tr(e,t,o,n),er();t=t.child}return t;case 5:return En(t),null===e&&Gn(t),o=t.type,a=t.pendingProps,i=null!==e?e.memoizedProps:null,l=a.children,We(o,a)?l=null:null!==i&&We(o,i)&&(t.effectTag|=16),ar(e,t),4&t.mode&&1!==n&&a.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):(tr(e,t,l,n),t=t.child),t;case 6:return null===e&&Gn(t),null;case 13:return cr(e,t,n);case 4:return vn(t,t.stateNode.containerInfo),o=t.pendingProps,null===e?t.child=pu(t,null,o,n):tr(e,t,o,n),t.child;case 11:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),nr(e,t,o,a,n);case 7:return tr(e,t,t.pendingProps,n),t.child;case 8:return tr(e,t,t.pendingProps.children,n),t.child;case 12:return tr(e,t,t.pendingProps.children,n),t.child;case 10:e:{o=t.type._context,a=t.pendingProps,l=t.memoizedProps,i=a.value;var u=t.type._context;if(Mt(ou,u._currentValue),u._currentValue=i,null!==l)if(u=l.value,i=ul(u,i)?0:0|("function"==typeof o._calculateChangedBits?o._calculateChangedBits(u,i):1073741823),0===i){if(l.children===a.children&&!Fl.current){t=hr(e,t,n);break e}}else for(u=t.child,null!==u&&(u.return=t);null!==u;){var s=u.dependencies;if(null!==s){l=u.child;for(var c=s.firstContext;null!==c;){if(c.context===o&&0!==(c.observedBits&i)){1===u.tag&&(c=on(n,null),c.tag=2,an(u,c)),u.expirationTimeB.length&&B.push(e)}function p(e,t,n,o){var a=typeof e;"undefined"!==a&&"boolean"!==a||(e=null);var i=!1;if(null===e)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case k:case _:i=!0}}if(i)return n(o,e,""===t?"."+m(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var l=0;l>>1,o=e[r];if(!(void 0!==o&&0a(l,n))void 0!==s&&0>a(s,l)?(e[r]=s,e[u]=n,r=u):(e[r]=l,e[i]=n,r=i);else{if(!(void 0!==s&&0>a(s,n)))break e;e[r]=s,e[u]=n,r=u}}}return t}return null}function a(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}function i(e){for(var t=r(z);null!==t;){if(null===t.callback)o(z);else{if(!(t.startTime<=e))break;o(z),t.sortIndex=t.expirationTime,n(L,t)}t=r(z)}}function l(e){if(D=!1,i(e),!j)if(null!==r(L))j=!0,c(u);else{var t=r(z);null!==t&&f(l,t.startTime-e)}}function u(e,n){j=!1,D&&(D=!1,d()),F=!0;var a=I;try{for(i(n),A=r(L);null!==A&&(!(A.expirationTime>n)||e&&!p());){var u=A.callback;if(null!==u){A.callback=null,I=A.priorityLevel;var s=u(A.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?A.callback=s:A===r(L)&&o(L),i(n)}else o(L);A=r(L)}if(null!==A)var c=!0;else{var h=r(z);null!==h&&f(l,h.startTime-n),c=!1}return c}finally{A=null,I=a,F=!1}}function s(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var c,f,d,p,h;if("undefined"==typeof window||"function"!=typeof MessageChannel){var m=null,b=null,g=function(){if(null!==m)try{var e=t.unstable_now();m(!0,e),m=null}catch(e){throw setTimeout(g,0),e}},y=Date.now();t.unstable_now=function(){return Date.now()-y},c=function(e){null!==m?setTimeout(c,0,e):(m=e,setTimeout(g,0))},f=function(e,t){b=setTimeout(e,t)},d=function(){clearTimeout(b)},p=function(){return!1},h=t.unstable_forceFrameRate=function(){}}else{var v=window.performance,w=window.Date,E=window.setTimeout,k=window.clearTimeout;if("undefined"!=typeof console){var _=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&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 _&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}if("object"==typeof v&&"function"==typeof v.now)t.unstable_now=function(){return v.now()};else{var x=w.now();t.unstable_now=function(){return w.now()-x}}var S=!1,T=null,C=-1,N=5,P=0;p=function(){return t.unstable_now()>=P},h=function(){},t.unstable_forceFrameRate=function(e){0>e||125i?(e.sortIndex=p,n(z,e),null===r(L)&&e===r(z)&&(D?d():D=!0,f(l,p-i))):(e.sortIndex=a,n(L,e),j||F||(j=!0,c(u))),e},t.unstable_shouldYield=function(){var e=t.unstable_now();i(e);var n=r(L);return n!==A&&null!==A&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime-1?t:e}function f(e,t){t=t||{};var n=t.body;if(f.prototype.isPrototypeOf(e)){if(e.bodyUsed)throw new TypeError("Already read");this.url=e.url,this.credentials=e.credentials,t.headers||(this.headers=new o(e.headers)),this.method=e.method,this.mode=e.mode,n||(n=e._bodyInit,e.bodyUsed=!0)}else this.url=e;if(this.credentials=t.credentials||this.credentials||"omit",!t.headers&&this.headers||(this.headers=new o(t.headers)),this.method=c(t.method||this.method||"GET"),this.mode=t.mode||this.mode||null,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&n)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(n)}function d(e){var t=new FormData;return e.trim().split("&").forEach(function(e){if(e){var n=e.split("="),r=n.shift().replace(/\+/g," "),o=n.join("=").replace(/\+/g," ");t.append(decodeURIComponent(r),decodeURIComponent(o))}}),t}function p(e){var t=new o,n=(e.getAllResponseHeaders()||"").trim().split("\n");return n.forEach(function(e){var n=e.trim().split(":"),r=n.shift().trim(),o=n.join(":").trim();t.append(r,o)}),t}function h(e,t){t||(t={}),this.type="default",this.status=t.status,this.ok=this.status>=200&&this.status<300,this.statusText=t.statusText,this.headers=t.headers instanceof o?t.headers:new o(t.headers),this.url=t.url||"",this._initBody(e)}if(!e.fetch){var m={searchParams:"URLSearchParams"in e,iterable:"Symbol"in e&&"iterator"in Symbol,blob:"FileReader"in e&&"Blob"in e&&function(){try{return new Blob,!0}catch(e){return!1}}(),formData:"FormData"in e,arrayBuffer:"ArrayBuffer"in e};o.prototype.append=function(e,r){e=t(e),r=n(r);var o=this.map[e];o||(o=[],this.map[e]=o),o.push(r)},o.prototype.delete=function(e){delete this.map[t(e)]},o.prototype.get=function(e){var n=this.map[t(e)];return n?n[0]:null},o.prototype.getAll=function(e){return this.map[t(e)]||[]},o.prototype.has=function(e){return this.map.hasOwnProperty(t(e))},o.prototype.set=function(e,r){this.map[t(e)]=[n(r)]},o.prototype.forEach=function(e,t){Object.getOwnPropertyNames(this.map).forEach(function(n){this.map[n].forEach(function(r){e.call(t,r,n,this)},this)},this)},o.prototype.keys=function(){var e=[];return this.forEach(function(t,n){e.push(n)}),r(e)},o.prototype.values=function(){var e=[];return this.forEach(function(t){e.push(t)}),r(e)},o.prototype.entries=function(){var e=[];return this.forEach(function(t,n){e.push([n,t])}),r(e)},m.iterable&&(o.prototype[Symbol.iterator]=o.prototype.entries);var b=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];f.prototype.clone=function(){return new f(this)},s.call(f.prototype),s.call(h.prototype),h.prototype.clone=function(){return new h(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new o(this.headers),url:this.url})},h.error=function(){var e=new h(null,{status:0,statusText:""});return e.type="error",e};var g=[301,302,303,307,308];h.redirect=function(e,t){if(g.indexOf(t)===-1)throw new RangeError("Invalid status code");return new h(null,{status:t,headers:{location:e}})},e.Headers=o,e.Request=f,e.Response=h,e.fetch=function(e,t){return new Promise(function(n,r){function o(){return"responseURL"in i?i.responseURL:/^X-Request-URL:/m.test(i.getAllResponseHeaders())?i.getResponseHeader("X-Request-URL"):void 0}var a;a=f.prototype.isPrototypeOf(e)&&!t?e:new f(e,t);var i=new XMLHttpRequest;i.onload=function(){var e={status:i.status,statusText:i.statusText,headers:p(i),url:o()},t="response"in i?i.response:i.responseText;n(new h(t,e))},i.onerror=function(){r(new TypeError("Network request failed"))},i.ontimeout=function(){r(new TypeError("Network request failed")); },i.open(a.method,a.url,!0),"include"===a.credentials&&(i.withCredentials=!0),"responseType"in i&&m.blob&&(i.responseType="blob"),a.headers.forEach(function(e,t){i.setRequestHeader(t,e)}),i.send("undefined"==typeof a._bodyInit?null:a._bodyInit)})},e.fetch.polyfill=!0}}("undefined"!=typeof self?self:this)}]));