"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[2833],{"./src/components/Layout/Box/Box.story.tsx":function(F,b,d){d.r(b),d.d(b,{Background:function(){return D},Basic:function(){return V},Border:function(){return W},Shadow:function(){return N},default:function(){return s}});var c=d("../../node_modules/react/index.js"),u=d("./src/utils/storybook/themeStorybookControls.tsx"),h=d("./src/components/Text/Text.tsx"),t=d("./src/components/Layout/Stack/Stack.tsx"),n=d("./src/components/Layout/Box/Box.tsx"),o=d("../../node_modules/react/jsx-runtime.js"),S=d("../../node_modules/@mdx-js/react/lib/index.js"),O=d("../../node_modules/@storybook/blocks/dist/index.mjs");function w(_){const p=Object.assign({h1:"h1",p:"p",h3:"h3",h4:"h4",ol:"ol",li:"li",code:"code",ul:"ul",pre:"pre"},(0,S.RP)(),_.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(O.W8,{title:"MDX|Box",component:n.a}),`
`,(0,o.jsx)(p.h1,{id:"box",children:"Box"}),`
`,(0,o.jsx)(p.p,{children:`The Box Component is the most basic layout component. It can be used to build more complex components and layouts with properties
that use our design tokens instead of using CSS.`}),`
`,(0,o.jsx)(p.h3,{id:"usage",children:"Usage"}),`
`,(0,o.jsx)(p.h4,{id:"when-to-use",children:"When to use"}),`
`,(0,o.jsx)(p.p,{children:"Use it whenever you would use custom CSS."}),`
`,(0,o.jsx)(p.h4,{id:"when-not-to-use",children:"When not to use"}),`
`,(0,o.jsx)(p.p,{children:"If you need layout styles, use the Stack or Grid components instead."}),`
`,(0,o.jsx)(p.h3,{id:"how-to-add-a-prop-to-box",children:"How to add a prop to Box"}),`
`,(0,o.jsxs)(p.ol,{children:[`
`,(0,o.jsx)(p.li,{children:"Make sure you absolutely need this prop. If in doubt, ask someone from the design system team."}),`
`,(0,o.jsxs)(p.li,{children:["Add the prop to the ",(0,o.jsx)(p.code,{children:"BoxProps"})," interface in ",(0,o.jsx)(p.code,{children:"Box.tsx"}),".",`
`,(0,o.jsxs)(p.ul,{children:[`
`,(0,o.jsxs)(p.li,{children:["Make sure it is strictly typed, making use of design tokens if needed. Instead of ",(0,o.jsx)(p.code,{children:"[propName]: number"}),", use ",(0,o.jsx)(p.code,{children:"[propName]: ThemeSpacingTokens"}),";"]}),`
`,(0,o.jsxs)(p.li,{children:["If it is a CSS prop, you should make it responsive. To do so, instead of defining it as ",(0,o.jsx)(p.code,{children:"[propName]: ThemeSpacingTokens"}),`,
define it as `,(0,o.jsx)(p.code,{children:"[propName]: ResponsiveProp<ThemeSpacingTokens>"}),"."]}),`
`]}),`
`]}),`
`,(0,o.jsxs)(p.li,{children:["Add it to the CSS array in ",(0,o.jsx)(p.code,{children:"getStyles"})," in ",(0,o.jsx)(p.code,{children:"Box.tsx"}),".",`
`,(0,o.jsxs)(p.ul,{children:[`
`,(0,o.jsxs)(p.li,{children:["If it is a ",(0,o.jsx)(p.code,{children:"ResponsiveProp"}),", you should use the ",(0,o.jsx)(p.code,{children:"getResponsiveStyle"})," helper function"]}),`
`]}),`
`,(0,o.jsx)(p.pre,{children:(0,o.jsx)(p.code,{children:` getResponsiveStyle(theme, [propName], (val) => ({
     [cssProp]: theme.spacing(val),
 })),
`})}),`
`]}),`
`,(0,o.jsxs)(p.li,{children:["Add it to the ",(0,o.jsx)(p.code,{children:"Box"})," story in ",(0,o.jsx)(p.code,{children:"Box.internal.story.tsx"}),", by explicity adding it to ",(0,o.jsx)(p.code,{children:"Basic.argTypes"})]}),`
`]}),`
`,(0,o.jsx)(p.h3,{id:"props",children:"Props"}),`
`,(0,o.jsx)(O.ov,{of:n.a})]})}function L(_={}){const{wrapper:p}=Object.assign({},(0,S.RP)(),_.components);return p?(0,o.jsx)(p,Object.assign({},_,{children:(0,o.jsx)(w,_)})):w(_)}var j=L,P=Object.defineProperty,I=Object.defineProperties,g=Object.getOwnPropertyDescriptors,x=Object.getOwnPropertySymbols,e=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,r=(_,p,M)=>p in _?P(_,p,{enumerable:!0,configurable:!0,writable:!0,value:M}):_[p]=M,a=(_,p)=>{for(var M in p||(p={}))e.call(p,M)&&r(_,M,p[M]);if(x)for(var M of x(p))l.call(p,M)&&r(_,M,p[M]);return _},i=(_,p)=>I(_,g(p)),y,v,m,f,E,R,C,T,B,k,A,K;const Y=["primary","secondary","canvas","error","success","warning","info"],U=["weak","medium","strong","error","success","warning","info",void 0],q=["dashed","solid",void 0],$=["default","pill","circle"],X=["z1","z2","z3"],z={title:"General/Layout/Box",component:n.a,parameters:{docs:{page:j},controls:{exclude:["element"]}}},H=({background:_})=>c.createElement("div",{style:{width:"50px",height:"50px",background:_}}),V=_=>c.createElement(t.B,null,c.createElement(n.a,a({borderColor:"medium"},_),"Box"));V.argTypes={grow:{control:"number"},shrink:{control:"number"},margin:u.C,marginX:u.C,marginY:u.C,marginTop:u.C,marginBottom:u.C,marginLeft:u.C,marginRight:u.C,padding:u.C,paddingX:u.C,paddingY:u.C,paddingTop:u.C,paddingBottom:u.C,paddingLeft:u.C,paddingRight:u.C,display:{control:"select",options:["flex","block","inline","none"]},backgroundColor:{control:"select",options:Y},borderStyle:{control:"select",options:q},borderColor:{control:"select",options:U},borderRadius:{control:"select",options:$},boxShadow:{control:"select",options:X}},V.args={borderColor:"medium",borderStyle:"solid"};const D=()=>c.createElement(t.B,{gap:4},Y.map(_=>c.createElement(t.B,{key:_,direction:"column",alignItems:"flex-start"},_,c.createElement(n.a,{backgroundColor:_,borderColor:"strong",borderStyle:"solid"},c.createElement(H,null))))),W=()=>c.createElement(t.B,{direction:"column",gap:4},c.createElement("div",null,c.createElement(h.E,{variant:"h4"},"Border Color"),c.createElement(t.B,{gap:4,wrap:"wrap"},U.map(_=>c.createElement(t.B,{key:_,direction:"column",alignItems:"flex-start"},_,c.createElement(n.a,{borderColor:_,borderStyle:"solid"},c.createElement(H,null)))))),c.createElement("div",null,c.createElement(h.E,{variant:"h4"},"Border Style"),c.createElement(t.B,{gap:4,wrap:"wrap"},q.map(_=>c.createElement(t.B,{key:_,direction:"column",alignItems:"flex-start"},_,c.createElement(n.a,{borderColor:"info",borderStyle:_},c.createElement(H,null))))))),N=()=>c.createElement(t.B,{gap:4},X.map(_=>c.createElement(t.B,{key:_,direction:"column",alignItems:"flex-start"},_,c.createElement(n.a,{boxShadow:_,borderColor:"strong",borderStyle:"solid"},c.createElement(H,null)))));var s=z;V.parameters=i(a({},V.parameters),{docs:i(a({},(y=V.parameters)==null?void 0:y.docs),{source:a({originalSource:`args => {
  return <Stack>
      <Box borderColor="medium" {...args}>
        Box
      </Box>
    </Stack>;
}`},(m=(v=V.parameters)==null?void 0:v.docs)==null?void 0:m.source)})}),D.parameters=i(a({},D.parameters),{docs:i(a({},(f=D.parameters)==null?void 0:f.docs),{source:a({originalSource:`() => {
  return <Stack gap={4}>
      {backgroundOptions.map(background => <Stack key={background} direction="column" alignItems="flex-start">
          {background}
          <Box backgroundColor={background} borderColor="strong" borderStyle="solid">
            <Item />
          </Box>
        </Stack>)}
    </Stack>;
}`},(R=(E=D.parameters)==null?void 0:E.docs)==null?void 0:R.source)})}),W.parameters=i(a({},W.parameters),{docs:i(a({},(C=W.parameters)==null?void 0:C.docs),{source:a({originalSource:`() => {
  return <Stack direction="column" gap={4}>
      <div>
        <Text variant="h4">Border Color</Text>
        <Stack gap={4} wrap="wrap">
          {borderColorOptions.map(border => <Stack key={border} direction="column" alignItems="flex-start">
              {border}
              <Box borderColor={border} borderStyle="solid">
                <Item />
              </Box>
            </Stack>)}
        </Stack>
      </div>
      <div>
        <Text variant="h4">Border Style</Text>
        <Stack gap={4} wrap="wrap">
          {borderStyleOptions.map(border => <Stack key={border} direction="column" alignItems="flex-start">
              {border}
              <Box borderColor="info" borderStyle={border}>
                <Item />
              </Box>
            </Stack>)}
        </Stack>
      </div>
    </Stack>;
}`},(B=(T=W.parameters)==null?void 0:T.docs)==null?void 0:B.source)})}),N.parameters=i(a({},N.parameters),{docs:i(a({},(k=N.parameters)==null?void 0:k.docs),{source:a({originalSource:`() => {
  return <Stack gap={4}>
      {boxShadowOptions.map(shadow => <Stack key={shadow} direction="column" alignItems="flex-start">
          {shadow}
          <Box boxShadow={shadow} borderColor="strong" borderStyle="solid">
            <Item />
          </Box>
        </Stack>)}
    </Stack>;
}`},(K=(A=N.parameters)==null?void 0:A.docs)==null?void 0:K.source)})})},"./src/components/Layout/Box/Box.tsx":function(F,b,d){d.d(b,{a:function(){return P}});var c=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=d("../../node_modules/react/index.js"),h=d("./src/themes/ThemeContext.tsx"),t=d("./src/components/Layout/utils/responsiveness.tsx"),n=Object.defineProperty,o=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,w=(e,l,r)=>l in e?n(e,l,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[l]=r,L=(e,l)=>{for(var r in l||(l={}))S.call(l,r)&&w(e,r,l[r]);if(o)for(var r of o(l))O.call(l,r)&&w(e,r,l[r]);return e},j=(e,l)=>{var r={};for(var a in e)S.call(e,a)&&l.indexOf(a)<0&&(r[a]=e[a]);if(e!=null&&o)for(var a of o(e))l.indexOf(a)<0&&O.call(e,a)&&(r[a]=e[a]);return r};const P=(0,u.forwardRef)((e,l)=>{const r=e,{children:a,margin:i,marginX:y,marginY:v,marginTop:m,marginBottom:f,marginLeft:E,marginRight:R,padding:C,paddingX:T,paddingY:B,paddingTop:k,paddingBottom:A,paddingLeft:K,paddingRight:Y,display:U,backgroundColor:q,grow:$,shrink:X,basis:z,flex:H,borderColor:V,borderStyle:D,borderRadius:W,justifyContent:N,alignItems:s,boxShadow:_,element:p,gap:M}=r,G=j(r,["children","margin","marginX","marginY","marginTop","marginBottom","marginLeft","marginRight","padding","paddingX","paddingY","paddingTop","paddingBottom","paddingLeft","paddingRight","display","backgroundColor","grow","shrink","basis","flex","borderColor","borderStyle","borderRadius","justifyContent","alignItems","boxShadow","element","gap"]),J=(0,h.of)(x,i,y,v,m,f,E,R,C,T,B,k,A,K,Y,U,q,$,X,z,H,V,D,W,N,s,_,M),Z=p??"div";return u.createElement(Z,L({ref:l,className:J.root},G),a)});P.displayName="Box";const I=(e,l)=>{switch(e){case"error":case"success":case"info":case"warning":return l.colors[e].borderTransparent;default:return e?l.colors.border[e]:void 0}},g=(e,l)=>{switch(e){case"error":case"success":case"info":case"warning":return l.colors[e].transparent;default:return e?l.colors.background[e]:void 0}},x=(e,l,r,a,i,y,v,m,f,E,R,C,T,B,k,A,K,Y,U,q,$,X,z,H,V,D,W,N)=>({root:(0,c.AH)([(0,t.Y)(e,l,s=>({margin:e.spacing(s)})),(0,t.Y)(e,r,s=>({marginLeft:e.spacing(s),marginRight:e.spacing(s)})),(0,t.Y)(e,a,s=>({marginTop:e.spacing(s),marginBottom:e.spacing(s)})),(0,t.Y)(e,i,s=>({marginTop:e.spacing(s)})),(0,t.Y)(e,y,s=>({marginBottom:e.spacing(s)})),(0,t.Y)(e,v,s=>({marginLeft:e.spacing(s)})),(0,t.Y)(e,m,s=>({marginRight:e.spacing(s)})),(0,t.Y)(e,f,s=>({padding:e.spacing(s)})),(0,t.Y)(e,E,s=>({paddingLeft:e.spacing(s),paddingRight:e.spacing(s)})),(0,t.Y)(e,R,s=>({paddingTop:e.spacing(s),paddingBottom:e.spacing(s)})),(0,t.Y)(e,C,s=>({paddingTop:e.spacing(s)})),(0,t.Y)(e,T,s=>({paddingBottom:e.spacing(s)})),(0,t.Y)(e,B,s=>({paddingLeft:e.spacing(s)})),(0,t.Y)(e,k,s=>({paddingRight:e.spacing(s)})),(0,t.Y)(e,A,s=>({display:s})),(0,t.Y)(e,K,s=>({backgroundColor:g(s,e)})),(0,t.Y)(e,Y,s=>({flexGrow:s})),(0,t.Y)(e,U,s=>({flexShrink:s})),(0,t.Y)(e,q,s=>({flexBasis:s})),(0,t.Y)(e,$,s=>({flex:s})),(0,t.Y)(e,z,s=>({borderStyle:s})),(0,t.Y)(e,X,s=>({borderColor:I(s,e)})),(z||X)&&{borderWidth:"1px"},(0,t.Y)(e,V,s=>({justifyContent:s})),(0,t.Y)(e,D,s=>({alignItems:s})),(0,t.Y)(e,H,s=>({borderRadius:e.shape.radius[s]})),(0,t.Y)(e,W,s=>({boxShadow:e.shadows[s]})),(0,t.Y)(e,N,s=>({gap:e.spacing(s)}))])});try{P.displayName="Box",P.__docgenInfo={description:"",displayName:"Box",props:{margin:{defaultValue:null,description:"Sets the property `margin`",name:"margin",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginX:{defaultValue:null,description:"Sets the properties `margin-top` and `margin-bottom`. Higher priority than margin.",name:"marginX",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginY:{defaultValue:null,description:"Sets the properties `margin-left` and `margin-right`. Higher priority than margin.",name:"marginY",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginTop:{defaultValue:null,description:"Sets the property `margin-top`. Higher priority than margin and marginY.",name:"marginTop",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginBottom:{defaultValue:null,description:"Sets the property `margin-bottom`. Higher priority than margin and marginXY",name:"marginBottom",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginLeft:{defaultValue:null,description:"Sets the property `margin-left`. Higher priority than margin and marginX.",name:"marginLeft",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginRight:{defaultValue:null,description:"Sets the property `margin-right`. Higher priority than margin and marginX.",name:"marginRight",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},padding:{defaultValue:null,description:"Sets the property `padding`",name:"padding",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingX:{defaultValue:null,description:"Sets the properties `padding-top` and `padding-bottom`. Higher priority than padding.",name:"paddingX",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingY:{defaultValue:null,description:"Sets the properties `padding-left` and `padding-right`. Higher priority than padding.",name:"paddingY",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingTop:{defaultValue:null,description:"Sets the property `padding-top`. Higher priority than padding and paddingY.",name:"paddingTop",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingBottom:{defaultValue:null,description:"Sets the property `padding-bottom`. Higher priority than padding and paddingY.",name:"paddingBottom",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingLeft:{defaultValue:null,description:"Sets the property `padding-left`. Higher priority than padding and paddingX.",name:"paddingLeft",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingRight:{defaultValue:null,description:"Sets the property `padding-right`. Higher priority than padding and paddingX.",name:"paddingRight",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},borderStyle:{defaultValue:null,description:"",name:"borderStyle",required:!1,type:{name:"ResponsiveProp<BorderStyle>"}},borderColor:{defaultValue:null,description:"",name:"borderColor",required:!1,type:{name:"ResponsiveProp<BorderColor>"}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:"ResponsiveProp<keyof Radii>"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"ResponsiveProp<AlignItems>"}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"ResponsiveProp<JustifyContent>"}},gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},backgroundColor:{defaultValue:null,description:"",name:"backgroundColor",required:!1,type:{name:"ResponsiveProp<BackgroundColor>"}},display:{defaultValue:null,description:"",name:"display",required:!1,type:{name:"ResponsiveProp<Display>"}},boxShadow:{defaultValue:null,description:"",name:"boxShadow",required:!1,type:{name:"ResponsiveProp<keyof ThemeShadows>"}},element:{defaultValue:null,description:"Sets the HTML element that will be rendered as a Box. Defaults to 'div'",name:"element",required:!1,type:{name:"ElementType"}},grow:{defaultValue:null,description:"Sets the property `flex-grow`",name:"grow",required:!1,type:{name:"ResponsiveProp<number>"}},shrink:{defaultValue:null,description:"Sets the property `flex-shrink`",name:"shrink",required:!1,type:{name:"ResponsiveProp<number>"}},basis:{defaultValue:null,description:"Sets the property `flex-basis`",name:"basis",required:!1,type:{name:"ResponsiveProp<FlexBasis>"}},flex:{defaultValue:null,description:"Sets the property `flex`",name:"flex",required:!1,type:{name:"ResponsiveProp<Flex>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Box/Box.tsx#Box"]={docgenInfo:P.__docgenInfo,name:"Box",path:"src/components/Layout/Box/Box.tsx#Box"})}catch{}},"./src/components/Layout/Stack/Stack.tsx":function(F,b,d){d.d(b,{B:function(){return P}});var c=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=d("../../node_modules/react/index.js"),h=d("./src/themes/ThemeContext.tsx"),t=d("./src/components/Layout/utils/responsiveness.tsx"),n=Object.defineProperty,o=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,w=(g,x,e)=>x in g?n(g,x,{enumerable:!0,configurable:!0,writable:!0,value:e}):g[x]=e,L=(g,x)=>{for(var e in x||(x={}))S.call(x,e)&&w(g,e,x[e]);if(o)for(var e of o(x))O.call(x,e)&&w(g,e,x[e]);return g},j=(g,x)=>{var e={};for(var l in g)S.call(g,l)&&x.indexOf(l)<0&&(e[l]=g[l]);if(g!=null&&o)for(var l of o(g))x.indexOf(l)<0&&O.call(g,l)&&(e[l]=g[l]);return e};const P=u.forwardRef((g,x)=>{const e=g,{gap:l=1,alignItems:r,justifyContent:a,direction:i,wrap:y,children:v,grow:m,shrink:f,basis:E,flex:R}=e,C=j(e,["gap","alignItems","justifyContent","direction","wrap","children","grow","shrink","basis","flex"]),T=(0,h.of)(I,l,r,a,i,y,m,f,E,R);return u.createElement("div",L({ref:x,className:T.flex},C),v)});P.displayName="Stack";const I=(g,x,e,l,r,a,i,y,v,m)=>({flex:(0,c.AH)([{display:"flex"},(0,t.Y)(g,r,f=>({flexDirection:f})),(0,t.Y)(g,a,f=>({flexWrap:f})),(0,t.Y)(g,e,f=>({alignItems:f})),(0,t.Y)(g,l,f=>({justifyContent:f})),(0,t.Y)(g,x,f=>({gap:g.spacing(f)})),(0,t.Y)(g,i,f=>({flexGrow:f})),(0,t.Y)(g,y,f=>({flexShrink:f})),(0,t.Y)(g,v,f=>({flexBasis:f})),(0,t.Y)(g,m,f=>({flex:f}))])});try{P.displayName="Stack",P.__docgenInfo={description:"",displayName:"Stack",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"ResponsiveProp<AlignItems>"}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"ResponsiveProp<JustifyContent>"}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"ResponsiveProp<Direction>"}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"ResponsiveProp<Wrap>"}},grow:{defaultValue:null,description:"Sets the property `flex-grow`",name:"grow",required:!1,type:{name:"ResponsiveProp<number>"}},shrink:{defaultValue:null,description:"Sets the property `flex-shrink`",name:"shrink",required:!1,type:{name:"ResponsiveProp<number>"}},basis:{defaultValue:null,description:"Sets the property `flex-basis`",name:"basis",required:!1,type:{name:"ResponsiveProp<FlexBasis>"}},flex:{defaultValue:null,description:"Sets the property `flex`",name:"flex",required:!1,type:{name:"ResponsiveProp<Flex>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Stack/Stack.tsx#Stack"]={docgenInfo:P.__docgenInfo,name:"Stack",path:"src/components/Layout/Stack/Stack.tsx#Stack"})}catch{}},"./src/components/Layout/utils/responsiveness.tsx":function(F,b,d){d.d(b,{Y:function(){return u}});function c(h,t,n,o){const S=t[o];if(S!=null)return{[h.breakpoints.up(o)]:n(S)}}function u(h,t,n){return t==null?null:typeof t!="object"||!("xs"in t)?n(t):[c(h,t,n,"xs"),c(h,t,n,"sm"),c(h,t,n,"md"),c(h,t,n,"lg"),c(h,t,n,"xl"),c(h,t,n,"xxl")]}try{u.displayName="getResponsiveStyle",u.__docgenInfo={description:"Function that converts a ResponsiveProp object into CSS",displayName:"getResponsiveStyle",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"]={docgenInfo:u.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"./src/components/Portal/Portal.tsx":function(F,b,d){d.d(b,{ZL:function(){return I},gF:function(){return g}});var c=d("../../node_modules/react/index.js"),u=d("../../node_modules/react-dom/index.js"),h=d("./src/themes/ThemeContext.tsx"),t=Object.defineProperty,n=Object.defineProperties,o=Object.getOwnPropertyDescriptors,S=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,L=(l,r,a)=>r in l?t(l,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[r]=a,j=(l,r)=>{for(var a in r||(r={}))O.call(r,a)&&L(l,a,r[a]);if(S)for(var a of S(r))w.call(r,a)&&L(l,a,r[a]);return l},P=(l,r)=>n(l,o(r));function I(l){const{children:r,className:a,root:i,forwardedRef:y}=l,v=(0,h.$j)(),m=(0,c.useRef)(null),f=i??g();return m.current||(m.current=document.createElement("div"),a&&(m.current.className=a),m.current.style.position="relative",m.current.style.zIndex=`${v.zIndex.portal}`),(0,c.useLayoutEffect)(()=>(m.current&&f.appendChild(m.current),()=>{m.current&&f.removeChild(m.current)}),[f]),u.createPortal(c.createElement("div",{ref:y},r),m.current)}function g(){var l;return(l=window.document.getElementById("grafana-portal-container"))!=null?l:document.body}function x(){return React.createElement("div",{id:"grafana-portal-container"})}const e=c.forwardRef((l,r)=>c.createElement(I,P(j({},l),{forwardedRef:r})));e.displayName="RefForwardingPortal";try{I.displayName="RefForwardingPortal",I.__docgenInfo={description:"",displayName:"RefForwardingPortal",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},root:{defaultValue:null,description:"",name:"root",required:!1,type:{name:"HTMLElement"}},forwardedRef:{defaultValue:null,description:"",name:"forwardedRef",required:!1,type:{name:"ForwardedRef<HTMLDivElement>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Portal/Portal.tsx#RefForwardingPortal"]={docgenInfo:e.__docgenInfo,name:"RefForwardingPortal",path:"src/components/Portal/Portal.tsx#RefForwardingPortal"})}catch{}},"./src/components/Text/Text.tsx":function(F,b,d){d.d(b,{E:function(){return r}});var c=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=d("../../node_modules/react/index.js"),h=d("./src/themes/ThemeContext.tsx"),t=d("../../node_modules/react-dom/server.browser.js"),n=d("./src/components/Tooltip/Tooltip.tsx");const o=u.forwardRef(({childElement:i,children:y},v)=>{const[m,f]=(0,u.useState)(!1),E=(0,u.useRef)(null);(0,u.useImperativeHandle)(v,()=>E.current);const R=(0,u.useMemo)(()=>new ResizeObserver(T=>{for(const B of T)B.target.clientWidth&&B.target.scrollWidth&&(B.target.scrollWidth>B.target.clientWidth&&f(!0),B.target.scrollWidth<=B.target.clientWidth&&f(!1))}),[]);(0,u.useEffect)(()=>{const{current:T}=E;return T&&R.observe(T),()=>{R.disconnect()}},[f,R]);const C=T=>typeof T=="string"?T:t.renderToStaticMarkup(u.createElement(u.Fragment,null,T)).replace(/(<([^>]+)>)/gi,"");return m?u.createElement(n.m,{ref:E,content:C(y)},i(void 0)):i(E)});o.displayName="TruncatedText";try{o.displayName="TruncatedText",o.__docgenInfo={description:"",displayName:"TruncatedText",props:{childElement:{defaultValue:null,description:"",name:"childElement",required:!0,type:{name:"(ref: ForwardedRef<HTMLElement> | undefined) => ReactElement<any, string | JSXElementConstructor<any>>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Text/TruncatedText.tsx#TruncatedText"]={docgenInfo:o.__docgenInfo,name:"TruncatedText",path:"src/components/Text/TruncatedText.tsx#TruncatedText"})}catch{}var S=d("./src/components/Text/utils.ts"),O=Object.defineProperty,w=Object.defineProperties,L=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,P=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable,g=(i,y,v)=>y in i?O(i,y,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[y]=v,x=(i,y)=>{for(var v in y||(y={}))P.call(y,v)&&g(i,v,y[v]);if(j)for(var v of j(y))I.call(y,v)&&g(i,v,y[v]);return i},e=(i,y)=>w(i,L(y)),l=(i,y)=>{var v={};for(var m in i)P.call(i,m)&&y.indexOf(m)<0&&(v[m]=i[m]);if(i!=null&&j)for(var m of j(i))y.indexOf(m)<0&&I.call(i,m)&&(v[m]=i[m]);return v};const r=u.forwardRef((i,y)=>{var v=i,{element:m="span",variant:f,weight:E,color:R,truncate:C,italic:T,textAlignment:B,children:k}=v,A=l(v,["element","variant","weight","color","truncate","italic","textAlignment","children"]);const K=(0,h.of)(a,m,f,R,E,C,T,B),Y=U=>(0,u.createElement)(m,e(x({},A),{style:void 0,className:K,ref:U}),k);return!C||m==="span"?Y(void 0):u.createElement(o,{childElement:Y,children:k,ref:y})});r.displayName="Text";const a=(i,y,v,m,f,E,R,C)=>(0,c.AH)([x({margin:0,padding:0},(0,S.d$)(i,y,v)),v&&x({},i.typography[v]),m&&{color:(0,S.vT)(m,i)},f&&{fontWeight:(0,S.iV)(f,i)},E&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},R&&{fontStyle:"italic"},C&&{textAlign:C}]);try{r.displayName="Text",r.__docgenInfo={description:"",displayName:"Text",props:{element:{defaultValue:{value:"span"},description:'Defines what HTML element is defined underneath. "span" by default',name:"element",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'},{value:'"p"'},{value:'"span"'}]}},variant:{defaultValue:null,description:"What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed",name:"variant",required:!1,type:{name:"enum",value:[{value:'"body"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'},{value:'"bodySmall"'}]}},weight:{defaultValue:null,description:"Override the default weight for the used variant",name:"weight",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"light"'},{value:'"regular"'},{value:'"bold"'}]}},color:{defaultValue:null,description:"Color to use for text",name:"color",required:!1,type:{name:"enum",value:[{value:'"info"'},{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"success"'},{value:'"error"'},{value:'"disabled"'},{value:'"warning"'},{value:'"maxContrast"'}]}},truncate:{defaultValue:null,description:"Use to cut the text off with ellipsis if there isn't space to show all of it. On hover shows the rest of the text",name:"truncate",required:!1,type:{name:"boolean"}},italic:{defaultValue:null,description:"If true, show the text as italic. False by default",name:"italic",required:!1,type:{name:"boolean"}},textAlignment:{defaultValue:null,description:"Whether to align the text to left, center or right",name:"textAlignment",required:!1,type:{name:"enum",value:[{value:'"right"'},{value:'"left"'},{value:'"start"'},{value:'"end"'},{value:'"center"'},{value:'"inherit"'},{value:'"justify"'},{value:'"initial"'},{value:'"-moz-initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"-webkit-match-parent"'},{value:'"match-parent"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Text/Text.tsx#Text"]={docgenInfo:r.__docgenInfo,name:"Text",path:"src/components/Text/Text.tsx#Text"})}catch{}},"./src/components/Text/utils.ts":function(F,b,d){d.d(b,{d$:function(){return h},iV:function(){return c},vT:function(){return u}});const c=(t,n)=>{switch(t){case"bold":return n.typography.fontWeightBold;case"medium":return n.typography.fontWeightMedium;case"light":return n.typography.fontWeightLight;case"regular":case void 0:return n.typography.fontWeightRegular}},u=(t,n)=>{switch(t){case"error":return n.colors.error.text;case"success":return n.colors.success.text;case"info":return n.colors.info.text;case"warning":return n.colors.warning.text;default:return t?n.colors.text[t]:void 0}},h=(t,n,o)=>{if(o)return t.typography[o];switch(n){case"span":return;case"h1":return t.typography.h1;case"h2":return t.typography.h2;case"h3":return t.typography.h3;case"h4":return t.typography.h4;case"h5":return t.typography.h5;case"h6":return t.typography.h6;default:return t.typography.body}}},"./src/components/Tooltip/Tooltip.tsx":function(F,b,d){d.d(b,{m:function(){return e}});var c=d("../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs"),u=d("../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),h=d("../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs"),t=d("../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs"),n=d("../../node_modules/react/index.js"),o=d("../grafana-e2e-selectors/src/selectors/index.ts"),S=d("./src/themes/ThemeContext.tsx"),O=d("./src/utils/tooltipUtils.ts"),w=d("./src/components/Portal/Portal.tsx"),L=Object.defineProperty,j=Object.getOwnPropertySymbols,P=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable,g=(r,a,i)=>a in r?L(r,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[a]=i,x=(r,a)=>{for(var i in a||(a={}))P.call(a,i)&&g(r,i,a[i]);if(j)for(var i of j(a))I.call(a,i)&&g(r,i,a[i]);return r};const e=n.forwardRef(({children:r,theme:a,interactive:i,show:y,placement:v,content:m},f)=>{const E=(0,n.useRef)(null),[R,C]=(0,n.useState)(y),T=y??R,B=[(0,c.cY)(8),(0,u.UU)({fallbackAxisSideDirection:"end",crossAxis:!1,boundary:document.body}),(0,u.BN)(),(0,h.UE)({element:E})],{context:k,refs:A,floatingStyles:K}=(0,t.we)({open:T,placement:(0,O.O)(v),onOpenChange:C,middleware:B,whileElementsMounted:u.ll}),Y=(0,n.useId)(),U=(0,t.Mk)(k,{delay:{close:i?100:0},move:!1}),q=(0,t.iQ)(k),$=(0,t.s9)(k),{getReferenceProps:X,getFloatingProps:z}=(0,t.bv)([$,U,q]),H=typeof m=="function",D=(0,S.of)(l)[a??"info"],W=(0,n.useCallback)(s=>{A.setReference(s),typeof f=="function"?f(s):f&&(f.current=s)},[f,A]),N="aria-label"in r.props&&r.props["aria-label"]===m;return n.createElement(n.Fragment,null,n.cloneElement(r,x({ref:W,tabIndex:0,"aria-describedby":!N&&T?Y:void 0},X())),T&&n.createElement(w.ZL,null,n.createElement("div",x({ref:A.setFloating,style:K},z()),n.createElement(t.ie,{className:D.arrow,ref:E,context:k}),n.createElement("div",{"data-testid":o.Tp.components.Tooltip.container,id:Y,role:"tooltip",className:D.container},typeof m=="string"&&m,n.isValidElement(m)&&n.cloneElement(m),H&&m({})))))});e.displayName="Tooltip";const l=r=>{const a=(0,O.f)(r,r.components.tooltip.background,r.components.tooltip.background,r.components.tooltip.text,{topBottom:.5,rightLeft:1}),i=(0,O.f)(r,r.colors.error.main,r.colors.error.main,r.colors.error.contrastText,{topBottom:.5,rightLeft:1});return{info:a,["info-alt"]:a,error:i}};try{e.displayName="Tooltip",e.__docgenInfo={description:"",displayName:"Tooltip",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"enum",value:[{value:'"info"'},{value:'"error"'},{value:'"info-alt"'}]}},show:{defaultValue:null,description:"",name:"show",required:!1,type:{name:"boolean"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"bottom"'},{value:'"top"'},{value:'"right"'},{value:'"left"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'},{value:'"auto-start"'},{value:'"auto-end"'}]}},content:{defaultValue:null,description:"",name:"content",required:!0,type:{name:"PopoverContent"}},interactive:{defaultValue:null,description:"Set to true if you want the tooltip to stay long enough so the user can move mouse over content to select text or click a link",name:"interactive",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Tooltip/Tooltip.tsx#Tooltip"]={docgenInfo:e.__docgenInfo,name:"Tooltip",path:"src/components/Tooltip/Tooltip.tsx#Tooltip"})}catch{}},"./src/utils/storybook/themeStorybookControls.tsx":function(F,b,d){d.d(b,{C:function(){return c}});const c={control:"select",options:[0,.25,.5,1,1.5,2,3,4,5,6,8,10]}},"./src/utils/tooltipUtils.ts":function(F,b,d){d.d(b,{O:function(){return h},f:function(){return t}});var c=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=d("../grafana-data/src/themes/colorManipulator.ts");function h(n){switch(n){case"auto":return"bottom";case"auto-start":return"bottom-start";case"auto-end":return"bottom-end";default:return n??"bottom"}}function t(n,o,S,O,w){return{arrow:(0,c.AH)({fill:o}),container:(0,c.AH)({backgroundColor:o,borderRadius:n.shape.radius.default,border:`1px solid ${S}`,boxShadow:n.shadows.z2,color:O,fontSize:n.typography.bodySmall.fontSize,padding:n.spacing(w.topBottom,w.rightLeft),transition:"opacity 0.3s",zIndex:n.zIndex.tooltip,maxWidth:"400px",overflowWrap:"break-word","&[data-popper-interactive='false']":{pointerEvents:"none"},code:{border:"none",display:"inline",background:u.e$(o,.1),color:O,whiteSpace:"normal"},pre:{background:u.e$(o,.1),color:O},a:{color:O,textDecoration:"underline"},"a:hover":{textDecoration:"none"}}),headerClose:(0,c.AH)({color:n.colors.text.secondary,position:"absolute",right:n.spacing(1),top:n.spacing(1.5),backgroundColor:"transparent",border:0}),header:(0,c.AH)({paddingTop:n.spacing(1),paddingBottom:n.spacing(2)}),body:(0,c.AH)({paddingTop:n.spacing(1),paddingBottom:n.spacing(1)}),footer:(0,c.AH)({paddingTop:n.spacing(2),paddingBottom:n.spacing(1)})}}}}]);
