"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[5836],{"../../node_modules/@mdx-js/react/lib/index.js":function(D,x,r){r.d(x,{BN:function(){return c},RP:function(){return p},gz:function(){return P},xA:function(){return i}});var n=r("../../node_modules/react/index.js");const c=n.createContext({});function P(m){return f;function f(b){const w=p(b.components);return n.createElement(m,{...b,allComponents:w})}}function p(m){const f=n.useContext(c);return n.useMemo(()=>typeof m=="function"?m(f):{...f,...m},[f,m])}const u={};function i({components:m,children:f,disableParentContext:b}){let w;return b?w=typeof m=="function"?m({}):m||u:w=p(m),n.createElement(c.Provider,{value:w},f)}},"./src/components/Switch/Switch.story.tsx":function(D,x,r){r.r(x),r.d(x,{Controlled:function(){return R},Uncontrolled:function(){return T},default:function(){return L}});var n=r("../../node_modules/react/index.js"),c=r("./src/components/Switch/Switch.tsx"),P=r("./src/components/Forms/InlineField.tsx"),p=r("./src/components/Forms/Field.tsx"),u=r("./src/components/Forms/InlineFieldRow.tsx"),i=r("../../node_modules/react/jsx-runtime.js"),m=r("../../node_modules/@mdx-js/react/lib/index.js"),f=r("../../node_modules/@storybook/blocks/dist/index.mjs");function b(h){const g=Object.assign({h1:"h1",h3:"h3",p:"p",code:"code",pre:"pre"},(0,m.RP)(),h.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(f.W8,{title:"MDX|Switch",component:c.d}),`
`,(0,i.jsx)(g.h1,{id:"switch",children:"Switch"}),`
`,(0,i.jsx)(g.h3,{id:"when-to-use",children:"When to use"}),`
`,(0,i.jsxs)(g.p,{children:[(0,i.jsx)(g.code,{children:"Switch"})," is a representation of an on-off state \u2013 like a light switch. So you can use ",(0,i.jsx)(g.code,{children:"Switch"})," to toggle binary states."]}),`
`,(0,i.jsxs)(g.p,{children:["Switches trigger changes immediately. If your component should trigger a change only after sending a form, it's better to use either ",(0,i.jsx)(g.code,{children:"RadioButtonGroup"})," or ",(0,i.jsx)(g.code,{children:"Checkbox"})," instead. Furthermore, switches cannot be grouped \u2013 each ",(0,i.jsx)(g.code,{children:"Switch"})," triggers an independent state. If you want multiple mutually exclusive choices, the ",(0,i.jsx)(g.code,{children:"RadioButtonGroup"})," is the better option. To offer multiple choices within the same group or context which are not mutually exclusive, use ",(0,i.jsx)(g.code,{children:"Checkbox"})," instead."]}),`
`,(0,i.jsx)(g.h3,{id:"usage",children:"Usage"}),`
`,(0,i.jsx)(g.pre,{children:(0,i.jsx)(g.code,{className:"language-jsx",children:`import { Switch } from '@grafana/ui';

<Switch disabled={...} value={...} onChange={...} />
`})}),`
`,(0,i.jsx)(g.h3,{id:"props",children:"Props"}),`
`,(0,i.jsx)(f.ov,{of:c.d}),`
`,(0,i.jsx)(g.h1,{id:"inlineswitch",children:"InlineSwitch"}),`
`,(0,i.jsx)(g.h3,{id:"when-to-use-1",children:"When to use"}),`
`,(0,i.jsx)(g.p,{children:"Same as for Switch but for inline forms."})]})}function w(h={}){const{wrapper:g}=Object.assign({},(0,m.RP)(),h.components);return g?(0,i.jsx)(g,Object.assign({},h,{children:(0,i.jsx)(b,h)})):b(h)}var O=w,C=Object.defineProperty,_=Object.defineProperties,d=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,e=Object.prototype.propertyIsEnumerable,t=(h,g,S)=>g in h?C(h,g,{enumerable:!0,configurable:!0,writable:!0,value:S}):h[g]=S,l=(h,g)=>{for(var S in g||(g={}))a.call(g,S)&&t(h,S,g[S]);if(o)for(var S of o(g))e.call(g,S)&&t(h,S,g[S]);return h},y=(h,g)=>_(h,d(g)),s,E,v,I,A,F;const M={title:"Forms/Switch",component:c.d,parameters:{docs:{page:O}},args:{disabled:!1,value:!1,transparent:!1,invalid:!1}},R=h=>n.createElement("div",null,n.createElement("div",{style:{marginBottom:"32px"}},n.createElement(p.D,{label:"Normal switch",description:"For horizontal forms",invalid:h.invalid},n.createElement(c.d,{value:h.value,disabled:h.disabled,transparent:h.transparent}))),n.createElement("div",{style:{marginBottom:"32px"}},n.createElement(u.C,null,n.createElement(P.I,{label:"My switch",invalid:h.invalid},n.createElement(c.K,{value:h.value,disabled:h.disabled,transparent:h.transparent})))),n.createElement("div",{style:{marginBottom:"32px"}},n.createElement("div",null,"just inline switch with show label"),n.createElement("span",null,n.createElement(c.K,{label:"Raw data",showLabel:!0,value:h.value,disabled:h.disabled,transparent:h.transparent,invalid:h.invalid})))),T=h=>{const[g,S]=(0,n.useState)(h.value),V=(0,n.useCallback)(j=>S(j.currentTarget.checked),[S]);return n.createElement(c.d,{value:g,disabled:h.disabled,transparent:h.transparent,onChange:V,invalid:h.invalid})};var L=M;R.parameters=y(l({},R.parameters),{docs:y(l({},(s=R.parameters)==null?void 0:s.docs),{source:l({originalSource:`args => {
  return <div>
      <div style={{
      marginBottom: '32px'
    }}>
        <Field label="Normal switch" description="For horizontal forms" invalid={args.invalid}>
          <Switch value={args.value} disabled={args.disabled} transparent={args.transparent} />
        </Field>
      </div>
      <div style={{
      marginBottom: '32px'
    }}>
        <InlineFieldRow>
          <InlineField label="My switch" invalid={args.invalid}>
            <InlineSwitch value={args.value} disabled={args.disabled} transparent={args.transparent} />
          </InlineField>
        </InlineFieldRow>
      </div>
      <div style={{
      marginBottom: '32px'
    }}>
        <div>just inline switch with show label</div>
        <span>
          <InlineSwitch label="Raw data" showLabel={true} value={args.value} disabled={args.disabled} transparent={args.transparent} invalid={args.invalid} />
        </span>
      </div>
    </div>;
}`},(v=(E=R.parameters)==null?void 0:E.docs)==null?void 0:v.source)})}),T.parameters=y(l({},T.parameters),{docs:y(l({},(I=T.parameters)==null?void 0:I.docs),{source:l({originalSource:`args => {
  const [checked, setChecked] = useState(args.value);
  const onChange = useCallback((e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked), [setChecked]);
  return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} invalid={args.invalid} />;
}`},(F=(A=T.parameters)==null?void 0:A.docs)==null?void 0:F.source)})})},"../grafana-data/src/types/icon.ts":function(D,x,r){r.d(x,{Uo:function(){return P},az:function(){return n},n6:function(){return c}});const n={google:!0,microsoft:!0,github:!0,gitlab:!0,okta:!0,discord:!0,hipchat:!0,amazon:!0,"google-hangouts-alt":!0,pagerduty:!0,line:!0,anchor:!0,"adjust-circle":!0,"angle-double-down":!0,"angle-double-right":!0,"angle-double-up":!0,"angle-down":!0,"angle-left":!0,"angle-right":!0,"angle-up":!0,"align-left":!0,"align-right":!0,"application-observability":!0,apps:!0,"archive-alt":!0,arrow:!0,"arrow-down":!0,"arrow-from-right":!0,"arrow-left":!0,"arrow-random":!0,"arrow-right":!0,"arrow-to-right":!0,"arrow-up":!0,"arrows-h":!0,"arrows-v":!0,asserts:!0,"expand-arrows":!0,at:!0,ai:!0,backward:!0,bars:!0,bell:!0,"bell-slash":!0,bolt:!0,book:!0,bookmark:!0,"book-open":!0,"brackets-curly":!0,bug:!0,building:!0,"calculator-alt":!0,"calendar-alt":!0,"calendar-slash":!0,camera:!0,capture:!0,"channel-add":!0,"chart-line":!0,check:!0,"check-circle":!0,"check-square":!0,circle:!0,"circle-mono":!0,"clipboard-alt":!0,"clock-nine":!0,cloud:!0,"cloud-download":!0,"cloud-upload":!0,"code-branch":!0,cog:!0,columns:!0,"comment-alt":!0,"comment-alt-message":!0,"comment-alt-share":!0,"comments-alt":!0,compass:!0,copy:!0,"corner-down-right-alt":!0,"create-dashboard":!0,"credit-card":!0,crosshair:!0,cube:!0,dashboard:!0,database:!0,"dice-three":!0,docker:!0,"document-info":!0,"download-alt":!0,draggabledots:!0,edit:!0,"ellipsis-v":!0,envelope:!0,"exchange-alt":!0,"exclamation-triangle":!0,"exclamation-circle":!0,"external-link-alt":!0,eye:!0,"eye-slash":!0,"ellipsis-h":!0,"fa fa-spinner":!0,favorite:!0,"file-alt":!0,"file-blank":!0,"file-copy-alt":!0,"file-download":!0,"file-edit-alt":!0,"file-landscape-alt":!0,filter:!0,flip:!0,folder:!0,font:!0,fire:!0,"folder-open":!0,"folder-plus":!0,"folder-upload":!0,forward:!0,"frontend-observability":!0,"gf-bar-alignment-after":!0,"gf-bar-alignment-before":!0,"gf-bar-alignment-center":!0,"gf-glue":!0,"gf-grid":!0,"gf-interpolation-linear":!0,"gf-interpolation-smooth":!0,"gf-interpolation-step-after":!0,"gf-interpolation-step-before":!0,"gf-landscape":!0,"gf-layout-simple":!0,"gf-logs":!0,"gf-ml":!0,"gf-movepane-left":!0,"gf-movepane-right":!0,"gf-portrait":!0,"gf-service-account":!0,"gf-show-context":!0,"gf-pin":!0,"gf-prometheus":!0,"gf-traces":!0,globe:!0,grafana:!0,"graph-bar":!0,heart:!0,"heart-rate":!0,"heart-break":!0,history:!0,"history-alt":!0,home:!0,"home-alt":!0,"horizontal-align-center":!0,"horizontal-align-left":!0,"horizontal-align-right":!0,hourglass:!0,import:!0,info:!0,"info-circle":!0,k6:!0,"key-skeleton-alt":!0,keyboard:!0,"layer-group":!0,"layers-alt":!0,"library-panel":!0,"line-alt":!0,link:!0,"list-ui-alt":!0,"list-ul":!0,"list-ol":!0,lock:!0,"map-marker":!0,"map-marker-plus":!0,"map-marker-minus":!0,message:!0,minus:!0,"minus-circle":!0,"mobile-android":!0,monitor:!0,palette:!0,"panel-add":!0,"pathfinder-unite":!0,pause:!0,pen:!0,percentage:!0,play:!0,plug:!0,plus:!0,"plus-circle":!0,"plus-square":!0,power:!0,"presentation-play":!0,process:!0,"question-circle":!0,"record-audio":!0,repeat:!0,rocket:!0,"ruler-combined":!0,save:!0,search:!0,"search-minus":!0,"search-plus":!0,"share-alt":!0,shield:!0,"shield-exclamation":!0,signal:!0,signin:!0,signout:!0,sitemap:!0,slack:!0,"sliders-v-alt":!0,spinner:!0,"sort-amount-down":!0,"sort-amount-up":!0,"square-shape":!0,star:!0,"step-backward":!0,stopwatch:!0,"stopwatch-slash":!0,sync:!0,"sync-slash":!0,table:!0,"tag-alt":!0,"telegram-alt":!0,"text-fields":!0,"thumbs-up":!0,times:!0,"times-circle":!0,"toggle-on":!0,"toggle-off":!0,"trash-alt":!0,unarchive:!0,unlock:!0,upload:!0,user:!0,"users-alt":!0,"user-arrows":!0,"vertical-align-bottom":!0,"vertical-align-center":!0,"vertical-align-top":!0,"web-section-alt":!0,"wrap-text":!0,rss:!0,x:!0};function c(p){return!p||typeof p!="string"?!1:p in n}function P(p){if(c(p))return p}},"../grafana-data/src/utils/deprecationWarning.ts":function(D,x,r){r.d(x,{l:function(){return c}});const n={},c=(P,p,u)=>{let i=`[Deprecation warning] ${P}: ${p} is deprecated`;u&&(i+=`. Use ${u} instead`);const m=Date.now(),f=n[i];(!f||m-f>1e4)&&(console.warn(i),n[i]=m)}},"./src/components/Forms/Field.tsx":function(D,x,r){r.d(x,{D:function(){return d}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=r("./src/utils/reactUtils.ts"),u=r("./src/components/Forms/FieldValidationMessage.tsx"),i=r("./src/components/Forms/Label.tsx"),m=Object.defineProperty,f=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,O=(e,t,l)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,C=(e,t)=>{for(var l in t||(t={}))b.call(t,l)&&O(e,l,t[l]);if(f)for(var l of f(t))w.call(t,l)&&O(e,l,t[l]);return e},_=(e,t)=>{var l={};for(var y in e)b.call(e,y)&&t.indexOf(y)<0&&(l[y]=e[y]);if(e!=null&&f)for(var y of f(e))t.indexOf(y)<0&&w.call(e,y)&&(l[y]=e[y]);return l};const d=c.forwardRef((e,t)=>{var l=e,{label:y,description:s,horizontal:E,invalid:v,loading:I,disabled:A,required:F,error:M,children:R,className:T,validationMessageHorizontalOverflow:L,htmlFor:h}=l,g=_(l,["label","description","horizontal","invalid","loading","disabled","required","error","children","className","validationMessageHorizontalOverflow","htmlFor"]);const S=(0,P.of)(a),V=h??(0,p.e)(R),j=typeof y=="string"?c.createElement(i.J,{htmlFor:V,description:s},`${y}${F?" *":""}`):y,B=o({invalid:v,disabled:A,loading:I});return c.createElement("div",C({className:(0,n.cx)(S.field,E&&S.fieldHorizontal,T)},g),j,c.createElement("div",null,c.createElement("div",{ref:t},c.cloneElement(R,B)),v&&M&&!E&&c.createElement("div",{className:(0,n.cx)(S.fieldValidationWrapper,{[S.validationMessageHorizontalOverflow]:!!L})},c.createElement(u.P,null,M))),v&&M&&E&&c.createElement("div",{className:(0,n.cx)(S.fieldValidationWrapper,S.fieldValidationWrapperHorizontal,{[S.validationMessageHorizontalOverflow]:!!L})},c.createElement(u.P,null,M)))});d.displayName="Field";function o(e){for(const t in e)e[t]===void 0&&delete e[t];return e}const a=e=>({field:(0,n.AH)({display:"flex",flexDirection:"column",marginBottom:e.spacing(2)}),fieldHorizontal:(0,n.AH)({flexDirection:"row",justifyContent:"space-between",flexWrap:"wrap"}),fieldValidationWrapper:(0,n.AH)({marginTop:e.spacing(.5)}),fieldValidationWrapperHorizontal:(0,n.AH)({flex:"1 1 100%"}),validationMessageHorizontalOverflow:(0,n.AH)({width:0,overflowX:"visible","& > *":{whiteSpace:"nowrap"}})});try{d.displayName="Field",d.__docgenInfo={description:"",displayName:"Field",props:{children:{defaultValue:null,description:"Form input element, i.e Input or Switch",name:"children",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},label:{defaultValue:null,description:"Label for the field",name:"label",required:!1,type:{name:"ReactNode"}},description:{defaultValue:null,description:"Description of the field",name:"description",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Indicates if field is in invalid state",name:"invalid",required:!1,type:{name:"boolean"}},loading:{defaultValue:null,description:"Indicates if field is in loading state",name:"loading",required:!1,type:{name:"boolean"}},disabled:{defaultValue:null,description:"Indicates if field is disabled",name:"disabled",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"Indicates if field is required",name:"required",required:!1,type:{name:"boolean"}},error:{defaultValue:null,description:"Error message to display",name:"error",required:!1,type:{name:"ReactNode"}},horizontal:{defaultValue:null,description:"Indicates horizontal layout of the field",name:"horizontal",required:!1,type:{name:"boolean"}},validationMessageHorizontalOverflow:{defaultValue:null,description:"make validation message overflow horizontally. Prevents pushing out adjacent inline components",name:"validationMessageHorizontalOverflow",required:!1,type:{name:"boolean"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},htmlFor:{defaultValue:null,description:"A unique id that associates the label of the Field component with the control with the unique id.\nIf the `htmlFor` property is missing the `htmlFor` will be inferred from the `id` or `inputId` property of the first child.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for",name:"htmlFor",required:!1,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Field.tsx#Field"]={docgenInfo:d.__docgenInfo,name:"Field",path:"src/components/Forms/Field.tsx#Field"})}catch{}},"./src/components/Forms/FieldValidationMessage.tsx":function(D,x,r){r.d(x,{P:function(){return u}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=r("./src/components/Icon/Icon.tsx");const u=({children:m,horizontal:f,className:b})=>{const w=(0,P.of)(i),O=(0,n.cx)(f?w.horizontal:w.vertical,b);return c.createElement("div",{role:"alert",className:O},c.createElement(p.I,{className:w.fieldValidationMessageIcon,name:"exclamation-triangle"}),m)},i=m=>{const f=`
      font-size: ${m.typography.size.sm};
      font-weight: ${m.typography.fontWeightMedium};
      padding: ${m.spacing(.5,1)};
      color: ${m.colors.error.contrastText};
      background: ${m.colors.error.main};
      border-radius: ${m.shape.radius.default};
      position: relative;
      display: inline-block;
      align-self: flex-start;

      a {
        color: ${m.colors.error.contrastText};
        text-decoration: underline;
      }

      a:hover {
        text-decoration: none;
      }
    `;return{vertical:(0,n.AH)(f,{margin:m.spacing(.5,0,0,0),"&:before":{content:'""',position:"absolute",left:"9px",top:"-5px",width:0,height:0,borderWidth:"0 4px 5px 4px",borderColor:`transparent transparent ${m.colors.error.main} transparent`,borderStyle:"solid"}}),horizontal:(0,n.AH)(f,{marginLeft:"10px","&:before":{content:'""',position:"absolute",left:"-5px",top:"9px",width:0,height:0,borderWidth:"4px 5px 4px 0",borderColor:"transparent #e02f44 transparent transparent",borderStyle:"solid"}}),fieldValidationMessageIcon:(0,n.AH)({marginRight:m.spacing()})}};try{u.displayName="FieldValidationMessage",u.__docgenInfo={description:"",displayName:"FieldValidationMessage",props:{className:{defaultValue:null,description:"Override component style",name:"className",required:!1,type:{name:"string"}},horizontal:{defaultValue:null,description:"",name:"horizontal",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/FieldValidationMessage.tsx#FieldValidationMessage"]={docgenInfo:u.__docgenInfo,name:"FieldValidationMessage",path:"src/components/Forms/FieldValidationMessage.tsx#FieldValidationMessage"})}catch{}try{i.displayName="getFieldValidationMessageStyles",i.__docgenInfo={description:"",displayName:"getFieldValidationMessageStyles",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},isDark:{defaultValue:null,description:"",name:"isDark",required:!0,type:{name:"boolean"}},isLight:{defaultValue:null,description:"",name:"isLight",required:!0,type:{name:"boolean"}},colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"ThemeColors"}},breakpoints:{defaultValue:null,description:"",name:"breakpoints",required:!0,type:{name:"ThemeBreakpoints"}},spacing:{defaultValue:null,description:"",name:"spacing",required:!0,type:{name:"ThemeSpacing"}},shape:{defaultValue:null,description:"",name:"shape",required:!0,type:{name:"ThemeShape"}},components:{defaultValue:null,description:"",name:"components",required:!0,type:{name:"ThemeComponents"}},typography:{defaultValue:null,description:"",name:"typography",required:!0,type:{name:"ThemeTypography"}},zIndex:{defaultValue:null,description:"",name:"zIndex",required:!0,type:{name:"{ activePanel: number; navbarFixed: number; sidemenu: number; dropdown: number; typeahead: number; tooltip: number; modalBackdrop: number; modal: number; portal: number; }"}},shadows:{defaultValue:null,description:"",name:"shadows",required:!0,type:{name:"ThemeShadows"}},visualization:{defaultValue:null,description:"",name:"visualization",required:!0,type:{name:"ThemeVisualizationColors"}},transitions:{defaultValue:null,description:"",name:"transitions",required:!0,type:{name:"ThemeTransitions"}},v1:{defaultValue:null,description:"@deprecated Will be removed in a future version",name:"v1",required:!0,type:{name:"GrafanaTheme"}},flags:{defaultValue:null,description:"feature flags that might impact component looks",name:"flags",required:!0,type:{name:"{}"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/FieldValidationMessage.tsx#getFieldValidationMessageStyles"]={docgenInfo:i.__docgenInfo,name:"getFieldValidationMessageStyles",path:"src/components/Forms/FieldValidationMessage.tsx#getFieldValidationMessageStyles"})}catch{}},"./src/components/Forms/InlineField.tsx":function(D,x,r){r.d(x,{I:function(){return d}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=r("./src/utils/reactUtils.ts"),u=r("./src/components/Forms/FieldValidationMessage.tsx"),i=r("./src/components/Forms/InlineLabel.tsx"),m=Object.defineProperty,f=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,O=(a,e,t)=>e in a?m(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t,C=(a,e)=>{for(var t in e||(e={}))b.call(e,t)&&O(a,t,e[t]);if(f)for(var t of f(e))w.call(e,t)&&O(a,t,e[t]);return a},_=(a,e)=>{var t={};for(var l in a)b.call(a,l)&&e.indexOf(l)<0&&(t[l]=a[l]);if(a!=null&&f)for(var l of f(a))e.indexOf(l)<0&&w.call(a,l)&&(t[l]=a[l]);return t};const d=a=>{var e=a,{children:t,label:l,tooltip:y,labelWidth:s="auto",invalid:E,loading:v,disabled:I,required:A,className:F,htmlFor:M,grow:R,shrink:T,error:L,transparent:h,interactive:g}=e,S=_(e,["children","label","tooltip","labelWidth","invalid","loading","disabled","required","className","htmlFor","grow","shrink","error","transparent","interactive"]);const V=(0,P.$j)(),j=o(V,R,T),B=M??(0,p.e)(t),N=typeof l=="string"?c.createElement(i.c,{interactive:g,width:s,tooltip:y,htmlFor:B,transparent:h},`${l}${A?" *":""}`):l;return c.createElement("div",C({className:(0,n.cx)(j.container,F)},S),N,c.createElement("div",{className:j.childContainer},c.cloneElement(t,{invalid:E,disabled:I,loading:v}),E&&L&&c.createElement("div",{className:(0,n.cx)(j.fieldValidationWrapper)},c.createElement(u.P,null,L))))};d.displayName="InlineField";const o=(a,e,t)=>({container:(0,n.AH)({display:"flex",flexDirection:"row",alignItems:"flex-start",textAlign:"left",position:"relative",flex:`${e?1:0} ${t?1:0} auto`,margin:`0 ${a.spacing(.5)} ${a.spacing(.5)} 0`}),childContainer:(0,n.AH)({flex:`${e?1:0} ${t?1:0} auto`}),fieldValidationWrapper:(0,n.AH)({marginTop:a.spacing(.5)})});try{d.displayName="InlineField",d.__docgenInfo={description:"",displayName:"InlineField",props:{tooltip:{defaultValue:null,description:"Content for the label's tooltip",name:"tooltip",required:!1,type:{name:"PopoverContent"}},labelWidth:{defaultValue:{value:"auto"},description:"Custom width for the label as a multiple of 8px",name:"labelWidth",required:!1,type:{name:'number | "auto"'}},grow:{defaultValue:null,description:"Make the field's child to fill the width of the row. Equivalent to setting `flex-grow:1` on the field",name:"grow",required:!1,type:{name:"boolean"}},shrink:{defaultValue:null,description:"Make the field's child shrink with width of the row. Equivalent to setting `flex-shrink:1` on the field",name:"shrink",required:!1,type:{name:"boolean"}},transparent:{defaultValue:null,description:"Make field's background transparent",name:"transparent",required:!1,type:{name:"boolean"}},error:{defaultValue:null,description:"Error message to display",name:"error",required:!1,type:{name:"string | null"}},htmlFor:{defaultValue:null,description:"A unique id that associates the label of the Field component with the control with the unique id.\nIf the `htmlFor` property is missing the `htmlFor` will be inferred from the `id` or `inputId` property of the first child.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for",name:"htmlFor",required:!1,type:{name:"string"}},interactive:{defaultValue:null,description:"Make tooltip interactive",name:"interactive",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Label for the field",name:"label",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"Form input element, i.e Input or Switch",name:"children",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},disabled:{defaultValue:null,description:"Indicates if field is disabled",name:"disabled",required:!1,type:{name:"boolean"}},invalid:{defaultValue:null,description:"Indicates if field is in invalid state",name:"invalid",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"Indicates if field is required",name:"required",required:!1,type:{name:"boolean"}},loading:{defaultValue:null,description:"Indicates if field is in loading state",name:"loading",required:!1,type:{name:"boolean"}},validationMessageHorizontalOverflow:{defaultValue:null,description:"make validation message overflow horizontally. Prevents pushing out adjacent inline components",name:"validationMessageHorizontalOverflow",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/InlineField.tsx#InlineField"]={docgenInfo:d.__docgenInfo,name:"InlineField",path:"src/components/Forms/InlineField.tsx#InlineField"})}catch{}},"./src/components/Forms/InlineFieldRow.tsx":function(D,x,r){r.d(x,{C:function(){return O}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=Object.defineProperty,u=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,f=(_,d,o)=>d in _?p(_,d,{enumerable:!0,configurable:!0,writable:!0,value:o}):_[d]=o,b=(_,d)=>{for(var o in d||(d={}))i.call(d,o)&&f(_,o,d[o]);if(u)for(var o of u(d))m.call(d,o)&&f(_,o,d[o]);return _},w=(_,d)=>{var o={};for(var a in _)i.call(_,a)&&d.indexOf(a)<0&&(o[a]=_[a]);if(_!=null&&u)for(var a of u(_))d.indexOf(a)<0&&m.call(_,a)&&(o[a]=_[a]);return o};const O=_=>{var d=_,{children:o,className:a}=d,e=w(d,["children","className"]);const t=(0,P.of)(C);return c.createElement("div",b({className:(0,n.cx)(t.container,a)},e),o)},C=_=>({container:(0,n.AH)({label:"InlineFieldRow",display:"flex",flexDirection:"row",flexWrap:"wrap",alignContent:"flex-start",rowGap:_.spacing(.5)})});try{O.displayName="InlineFieldRow",O.__docgenInfo={description:"",displayName:"InlineFieldRow",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/InlineFieldRow.tsx#InlineFieldRow"]={docgenInfo:O.__docgenInfo,name:"InlineFieldRow",path:"src/components/Forms/InlineFieldRow.tsx#InlineFieldRow"})}catch{}},"./src/components/Forms/InlineLabel.tsx":function(D,x,r){r.d(x,{c:function(){return _}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=r("./src/components/Icon/Icon.tsx"),u=r("./src/components/Tooltip/Tooltip.tsx"),i=Object.defineProperty,m=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable,w=(o,a,e)=>a in o?i(o,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[a]=e,O=(o,a)=>{for(var e in a||(a={}))f.call(a,e)&&w(o,e,a[e]);if(m)for(var e of m(a))b.call(a,e)&&w(o,e,a[e]);return o},C=(o,a)=>{var e={};for(var t in o)f.call(o,t)&&a.indexOf(t)<0&&(e[t]=o[t]);if(o!=null&&m)for(var t of m(o))a.indexOf(t)<0&&b.call(o,t)&&(e[t]=o[t]);return e};const _=o=>{var a=o,{children:e,className:t,tooltip:l,width:y,transparent:s,interactive:E,as:v="label"}=a,I=C(a,["children","className","tooltip","width","transparent","interactive","as"]);const A=(0,P.of)(d,s,y);return c.createElement(v,O({className:(0,n.cx)(A.label,t)},I),e,l&&c.createElement(u.m,{interactive:E,placement:"top",content:l,theme:"info"},c.createElement(p.I,{tabIndex:0,name:"info-circle",size:"sm",className:A.icon})))},d=(o,a=!1,e)=>({label:(0,n.AH)({display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0,padding:o.spacing(0,1),fontWeight:o.typography.fontWeightMedium,fontSize:o.typography.size.sm,backgroundColor:a?"transparent":o.colors.background.secondary,height:o.spacing(o.components.height.md),lineHeight:o.spacing(o.components.height.md),marginRight:o.spacing(.5),borderRadius:o.shape.radius.default,border:"none",width:e?e!=="auto"?`${8*e}px`:e:"100%",color:o.colors.text.primary}),icon:(0,n.AH)({color:o.colors.text.secondary,marginLeft:"10px",":hover":{color:o.colors.text.primary}})});try{_.displayName="InlineLabel",_.__docgenInfo={description:"",displayName:"InlineLabel",props:{tooltip:{defaultValue:null,description:`Content for the labels tooltip. If provided, an info icon with the tooltip content
will be displayed`,name:"tooltip",required:!1,type:{name:"PopoverContent"}},width:{defaultValue:null,description:"Custom width for the label",name:"width",required:!1,type:{name:'number | "auto"'}},transparent:{defaultValue:null,description:"Make labels's background transparent",name:"transparent",required:!1,type:{name:"boolean"}},interactive:{defaultValue:null,description:"Make tooltip interactive",name:"interactive",required:!1,type:{name:"boolean"}},as:{defaultValue:null,description:"Controls which element the InlineLabel should be rendered into",name:"as",required:!1,type:{name:"ElementType<any, keyof IntrinsicElements>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/InlineLabel.tsx#InlineLabel"]={docgenInfo:_.__docgenInfo,name:"InlineLabel",path:"src/components/Forms/InlineLabel.tsx#InlineLabel"})}catch{}},"./src/components/Forms/Label.tsx":function(D,x,r){r.d(x,{J:function(){return C},f:function(){return _}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=r("./src/components/Icon/Icon.tsx"),u=Object.defineProperty,i=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,b=(d,o,a)=>o in d?u(d,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):d[o]=a,w=(d,o)=>{for(var a in o||(o={}))m.call(o,a)&&b(d,a,o[a]);if(i)for(var a of i(o))f.call(o,a)&&b(d,a,o[a]);return d},O=(d,o)=>{var a={};for(var e in d)m.call(d,e)&&o.indexOf(e)<0&&(a[e]=d[e]);if(d!=null&&i)for(var e of i(d))o.indexOf(e)<0&&f.call(d,e)&&(a[e]=d[e]);return a};const C=d=>{var o=d,{children:a,description:e,className:t,category:l}=o,y=O(o,["children","description","className","category"]);const s=(0,P.of)(_),E=l?.map((v,I)=>c.createElement("span",{className:s.categories,key:`${v}/${I}`},c.createElement("span",null,v),c.createElement(p.I,{name:"angle-right",className:s.chevron})));return c.createElement("div",{className:(0,n.cx)(s.label,t)},c.createElement("label",w({},y),c.createElement("div",{className:s.labelContent},E,a),e&&c.createElement("span",{className:s.description},e)))},_=d=>({label:(0,n.AH)({label:"Label",fontSize:d.typography.size.sm,fontWeight:d.typography.fontWeightMedium,lineHeight:1.25,marginBottom:d.spacing(.5),color:d.colors.text.primary,maxWidth:"480px"}),labelContent:(0,n.AH)({display:"flex",alignItems:"center"}),description:(0,n.AH)({label:"Label-description",color:d.colors.text.secondary,fontSize:d.typography.size.sm,fontWeight:d.typography.fontWeightRegular,marginTop:d.spacing(.25),display:"block"}),categories:(0,n.AH)({label:"Label-categories",display:"inline-flex",alignItems:"center"}),chevron:(0,n.AH)({margin:d.spacing(0,.25)})});try{C.displayName="Label",C.__docgenInfo={description:"",displayName:"Label",props:{description:{defaultValue:null,description:"",name:"description",required:!1,type:{name:"ReactNode"}},category:{defaultValue:null,description:"",name:"category",required:!1,type:{name:"ReactNode[]"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Label.tsx#Label"]={docgenInfo:C.__docgenInfo,name:"Label",path:"src/components/Forms/Label.tsx#Label"})}catch{}try{_.displayName="getLabelStyles",_.__docgenInfo={description:"",displayName:"getLabelStyles",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},isDark:{defaultValue:null,description:"",name:"isDark",required:!0,type:{name:"boolean"}},isLight:{defaultValue:null,description:"",name:"isLight",required:!0,type:{name:"boolean"}},colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"ThemeColors"}},breakpoints:{defaultValue:null,description:"",name:"breakpoints",required:!0,type:{name:"ThemeBreakpoints"}},spacing:{defaultValue:null,description:"",name:"spacing",required:!0,type:{name:"ThemeSpacing"}},shape:{defaultValue:null,description:"",name:"shape",required:!0,type:{name:"ThemeShape"}},components:{defaultValue:null,description:"",name:"components",required:!0,type:{name:"ThemeComponents"}},typography:{defaultValue:null,description:"",name:"typography",required:!0,type:{name:"ThemeTypography"}},zIndex:{defaultValue:null,description:"",name:"zIndex",required:!0,type:{name:"{ activePanel: number; navbarFixed: number; sidemenu: number; dropdown: number; typeahead: number; tooltip: number; modalBackdrop: number; modal: number; portal: number; }"}},shadows:{defaultValue:null,description:"",name:"shadows",required:!0,type:{name:"ThemeShadows"}},visualization:{defaultValue:null,description:"",name:"visualization",required:!0,type:{name:"ThemeVisualizationColors"}},transitions:{defaultValue:null,description:"",name:"transitions",required:!0,type:{name:"ThemeTransitions"}},v1:{defaultValue:null,description:"@deprecated Will be removed in a future version",name:"v1",required:!0,type:{name:"GrafanaTheme"}},flags:{defaultValue:null,description:"feature flags that might impact component looks",name:"flags",required:!0,type:{name:"{}"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Label.tsx#getLabelStyles"]={docgenInfo:_.__docgenInfo,name:"getLabelStyles",path:"src/components/Forms/Label.tsx#getLabelStyles"})}catch{}},"./src/components/Icon/Icon.tsx":function(D,x,r){r.d(x,{I:function(){return o}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/react/index.js"),P=r("../../node_modules/react-inlinesvg/esm/index.js"),p=r("../grafana-data/src/types/icon.ts"),u=r("./src/themes/ThemeContext.tsx"),i=r("./src/components/Icon/utils.ts"),m=Object.defineProperty,f=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,O=(a,e,t)=>e in a?m(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t,C=(a,e)=>{for(var t in e||(e={}))b.call(e,t)&&O(a,t,e[t]);if(f)for(var t of f(e))w.call(e,t)&&O(a,t,e[t]);return a},_=(a,e)=>{var t={};for(var l in a)b.call(a,l)&&e.indexOf(l)<0&&(t[l]=a[l]);if(a!=null&&f)for(var l of f(a))e.indexOf(l)<0&&w.call(a,l)&&(t[l]=a[l]);return t};const d=a=>({icon:(0,n.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"}),orange:(0,n.AH)({fill:a.v1.palette.orange})}),o=c.forwardRef((a,e)=>{var t=a,{size:l="md",type:y="default",name:s,className:E,style:v,title:I=""}=t,A=_(t,["size","type","name","className","style","title"]);const F=(0,u.of)(d);(0,p.n6)(s)||console.warn("Icon component passed an invalid icon name",s);const M=s==="fa fa-spinner"?"spinner":s,R=(0,i.Wj)(),T=(0,i.cs)(l),L=T,h=s.startsWith("gf-bar-align")?16:s.startsWith("gf-interp")?30:T,g=(0,i.Xi)(M,y),S=`${R}${g}/${M}.svg`,V=(0,n.cx)(F.icon,E,y==="mono"?{[F.orange]:s==="favorite"}:"",M==="spinner"&&"fa-spin");return c.createElement(P.A,C({innerRef:e,src:S,width:h,height:L,title:I,className:V,style:v},A))});o.displayName="Icon";try{o.displayName="Icon",o.__docgenInfo={description:"",displayName:"Icon",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"enum",value:[{value:'"play"'},{value:'"google"'},{value:'"microsoft"'},{value:'"github"'},{value:'"gitlab"'},{value:'"okta"'},{value:'"discord"'},{value:'"hipchat"'},{value:'"amazon"'},{value:'"google-hangouts-alt"'},{value:'"pagerduty"'},{value:'"line"'},{value:'"anchor"'},{value:'"adjust-circle"'},{value:'"angle-double-down"'},{value:'"angle-double-right"'},{value:'"angle-double-up"'},{value:'"angle-down"'},{value:'"angle-left"'},{value:'"angle-right"'},{value:'"angle-up"'},{value:'"align-left"'},{value:'"align-right"'},{value:'"application-observability"'},{value:'"apps"'},{value:'"archive-alt"'},{value:'"arrow"'},{value:'"arrow-down"'},{value:'"arrow-from-right"'},{value:'"arrow-left"'},{value:'"arrow-random"'},{value:'"arrow-right"'},{value:'"arrow-to-right"'},{value:'"arrow-up"'},{value:'"arrows-h"'},{value:'"arrows-v"'},{value:'"asserts"'},{value:'"expand-arrows"'},{value:'"at"'},{value:'"ai"'},{value:'"backward"'},{value:'"bars"'},{value:'"bell"'},{value:'"bell-slash"'},{value:'"bolt"'},{value:'"book"'},{value:'"bookmark"'},{value:'"book-open"'},{value:'"brackets-curly"'},{value:'"bug"'},{value:'"building"'},{value:'"calculator-alt"'},{value:'"calendar-alt"'},{value:'"calendar-slash"'},{value:'"camera"'},{value:'"capture"'},{value:'"channel-add"'},{value:'"chart-line"'},{value:'"check"'},{value:'"check-circle"'},{value:'"check-square"'},{value:'"circle"'},{value:'"circle-mono"'},{value:'"clipboard-alt"'},{value:'"clock-nine"'},{value:'"cloud"'},{value:'"cloud-download"'},{value:'"cloud-upload"'},{value:'"code-branch"'},{value:'"cog"'},{value:'"columns"'},{value:'"comment-alt"'},{value:'"comment-alt-message"'},{value:'"comment-alt-share"'},{value:'"comments-alt"'},{value:'"compass"'},{value:'"copy"'},{value:'"corner-down-right-alt"'},{value:'"create-dashboard"'},{value:'"credit-card"'},{value:'"crosshair"'},{value:'"cube"'},{value:'"dashboard"'},{value:'"database"'},{value:'"dice-three"'},{value:'"docker"'},{value:'"document-info"'},{value:'"download-alt"'},{value:'"draggabledots"'},{value:'"edit"'},{value:'"ellipsis-v"'},{value:'"envelope"'},{value:'"exchange-alt"'},{value:'"exclamation-triangle"'},{value:'"exclamation-circle"'},{value:'"external-link-alt"'},{value:'"eye"'},{value:'"eye-slash"'},{value:'"ellipsis-h"'},{value:'"fa fa-spinner"'},{value:'"favorite"'},{value:'"file-alt"'},{value:'"file-blank"'},{value:'"file-copy-alt"'},{value:'"file-download"'},{value:'"file-edit-alt"'},{value:'"file-landscape-alt"'},{value:'"filter"'},{value:'"flip"'},{value:'"folder"'},{value:'"font"'},{value:'"fire"'},{value:'"folder-open"'},{value:'"folder-plus"'},{value:'"folder-upload"'},{value:'"forward"'},{value:'"frontend-observability"'},{value:'"gf-bar-alignment-after"'},{value:'"gf-bar-alignment-before"'},{value:'"gf-bar-alignment-center"'},{value:'"gf-glue"'},{value:'"gf-grid"'},{value:'"gf-interpolation-linear"'},{value:'"gf-interpolation-smooth"'},{value:'"gf-interpolation-step-after"'},{value:'"gf-interpolation-step-before"'},{value:'"gf-landscape"'},{value:'"gf-layout-simple"'},{value:'"gf-logs"'},{value:'"gf-ml"'},{value:'"gf-movepane-left"'},{value:'"gf-movepane-right"'},{value:'"gf-portrait"'},{value:'"gf-service-account"'},{value:'"gf-show-context"'},{value:'"gf-pin"'},{value:'"gf-prometheus"'},{value:'"gf-traces"'},{value:'"globe"'},{value:'"grafana"'},{value:'"graph-bar"'},{value:'"heart"'},{value:'"heart-rate"'},{value:'"heart-break"'},{value:'"history"'},{value:'"history-alt"'},{value:'"home"'},{value:'"home-alt"'},{value:'"horizontal-align-center"'},{value:'"horizontal-align-left"'},{value:'"horizontal-align-right"'},{value:'"hourglass"'},{value:'"import"'},{value:'"info"'},{value:'"info-circle"'},{value:'"k6"'},{value:'"key-skeleton-alt"'},{value:'"keyboard"'},{value:'"layer-group"'},{value:'"layers-alt"'},{value:'"library-panel"'},{value:'"line-alt"'},{value:'"link"'},{value:'"list-ui-alt"'},{value:'"list-ul"'},{value:'"list-ol"'},{value:'"lock"'},{value:'"map-marker"'},{value:'"map-marker-plus"'},{value:'"map-marker-minus"'},{value:'"message"'},{value:'"minus"'},{value:'"minus-circle"'},{value:'"mobile-android"'},{value:'"monitor"'},{value:'"palette"'},{value:'"panel-add"'},{value:'"pathfinder-unite"'},{value:'"pause"'},{value:'"pen"'},{value:'"percentage"'},{value:'"plug"'},{value:'"plus"'},{value:'"plus-circle"'},{value:'"plus-square"'},{value:'"power"'},{value:'"presentation-play"'},{value:'"process"'},{value:'"question-circle"'},{value:'"record-audio"'},{value:'"repeat"'},{value:'"rocket"'},{value:'"ruler-combined"'},{value:'"save"'},{value:'"search"'},{value:'"search-minus"'},{value:'"search-plus"'},{value:'"share-alt"'},{value:'"shield"'},{value:'"shield-exclamation"'},{value:'"signal"'},{value:'"signin"'},{value:'"signout"'},{value:'"sitemap"'},{value:'"slack"'},{value:'"sliders-v-alt"'},{value:'"spinner"'},{value:'"sort-amount-down"'},{value:'"sort-amount-up"'},{value:'"square-shape"'},{value:'"star"'},{value:'"step-backward"'},{value:'"stopwatch"'},{value:'"stopwatch-slash"'},{value:'"sync"'},{value:'"sync-slash"'},{value:'"table"'},{value:'"tag-alt"'},{value:'"telegram-alt"'},{value:'"text-fields"'},{value:'"thumbs-up"'},{value:'"times"'},{value:'"times-circle"'},{value:'"toggle-on"'},{value:'"toggle-off"'},{value:'"trash-alt"'},{value:'"unarchive"'},{value:'"unlock"'},{value:'"upload"'},{value:'"user"'},{value:'"users-alt"'},{value:'"user-arrows"'},{value:'"vertical-align-bottom"'},{value:'"vertical-align-center"'},{value:'"vertical-align-top"'},{value:'"web-section-alt"'},{value:'"wrap-text"'},{value:'"rss"'},{value:'"x"'}]}},size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'},{value:'"xxxl"'}]}},type:{defaultValue:{value:"default"},description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"solid"'},{value:'"default"'},{value:'"mono"'}]}},title:{defaultValue:{value:""},description:"",name:"title",required:!1,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Icon/Icon.tsx#Icon"]={docgenInfo:o.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch{}},"./src/components/Icon/utils.ts":function(D,x,r){r.d(x,{Wj:function(){return u},Xi:function(){return c},cs:function(){return P}});const n=["grafana","favorite","heart-break","heart","panel-add","library-panel","circle-mono"];function c(i,m){return i?.startsWith("gf-")?"custom":n.includes(i)?"mono":m==="default"?"unicons":m==="solid"?"solid":"mono"}function P(i){switch(i){case"xs":return 12;case"sm":return 14;case"md":return 16;case"lg":return 18;case"xl":return 24;case"xxl":return 36;case"xxxl":return 48}}let p;function u(){if(p)return p;const i=typeof window<"u"&&window.__grafana_public_path__;return i?p=i+"img/icons/":p="public/img/icons/",p}},"./src/components/Portal/Portal.tsx":function(D,x,r){r.d(x,{ZL:function(){return _},gF:function(){return d}});var n=r("../../node_modules/react/index.js"),c=r("../../node_modules/react-dom/index.js"),P=r("./src/themes/ThemeContext.tsx"),p=Object.defineProperty,u=Object.defineProperties,i=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable,w=(e,t,l)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,O=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&w(e,l,t[l]);if(m)for(var l of m(t))b.call(t,l)&&w(e,l,t[l]);return e},C=(e,t)=>u(e,i(t));function _(e){const{children:t,className:l,root:y,forwardedRef:s}=e,E=(0,P.$j)(),v=(0,n.useRef)(null),I=y??d();return v.current||(v.current=document.createElement("div"),l&&(v.current.className=l),v.current.style.position="relative",v.current.style.zIndex=`${E.zIndex.portal}`),(0,n.useLayoutEffect)(()=>(v.current&&I.appendChild(v.current),()=>{v.current&&I.removeChild(v.current)}),[I]),c.createPortal(n.createElement("div",{ref:s},t),v.current)}function d(){var e;return(e=window.document.getElementById("grafana-portal-container"))!=null?e:document.body}function o(){return React.createElement("div",{id:"grafana-portal-container"})}const a=n.forwardRef((e,t)=>n.createElement(_,C(O({},e),{forwardedRef:t})));a.displayName="RefForwardingPortal";try{_.displayName="RefForwardingPortal",_.__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:a.__docgenInfo,name:"RefForwardingPortal",path:"src/components/Portal/Portal.tsx#RefForwardingPortal"})}catch{}},"./src/components/Switch/Switch.tsx":function(D,x,r){r.d(x,{K:function(){return l},d:function(){return t}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../../node_modules/lodash/lodash.js"),P=r.n(c),p=r("../../node_modules/react/index.js"),u=r("../grafana-data/src/utils/deprecationWarning.ts"),i=r("./src/themes/ThemeContext.tsx"),m=r("./src/themes/mixins.ts"),f=Object.defineProperty,b=Object.defineProperties,w=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,d=(s,E,v)=>E in s?f(s,E,{enumerable:!0,configurable:!0,writable:!0,value:v}):s[E]=v,o=(s,E)=>{for(var v in E||(E={}))C.call(E,v)&&d(s,v,E[v]);if(O)for(var v of O(E))_.call(E,v)&&d(s,v,E[v]);return s},a=(s,E)=>b(s,w(E)),e=(s,E)=>{var v={};for(var I in s)C.call(s,I)&&E.indexOf(I)<0&&(v[I]=s[I]);if(s!=null&&O)for(var I of O(s))E.indexOf(I)<0&&_.call(s,I)&&(v[I]=s[I]);return v};const t=p.forwardRef((s,E)=>{var v=s,{value:I,checked:A,onChange:F,id:M,label:R,disabled:T,invalid:L=!1}=v,h=e(v,["value","checked","onChange","id","label","disabled","invalid"]);A&&(0,u.l)("Switch","checked prop","value");const g=(0,i.of)(y),S=(0,p.useRef)(M||(0,c.uniqueId)("switch-"));return p.createElement("div",{className:(0,n.cx)(g.switch,L&&g.invalid)},p.createElement("input",a(o({type:"checkbox",disabled:T,checked:I,onChange:V=>{!T&&F?.(V)},id:S.current},h),{ref:E})),p.createElement("label",{htmlFor:S.current,"aria-label":R??"Toggle switch"}))});t.displayName="Switch";const l=p.forwardRef((s,E)=>{var v=s,{transparent:I,className:A,showLabel:F,label:M,value:R,id:T,invalid:L}=v,h=e(v,["transparent","className","showLabel","label","value","id","invalid"]);const g=(0,i.of)(y,I);return p.createElement("div",{className:(0,n.cx)(g.inlineContainer,A,h.disabled&&g.disabled,L&&g.invalid)},F&&p.createElement("label",{htmlFor:T,className:(0,n.cx)(g.inlineLabel,R&&g.inlineLabelEnabled,"inline-switch-label")},M),p.createElement(t,a(o({},h),{id:T,label:M,ref:E,value:R})))});l.displayName="Switch";const y=(s,E)=>({switch:(0,n.AH)({width:"32px",height:"16px",position:"relative",lineHeight:1,input:{opacity:0,left:"-100vw",zIndex:-1e3,position:"absolute","&:checked + label":{background:s.colors.primary.main,borderColor:s.colors.primary.main,"&:hover":{background:s.colors.primary.shade},"&::after":{transform:"translate3d(18px, -50%, 0)",background:s.colors.primary.contrastText}},"&:disabled + label":{background:s.colors.action.disabledBackground,borderColor:s.colors.border.weak,cursor:"not-allowed","&:hover":{background:s.colors.action.disabledBackground}},"&:disabled:checked + label":{"&::after":{background:s.colors.text.disabled}},"&:focus + label, &:focus-visible + label":(0,m.Hi)(s),"&:focus:not(:focus-visible) + label":(0,m.cr)(s)},label:{width:"100%",height:"100%",cursor:"pointer",borderRadius:s.shape.radius.pill,background:s.components.input.background,border:`1px solid ${s.components.input.borderColor}`,transition:"all 0.3s ease","&:hover":{borderColor:s.components.input.borderHover},"&::after":{position:"absolute",display:"block",content:'""',width:"12px",height:"12px",borderRadius:s.shape.radius.circle,background:s.colors.text.secondary,boxShadow:s.shadows.z1,top:"50%",transform:"translate3d(2px, -50%, 0)",transition:"transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)","@media (forced-colors: active)":{border:"1px solid transparent"}}}}),inlineContainer:(0,n.AH)({padding:s.spacing(0,1),height:s.spacing(s.components.height.md),display:"inline-flex",alignItems:"center",background:E?"transparent":s.components.input.background,border:`1px solid ${E?"transparent":s.components.input.borderColor}`,borderRadius:s.shape.radius.default,"&:hover":{border:`1px solid ${E?"transparent":s.components.input.borderHover}`,".inline-switch-label":{color:s.colors.text.primary}}}),disabled:(0,n.AH)({backgroundColor:"rgba(204, 204, 220, 0.04)",color:"rgba(204, 204, 220, 0.6)",border:"1px solid rgba(204, 204, 220, 0.04)"}),inlineLabel:(0,n.AH)({cursor:"pointer",paddingRight:s.spacing(1),color:s.colors.text.secondary,whiteSpace:"nowrap"}),inlineLabelEnabled:(0,n.AH)({color:s.colors.text.primary}),invalid:(0,n.AH)({"input + label, input:checked + label, input:hover + label":{border:`1px solid ${s.colors.error.border}`}})});try{t.displayName="Switch",t.__docgenInfo={description:"",displayName:"Switch",props:{value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"boolean"}},invalid:{defaultValue:{value:"false"},description:"Show an invalid state around the input",name:"invalid",required:!1,type:{name:"boolean"}},transparent:{defaultValue:null,description:"Make inline switch's background and border transparent",name:"transparent",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Switch/Switch.tsx#Switch"]={docgenInfo:t.__docgenInfo,name:"Switch",path:"src/components/Switch/Switch.tsx#Switch"})}catch{}},"./src/components/Tooltip/Tooltip.tsx":function(D,x,r){r.d(x,{m:function(){return a}});var n=r("../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs"),c=r("../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),P=r("../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs"),p=r("../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs"),u=r("../../node_modules/react/index.js"),i=r("../grafana-e2e-selectors/src/selectors/index.ts"),m=r("./src/themes/ThemeContext.tsx"),f=r("./src/utils/tooltipUtils.ts"),b=r("./src/components/Portal/Portal.tsx"),w=Object.defineProperty,O=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,d=(t,l,y)=>l in t?w(t,l,{enumerable:!0,configurable:!0,writable:!0,value:y}):t[l]=y,o=(t,l)=>{for(var y in l||(l={}))C.call(l,y)&&d(t,y,l[y]);if(O)for(var y of O(l))_.call(l,y)&&d(t,y,l[y]);return t};const a=u.forwardRef(({children:t,theme:l,interactive:y,show:s,placement:E,content:v},I)=>{const A=(0,u.useRef)(null),[F,M]=(0,u.useState)(s),R=s??F,T=[(0,n.cY)(8),(0,c.UU)({fallbackAxisSideDirection:"end",crossAxis:!1,boundary:document.body}),(0,c.BN)(),(0,P.UE)({element:A})],{context:L,refs:h,floatingStyles:g}=(0,p.we)({open:R,placement:(0,f.O)(E),onOpenChange:M,middleware:T,whileElementsMounted:c.ll}),S=(0,u.useId)(),V=(0,p.Mk)(L,{delay:{close:y?100:0},move:!1}),j=(0,p.iQ)(L),B=(0,p.s9)(L),{getReferenceProps:N,getFloatingProps:K}=(0,p.bv)([B,V,j]),U=typeof v=="function",k=(0,m.of)(e)[l??"info"],z=(0,u.useCallback)(W=>{h.setReference(W),typeof I=="function"?I(W):I&&(I.current=W)},[I,h]),H="aria-label"in t.props&&t.props["aria-label"]===v;return u.createElement(u.Fragment,null,u.cloneElement(t,o({ref:z,tabIndex:0,"aria-describedby":!H&&R?S:void 0},N())),R&&u.createElement(b.ZL,null,u.createElement("div",o({ref:h.setFloating,style:g},K()),u.createElement(p.ie,{className:k.arrow,ref:A,context:L}),u.createElement("div",{"data-testid":i.Tp.components.Tooltip.container,id:S,role:"tooltip",className:k.container},typeof v=="string"&&v,u.isValidElement(v)&&u.cloneElement(v),U&&v({})))))});a.displayName="Tooltip";const e=t=>{const l=(0,f.f)(t,t.components.tooltip.background,t.components.tooltip.background,t.components.tooltip.text,{topBottom:.5,rightLeft:1}),y=(0,f.f)(t,t.colors.error.main,t.colors.error.main,t.colors.error.contrastText,{topBottom:.5,rightLeft:1});return{info:l,["info-alt"]:l,error:y}};try{a.displayName="Tooltip",a.__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:a.__docgenInfo,name:"Tooltip",path:"src/components/Tooltip/Tooltip.tsx#Tooltip"})}catch{}},"./src/utils/reactUtils.ts":function(D,x,r){r.d(x,{b:function(){return P},e:function(){return c}});var n=r("../../node_modules/react/index.js");function c(p){let u;const i=n.Children.only(p);return"id"in i?.props?u=i.props.id:"inputId"in i.props&&(u=i?.props.inputId),typeof u=="string"?u:void 0}function P(p,u){if(n.isValidElement(p)||typeof p=="string"||typeof p=="number")return p;if(typeof p=="function"&&u)return p(u);throw new Error(`${p} is not a React element nor a function that returns React element`)}},"./src/utils/tooltipUtils.ts":function(D,x,r){r.d(x,{O:function(){return P},f:function(){return p}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=r("../grafana-data/src/themes/colorManipulator.ts");function P(u){switch(u){case"auto":return"bottom";case"auto-start":return"bottom-start";case"auto-end":return"bottom-end";default:return u??"bottom"}}function p(u,i,m,f,b){return{arrow:(0,n.AH)({fill:i}),container:(0,n.AH)({backgroundColor:i,borderRadius:u.shape.radius.default,border:`1px solid ${m}`,boxShadow:u.shadows.z2,color:f,fontSize:u.typography.bodySmall.fontSize,padding:u.spacing(b.topBottom,b.rightLeft),transition:"opacity 0.3s",zIndex:u.zIndex.tooltip,maxWidth:"400px",overflowWrap:"break-word","&[data-popper-interactive='false']":{pointerEvents:"none"},code:{border:"none",display:"inline",background:c.e$(i,.1),color:f,whiteSpace:"normal"},pre:{background:c.e$(i,.1),color:f},a:{color:f,textDecoration:"underline"},"a:hover":{textDecoration:"none"}}),headerClose:(0,n.AH)({color:u.colors.text.secondary,position:"absolute",right:u.spacing(1),top:u.spacing(1.5),backgroundColor:"transparent",border:0}),header:(0,n.AH)({paddingTop:u.spacing(1),paddingBottom:u.spacing(2)}),body:(0,n.AH)({paddingTop:u.spacing(1),paddingBottom:u.spacing(1)}),footer:(0,n.AH)({paddingTop:u.spacing(2),paddingBottom:u.spacing(1)})}}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(D,x,r){/**
 * @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 n=r("../../node_modules/react/index.js"),c=Symbol.for("react.element"),P=Symbol.for("react.fragment"),p=Object.prototype.hasOwnProperty,u=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function m(f,b,w){var O,C={},_=null,d=null;w!==void 0&&(_=""+w),b.key!==void 0&&(_=""+b.key),b.ref!==void 0&&(d=b.ref);for(O in b)p.call(b,O)&&!i.hasOwnProperty(O)&&(C[O]=b[O]);if(f&&f.defaultProps)for(O in b=f.defaultProps,b)C[O]===void 0&&(C[O]=b[O]);return{$$typeof:c,type:f,key:_,ref:d,props:C,_owner:u.current}}x.Fragment=P,x.jsx=m,x.jsxs=m},"../../node_modules/react/jsx-runtime.js":function(D,x,r){D.exports=r("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
