"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[3159],{"./src/components/ColorPicker/ColorPicker.mdx":function(I,y,t){var u=t("../../node_modules/react/index.js"),a=t("../../node_modules/react/jsx-runtime.js"),E=t("../../node_modules/@mdx-js/react/lib/index.js"),d=t("../../node_modules/@storybook/blocks/dist/index.mjs"),s=t("./src/components/ColorPicker/ColorPicker.tsx");function p(v){const r=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2"},(0,E.RP)(),v.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d.W8,{title:"Pickers and Editors/ColorPicker/ColorPicker"}),`
`,(0,a.jsx)(r.h1,{id:"colorpicker",children:"ColorPicker"}),`
`,(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"ColorPicker"})," component group consists of several building blocks that are combined in Grafana to create the ",(0,a.jsx)(r.code,{children:"ColorPicker"}),": popover, pickers and palettes. There are different combinations of these building blocks depending on where the ",(0,a.jsx)(r.code,{children:"ColorPicker"})," is used in Grafana."]}),`
`,(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"Popover"})," is a tabbed view where you can switch between ",(0,a.jsx)(r.code,{children:"Palettes"}),". The ",(0,a.jsx)(r.code,{children:"NamedColorsPalette"})," shows an arrangement of preset colors, while the ",(0,a.jsx)(r.code,{children:"SpectrumPalette"})," is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. ",(0,a.jsx)(r.code,{children:"Popover"})," is triggered, for example, by the series legend of graphs, or by ",(0,a.jsx)(r.code,{children:"Pickers"}),"."]}),`
`,(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"Pickers"})," are single circular color fields that show the currently picked color. On click, they open the ",(0,a.jsx)(r.code,{children:"Popover"}),"."]}),`
`,(0,a.jsx)(r.h2,{id:"colorpickerinput",children:"ColorPickerInput"}),`
`,(0,a.jsx)(r.p,{children:"Color picker component, modified to be used inside forms. Supports all usual input props. Allows manually typing in color value as well as selecting it from the popover."}),`
`,(0,a.jsxs)(r.p,{children:["The format in which the color is returned to the ",(0,a.jsx)(r.code,{children:"onChange"})," callback can be customised via ",(0,a.jsx)(r.code,{children:"returnColorAs"})," prop."]}),`
`,(0,a.jsx)(d.ov,{of:s.sk})]})}function g(v={}){const{wrapper:r}=Object.assign({},(0,E.RP)(),v.components);return r?(0,a.jsx)(r,Object.assign({},v,{children:(0,a.jsx)(p,v)})):p(v)}y.A=g},"./src/components/ColorPicker/SpectrumPalette.story.tsx":function(I,y,t){t.r(y),t.d(y,{Simple:function(){return f}});var u=t("../../node_modules/@storybook/addon-actions/dist/index.mjs"),a=t("@storybook/client-api"),E=t.n(a),d=t("./src/utils/storybook/withTheme.tsx"),s=t("./src/components/ColorPicker/ColorPicker.mdx"),p=t("./src/components/ColorPicker/SpectrumPalette.tsx"),g=Object.defineProperty,v=Object.defineProperties,r=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable,w=(m,_,c)=>_ in m?g(m,_,{enumerable:!0,configurable:!0,writable:!0,value:c}):m[_]=c,O=(m,_)=>{for(var c in _||(_={}))x.call(_,c)&&w(m,c,_[c]);if(P)for(var c of P(_))T.call(_,c)&&w(m,c,_[c]);return m},C=(m,_)=>v(m,r(_)),l,n,e;const o={title:"Pickers and Editors/ColorPicker/Palettes/SpectrumPalette",component:p.A,parameters:{docs:{page:s.A},controls:{exclude:["onChange"]}},args:{color:"red"}},f=({color:m})=>{const[,_]=(0,a.useArgs)();return(0,d.r)(p.A,{color:m,onChange:c=>{(0,u.XI)("Color changed")(c),_({color:c})}})};y.default=o,f.parameters=C(O({},f.parameters),{docs:C(O({},(l=f.parameters)==null?void 0:l.docs),{source:O({originalSource:`({
  color
}) => {
  const [, updateArgs] = useArgs();
  return renderComponentWithTheme(SpectrumPalette, {
    color,
    onChange: (color: string) => {
      action('Color changed')(color);
      updateArgs({
        color
      });
    }
  });
}`},(e=(n=f.parameters)==null?void 0:n.docs)==null?void 0:e.source)})})},"../grafana-data/src/types/icon.ts":function(I,y,t){t.d(y,{Uo:function(){return E},az:function(){return u},n6:function(){return a}});const u={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 a(d){return!d||typeof d!="string"?!1:d in u}function E(d){if(a(d))return d}},"./src/components/ColorPicker/ColorPicker.tsx":function(I,y,t){t.d(y,{sk:function(){return m},Dp:function(){return _}});var u=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=t("../../node_modules/react/index.js"),E=t("./src/themes/ThemeContext.tsx"),d=t("./src/themes/stylesFactory.ts");const s=(i,h)=>{i.key==="Tab"||i.altKey||i.ctrlKey||i.metaKey||(i.stopPropagation(),i.key==="Escape"&&h())};var p=t("./src/components/Tooltip/Popover.tsx");class g extends a.Component{constructor(){super(...arguments),this.hideTimeout=null,this.state={show:!1},this.showPopper=()=>{this.hideTimeout&&clearTimeout(this.hideTimeout),this.setState({show:!0})},this.hidePopper=()=>{this.hideTimeout=setTimeout(()=>{this.setState({show:!1})},this.props.hideAfter)}}render(){const{children:h,content:b,placement:k="auto"}=this.props,{show:S}=this.state;return h(this.showPopper,this.hidePopper,{show:S,placement:k,content:b})}}try{g.displayName="PopoverController",g.__docgenInfo={description:"",displayName:"PopoverController",props:{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"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},hideAfter:{defaultValue:null,description:"",name:"hideAfter",required:!1,type:{name:"number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Tooltip/PopoverController.tsx#PopoverController"]={docgenInfo:g.__docgenInfo,name:"PopoverController",path:"src/components/Tooltip/PopoverController.tsx#PopoverController"})}catch{}var v=t("./src/components/ColorPicker/ColorPickerPopover.tsx"),r=t("./src/components/ColorPicker/ColorSwatch.tsx"),P=t("./src/components/ColorPicker/SeriesColorPickerPopover.tsx"),x=Object.defineProperty,T=Object.defineProperties,w=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(i,h,b)=>h in i?x(i,h,{enumerable:!0,configurable:!0,writable:!0,value:b}):i[h]=b,e=(i,h)=>{for(var b in h||(h={}))C.call(h,b)&&n(i,b,h[b]);if(O)for(var b of O(h))l.call(h,b)&&n(i,b,h[b]);return i},o=(i,h)=>T(i,w(h));const f=(i,h="ColorPicker")=>{var b;return b=class extends a.Component{constructor(){super(...arguments),this.pickerTriggerRef=(0,a.createRef)()}render(){const{theme:k,children:S,onChange:R,color:A}=this.props,D=c(k),L=a.createElement(i,o(e({},o(e({},this.props),{children:null})),{onChange:R}));return a.createElement(g,{content:L,hideAfter:300},(M,j,B)=>a.createElement(a.Fragment,null,this.pickerTriggerRef.current&&a.createElement(p.A,o(e({},B),{referenceElement:this.pickerTriggerRef.current,wrapperClassName:D.colorPicker,onMouseLeave:j,onMouseEnter:M,onKeyDown:K=>s(K,j)})),S?S({ref:this.pickerTriggerRef,showColorPicker:M,hideColorPicker:j}):a.createElement(r.q,{ref:this.pickerTriggerRef,onClick:M,onMouseLeave:j,color:k.visualization.getColorByName(A||"#000000"),"aria-label":A})))}},b.displayName=h,b},m=(0,E.cV)(f(v.$,"ColorPicker")),_=(0,E.cV)(f(P.o,"SeriesColorPicker")),c=(0,d.N)(i=>({colorPicker:(0,u.AH)({position:"absolute",zIndex:i.zIndex.tooltip,color:i.colors.text.primary,maxWidth:"400px",fontSize:i.typography.size.sm,padding:"15px !important",'& [data-placement^="top"]':{paddingLeft:"0 !important",paddingRight:"0 !important"},'& [data-placement^="bottom"]':{paddingLeft:"0 !important",paddingRight:"0 !important"},'& [data-placement^="left"]':{paddingTop:"0 !important"},'& [data-placement^="right"]':{paddingTop:"0 !important"}})}));try{m.displayName="ColorPicker",m.__docgenInfo={description:"",displayName:"ColorPicker",props:{onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"ColorPickerChangeHandler"}},color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}},enableNamedColors:{defaultValue:null,description:"",name:"enableNamedColors",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/ColorPicker/ColorPicker.tsx#ColorPicker"]={docgenInfo:m.__docgenInfo,name:"ColorPicker",path:"src/components/ColorPicker/ColorPicker.tsx#ColorPicker"})}catch{}try{_.displayName="SeriesColorPicker",_.__docgenInfo={description:"",displayName:"SeriesColorPicker",props:{onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"ColorPickerChangeHandler"}},color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}},enableNamedColors:{defaultValue:null,description:"",name:"enableNamedColors",required:!1,type:{name:"boolean"}},updatePopperPosition:{defaultValue:null,description:`@deprecated This prop is deprecated and no longer has any effect as popper position updates automatically.
It will be removed in a future release.`,name:"updatePopperPosition",required:!1,type:{name:"(() => void)"}},yaxis:{defaultValue:null,description:"",name:"yaxis",required:!1,type:{name:"number"}},onToggleAxis:{defaultValue:null,description:"",name:"onToggleAxis",required:!1,type:{name:"(() => void)"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/ColorPicker/ColorPicker.tsx#SeriesColorPicker"]={docgenInfo:_.__docgenInfo,name:"SeriesColorPicker",path:"src/components/ColorPicker/ColorPicker.tsx#SeriesColorPicker"})}catch{}},"./src/components/Forms/commonStyles.ts":function(I,y,t){t.d(y,{SM:function(){return v},Xb:function(){return d},g$:function(){return s},gm:function(){return E},lH:function(){return p}});var u=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=t("./src/themes/mixins.ts");const E=r=>(0,u.AH)({"&:focus":(0,a.Hi)(r)}),d=(r,P=!1)=>{const x=P?r.colors.error.border:r.components.input.borderColor,T=P?r.colors.error.shade:r.components.input.borderHover,w=r.components.input.background,O=r.components.input.text,C=r.isDark?"#2e2f35":"#bab4ca";return(0,u.cx)(s(r),(0,u.AH)({background:w,lineHeight:r.typography.body.lineHeight,fontSize:r.typography.size.md,color:O,border:`1px solid ${x}`,"&:-webkit-autofill, &:-webkit-autofill:hover":{boxShadow:`inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${w}!important`,WebkitTextFillColor:`${O} !important`,borderColor:C},"&:-webkit-autofill:focus":{boxShadow:`0 0 0 2px ${r.colors.background.primary}, 0 0 0px 4px ${r.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${w}!important`,WebkitTextFillColor:`${O} !important`},"&:hover":{borderColor:T},"&:focus":{outline:"none"},"&:disabled":{backgroundColor:r.colors.action.disabledBackground,color:r.colors.action.disabledText,border:`1px solid ${r.colors.action.disabledBackground}`,"&:hover":{borderColor:x}},"&::placeholder":{color:r.colors.text.disabled,opacity:1}}))},s=r=>(0,u.AH)({padding:r.spacing(0,1,0,1)}),p=()=>({sm:(0,u.AH)({width:g("sm")}),md:(0,u.AH)({width:g("md")}),lg:(0,u.AH)({width:g("lg")}),auto:(0,u.AH)({width:g("auto")})}),g=r=>{switch(r){case"sm":return"200px";case"md":return"320px";case"lg":return"580px";case"auto":default:return"auto"}};function v(r,P){switch(r){case"sm":return{padding:1,fontSize:P.typography.size.sm,height:P.components.height.sm};case"lg":return{padding:3,fontSize:P.typography.size.lg,height:P.components.height.lg};case"md":default:return{padding:2,fontSize:P.typography.size.md,height:P.components.height.md}}}},"./src/components/Icon/Icon.tsx":function(I,y,t){t.d(y,{I:function(){return C}});var u=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=t("../../node_modules/react/index.js"),E=t("../../node_modules/react-inlinesvg/esm/index.js"),d=t("../grafana-data/src/types/icon.ts"),s=t("./src/themes/ThemeContext.tsx"),p=t("./src/components/Icon/utils.ts"),g=Object.defineProperty,v=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,x=(l,n,e)=>n in l?g(l,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[n]=e,T=(l,n)=>{for(var e in n||(n={}))r.call(n,e)&&x(l,e,n[e]);if(v)for(var e of v(n))P.call(n,e)&&x(l,e,n[e]);return l},w=(l,n)=>{var e={};for(var o in l)r.call(l,o)&&n.indexOf(o)<0&&(e[o]=l[o]);if(l!=null&&v)for(var o of v(l))n.indexOf(o)<0&&P.call(l,o)&&(e[o]=l[o]);return e};const O=l=>({icon:(0,u.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"}),orange:(0,u.AH)({fill:l.v1.palette.orange})}),C=a.forwardRef((l,n)=>{var e=l,{size:o="md",type:f="default",name:m,className:_,style:c,title:i=""}=e,h=w(e,["size","type","name","className","style","title"]);const b=(0,s.of)(O);(0,d.n6)(m)||console.warn("Icon component passed an invalid icon name",m);const k=m==="fa fa-spinner"?"spinner":m,S=(0,p.Wj)(),R=(0,p.cs)(o),A=R,D=m.startsWith("gf-bar-align")?16:m.startsWith("gf-interp")?30:R,L=(0,p.Xi)(k,f),M=`${S}${L}/${k}.svg`,j=(0,u.cx)(b.icon,_,f==="mono"?{[b.orange]:m==="favorite"}:"",k==="spinner"&&"fa-spin");return a.createElement(E.A,T({innerRef:n,src:M,width:D,height:A,title:i,className:j,style:c},h))});C.displayName="Icon";try{C.displayName="Icon",C.__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:C.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch{}},"./src/components/Icon/utils.ts":function(I,y,t){t.d(y,{Wj:function(){return s},Xi:function(){return a},cs:function(){return E}});const u=["grafana","favorite","heart-break","heart","panel-add","library-panel","circle-mono"];function a(p,g){return p?.startsWith("gf-")?"custom":u.includes(p)?"mono":g==="default"?"unicons":g==="solid"?"solid":"mono"}function E(p){switch(p){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 d;function s(){if(d)return d;const p=typeof window<"u"&&window.__grafana_public_path__;return p?d=p+"img/icons/":d="public/img/icons/",d}},"./src/components/Portal/Portal.tsx":function(I,y,t){t.d(y,{ZL:function(){return w},gF:function(){return O}});var u=t("../../node_modules/react/index.js"),a=t("../../node_modules/react-dom/index.js"),E=t("./src/themes/ThemeContext.tsx"),d=Object.defineProperty,s=Object.defineProperties,p=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,P=(n,e,o)=>e in n?d(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o,x=(n,e)=>{for(var o in e||(e={}))v.call(e,o)&&P(n,o,e[o]);if(g)for(var o of g(e))r.call(e,o)&&P(n,o,e[o]);return n},T=(n,e)=>s(n,p(e));function w(n){const{children:e,className:o,root:f,forwardedRef:m}=n,_=(0,E.$j)(),c=(0,u.useRef)(null),i=f??O();return c.current||(c.current=document.createElement("div"),o&&(c.current.className=o),c.current.style.position="relative",c.current.style.zIndex=`${_.zIndex.portal}`),(0,u.useLayoutEffect)(()=>(c.current&&i.appendChild(c.current),()=>{c.current&&i.removeChild(c.current)}),[i]),a.createPortal(u.createElement("div",{ref:m},e),c.current)}function O(){var n;return(n=window.document.getElementById("grafana-portal-container"))!=null?n:document.body}function C(){return React.createElement("div",{id:"grafana-portal-container"})}const l=u.forwardRef((n,e)=>u.createElement(w,T(x({},n),{forwardedRef:e})));l.displayName="RefForwardingPortal";try{w.displayName="RefForwardingPortal",w.__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:l.__docgenInfo,name:"RefForwardingPortal",path:"src/components/Portal/Portal.tsx#RefForwardingPortal"})}catch{}},"./src/components/Tooltip/Popover.tsx":function(I,y,t){t.d(y,{A:function(){return C}});var u=t("../../node_modules/react/index.js"),a=t("../../node_modules/react-popper/lib/esm/Manager.js"),E=t("../../node_modules/react-popper/lib/esm/Popper.js"),d=t("../../node_modules/react-transition-group/esm/Transition.js"),s=t("./src/components/Portal/Portal.tsx"),p=Object.defineProperty,g=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,P=(l,n,e)=>n in l?p(l,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[n]=e,x=(l,n)=>{for(var e in n||(n={}))v.call(n,e)&&P(l,e,n[e]);if(g)for(var e of g(n))r.call(n,e)&&P(l,e,n[e]);return l},T=(l,n)=>{var e={};for(var o in l)v.call(l,o)&&n.indexOf(o)<0&&(e[o]=l[o]);if(l!=null&&g)for(var o of g(l))n.indexOf(o)<0&&r.call(l,o)&&(e[o]=l[o]);return e};const w={transitionProperty:"opacity",transitionDuration:"200ms",transitionTimingFunction:"linear",opacity:0},O={exited:{opacity:0},entering:{opacity:0},entered:{opacity:1,transitionDelay:"0s"},exiting:{opacity:0,transitionDelay:"500ms"}};class C extends u.PureComponent{render(){const n=this.props,{content:e,show:o,placement:f,className:m,wrapperClassName:_,renderArrow:c,referenceElement:i}=n,h=T(n,["content","show","placement","className","wrapperClassName","renderArrow","referenceElement"]);return u.createElement(a.mS,null,u.createElement(d.Ay,{in:o,timeout:100,mountOnEnter:!0,unmountOnExit:!0},b=>u.createElement(s.ZL,null,u.createElement(E.N,{placement:f,referenceElement:i,modifiers:[{name:"preventOverflow",enabled:!0,options:{rootBoundary:"viewport"}},{name:"eventListeners",options:{scroll:!0,resize:!0}}]},({ref:k,style:S,placement:R,arrowProps:A,update:D})=>u.createElement("div",x({ref:k,style:x(x(x({},S),w),O[b]),"data-placement":R,className:`${_}`},h),u.createElement("div",{className:m},typeof e=="string"&&e,u.isValidElement(e)&&u.cloneElement(e),typeof e=="function"&&e({updatePopperPosition:D}),c&&c({arrowProps:A,placement:R})))))))}}try{C.displayName="Popover",C.__docgenInfo={description:"",displayName:"Popover",props:{show:{defaultValue:null,description:"",name:"show",required:!0,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"}},referenceElement:{defaultValue:null,description:"",name:"referenceElement",required:!0,type:{name:"HTMLElement | VirtualElement"}},wrapperClassName:{defaultValue:null,description:"",name:"wrapperClassName",required:!1,type:{name:"string"}},renderArrow:{defaultValue:null,description:"",name:"renderArrow",required:!1,type:{name:"RenderPopperArrowFn"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Tooltip/Popover.tsx#Popover"]={docgenInfo:C.__docgenInfo,name:"Popover",path:"src/components/Tooltip/Popover.tsx#Popover"})}catch{}},"./src/components/Tooltip/Tooltip.tsx":function(I,y,t){t.d(y,{m:function(){return l}});var u=t("../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs"),a=t("../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),E=t("../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs"),d=t("../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs"),s=t("../../node_modules/react/index.js"),p=t("../grafana-e2e-selectors/src/selectors/index.ts"),g=t("./src/themes/ThemeContext.tsx"),v=t("./src/utils/tooltipUtils.ts"),r=t("./src/components/Portal/Portal.tsx"),P=Object.defineProperty,x=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,O=(e,o,f)=>o in e?P(e,o,{enumerable:!0,configurable:!0,writable:!0,value:f}):e[o]=f,C=(e,o)=>{for(var f in o||(o={}))T.call(o,f)&&O(e,f,o[f]);if(x)for(var f of x(o))w.call(o,f)&&O(e,f,o[f]);return e};const l=s.forwardRef(({children:e,theme:o,interactive:f,show:m,placement:_,content:c},i)=>{const h=(0,s.useRef)(null),[b,k]=(0,s.useState)(m),S=m??b,R=[(0,u.cY)(8),(0,a.UU)({fallbackAxisSideDirection:"end",crossAxis:!1,boundary:document.body}),(0,a.BN)(),(0,E.UE)({element:h})],{context:A,refs:D,floatingStyles:L}=(0,d.we)({open:S,placement:(0,v.O)(_),onOpenChange:k,middleware:R,whileElementsMounted:a.ll}),M=(0,s.useId)(),j=(0,d.Mk)(A,{delay:{close:f?100:0},move:!1}),B=(0,d.iQ)(A),K=(0,d.s9)(A),{getReferenceProps:U,getFloatingProps:V}=(0,d.bv)([K,j,B]),z=typeof c=="function",W=(0,g.of)(n)[o??"info"],H=(0,s.useCallback)(N=>{D.setReference(N),typeof i=="function"?i(N):i&&(i.current=N)},[i,D]),F="aria-label"in e.props&&e.props["aria-label"]===c;return s.createElement(s.Fragment,null,s.cloneElement(e,C({ref:H,tabIndex:0,"aria-describedby":!F&&S?M:void 0},U())),S&&s.createElement(r.ZL,null,s.createElement("div",C({ref:D.setFloating,style:L},V()),s.createElement(d.ie,{className:W.arrow,ref:h,context:A}),s.createElement("div",{"data-testid":p.Tp.components.Tooltip.container,id:M,role:"tooltip",className:W.container},typeof c=="string"&&c,s.isValidElement(c)&&s.cloneElement(c),z&&c({})))))});l.displayName="Tooltip";const n=e=>{const o=(0,v.f)(e,e.components.tooltip.background,e.components.tooltip.background,e.components.tooltip.text,{topBottom:.5,rightLeft:1}),f=(0,v.f)(e,e.colors.error.main,e.colors.error.main,e.colors.error.contrastText,{topBottom:.5,rightLeft:1});return{info:o,["info-alt"]:o,error:f}};try{l.displayName="Tooltip",l.__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:l.__docgenInfo,name:"Tooltip",path:"src/components/Tooltip/Tooltip.tsx#Tooltip"})}catch{}},"./src/utils/tooltipUtils.ts":function(I,y,t){t.d(y,{O:function(){return E},f:function(){return d}});var u=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=t("../grafana-data/src/themes/colorManipulator.ts");function E(s){switch(s){case"auto":return"bottom";case"auto-start":return"bottom-start";case"auto-end":return"bottom-end";default:return s??"bottom"}}function d(s,p,g,v,r){return{arrow:(0,u.AH)({fill:p}),container:(0,u.AH)({backgroundColor:p,borderRadius:s.shape.radius.default,border:`1px solid ${g}`,boxShadow:s.shadows.z2,color:v,fontSize:s.typography.bodySmall.fontSize,padding:s.spacing(r.topBottom,r.rightLeft),transition:"opacity 0.3s",zIndex:s.zIndex.tooltip,maxWidth:"400px",overflowWrap:"break-word","&[data-popper-interactive='false']":{pointerEvents:"none"},code:{border:"none",display:"inline",background:a.e$(p,.1),color:v,whiteSpace:"normal"},pre:{background:a.e$(p,.1),color:v},a:{color:v,textDecoration:"underline"},"a:hover":{textDecoration:"none"}}),headerClose:(0,u.AH)({color:s.colors.text.secondary,position:"absolute",right:s.spacing(1),top:s.spacing(1.5),backgroundColor:"transparent",border:0}),header:(0,u.AH)({paddingTop:s.spacing(1),paddingBottom:s.spacing(2)}),body:(0,u.AH)({paddingTop:s.spacing(1),paddingBottom:s.spacing(1)}),footer:(0,u.AH)({paddingTop:s.spacing(2),paddingBottom:s.spacing(1)})}}}}]);
