"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[1948],{"../../node_modules/@mdx-js/react/lib/index.js":function(T,h,p){p.d(h,{BN:function(){return f},RP:function(){return o},gz:function(){return c},xA:function(){return x}});var a=p("../../node_modules/react/index.js");const f=a.createContext({});function c(l){return g;function g(u){const S=o(u.components);return a.createElement(l,{...u,allComponents:S})}}function o(l){const g=a.useContext(f);return a.useMemo(()=>typeof l=="function"?l(g):{...g,...l},[g,l])}const t={};function x({components:l,children:g,disableParentContext:u}){let S;return u?S=typeof l=="function"?l({}):l||t:S=o(l),a.createElement(f.Provider,{value:S},g)}},"./src/components/Layout/Space.story.tsx":function(T,h,p){p.r(h),p.d(h,{Horizontal:function(){return b},Vertical:function(){return R},default:function(){return Y}});var a=p("../../node_modules/react/index.js"),f=p("./src/utils/storybook/themeStorybookControls.tsx"),c=p("./src/components/Layout/Box/Box.tsx");const o=({v:d=0,h:r=0,layout:y})=>a.createElement(c.a,{paddingRight:r,paddingBottom:d,display:y==="inline"?"inline-block":"block"});try{o.displayName="Space",o.__docgenInfo={description:"",displayName:"Space",props:{v:{defaultValue:{value:"0"},description:"The amount of vertical space to use.",name:"v",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},h:{defaultValue:{value:"0"},description:"The amount of horizontal space to use.",name:"h",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},layout:{defaultValue:null,description:"The layout of the space. If set to `inline`, the component will behave like an inline-block element,\notherwise it will behave like a block element.",name:"layout",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"block"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Space.tsx#Space"]={docgenInfo:o.__docgenInfo,name:"Space",path:"src/components/Layout/Space.tsx#Space"})}catch{}var t=p("../../node_modules/react/jsx-runtime.js"),x=p("../../node_modules/@mdx-js/react/lib/index.js"),l=p("../../node_modules/@storybook/blocks/dist/index.mjs");function g(d){const r=Object.assign({h1:"h1",p:"p",code:"code",h3:"h3",h4:"h4"},(0,x.RP)(),d.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.W8,{title:"MDX|Space",component:o}),`
`,(0,t.jsx)(r.h1,{id:"space",children:"Space"}),`
`,(0,t.jsxs)(r.p,{children:["The ",(0,t.jsx)(r.code,{children:"Space"})," component is a component used to add space between elements. Horizontal space is added using the ",(0,t.jsx)(r.code,{children:"h"})," prop, while vertical space is added using the ",(0,t.jsx)(r.code,{children:"v"})," prop. When adding horizontal space between inline or inline-block elements, the ",(0,t.jsx)(r.code,{children:"layout"})," props should be set to ",(0,t.jsx)(r.code,{children:"inline"}),", otherwise the ",(0,t.jsx)(r.code,{children:"block"})," value of the prop can be used."]}),`
`,(0,t.jsx)(r.h3,{id:"usage",children:"Usage"}),`
`,(0,t.jsx)(r.h4,{id:"when-to-use",children:"When to use"}),`
`,(0,t.jsxs)(r.p,{children:["Use the ",(0,t.jsx)(r.code,{children:"Space"})," component to add space between elements that cannot be spaced using flex or grid layout."]}),`
`,(0,t.jsx)(r.h4,{id:"when-not-to-use",children:"When not to use"}),`
`,(0,t.jsxs)(r.p,{children:["Do not use the ",(0,t.jsx)(r.code,{children:"Space"})," component to add space between elements inside the ",(0,t.jsx)(r.code,{children:"Stack"})," component. Instead, use the ",(0,t.jsx)(r.code,{children:"gap"})," prop on the ",(0,t.jsx)(r.code,{children:"Stack"})," component."]}),`
`,(0,t.jsx)(r.h3,{id:"props",children:"Props"}),`
`,(0,t.jsx)(l.ov,{of:o})]})}function u(d={}){const{wrapper:r}=Object.assign({},(0,x.RP)(),d.components);return r?(0,t.jsx)(r,Object.assign({},d,{children:(0,t.jsx)(g,d)})):g(d)}var S=u,_=Object.defineProperty,v=Object.defineProperties,B=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,D=Object.prototype.hasOwnProperty,e=Object.prototype.propertyIsEnumerable,s=(d,r,y)=>r in d?_(d,r,{enumerable:!0,configurable:!0,writable:!0,value:y}):d[r]=y,i=(d,r)=>{for(var y in r||(r={}))D.call(r,y)&&s(d,y,r[y]);if(P)for(var y of P(r))e.call(r,y)&&s(d,y,r[y]);return d},m=(d,r)=>v(d,B(r)),j,O,w,C,k,E,Y={title:"General/Layout/Space",component:o,parameters:{docs:{page:S}},argTypes:{v:f.C,h:f.C}};const b=d=>a.createElement("div",{style:{display:"flex"}},a.createElement(c.a,{borderStyle:"solid",padding:1},"Box without space"),a.createElement(c.a,{borderStyle:"solid",padding:1},"Box with space on the right"),a.createElement(o,i({},d)),a.createElement(c.a,{borderStyle:"solid",padding:1},"Box without space"));b.args={v:0,h:2,layout:"inline"};const R=d=>a.createElement("div",null,a.createElement(c.a,{borderStyle:"solid",padding:1},"Box without space"),a.createElement(c.a,{borderStyle:"solid",padding:1},"Box with bottom space"),a.createElement(o,i({},d)),a.createElement(c.a,{borderStyle:"solid",padding:1},"Box without space"));R.args={v:2,h:0,layout:"block"},b.parameters=m(i({},b.parameters),{docs:m(i({},(j=b.parameters)==null?void 0:j.docs),{source:i({originalSource:`args => {
  return <div style={{
    display: 'flex'
  }}>
      <Box borderStyle={'solid'} padding={1}>
        Box without space
      </Box>
      <Box borderStyle={'solid'} padding={1}>
        Box with space on the right
      </Box>
      <Space {...args} />
      <Box borderStyle={'solid'} padding={1}>
        Box without space
      </Box>
    </div>;
}`},(w=(O=b.parameters)==null?void 0:O.docs)==null?void 0:w.source)})}),R.parameters=m(i({},R.parameters),{docs:m(i({},(C=R.parameters)==null?void 0:C.docs),{source:i({originalSource:`args => {
  return <div>
      <Box borderStyle={'solid'} padding={1}>
        Box without space
      </Box>
      <Box borderStyle={'solid'} padding={1}>
        Box with bottom space
      </Box>
      <Space {...args} />
      <Box borderStyle={'solid'} padding={1}>
        Box without space
      </Box>
    </div>;
}`},(E=(k=R.parameters)==null?void 0:k.docs)==null?void 0:E.source)})})},"./src/components/Layout/Box/Box.tsx":function(T,h,p){p.d(h,{a:function(){return v}});var a=p("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),f=p("../../node_modules/react/index.js"),c=p("./src/themes/ThemeContext.tsx"),o=p("./src/components/Layout/utils/responsiveness.tsx"),t=Object.defineProperty,x=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,u=(e,s,i)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[s]=i,S=(e,s)=>{for(var i in s||(s={}))l.call(s,i)&&u(e,i,s[i]);if(x)for(var i of x(s))g.call(s,i)&&u(e,i,s[i]);return e},_=(e,s)=>{var i={};for(var m in e)l.call(e,m)&&s.indexOf(m)<0&&(i[m]=e[m]);if(e!=null&&x)for(var m of x(e))s.indexOf(m)<0&&g.call(e,m)&&(i[m]=e[m]);return i};const v=(0,f.forwardRef)((e,s)=>{const i=e,{children:m,margin:j,marginX:O,marginY:w,marginTop:C,marginBottom:k,marginLeft:E,marginRight:L,padding:Y,paddingX:b,paddingY:R,paddingTop:d,paddingBottom:r,paddingLeft:y,paddingRight:A,display:M,backgroundColor:X,grow:q,shrink:V,basis:I,flex:H,borderColor:N,borderStyle:K,borderRadius:W,justifyContent:U,alignItems:n,boxShadow:F,element:z,gap:G}=i,$=_(i,["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,c.of)(D,j,O,w,C,k,E,L,Y,b,R,d,r,y,A,M,X,q,V,I,H,N,K,W,U,n,F,G),Q=z??"div";return f.createElement(Q,S({ref:s,className:J.root},$),m)});v.displayName="Box";const B=(e,s)=>{switch(e){case"error":case"success":case"info":case"warning":return s.colors[e].borderTransparent;default:return e?s.colors.border[e]:void 0}},P=(e,s)=>{switch(e){case"error":case"success":case"info":case"warning":return s.colors[e].transparent;default:return e?s.colors.background[e]:void 0}},D=(e,s,i,m,j,O,w,C,k,E,L,Y,b,R,d,r,y,A,M,X,q,V,I,H,N,K,W,U)=>({root:(0,a.AH)([(0,o.Y)(e,s,n=>({margin:e.spacing(n)})),(0,o.Y)(e,i,n=>({marginLeft:e.spacing(n),marginRight:e.spacing(n)})),(0,o.Y)(e,m,n=>({marginTop:e.spacing(n),marginBottom:e.spacing(n)})),(0,o.Y)(e,j,n=>({marginTop:e.spacing(n)})),(0,o.Y)(e,O,n=>({marginBottom:e.spacing(n)})),(0,o.Y)(e,w,n=>({marginLeft:e.spacing(n)})),(0,o.Y)(e,C,n=>({marginRight:e.spacing(n)})),(0,o.Y)(e,k,n=>({padding:e.spacing(n)})),(0,o.Y)(e,E,n=>({paddingLeft:e.spacing(n),paddingRight:e.spacing(n)})),(0,o.Y)(e,L,n=>({paddingTop:e.spacing(n),paddingBottom:e.spacing(n)})),(0,o.Y)(e,Y,n=>({paddingTop:e.spacing(n)})),(0,o.Y)(e,b,n=>({paddingBottom:e.spacing(n)})),(0,o.Y)(e,R,n=>({paddingLeft:e.spacing(n)})),(0,o.Y)(e,d,n=>({paddingRight:e.spacing(n)})),(0,o.Y)(e,r,n=>({display:n})),(0,o.Y)(e,y,n=>({backgroundColor:P(n,e)})),(0,o.Y)(e,A,n=>({flexGrow:n})),(0,o.Y)(e,M,n=>({flexShrink:n})),(0,o.Y)(e,X,n=>({flexBasis:n})),(0,o.Y)(e,q,n=>({flex:n})),(0,o.Y)(e,I,n=>({borderStyle:n})),(0,o.Y)(e,V,n=>({borderColor:B(n,e)})),(I||V)&&{borderWidth:"1px"},(0,o.Y)(e,N,n=>({justifyContent:n})),(0,o.Y)(e,K,n=>({alignItems:n})),(0,o.Y)(e,H,n=>({borderRadius:e.shape.radius[n]})),(0,o.Y)(e,W,n=>({boxShadow:e.shadows[n]})),(0,o.Y)(e,U,n=>({gap:e.spacing(n)}))])});try{v.displayName="Box",v.__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:v.__docgenInfo,name:"Box",path:"src/components/Layout/Box/Box.tsx#Box"})}catch{}},"./src/components/Layout/utils/responsiveness.tsx":function(T,h,p){p.d(h,{Y:function(){return f}});function a(c,o,t,x){const l=o[x];if(l!=null)return{[c.breakpoints.up(x)]:t(l)}}function f(c,o,t){return o==null?null:typeof o!="object"||!("xs"in o)?t(o):[a(c,o,t,"xs"),a(c,o,t,"sm"),a(c,o,t,"md"),a(c,o,t,"lg"),a(c,o,t,"xl"),a(c,o,t,"xxl")]}try{f.displayName="getResponsiveStyle",f.__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:f.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"./src/utils/storybook/themeStorybookControls.tsx":function(T,h,p){p.d(h,{C:function(){return a}});const a={control:"select",options:[0,.25,.5,1,1.5,2,3,4,5,6,8,10]}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(T,h,p){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var a=p("../../node_modules/react/index.js"),f=Symbol.for("react.element"),c=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,t=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function l(g,u,S){var _,v={},B=null,P=null;S!==void 0&&(B=""+S),u.key!==void 0&&(B=""+u.key),u.ref!==void 0&&(P=u.ref);for(_ in u)o.call(u,_)&&!x.hasOwnProperty(_)&&(v[_]=u[_]);if(g&&g.defaultProps)for(_ in u=g.defaultProps,u)v[_]===void 0&&(v[_]=u[_]);return{$$typeof:f,type:g,key:B,ref:P,props:v,_owner:t.current}}h.Fragment=c,h.jsx=l,h.jsxs=l},"../../node_modules/react/jsx-runtime.js":function(T,h,p){T.exports=p("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
