"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9354],{13591(R,h,o){o.r(h),o.d(h,{BenchmarksPage:()=>g,default:()=>D});var a=o(14553),l=o(37240),u=o(55501),F=o(55655),X=o(4146),$=o(37448),w=o(71287),A=a.Fragment,e=function(s,t,i){return l.h.call(t,"css")?a.jsx(l.E,(0,l.c)(s,t),i):a.jsx(s,t,i)},f=function(s,t,i){return l.h.call(t,"css")?a.jsxs(l.E,(0,l.c)(s,t),i):a.jsxs(s,t,i)},d=o(22803),C=o(46942),x=o.n(C),r=o(63142),N=o(45861),j=o(41654);function p(){return console.log("process.env.NODE_ENV","production"),f(j.B,{direction:"column",children:[e("div",{children:"Emotion performance tests"}),e(c,{name:"No styles",Component:W}),e(c,{name:"inline emotion/css",Component:U}),e(c,{name:"useStyles no cx",Component:z}),e(c,{name:"useStyles with conditional cx styles",Component:E}),e(c,{name:"useStyles with css prop",Component:T}),e(c,{name:"useStyles with conditional css prop",Component:B}),e(c,{name:"useStyles with conditional classnames",Component:P})]})}const c=({name:n,Component:s})=>{const[t,i]=(0,u.useState)(0);return f("div",{children:[e(N.$n,{onClick:()=>i(t>2?0:t+1),children:n}),t>0&&e(O,{id:n,children:b(s)})]})};c.displayName="TestScenario";function b(n){const s=[];for(let t=0;t<5e3;t++)s.push(e(n,{index:t},t.toString()));return e("div",{style:{display:"flex",flexWrap:"wrap"},children:s})}function z({index:n}){const s=(0,r.of)(m);return e("div",{className:s.main,children:e("div",{className:s.child,children:n})})}function E({index:n}){const s=(0,r.of)(m),t=(0,d.cx)(s.main,{[s.large]:n>10,[s.disabed]:n%10===0});return e("div",{className:t,children:e("div",{className:s.child,children:n})})}function P({index:n}){const s=(0,r.of)(m),t=x()(s.main,{[s.large]:n>10,[s.disabed]:n%10===0});return e("div",{className:t,children:e("div",{className:s.child,children:n})})}function T({index:n}){const s=(0,r.of)(v);return e("div",{css:s.main,children:e("div",{css:s.child,children:n})})}function B({index:n}){const s=(0,r.of)(v),t=[s.main,n>10&&s.large,n%10===0&&s.disabed];return e("div",{css:t,children:e("div",{css:s.child,children:n})})}function U({index:n}){const s=(0,r.$j)(),t=m(s);return e("div",{className:t.main,children:e("div",{className:t.child,children:n})})}function W({index:n}){return e("div",{className:"no-styles-main",children:e("div",{className:"no-styles-child",children:n})})}function O({children:n,id:s}){const t=(i,I,M,V,G,H)=>{console.log("Profile "+i,M)};return e(u.Profiler,{id:s,onRender:t,children:n})}const m=n=>({main:(0,d.css)(S(n)),large:(0,d.css)({fontSize:"20px",color:"red"}),disabed:(0,d.css)({fontSize:"10px",color:"gray"}),child:(0,d.css)(y(n))}),v=n=>({main:S(n),large:{fontSize:"20px",color:"red"},disabed:{fontSize:"10px",color:"gray"},child:y(n)});function S(n){return{background:"blue",border:"1px solid red",color:"white",padding:n.spacing(1),shadow:n.shadows.z1,":hover":{background:n.colors.background.primary}}}function y(n){return{padding:"2px",fontSize:"10px",boxShadow:"none",textAlign:"center",textDecoration:"none"}}const g=()=>(0,a.jsx)(p,{}),D=g}}]);

//# sourceMappingURL=BenchmarksPage-react19.9adb3202bb5ef79a0fbb.js.map