"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9354],{20805(M,h,o){o.r(h),o.d(h,{BenchmarksPage:()=>g,default:()=>O});var l=o(74848),r=o(98837),u=o(96540),R=o(55655),w=o(4146),A=o(37448),F=o(71287),X=l.Fragment,e=function(s,t,i){return r.h.call(t,"css")?l.jsx(r.E,(0,r.c)(s,t),i):l.jsx(s,t,i)},f=function(s,t,i){return r.h.call(t,"css")?l.jsxs(r.E,(0,r.c)(s,t),i):l.jsxs(s,t,i)},d=o(22803),x=o(34164),a=o(49439),C=o(45270),N=o(68763);function j(){return console.log("process.env.NODE_ENV","production"),f(N.B,{direction:"column",children:[e("div",{children:"Emotion performance tests"}),e(c,{name:"No styles",Component:U}),e(c,{name:"inline emotion/css",Component:B}),e(c,{name:"useStyles no cx",Component:b}),e(c,{name:"useStyles with conditional cx styles",Component:z}),e(c,{name:"useStyles with css prop",Component:P}),e(c,{name:"useStyles with conditional css prop",Component:T}),e(c,{name:"useStyles with conditional classnames",Component:E})]})}const c=({name:n,Component:s})=>{const[t,i]=(0,u.useState)(0);return f("div",{children:[e(C.$n,{onClick:()=>i(t>2?0:t+1),children:n}),t>0&&e(W,{id:n,children:p(s)})]})};c.displayName="TestScenario";function p(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 b({index:n}){const s=(0,a.of)(m);return e("div",{className:s.main,children:e("div",{className:s.child,children:n})})}function z({index:n}){const s=(0,a.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 E({index:n}){const s=(0,a.of)(m),t=(0,x.A)(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,a.of)(S);return e("div",{css:s.main,children:e("div",{css:s.child,children:n})})}function T({index:n}){const s=(0,a.of)(S),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 B({index:n}){const s=(0,a.$j)(),t=m(s);return e("div",{className:t.main,children:e("div",{className:t.child,children:n})})}function U({index:n}){return e("div",{className:"no-styles-main",children:e("div",{className:"no-styles-child",children:n})})}function W({children:n,id:s}){const t=(i,$,D,I,V,G)=>{console.log("Profile "+i,D)};return e(u.Profiler,{id:s,onRender:t,children:n})}const m=n=>({main:(0,d.css)(v(n)),large:(0,d.css)({fontSize:"20px",color:"red"}),disabed:(0,d.css)({fontSize:"10px",color:"gray"}),child:(0,d.css)(y(n))}),S=n=>({main:v(n),large:{fontSize:"20px",color:"red"},disabed:{fontSize:"10px",color:"gray"},child:y(n)});function v(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,l.jsx)(j,{}),O=g}}]);

//# sourceMappingURL=BenchmarksPage.27ca55a8663cd5848c1b.js.map