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

//# sourceMappingURL=BenchmarksPage.17770588f9263a33947f.js.map