"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[9855],{"./src/components/Forms/Field.story.tsx":function(D,y,a){a.r(y),a.d(y,{HorizontalLayout:function(){return M},Simple:function(){return R},default:function(){return A}});var t=a("../../node_modules/react/index.js"),r=a("./src/components/Input/Input.tsx"),x=a("./src/components/Switch/Switch.tsx"),s=a("./src/components/Forms/Field.tsx"),i=a("../../node_modules/react/jsx-runtime.js"),c=a("../../node_modules/@mdx-js/react/lib/index.js"),p=a("../../node_modules/@storybook/blocks/dist/index.mjs");function b(O){const _=Object.assign({h1:"h1",p:"p",code:"code",h3:"h3",pre:"pre"},(0,c.RP)(),O.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(p.W8,{title:"MDX|Field",component:s.D}),`
`,(0,i.jsx)(_.h1,{id:"field",children:"Field"}),`
`,(0,i.jsxs)(_.p,{children:[(0,i.jsx)(_.code,{children:"Field"})," is the basic component for rendering form elements together with labels and description"]}),`
`,(0,i.jsx)(_.h3,{id:"usage",children:"Usage"}),`
`,(0,i.jsx)(_.pre,{children:(0,i.jsx)(_.code,{className:"language-jsx",children:`import { Forms } from '@grafana/ui';

<Field label={...} description={...}>
  <Input id="userName"  onChange={...}/>
</Field>
`})}),`
`,(0,i.jsx)(_.h3,{id:"props",children:"Props"}),`
`,(0,i.jsx)(p.ov,{of:s.D})]})}function v(O={}){const{wrapper:_}=Object.assign({},(0,c.RP)(),O.components);return _?(0,i.jsx)(_,Object.assign({},O,{children:(0,i.jsx)(b,O)})):b(O)}var S=v,E=Object.defineProperty,P=Object.defineProperties,C=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,n=(O,_,w)=>_ in O?E(O,_,{enumerable:!0,configurable:!0,writable:!0,value:w}):O[_]=w,l=(O,_)=>{for(var w in _||(_={}))h.call(_,w)&&n(O,w,_[w]);if(d)for(var w of d(_))m.call(_,w)&&n(O,w,_[w]);return O},g=(O,_)=>P(O,C(_)),o,e,u,f,I,V;const L={title:"Forms/Field",component:s.D,argTypes:{label:{control:{type:"text"}},description:{control:{type:"text"}},error:{control:{type:"text"}}},parameters:{docs:{page:S},knobs:{disabled:!0},controls:{exclude:["children","className"]}}},R=O=>t.createElement("div",null,t.createElement(s.D,l({},O),t.createElement(r.p,{id:"thisField"})));R.args={label:"Graphite API key",description:"Your Graphite instance API key",disabled:!1,invalid:!1,loading:!1,error:"Not valid input",horizontal:!1};const M=O=>{const[_,w]=(0,t.useState)(!1),T=(0,t.useCallback)(k=>w(k.currentTarget.checked),[w]);return t.createElement("div",null,t.createElement(s.D,l({},O),t.createElement(x.d,{checked:_,onChange:T})))};M.args={label:"Show labels",description:"Display threshold labels",disabled:!1,invalid:!1,loading:!1,error:"Not valid input",horizontal:!0};var A=L;R.parameters=g(l({},R.parameters),{docs:g(l({},(o=R.parameters)==null?void 0:o.docs),{source:l({originalSource:`args => <div>
    <Field {...args}>
      <Input id="thisField" />
    </Field>
  </div>`},(u=(e=R.parameters)==null?void 0:e.docs)==null?void 0:u.source)})}),M.parameters=g(l({},M.parameters),{docs:g(l({},(f=M.parameters)==null?void 0:f.docs),{source:l({originalSource:`args => {
  const [checked, setChecked] = useState(false);
  const onChange = useCallback((e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked), [setChecked]);
  return <div>
      <Field {...args}>
        <Switch checked={checked} onChange={onChange} />
      </Field>
    </div>;
}`},(V=(I=M.parameters)==null?void 0:I.docs)==null?void 0:V.source)})})},"../grafana-data/src/types/dataFrame.ts":function(D,y,a){a.d(y,{Bc:function(){return r},LE:function(){return x},PU:function(){return t}});var t=(i=>(i.time="time",i.number="number",i.string="string",i.boolean="boolean",i.trace="trace",i.geo="geo",i.enum="enum",i.other="other",i.frame="frame",i.nestedFrames="nestedFrames",i))(t||{});const r="Value",x="Time",s="Metric"},"../grafana-data/src/types/icon.ts":function(D,y,a){a.d(y,{Uo:function(){return x},az:function(){return t},n6:function(){return r}});const t={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 r(s){return!s||typeof s!="string"?!1:s in t}function x(s){if(r(s))return s}},"../grafana-data/src/utils/deprecationWarning.ts":function(D,y,a){a.d(y,{l:function(){return r}});const t={},r=(x,s,i)=>{let c=`[Deprecation warning] ${x}: ${s} is deprecated`;i&&(c+=`. Use ${i} instead`);const p=Date.now(),b=t[c];(!b||p-b>1e4)&&(console.warn(c),t[c]=p)}},"./src/components/Forms/Field.tsx":function(D,y,a){a.d(y,{D:function(){return d}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("./src/themes/ThemeContext.tsx"),s=a("./src/utils/reactUtils.ts"),i=a("./src/components/Forms/FieldValidationMessage.tsx"),c=a("./src/components/Forms/Label.tsx"),p=Object.defineProperty,b=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable,E=(n,l,g)=>l in n?p(n,l,{enumerable:!0,configurable:!0,writable:!0,value:g}):n[l]=g,P=(n,l)=>{for(var g in l||(l={}))v.call(l,g)&&E(n,g,l[g]);if(b)for(var g of b(l))S.call(l,g)&&E(n,g,l[g]);return n},C=(n,l)=>{var g={};for(var o in n)v.call(n,o)&&l.indexOf(o)<0&&(g[o]=n[o]);if(n!=null&&b)for(var o of b(n))l.indexOf(o)<0&&S.call(n,o)&&(g[o]=n[o]);return g};const d=r.forwardRef((n,l)=>{var g=n,{label:o,description:e,horizontal:u,invalid:f,loading:I,disabled:V,required:L,error:R,children:M,className:A,validationMessageHorizontalOverflow:O,htmlFor:_}=g,w=C(g,["label","description","horizontal","invalid","loading","disabled","required","error","children","className","validationMessageHorizontalOverflow","htmlFor"]);const T=(0,x.of)(m),k=_??(0,s.e)(M),F=typeof o=="string"?r.createElement(c.J,{htmlFor:k,description:e},`${o}${L?" *":""}`):o,N=h({invalid:f,disabled:V,loading:I});return r.createElement("div",P({className:(0,t.cx)(T.field,u&&T.fieldHorizontal,A)},w),F,r.createElement("div",null,r.createElement("div",{ref:l},r.cloneElement(M,N)),f&&R&&!u&&r.createElement("div",{className:(0,t.cx)(T.fieldValidationWrapper,{[T.validationMessageHorizontalOverflow]:!!O})},r.createElement(i.P,null,R))),f&&R&&u&&r.createElement("div",{className:(0,t.cx)(T.fieldValidationWrapper,T.fieldValidationWrapperHorizontal,{[T.validationMessageHorizontalOverflow]:!!O})},r.createElement(i.P,null,R)))});d.displayName="Field";function h(n){for(const l in n)n[l]===void 0&&delete n[l];return n}const m=n=>({field:(0,t.AH)({display:"flex",flexDirection:"column",marginBottom:n.spacing(2)}),fieldHorizontal:(0,t.AH)({flexDirection:"row",justifyContent:"space-between",flexWrap:"wrap"}),fieldValidationWrapper:(0,t.AH)({marginTop:n.spacing(.5)}),fieldValidationWrapperHorizontal:(0,t.AH)({flex:"1 1 100%"}),validationMessageHorizontalOverflow:(0,t.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,y,a){a.d(y,{P:function(){return i}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("./src/themes/ThemeContext.tsx"),s=a("./src/components/Icon/Icon.tsx");const i=({children:p,horizontal:b,className:v})=>{const S=(0,x.of)(c),E=(0,t.cx)(b?S.horizontal:S.vertical,v);return r.createElement("div",{role:"alert",className:E},r.createElement(s.I,{className:S.fieldValidationMessageIcon,name:"exclamation-triangle"}),p)},c=p=>{const b=`
      font-size: ${p.typography.size.sm};
      font-weight: ${p.typography.fontWeightMedium};
      padding: ${p.spacing(.5,1)};
      color: ${p.colors.error.contrastText};
      background: ${p.colors.error.main};
      border-radius: ${p.shape.radius.default};
      position: relative;
      display: inline-block;
      align-self: flex-start;

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

      a:hover {
        text-decoration: none;
      }
    `;return{vertical:(0,t.AH)(b,{margin:p.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 ${p.colors.error.main} transparent`,borderStyle:"solid"}}),horizontal:(0,t.AH)(b,{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,t.AH)({marginRight:p.spacing()})}};try{i.displayName="FieldValidationMessage",i.__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:i.__docgenInfo,name:"FieldValidationMessage",path:"src/components/Forms/FieldValidationMessage.tsx#FieldValidationMessage"})}catch{}try{c.displayName="getFieldValidationMessageStyles",c.__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:c.__docgenInfo,name:"getFieldValidationMessageStyles",path:"src/components/Forms/FieldValidationMessage.tsx#getFieldValidationMessageStyles"})}catch{}},"./src/components/Forms/Label.tsx":function(D,y,a){a.d(y,{J:function(){return P},f:function(){return C}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("./src/themes/ThemeContext.tsx"),s=a("./src/components/Icon/Icon.tsx"),i=Object.defineProperty,c=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable,v=(d,h,m)=>h in d?i(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m,S=(d,h)=>{for(var m in h||(h={}))p.call(h,m)&&v(d,m,h[m]);if(c)for(var m of c(h))b.call(h,m)&&v(d,m,h[m]);return d},E=(d,h)=>{var m={};for(var n in d)p.call(d,n)&&h.indexOf(n)<0&&(m[n]=d[n]);if(d!=null&&c)for(var n of c(d))h.indexOf(n)<0&&b.call(d,n)&&(m[n]=d[n]);return m};const P=d=>{var h=d,{children:m,description:n,className:l,category:g}=h,o=E(h,["children","description","className","category"]);const e=(0,x.of)(C),u=g?.map((f,I)=>r.createElement("span",{className:e.categories,key:`${f}/${I}`},r.createElement("span",null,f),r.createElement(s.I,{name:"angle-right",className:e.chevron})));return r.createElement("div",{className:(0,t.cx)(e.label,l)},r.createElement("label",S({},o),r.createElement("div",{className:e.labelContent},u,m),n&&r.createElement("span",{className:e.description},n)))},C=d=>({label:(0,t.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,t.AH)({display:"flex",alignItems:"center"}),description:(0,t.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,t.AH)({label:"Label-categories",display:"inline-flex",alignItems:"center"}),chevron:(0,t.AH)({margin:d.spacing(0,.25)})});try{P.displayName="Label",P.__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:P.__docgenInfo,name:"Label",path:"src/components/Forms/Label.tsx#Label"})}catch{}try{C.displayName="getLabelStyles",C.__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:C.__docgenInfo,name:"getLabelStyles",path:"src/components/Forms/Label.tsx#getLabelStyles"})}catch{}},"./src/components/Forms/commonStyles.ts":function(D,y,a){a.d(y,{SM:function(){return b},Xb:function(){return s},g$:function(){return i},gm:function(){return x},lH:function(){return c}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("./src/themes/mixins.ts");const x=v=>(0,t.AH)({"&:focus":(0,r.Hi)(v)}),s=(v,S=!1)=>{const E=S?v.colors.error.border:v.components.input.borderColor,P=S?v.colors.error.shade:v.components.input.borderHover,C=v.components.input.background,d=v.components.input.text,h=v.isDark?"#2e2f35":"#bab4ca";return(0,t.cx)(i(v),(0,t.AH)({background:C,lineHeight:v.typography.body.lineHeight,fontSize:v.typography.size.md,color:d,border:`1px solid ${E}`,"&:-webkit-autofill, &:-webkit-autofill:hover":{boxShadow:`inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${C}!important`,WebkitTextFillColor:`${d} !important`,borderColor:h},"&:-webkit-autofill:focus":{boxShadow:`0 0 0 2px ${v.colors.background.primary}, 0 0 0px 4px ${v.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${C}!important`,WebkitTextFillColor:`${d} !important`},"&:hover":{borderColor:P},"&:focus":{outline:"none"},"&:disabled":{backgroundColor:v.colors.action.disabledBackground,color:v.colors.action.disabledText,border:`1px solid ${v.colors.action.disabledBackground}`,"&:hover":{borderColor:E}},"&::placeholder":{color:v.colors.text.disabled,opacity:1}}))},i=v=>(0,t.AH)({padding:v.spacing(0,1,0,1)}),c=()=>({sm:(0,t.AH)({width:p("sm")}),md:(0,t.AH)({width:p("md")}),lg:(0,t.AH)({width:p("lg")}),auto:(0,t.AH)({width:p("auto")})}),p=v=>{switch(v){case"sm":return"200px";case"md":return"320px";case"lg":return"580px";case"auto":default:return"auto"}};function b(v,S){switch(v){case"sm":return{padding:1,fontSize:S.typography.size.sm,height:S.components.height.sm};case"lg":return{padding:3,fontSize:S.typography.size.lg,height:S.components.height.lg};case"md":default:return{padding:2,fontSize:S.typography.size.md,height:S.components.height.md}}}},"./src/components/Icon/Icon.tsx":function(D,y,a){a.d(y,{I:function(){return h}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("../../node_modules/react-inlinesvg/esm/index.js"),s=a("../grafana-data/src/types/icon.ts"),i=a("./src/themes/ThemeContext.tsx"),c=a("./src/components/Icon/utils.ts"),p=Object.defineProperty,b=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable,E=(m,n,l)=>n in m?p(m,n,{enumerable:!0,configurable:!0,writable:!0,value:l}):m[n]=l,P=(m,n)=>{for(var l in n||(n={}))v.call(n,l)&&E(m,l,n[l]);if(b)for(var l of b(n))S.call(n,l)&&E(m,l,n[l]);return m},C=(m,n)=>{var l={};for(var g in m)v.call(m,g)&&n.indexOf(g)<0&&(l[g]=m[g]);if(m!=null&&b)for(var g of b(m))n.indexOf(g)<0&&S.call(m,g)&&(l[g]=m[g]);return l};const d=m=>({icon:(0,t.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"}),orange:(0,t.AH)({fill:m.v1.palette.orange})}),h=r.forwardRef((m,n)=>{var l=m,{size:g="md",type:o="default",name:e,className:u,style:f,title:I=""}=l,V=C(l,["size","type","name","className","style","title"]);const L=(0,i.of)(d);(0,s.n6)(e)||console.warn("Icon component passed an invalid icon name",e);const R=e==="fa fa-spinner"?"spinner":e,M=(0,c.Wj)(),A=(0,c.cs)(g),O=A,_=e.startsWith("gf-bar-align")?16:e.startsWith("gf-interp")?30:A,w=(0,c.Xi)(R,o),T=`${M}${w}/${R}.svg`,k=(0,t.cx)(L.icon,u,o==="mono"?{[L.orange]:e==="favorite"}:"",R==="spinner"&&"fa-spin");return r.createElement(x.A,P({innerRef:n,src:T,width:_,height:O,title:I,className:k,style:f},V))});h.displayName="Icon";try{h.displayName="Icon",h.__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:h.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch{}},"./src/components/Icon/utils.ts":function(D,y,a){a.d(y,{Wj:function(){return i},Xi:function(){return r},cs:function(){return x}});const t=["grafana","favorite","heart-break","heart","panel-add","library-panel","circle-mono"];function r(c,p){return c?.startsWith("gf-")?"custom":t.includes(c)?"mono":p==="default"?"unicons":p==="solid"?"solid":"mono"}function x(c){switch(c){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 s;function i(){if(s)return s;const c=typeof window<"u"&&window.__grafana_public_path__;return c?s=c+"img/icons/":s="public/img/icons/",s}},"./src/components/Input/Input.tsx":function(D,y,a){a.d(y,{n:function(){return g},p:function(){return l}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("../../node_modules/react-use/lib/useMeasure.js"),s=a("./src/themes/ThemeContext.tsx"),i=a("./src/themes/stylesFactory.ts"),c=a("./src/components/Forms/commonStyles.ts"),p=a("./src/components/Spinner/Spinner.tsx"),b=Object.defineProperty,v=Object.defineProperties,S=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,P=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable,d=(o,e,u)=>e in o?b(o,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):o[e]=u,h=(o,e)=>{for(var u in e||(e={}))P.call(e,u)&&d(o,u,e[u]);if(E)for(var u of E(e))C.call(e,u)&&d(o,u,e[u]);return o},m=(o,e)=>v(o,S(e)),n=(o,e)=>{var u={};for(var f in o)P.call(o,f)&&e.indexOf(f)<0&&(u[f]=o[f]);if(o!=null&&E)for(var f of E(o))e.indexOf(f)<0&&C.call(o,f)&&(u[f]=o[f]);return u};const l=r.forwardRef((o,e)=>{const u=o,{className:f,addonAfter:I,addonBefore:V,prefix:L,suffix:R,invalid:M,loading:A,width:O=0}=u,_=n(u,["className","addonAfter","addonBefore","prefix","suffix","invalid","loading","width"]),[w,T]=(0,x.A)(),[k,F]=(0,x.A)(),N=(0,s.$j)(),B=g({theme:N,invalid:!!M,width:O});return r.createElement("div",{className:(0,t.cx)(B.wrapper,f),"data-testid":"input-wrapper"},!!V&&r.createElement("div",{className:B.addon},V),r.createElement("div",{className:B.inputWrapper},L&&r.createElement("div",{className:B.prefix,ref:w},L),r.createElement("input",m(h({ref:e,className:B.input},_),{style:{paddingLeft:L?T.width+12:void 0,paddingRight:R||A?F.width+12:void 0}})),(R||A)&&r.createElement("div",{className:B.suffix,ref:k},A&&r.createElement(p.y,{className:B.loadingIndicator,inline:!0}),R)),!!I&&r.createElement("div",{className:B.addon},I))});l.displayName="Input";const g=(0,i.N)(({theme:o,invalid:e=!1,width:u})=>{const f="28px",I=(0,t.AH)({position:"absolute",top:0,zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",flexGrow:0,flexShrink:0,fontSize:o.typography.size.md,height:"100%",minWidth:f,color:o.colors.text.secondary});return{wrapper:(0,t.cx)((0,t.AH)({label:"input-wrapper",display:"flex",width:u?o.spacing(u):"100%",height:o.spacing(o.components.height.md),borderRadius:o.shape.radius.default,"&:hover":{"> .prefix, .suffix, .input":{borderColor:e?o.colors.error.border:o.colors.primary.border},"input[type='number']":{appearance:"textfield"},"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button":{WebkitAppearance:"inner-spin-button !important",opacity:1}}})),inputWrapper:(0,t.AH)({label:"input-inputWrapper",position:"relative",flexGrow:1,zIndex:1,"&:not(:first-child):last-child":{"> input":{borderLeft:"none",borderTopLeftRadius:0,borderBottomLeftRadius:0}},"&:first-child:not(:last-child)":{"> input":{borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0}},"&:not(:first-child):not(:last-child)":{"> input":{borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0,borderTopLeftRadius:0,borderBottomLeftRadius:0}},input:{"&:not(:first-child)":{paddingLeft:f},"&:not(:last-child)":{paddingRight:f},"&[readonly]":{cursor:"default"}}}),input:(0,t.cx)((0,c.gm)(o),(0,c.Xb)(o,e),(0,t.AH)({label:"input-input",position:"relative",zIndex:0,flexGrow:1,borderRadius:o.shape.radius.default,height:"100%",width:"100%"})),inputDisabled:(0,t.AH)({backgroundColor:o.colors.action.disabledBackground,color:o.colors.action.disabledText,border:`1px solid ${o.colors.action.disabledBackground}`,"&:focus":{boxShadow:"none"}}),addon:(0,t.AH)({label:"input-addon",display:"flex",justifyContent:"center",alignItems:"center",flexGrow:0,flexShrink:0,position:"relative","&:first-child":{borderTopRightRadius:0,borderBottomRightRadius:0,"> :last-child":{borderTopRightRadius:0,borderBottomRightRadius:0}},"&:last-child":{borderTopLeftRadius:0,borderBottomLeftRadius:0,"> :first-child":{borderTopLeftRadius:0,borderBottomLeftRadius:0}},"> *:focus":{zIndex:2}}),prefix:(0,t.cx)(I,(0,t.AH)({label:"input-prefix",paddingLeft:o.spacing(1),paddingRight:o.spacing(.5),borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0})),suffix:(0,t.cx)(I,(0,t.AH)({label:"input-suffix",paddingLeft:o.spacing(1),paddingRight:o.spacing(1),marginBottom:"-2px",borderLeft:"none",borderTopLeftRadius:0,borderBottomLeftRadius:0,right:0})),loadingIndicator:(0,t.AH)({"& + *":{marginLeft:o.spacing(.5)}})}});try{l.displayName="Input",l.__docgenInfo={description:"",displayName:"Input",props:{width:{defaultValue:null,description:"Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.",name:"width",required:!1,type:{name:"number"}},prefix:{defaultValue:null,description:"Show an icon as a prefix in the input",name:"prefix",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Show an invalid state around the input",name:"invalid",required:!1,type:{name:"boolean"}},suffix:{defaultValue:null,description:"Show an icon as a suffix in the input",name:"suffix",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:null,description:"Show a loading indicator as a suffix in the input",name:"loading",required:!1,type:{name:"boolean"}},addonBefore:{defaultValue:null,description:"Add a component as an addon before the input",name:"addonBefore",required:!1,type:{name:"ReactNode"}},addonAfter:{defaultValue:null,description:"Add a component as an addon after the input",name:"addonAfter",required:!1,type:{name:"ReactNode"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.tsx#Input"]={docgenInfo:l.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch{}},"./src/components/Spinner/Spinner.tsx":function(D,y,a){a.d(y,{y:function(){return b}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/react/index.js"),x=a("../../node_modules/react-inlinesvg/esm/index.js"),s=a("./src/themes/ThemeContext.tsx"),i=a("./src/types/icon.ts"),c=a("./src/components/Icon/Icon.tsx"),p=a("./src/components/Icon/utils.ts");const b=({className:E,inline:P=!1,iconClassName:C,style:d,size:h="md"})=>{const m=(0,s.of)(v),n=(0,s.of)(S,h);if(typeof h!="string"||!(0,i.rJ)(h)){const l=(0,p.Wj)(),g="spinner",o=(0,p.Xi)(g,"default"),e=`${l}${o}/${g}.svg`;return r.createElement("div",{"data-testid":"Spinner",style:d,className:(0,t.cx)({[m.inline]:P},n.wrapper,E)},r.createElement(x.A,{src:e,width:h,height:h,className:(0,t.cx)("fa-spin",n.icon,E),style:d}))}return r.createElement("div",{"data-testid":"Spinner",style:d,className:(0,t.cx)({[m.inline]:P},E)},r.createElement(c.I,{className:(0,t.cx)("fa-spin",C),name:"spinner",size:h,"aria-label":"loading spinner"}))},v=E=>({inline:(0,t.AH)({display:"inline-block"})}),S=(E,P)=>({wrapper:(0,t.AH)({fontSize:typeof P=="string"?P:`${P}px`}),icon:(0,t.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"})});try{b.displayName="Spinner",b.__docgenInfo={description:"",displayName:"Spinner",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},iconClassName:{defaultValue:null,description:"",name:"iconClassName",required:!1,type:{name:"string"}},inline:{defaultValue:{value:"false"},description:"",name:"inline",required:!1,type:{name:"boolean"}},size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"string | number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Spinner/Spinner.tsx#Spinner"]={docgenInfo:b.__docgenInfo,name:"Spinner",path:"src/components/Spinner/Spinner.tsx#Spinner"})}catch{}},"./src/components/Switch/Switch.tsx":function(D,y,a){a.d(y,{K:function(){return g},d:function(){return l}});var t=a("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=a("../../node_modules/lodash/lodash.js"),x=a.n(r),s=a("../../node_modules/react/index.js"),i=a("../grafana-data/src/utils/deprecationWarning.ts"),c=a("./src/themes/ThemeContext.tsx"),p=a("./src/themes/mixins.ts"),b=Object.defineProperty,v=Object.defineProperties,S=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,P=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable,d=(e,u,f)=>u in e?b(e,u,{enumerable:!0,configurable:!0,writable:!0,value:f}):e[u]=f,h=(e,u)=>{for(var f in u||(u={}))P.call(u,f)&&d(e,f,u[f]);if(E)for(var f of E(u))C.call(u,f)&&d(e,f,u[f]);return e},m=(e,u)=>v(e,S(u)),n=(e,u)=>{var f={};for(var I in e)P.call(e,I)&&u.indexOf(I)<0&&(f[I]=e[I]);if(e!=null&&E)for(var I of E(e))u.indexOf(I)<0&&C.call(e,I)&&(f[I]=e[I]);return f};const l=s.forwardRef((e,u)=>{var f=e,{value:I,checked:V,onChange:L,id:R,label:M,disabled:A,invalid:O=!1}=f,_=n(f,["value","checked","onChange","id","label","disabled","invalid"]);V&&(0,i.l)("Switch","checked prop","value");const w=(0,c.of)(o),T=(0,s.useRef)(R||(0,r.uniqueId)("switch-"));return s.createElement("div",{className:(0,t.cx)(w.switch,O&&w.invalid)},s.createElement("input",m(h({type:"checkbox",disabled:A,checked:I,onChange:k=>{!A&&L?.(k)},id:T.current},_),{ref:u})),s.createElement("label",{htmlFor:T.current,"aria-label":M??"Toggle switch"}))});l.displayName="Switch";const g=s.forwardRef((e,u)=>{var f=e,{transparent:I,className:V,showLabel:L,label:R,value:M,id:A,invalid:O}=f,_=n(f,["transparent","className","showLabel","label","value","id","invalid"]);const w=(0,c.of)(o,I);return s.createElement("div",{className:(0,t.cx)(w.inlineContainer,V,_.disabled&&w.disabled,O&&w.invalid)},L&&s.createElement("label",{htmlFor:A,className:(0,t.cx)(w.inlineLabel,M&&w.inlineLabelEnabled,"inline-switch-label")},R),s.createElement(l,m(h({},_),{id:A,label:R,ref:u,value:M})))});g.displayName="Switch";const o=(e,u)=>({switch:(0,t.AH)({width:"32px",height:"16px",position:"relative",lineHeight:1,input:{opacity:0,left:"-100vw",zIndex:-1e3,position:"absolute","&:checked + label":{background:e.colors.primary.main,borderColor:e.colors.primary.main,"&:hover":{background:e.colors.primary.shade},"&::after":{transform:"translate3d(18px, -50%, 0)",background:e.colors.primary.contrastText}},"&:disabled + label":{background:e.colors.action.disabledBackground,borderColor:e.colors.border.weak,cursor:"not-allowed","&:hover":{background:e.colors.action.disabledBackground}},"&:disabled:checked + label":{"&::after":{background:e.colors.text.disabled}},"&:focus + label, &:focus-visible + label":(0,p.Hi)(e),"&:focus:not(:focus-visible) + label":(0,p.cr)(e)},label:{width:"100%",height:"100%",cursor:"pointer",borderRadius:e.shape.radius.pill,background:e.components.input.background,border:`1px solid ${e.components.input.borderColor}`,transition:"all 0.3s ease","&:hover":{borderColor:e.components.input.borderHover},"&::after":{position:"absolute",display:"block",content:'""',width:"12px",height:"12px",borderRadius:e.shape.radius.circle,background:e.colors.text.secondary,boxShadow:e.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,t.AH)({padding:e.spacing(0,1),height:e.spacing(e.components.height.md),display:"inline-flex",alignItems:"center",background:u?"transparent":e.components.input.background,border:`1px solid ${u?"transparent":e.components.input.borderColor}`,borderRadius:e.shape.radius.default,"&:hover":{border:`1px solid ${u?"transparent":e.components.input.borderHover}`,".inline-switch-label":{color:e.colors.text.primary}}}),disabled:(0,t.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,t.AH)({cursor:"pointer",paddingRight:e.spacing(1),color:e.colors.text.secondary,whiteSpace:"nowrap"}),inlineLabelEnabled:(0,t.AH)({color:e.colors.text.primary}),invalid:(0,t.AH)({"input + label, input:checked + label, input:hover + label":{border:`1px solid ${e.colors.error.border}`}})});try{l.displayName="Switch",l.__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:l.__docgenInfo,name:"Switch",path:"src/components/Switch/Switch.tsx#Switch"})}catch{}},"./src/themes/stylesFactory.ts":function(D,y,a){a.d(y,{N:function(){return x}});var t=a("../../node_modules/micro-memoize/dist/micro-memoize.js"),r=a.n(t);function x(s){return r()(s)}},"./src/types/icon.ts":function(D,y,a){a.d(y,{GO:function(){return s},SS:function(){return i},rJ:function(){return x}});var t=a("../grafana-data/src/types/icon.ts"),r=a("../grafana-data/src/types/dataFrame.ts");const x=p=>["xs","sm","md","lg","xl","xxl","xxxl"].includes(p),s=()=>Object.keys(t.az);function i(p){return c(p?.type)}function c(p){if(p)switch(p){case r.PU.time:return"clock-nine";case r.PU.string:return"font";case r.PU.number:return"calculator-alt";case r.PU.boolean:return"toggle-on";case r.PU.trace:return"info-circle";case r.PU.enum:return"list-ol";case r.PU.geo:return"map-marker";case r.PU.other:return"brackets-curly"}return"question-circle"}},"./src/utils/reactUtils.ts":function(D,y,a){a.d(y,{b:function(){return x},e:function(){return r}});var t=a("../../node_modules/react/index.js");function r(s){let i;const c=t.Children.only(s);return"id"in c?.props?i=c.props.id:"inputId"in c.props&&(i=c?.props.inputId),typeof i=="string"?i:void 0}function x(s,i){if(t.isValidElement(s)||typeof s=="string"||typeof s=="number")return s;if(typeof s=="function"&&i)return s(i);throw new Error(`${s} is not a React element nor a function that returns React element`)}}}]);
