"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[8283],{"../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js":function(U,S,d){d.d(S,{A:function(){return l}});function l(s,T){if(s==null)return{};var b={},v=Object.keys(s),C,g;for(g=0;g<v.length;g++)C=v[g],!(T.indexOf(C)>=0)&&(b[C]=s[C]);return b}},"../../node_modules/@mdx-js/react/lib/index.js":function(U,S,d){d.d(S,{BN:function(){return s},RP:function(){return b},gz:function(){return T},xA:function(){return C}});var l=d("../../node_modules/react/index.js");const s=l.createContext({});function T(g){return h;function h(i){const w=b(i.components);return l.createElement(g,{...i,allComponents:w})}}function b(g){const h=l.useContext(s);return l.useMemo(()=>typeof g=="function"?g(h):{...h,...g},[h,g])}const v={};function C({components:g,children:h,disableParentContext:i}){let w;return i?w=typeof g=="function"?g({}):g||v:w=b(g),l.createElement(s.Provider,{value:w},h)}},"./src/components/ColorPicker/ColorPicker.mdx":function(U,S,d){var l=d("../../node_modules/react/index.js"),s=d("../../node_modules/react/jsx-runtime.js"),T=d("../../node_modules/@mdx-js/react/lib/index.js"),b=d("../../node_modules/@storybook/blocks/dist/index.mjs"),v=d("./src/components/ColorPicker/ColorPicker.tsx");function C(h){const i=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2"},(0,T.RP)(),h.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(b.W8,{title:"Pickers and Editors/ColorPicker/ColorPicker"}),`
`,(0,s.jsx)(i.h1,{id:"colorpicker",children:"ColorPicker"}),`
`,(0,s.jsxs)(i.p,{children:["The ",(0,s.jsx)(i.code,{children:"ColorPicker"})," component group consists of several building blocks that are combined in Grafana to create the ",(0,s.jsx)(i.code,{children:"ColorPicker"}),": popover, pickers and palettes. There are different combinations of these building blocks depending on where the ",(0,s.jsx)(i.code,{children:"ColorPicker"})," is used in Grafana."]}),`
`,(0,s.jsxs)(i.p,{children:["The ",(0,s.jsx)(i.code,{children:"Popover"})," is a tabbed view where you can switch between ",(0,s.jsx)(i.code,{children:"Palettes"}),". The ",(0,s.jsx)(i.code,{children:"NamedColorsPalette"})," shows an arrangement of preset colors, while the ",(0,s.jsx)(i.code,{children:"SpectrumPalette"})," is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. ",(0,s.jsx)(i.code,{children:"Popover"})," is triggered, for example, by the series legend of graphs, or by ",(0,s.jsx)(i.code,{children:"Pickers"}),"."]}),`
`,(0,s.jsxs)(i.p,{children:["The ",(0,s.jsx)(i.code,{children:"Pickers"})," are single circular color fields that show the currently picked color. On click, they open the ",(0,s.jsx)(i.code,{children:"Popover"}),"."]}),`
`,(0,s.jsx)(i.h2,{id:"colorpickerinput",children:"ColorPickerInput"}),`
`,(0,s.jsx)(i.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,s.jsxs)(i.p,{children:["The format in which the color is returned to the ",(0,s.jsx)(i.code,{children:"onChange"})," callback can be customised via ",(0,s.jsx)(i.code,{children:"returnColorAs"})," prop."]}),`
`,(0,s.jsx)(b.ov,{of:v.sk})]})}function g(h={}){const{wrapper:i}=Object.assign({},(0,T.RP)(),h.components);return i?(0,s.jsx)(i,Object.assign({},h,{children:(0,s.jsx)(C,h)})):C(h)}S.A=g},"./src/components/ColorPicker/NamedColorsPalette.story.tsx":function(U,S,d){d.r(S),d.d(S,{NamedColors:function(){return p}});var l=d("../../node_modules/react/index.js"),s=d("./src/components/ColorPicker/ColorPicker.mdx"),T=d("./src/components/ColorPicker/NamedColorsPalette.tsx"),b=Object.defineProperty,v=Object.defineProperties,C=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,w=(u,f,O)=>f in u?b(u,f,{enumerable:!0,configurable:!0,writable:!0,value:O}):u[f]=O,k=(u,f)=>{for(var O in f||(f={}))h.call(f,O)&&w(u,O,f[O]);if(g)for(var O of g(f))i.call(f,O)&&w(u,O,f[O]);return u},L=(u,f)=>v(u,C(f)),y,j,N;const _={title:"Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette",component:T.J,parameters:{docs:{page:s.A},controls:{exclude:["theme","color"]}},argTypes:{selectedColor:{control:{type:"select",options:["green","red","light-blue","yellow"]}}}},p=({selectedColor:u})=>{const[f,O]=(0,l.useState)("green");return l.createElement(T.J,{color:f,onChange:O})};p.args={color:"green"},S.default=_,p.parameters=L(k({},p.parameters),{docs:L(k({},(y=p.parameters)==null?void 0:y.docs),{source:k({originalSource:`({
  selectedColor
}) => {
  const [color, setColor] = useState('green');
  return <NamedColorsPalette color={color} onChange={setColor} />;
}`},(N=(j=p.parameters)==null?void 0:j.docs)==null?void 0:N.source)})})},"../grafana-data/src/types/icon.ts":function(U,S,d){d.d(S,{Uo:function(){return T},az:function(){return l},n6:function(){return s}});const l={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 s(b){return!b||typeof b!="string"?!1:b in l}function T(b){if(s(b))return b}},"./src/components/ColorPicker/ColorPicker.tsx":function(U,S,d){d.d(S,{sk:function(){return H},Dp:function(){return V}});var l=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=d("../../node_modules/react/index.js"),T=d("./src/themes/ThemeContext.tsx"),b=d("./src/themes/stylesFactory.ts");const v=(x,R)=>{x.key==="Tab"||x.altKey||x.ctrlKey||x.metaKey||(x.stopPropagation(),x.key==="Escape"&&R())};var C=d("./src/components/Tooltip/Popover.tsx");class g extends s.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:R,content:B,placement:X="auto"}=this.props,{show:$}=this.state;return R(this.showPopper,this.hidePopper,{show:$,placement:X,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 h=d("./src/components/ColorPicker/ColorPickerPopover.tsx"),i=d("./src/components/ColorPicker/ColorSwatch.tsx"),w=d("./src/components/ColorPicker/SeriesColorPickerPopover.tsx"),k=Object.defineProperty,L=Object.defineProperties,y=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,N=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,p=(x,R,B)=>R in x?k(x,R,{enumerable:!0,configurable:!0,writable:!0,value:B}):x[R]=B,u=(x,R)=>{for(var B in R||(R={}))N.call(R,B)&&p(x,B,R[B]);if(j)for(var B of j(R))_.call(R,B)&&p(x,B,R[B]);return x},f=(x,R)=>L(x,y(R));const O=(x,R="ColorPicker")=>{var B;return B=class extends s.Component{constructor(){super(...arguments),this.pickerTriggerRef=(0,s.createRef)()}render(){const{theme:X,children:$,onChange:J,color:F}=this.props,Q=A(X),re=s.createElement(x,f(u({},f(u({},this.props),{children:null})),{onChange:J}));return s.createElement(g,{content:re,hideAfter:300},(q,ee,le)=>s.createElement(s.Fragment,null,this.pickerTriggerRef.current&&s.createElement(C.A,f(u({},le),{referenceElement:this.pickerTriggerRef.current,wrapperClassName:Q.colorPicker,onMouseLeave:ee,onMouseEnter:q,onKeyDown:Z=>v(Z,ee)})),$?$({ref:this.pickerTriggerRef,showColorPicker:q,hideColorPicker:ee}):s.createElement(i.q,{ref:this.pickerTriggerRef,onClick:q,onMouseLeave:ee,color:X.visualization.getColorByName(F||"#000000"),"aria-label":F})))}},B.displayName=R,B},H=(0,T.cV)(O(h.$,"ColorPicker")),V=(0,T.cV)(O(w.o,"SeriesColorPicker")),A=(0,b.N)(x=>({colorPicker:(0,l.AH)({position:"absolute",zIndex:x.zIndex.tooltip,color:x.colors.text.primary,maxWidth:"400px",fontSize:x.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{H.displayName="ColorPicker",H.__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:H.__docgenInfo,name:"ColorPicker",path:"src/components/ColorPicker/ColorPicker.tsx#ColorPicker"})}catch{}try{V.displayName="SeriesColorPicker",V.__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:V.__docgenInfo,name:"SeriesColorPicker",path:"src/components/ColorPicker/ColorPicker.tsx#SeriesColorPicker"})}catch{}},"./src/components/Forms/commonStyles.ts":function(U,S,d){d.d(S,{SM:function(){return h},Xb:function(){return b},g$:function(){return v},gm:function(){return T},lH:function(){return C}});var l=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=d("./src/themes/mixins.ts");const T=i=>(0,l.AH)({"&:focus":(0,s.Hi)(i)}),b=(i,w=!1)=>{const k=w?i.colors.error.border:i.components.input.borderColor,L=w?i.colors.error.shade:i.components.input.borderHover,y=i.components.input.background,j=i.components.input.text,N=i.isDark?"#2e2f35":"#bab4ca";return(0,l.cx)(v(i),(0,l.AH)({background:y,lineHeight:i.typography.body.lineHeight,fontSize:i.typography.size.md,color:j,border:`1px solid ${k}`,"&:-webkit-autofill, &:-webkit-autofill:hover":{boxShadow:`inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${y}!important`,WebkitTextFillColor:`${j} !important`,borderColor:N},"&:-webkit-autofill:focus":{boxShadow:`0 0 0 2px ${i.colors.background.primary}, 0 0 0px 4px ${i.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${y}!important`,WebkitTextFillColor:`${j} !important`},"&:hover":{borderColor:L},"&:focus":{outline:"none"},"&:disabled":{backgroundColor:i.colors.action.disabledBackground,color:i.colors.action.disabledText,border:`1px solid ${i.colors.action.disabledBackground}`,"&:hover":{borderColor:k}},"&::placeholder":{color:i.colors.text.disabled,opacity:1}}))},v=i=>(0,l.AH)({padding:i.spacing(0,1,0,1)}),C=()=>({sm:(0,l.AH)({width:g("sm")}),md:(0,l.AH)({width:g("md")}),lg:(0,l.AH)({width:g("lg")}),auto:(0,l.AH)({width:g("auto")})}),g=i=>{switch(i){case"sm":return"200px";case"md":return"320px";case"lg":return"580px";case"auto":default:return"auto"}};function h(i,w){switch(i){case"sm":return{padding:1,fontSize:w.typography.size.sm,height:w.components.height.sm};case"lg":return{padding:3,fontSize:w.typography.size.lg,height:w.components.height.lg};case"md":default:return{padding:2,fontSize:w.typography.size.md,height:w.components.height.md}}}},"./src/components/Icon/Icon.tsx":function(U,S,d){d.d(S,{I:function(){return N}});var l=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=d("../../node_modules/react/index.js"),T=d("../../node_modules/react-inlinesvg/esm/index.js"),b=d("../grafana-data/src/types/icon.ts"),v=d("./src/themes/ThemeContext.tsx"),C=d("./src/components/Icon/utils.ts"),g=Object.defineProperty,h=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,k=(_,p,u)=>p in _?g(_,p,{enumerable:!0,configurable:!0,writable:!0,value:u}):_[p]=u,L=(_,p)=>{for(var u in p||(p={}))i.call(p,u)&&k(_,u,p[u]);if(h)for(var u of h(p))w.call(p,u)&&k(_,u,p[u]);return _},y=(_,p)=>{var u={};for(var f in _)i.call(_,f)&&p.indexOf(f)<0&&(u[f]=_[f]);if(_!=null&&h)for(var f of h(_))p.indexOf(f)<0&&w.call(_,f)&&(u[f]=_[f]);return u};const j=_=>({icon:(0,l.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"}),orange:(0,l.AH)({fill:_.v1.palette.orange})}),N=s.forwardRef((_,p)=>{var u=_,{size:f="md",type:O="default",name:H,className:V,style:A,title:x=""}=u,R=y(u,["size","type","name","className","style","title"]);const B=(0,v.of)(j);(0,b.n6)(H)||console.warn("Icon component passed an invalid icon name",H);const X=H==="fa fa-spinner"?"spinner":H,$=(0,C.Wj)(),J=(0,C.cs)(f),F=J,Q=H.startsWith("gf-bar-align")?16:H.startsWith("gf-interp")?30:J,re=(0,C.Xi)(X,O),q=`${$}${re}/${X}.svg`,ee=(0,l.cx)(B.icon,V,O==="mono"?{[B.orange]:H==="favorite"}:"",X==="spinner"&&"fa-spin");return s.createElement(T.A,L({innerRef:p,src:q,width:Q,height:F,title:x,className:ee,style:A},R))});N.displayName="Icon";try{N.displayName="Icon",N.__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:N.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch{}},"./src/components/Icon/utils.ts":function(U,S,d){d.d(S,{Wj:function(){return v},Xi:function(){return s},cs:function(){return T}});const l=["grafana","favorite","heart-break","heart","panel-add","library-panel","circle-mono"];function s(C,g){return C?.startsWith("gf-")?"custom":l.includes(C)?"mono":g==="default"?"unicons":g==="solid"?"solid":"mono"}function T(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 b;function v(){if(b)return b;const C=typeof window<"u"&&window.__grafana_public_path__;return C?b=C+"img/icons/":b="public/img/icons/",b}},"./src/components/Portal/Portal.tsx":function(U,S,d){d.d(S,{ZL:function(){return y},gF:function(){return j}});var l=d("../../node_modules/react/index.js"),s=d("../../node_modules/react-dom/index.js"),T=d("./src/themes/ThemeContext.tsx"),b=Object.defineProperty,v=Object.defineProperties,C=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,w=(p,u,f)=>u in p?b(p,u,{enumerable:!0,configurable:!0,writable:!0,value:f}):p[u]=f,k=(p,u)=>{for(var f in u||(u={}))h.call(u,f)&&w(p,f,u[f]);if(g)for(var f of g(u))i.call(u,f)&&w(p,f,u[f]);return p},L=(p,u)=>v(p,C(u));function y(p){const{children:u,className:f,root:O,forwardedRef:H}=p,V=(0,T.$j)(),A=(0,l.useRef)(null),x=O??j();return A.current||(A.current=document.createElement("div"),f&&(A.current.className=f),A.current.style.position="relative",A.current.style.zIndex=`${V.zIndex.portal}`),(0,l.useLayoutEffect)(()=>(A.current&&x.appendChild(A.current),()=>{A.current&&x.removeChild(A.current)}),[x]),s.createPortal(l.createElement("div",{ref:H},u),A.current)}function j(){var p;return(p=window.document.getElementById("grafana-portal-container"))!=null?p:document.body}function N(){return React.createElement("div",{id:"grafana-portal-container"})}const _=l.forwardRef((p,u)=>l.createElement(y,L(k({},p),{forwardedRef:u})));_.displayName="RefForwardingPortal";try{y.displayName="RefForwardingPortal",y.__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:_.__docgenInfo,name:"RefForwardingPortal",path:"src/components/Portal/Portal.tsx#RefForwardingPortal"})}catch{}},"./src/components/Tooltip/Popover.tsx":function(U,S,d){d.d(S,{A:function(){return N}});var l=d("../../node_modules/react/index.js"),s=d("../../node_modules/react-popper/lib/esm/Manager.js"),T=d("../../node_modules/react-popper/lib/esm/Popper.js"),b=d("../../node_modules/react-transition-group/esm/Transition.js"),v=d("./src/components/Portal/Portal.tsx"),C=Object.defineProperty,g=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,w=(_,p,u)=>p in _?C(_,p,{enumerable:!0,configurable:!0,writable:!0,value:u}):_[p]=u,k=(_,p)=>{for(var u in p||(p={}))h.call(p,u)&&w(_,u,p[u]);if(g)for(var u of g(p))i.call(p,u)&&w(_,u,p[u]);return _},L=(_,p)=>{var u={};for(var f in _)h.call(_,f)&&p.indexOf(f)<0&&(u[f]=_[f]);if(_!=null&&g)for(var f of g(_))p.indexOf(f)<0&&i.call(_,f)&&(u[f]=_[f]);return u};const y={transitionProperty:"opacity",transitionDuration:"200ms",transitionTimingFunction:"linear",opacity:0},j={exited:{opacity:0},entering:{opacity:0},entered:{opacity:1,transitionDelay:"0s"},exiting:{opacity:0,transitionDelay:"500ms"}};class N extends l.PureComponent{render(){const p=this.props,{content:u,show:f,placement:O,className:H,wrapperClassName:V,renderArrow:A,referenceElement:x}=p,R=L(p,["content","show","placement","className","wrapperClassName","renderArrow","referenceElement"]);return l.createElement(s.mS,null,l.createElement(b.Ay,{in:f,timeout:100,mountOnEnter:!0,unmountOnExit:!0},B=>l.createElement(v.ZL,null,l.createElement(T.N,{placement:O,referenceElement:x,modifiers:[{name:"preventOverflow",enabled:!0,options:{rootBoundary:"viewport"}},{name:"eventListeners",options:{scroll:!0,resize:!0}}]},({ref:X,style:$,placement:J,arrowProps:F,update:Q})=>l.createElement("div",k({ref:X,style:k(k(k({},$),y),j[B]),"data-placement":J,className:`${V}`},R),l.createElement("div",{className:H},typeof u=="string"&&u,l.isValidElement(u)&&l.cloneElement(u),typeof u=="function"&&u({updatePopperPosition:Q}),A&&A({arrowProps:F,placement:J})))))))}}try{N.displayName="Popover",N.__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:N.__docgenInfo,name:"Popover",path:"src/components/Tooltip/Popover.tsx#Popover"})}catch{}},"./src/components/Tooltip/Tooltip.tsx":function(U,S,d){d.d(S,{m:function(){return _}});var l=d("../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs"),s=d("../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),T=d("../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs"),b=d("../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs"),v=d("../../node_modules/react/index.js"),C=d("../grafana-e2e-selectors/src/selectors/index.ts"),g=d("./src/themes/ThemeContext.tsx"),h=d("./src/utils/tooltipUtils.ts"),i=d("./src/components/Portal/Portal.tsx"),w=Object.defineProperty,k=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,j=(u,f,O)=>f in u?w(u,f,{enumerable:!0,configurable:!0,writable:!0,value:O}):u[f]=O,N=(u,f)=>{for(var O in f||(f={}))L.call(f,O)&&j(u,O,f[O]);if(k)for(var O of k(f))y.call(f,O)&&j(u,O,f[O]);return u};const _=v.forwardRef(({children:u,theme:f,interactive:O,show:H,placement:V,content:A},x)=>{const R=(0,v.useRef)(null),[B,X]=(0,v.useState)(H),$=H??B,J=[(0,l.cY)(8),(0,s.UU)({fallbackAxisSideDirection:"end",crossAxis:!1,boundary:document.body}),(0,s.BN)(),(0,T.UE)({element:R})],{context:F,refs:Q,floatingStyles:re}=(0,b.we)({open:$,placement:(0,h.O)(V),onOpenChange:X,middleware:J,whileElementsMounted:s.ll}),q=(0,v.useId)(),ee=(0,b.Mk)(F,{delay:{close:O?100:0},move:!1}),le=(0,b.iQ)(F),Z=(0,b.s9)(F),{getReferenceProps:te,getFloatingProps:de}=(0,b.bv)([Z,ee,le]),fe=typeof A=="function",pe=(0,g.of)(p)[f??"info"],he=(0,v.useCallback)(ue=>{Q.setReference(ue),typeof x=="function"?x(ue):x&&(x.current=ue)},[x,Q]),_e="aria-label"in u.props&&u.props["aria-label"]===A;return v.createElement(v.Fragment,null,v.cloneElement(u,N({ref:he,tabIndex:0,"aria-describedby":!_e&&$?q:void 0},te())),$&&v.createElement(i.ZL,null,v.createElement("div",N({ref:Q.setFloating,style:re},de()),v.createElement(b.ie,{className:pe.arrow,ref:R,context:F}),v.createElement("div",{"data-testid":C.Tp.components.Tooltip.container,id:q,role:"tooltip",className:pe.container},typeof A=="string"&&A,v.isValidElement(A)&&v.cloneElement(A),fe&&A({})))))});_.displayName="Tooltip";const p=u=>{const f=(0,h.f)(u,u.components.tooltip.background,u.components.tooltip.background,u.components.tooltip.text,{topBottom:.5,rightLeft:1}),O=(0,h.f)(u,u.colors.error.main,u.colors.error.main,u.colors.error.contrastText,{topBottom:.5,rightLeft:1});return{info:f,["info-alt"]:f,error:O}};try{_.displayName="Tooltip",_.__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:_.__docgenInfo,name:"Tooltip",path:"src/components/Tooltip/Tooltip.tsx#Tooltip"})}catch{}},"./src/utils/tooltipUtils.ts":function(U,S,d){d.d(S,{O:function(){return T},f:function(){return b}});var l=d("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=d("../grafana-data/src/themes/colorManipulator.ts");function T(v){switch(v){case"auto":return"bottom";case"auto-start":return"bottom-start";case"auto-end":return"bottom-end";default:return v??"bottom"}}function b(v,C,g,h,i){return{arrow:(0,l.AH)({fill:C}),container:(0,l.AH)({backgroundColor:C,borderRadius:v.shape.radius.default,border:`1px solid ${g}`,boxShadow:v.shadows.z2,color:h,fontSize:v.typography.bodySmall.fontSize,padding:v.spacing(i.topBottom,i.rightLeft),transition:"opacity 0.3s",zIndex:v.zIndex.tooltip,maxWidth:"400px",overflowWrap:"break-word","&[data-popper-interactive='false']":{pointerEvents:"none"},code:{border:"none",display:"inline",background:s.e$(C,.1),color:h,whiteSpace:"normal"},pre:{background:s.e$(C,.1),color:h},a:{color:h,textDecoration:"underline"},"a:hover":{textDecoration:"none"}}),headerClose:(0,l.AH)({color:v.colors.text.secondary,position:"absolute",right:v.spacing(1),top:v.spacing(1.5),backgroundColor:"transparent",border:0}),header:(0,l.AH)({paddingTop:v.spacing(1),paddingBottom:v.spacing(2)}),body:(0,l.AH)({paddingTop:v.spacing(1),paddingBottom:v.spacing(1)}),footer:(0,l.AH)({paddingTop:v.spacing(2),paddingBottom:v.spacing(1)})}}},"../../node_modules/react-colorful/dist/index.mjs":function(U,S,d){d.d(S,{jI:function(){return Ce},p9:function(){return Ne},xp:function(){return ke}});var l=d("../../node_modules/react/index.js");function s(){return(s=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var c=arguments[t];for(var m in c)Object.prototype.hasOwnProperty.call(c,m)&&(r[m]=c[m])}return r}).apply(this,arguments)}function T(r,t){if(r==null)return{};var c,m,P={},E=Object.keys(r);for(m=0;m<E.length;m++)t.indexOf(c=E[m])>=0||(P[c]=r[c]);return P}function b(r){var t=(0,l.useRef)(r),c=(0,l.useRef)(function(m){t.current&&t.current(m)});return t.current=r,c.current}var v=function(r,t,c){return t===void 0&&(t=0),c===void 0&&(c=1),r>c?c:r<t?t:r},C=function(r){return"touches"in r},g=function(r){return r&&r.ownerDocument.defaultView||self},h=function(r,t,c){var m=r.getBoundingClientRect(),P=C(t)?function(E,I){for(var M=0;M<E.length;M++)if(E[M].identifier===I)return E[M];return E[0]}(t.touches,c):t;return{left:v((P.pageX-(m.left+g(r).pageXOffset))/m.width),top:v((P.pageY-(m.top+g(r).pageYOffset))/m.height)}},i=function(r){!C(r)&&r.preventDefault()},w=l.memo(function(r){var t=r.onMove,c=r.onKey,m=T(r,["onMove","onKey"]),P=(0,l.useRef)(null),E=b(t),I=b(c),M=(0,l.useRef)(null),K=(0,l.useRef)(!1),D=(0,l.useMemo)(function(){var ve=function(Y){i(Y),(C(Y)?Y.touches.length>0:Y.buttons>0)&&P.current?E(h(P.current,Y,M.current)):ie(!1)},me=function(){return ie(!1)};function ie(Y){var W=K.current,G=g(P.current),ce=Y?G.addEventListener:G.removeEventListener;ce(W?"touchmove":"mousemove",ve),ce(W?"touchend":"mouseup",me)}return[function(Y){var W=Y.nativeEvent,G=P.current;if(G&&(i(W),!function(We,ze){return ze&&!C(We)}(W,K.current)&&G)){if(C(W)){K.current=!0;var ce=W.changedTouches||[];ce.length&&(M.current=ce[0].identifier)}G.focus(),E(h(G,W,M.current)),ie(!0)}},function(Y){var W=Y.which||Y.keyCode;W<37||W>40||(Y.preventDefault(),I({left:W===39?.05:W===37?-.05:0,top:W===40?.05:W===38?-.05:0}))},ie]},[I,E]),z=D[0],oe=D[1],se=D[2];return(0,l.useEffect)(function(){return se},[se]),l.createElement("div",s({},m,{onTouchStart:z,onMouseDown:z,className:"react-colorful__interactive",ref:P,onKeyDown:oe,tabIndex:0,role:"slider"}))}),k=function(r){return r.filter(Boolean).join(" ")},L=function(r){var t=r.color,c=r.left,m=r.top,P=m===void 0?.5:m,E=k(["react-colorful__pointer",r.className]);return l.createElement("div",{className:E,style:{top:100*P+"%",left:100*c+"%"}},l.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},y=function(r,t,c){return t===void 0&&(t=0),c===void 0&&(c=Math.pow(10,t)),Math.round(c*r)/c},j={grad:.9,turn:360,rad:360/(2*Math.PI)},N=function(r){return re(_(r))},_=function(r){return r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?y(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?y(parseInt(r.substring(6,8),16)/255,2):1}},p=function(r,t){return t===void 0&&(t="deg"),Number(r)*(j[t]||1)},u=function(r){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return t?O({h:p(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},f=u,O=function(r){var t=r.s,c=r.l;return{h:r.h,s:(t*=(c<50?c:100-c)/100)>0?2*t/(c+t)*100:0,v:c+t,a:r.a}},H=function(r){return Q(R(r))},V=function(r){var t=r.s,c=r.v,m=r.a,P=(200-t)*c/100;return{h:y(r.h),s:y(P>0&&P<200?t*c/100/(P<=100?P:200-P)*100:0),l:y(P/2),a:y(m,2)}},A=function(r){var t=V(r);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},x=function(r){var t=V(r);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},R=function(r){var t=r.h,c=r.s,m=r.v,P=r.a;t=t/360*6,c/=100,m/=100;var E=Math.floor(t),I=m*(1-c),M=m*(1-(t-E)*c),K=m*(1-(1-t+E)*c),D=E%6;return{r:y(255*[m,M,I,I,K,m][D]),g:y(255*[K,m,m,M,I,I][D]),b:y(255*[I,I,K,m,m,M][D]),a:y(P,2)}},B=function(r){var t=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return t?q({h:p(t[1],t[2]),s:Number(t[3]),v:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},X=B,$=function(r){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return t?re({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},J=$,F=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},Q=function(r){var t=r.r,c=r.g,m=r.b,P=r.a,E=P<1?F(y(255*P)):"";return"#"+F(t)+F(c)+F(m)+E},re=function(r){var t=r.r,c=r.g,m=r.b,P=r.a,E=Math.max(t,c,m),I=E-Math.min(t,c,m),M=I?E===t?(c-m)/I:E===c?2+(m-t)/I:4+(t-c)/I:0;return{h:y(60*(M<0?M+6:M)),s:y(E?I/E*100:0),v:y(E/255*100),a:P}},q=function(r){return{h:y(r.h),s:y(r.s),v:y(r.v),a:y(r.a,2)}},ee=l.memo(function(r){var t=r.hue,c=r.onChange,m=k(["react-colorful__hue",r.className]);return l.createElement("div",{className:m},l.createElement(w,{onMove:function(P){c({h:360*P.left})},onKey:function(P){c({h:v(t+360*P.left,0,360)})},"aria-label":"Hue","aria-valuenow":y(t),"aria-valuemax":"360","aria-valuemin":"0"},l.createElement(L,{className:"react-colorful__hue-pointer",left:t/360,color:A({h:t,s:100,v:100,a:1})})))}),le=l.memo(function(r){var t=r.hsva,c=r.onChange,m={backgroundColor:A({h:t.h,s:100,v:100,a:1})};return l.createElement("div",{className:"react-colorful__saturation",style:m},l.createElement(w,{onMove:function(P){c({s:100*P.left,v:100-100*P.top})},onKey:function(P){c({s:v(t.s+100*P.left,0,100),v:v(t.v-100*P.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+y(t.s)+"%, Brightness "+y(t.v)+"%"},l.createElement(L,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:A(t)})))}),Z=function(r,t){if(r===t)return!0;for(var c in r)if(r[c]!==t[c])return!1;return!0},te=function(r,t){return r.replace(/\s/g,"")===t.replace(/\s/g,"")},de=function(r,t){return r.toLowerCase()===t.toLowerCase()||Z(_(r),_(t))};function fe(r,t,c){var m=b(c),P=(0,l.useState)(function(){return r.toHsva(t)}),E=P[0],I=P[1],M=(0,l.useRef)({color:t,hsva:E});(0,l.useEffect)(function(){if(!r.equal(t,M.current.color)){var D=r.toHsva(t);M.current={hsva:D,color:t},I(D)}},[t,r]),(0,l.useEffect)(function(){var D;Z(E,M.current.hsva)||r.equal(D=r.fromHsva(E),M.current.color)||(M.current={hsva:E,color:D},m(D))},[E,r,m]);var K=(0,l.useCallback)(function(D){I(function(z){return Object.assign({},z,D)})},[]);return[E,K]}var ge,pe=typeof window<"u"?l.useLayoutEffect:l.useEffect,he=function(){return ge||d.nc},_e=function(r){ge=r},ue=new Map,be=function(r){pe(function(){var t=r.current?r.current.ownerDocument:document;if(t!==void 0&&!ue.has(t)){var c=t.createElement("style");c.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,ue.set(t,c);var m=he();m&&c.setAttribute("nonce",m),t.head.appendChild(c)}},[])},ae=function(r){var t=r.className,c=r.colorModel,m=r.color,P=m===void 0?c.defaultColor:m,E=r.onChange,I=T(r,["className","colorModel","color","onChange"]),M=(0,l.useRef)(null);be(M);var K=fe(c,P,E),D=K[0],z=K[1],oe=k(["react-colorful",t]);return l.createElement("div",s({},I,{ref:M,className:oe}),l.createElement(le,{hsva:D,onChange:z}),l.createElement(ee,{hue:D.h,onChange:z,className:"react-colorful__last-control"}))},Pe={defaultColor:"000",toHsva:N,fromHsva:function(r){return H({h:r.h,s:r.s,v:r.v,a:1})},equal:de},Ce=function(r){return l.createElement(ae,s({},r,{colorModel:Pe}))},Ee=function(r){var t=r.className,c=r.hsva,m=r.onChange,P={backgroundImage:"linear-gradient(90deg, "+x(Object.assign({},c,{a:0}))+", "+x(Object.assign({},c,{a:1}))+")"},E=k(["react-colorful__alpha",t]),I=y(100*c.a);return l.createElement("div",{className:E},l.createElement("div",{className:"react-colorful__alpha-gradient",style:P}),l.createElement(w,{onMove:function(M){m({a:M.left})},onKey:function(M){m({a:v(c.a+M.left)})},"aria-label":"Alpha","aria-valuetext":I+"%","aria-valuenow":I,"aria-valuemin":"0","aria-valuemax":"100"},l.createElement(L,{className:"react-colorful__alpha-pointer",left:c.a,color:x(c)})))},ne=function(r){var t=r.className,c=r.colorModel,m=r.color,P=m===void 0?c.defaultColor:m,E=r.onChange,I=T(r,["className","colorModel","color","onChange"]),M=(0,l.useRef)(null);be(M);var K=fe(c,P,E),D=K[0],z=K[1],oe=k(["react-colorful",t]);return l.createElement("div",s({},I,{ref:M,className:oe}),l.createElement(le,{hsva:D,onChange:z}),l.createElement(ee,{hue:D.h,onChange:z}),l.createElement(Ee,{hsva:D,onChange:z,className:"react-colorful__last-control"}))},xe={defaultColor:"0001",toHsva:N,fromHsva:H,equal:de},Ue=function(r){return e.createElement(ne,s({},r,{colorModel:xe}))},Oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:O,fromHsva:V,equal:Z},Ve=function(r){return e.createElement(ne,s({},r,{colorModel:Oe}))},we={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:u,fromHsva:x,equal:te},ke=function(r){return l.createElement(ne,s({},r,{colorModel:we}))},Te={defaultColor:{h:0,s:0,l:0},toHsva:function(r){return O({h:r.h,s:r.s,l:r.l,a:1})},fromHsva:function(r){return{h:(t=V(r)).h,s:t.s,l:t.l};var t},equal:Z},Fe=function(r){return e.createElement(ae,s({},r,{colorModel:Te}))},Me={defaultColor:"hsl(0, 0%, 0%)",toHsva:f,fromHsva:A,equal:te},$e=function(r){return e.createElement(ae,s({},r,{colorModel:Me}))},Se={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(r){return r},fromHsva:q,equal:Z},Ye=function(r){return e.createElement(ne,s({},r,{colorModel:Se}))},Ie={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:B,fromHsva:function(r){var t=q(r);return"hsva("+t.h+", "+t.s+"%, "+t.v+"%, "+t.a+")"},equal:te},Xe=function(r){return e.createElement(ne,s({},r,{colorModel:Ie}))},Re={defaultColor:{h:0,s:0,v:0},toHsva:function(r){return{h:r.h,s:r.s,v:r.v,a:1}},fromHsva:function(r){var t=q(r);return{h:t.h,s:t.s,v:t.v}},equal:Z},qe=function(r){return e.createElement(ae,s({},r,{colorModel:Re}))},Ae={defaultColor:"hsv(0, 0%, 0%)",toHsva:X,fromHsva:function(r){var t=q(r);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},equal:te},Ze=function(r){return e.createElement(ae,s({},r,{colorModel:Ae}))},je={defaultColor:{r:0,g:0,b:0,a:1},toHsva:re,fromHsva:R,equal:Z},Ge=function(r){return e.createElement(ne,s({},r,{colorModel:je}))},De={defaultColor:"rgba(0, 0, 0, 1)",toHsva:$,fromHsva:function(r){var t=R(r);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:te},Ne=function(r){return l.createElement(ne,s({},r,{colorModel:De}))},Le={defaultColor:{r:0,g:0,b:0},toHsva:function(r){return re({r:r.r,g:r.g,b:r.b,a:1})},fromHsva:function(r){return{r:(t=R(r)).r,g:t.g,b:t.b};var t},equal:Z},Je=function(r){return e.createElement(ae,s({},r,{colorModel:Le}))},Be={defaultColor:"rgb(0, 0, 0)",toHsva:J,fromHsva:function(r){var t=R(r);return"rgb("+t.r+", "+t.g+", "+t.b+")"},equal:te},Qe=function(r){return e.createElement(ae,s({},r,{colorModel:Be}))},He=/^#?([0-9A-F]{3,8})$/i,Ke=function(r){var t=r.color,c=t===void 0?"":t,m=r.onChange,P=r.onBlur,E=r.escape,I=r.validate,M=r.format,K=r.process,D=T(r,["color","onChange","onBlur","escape","validate","format","process"]),z=o(function(){return E(c)}),oe=z[0],se=z[1],ve=b(m),me=b(P),ie=a(function(W){var G=E(W.target.value);se(G),I(G)&&ve(K?K(G):G)},[E,K,I,ve]),Y=a(function(W){I(W.target.value)||se(E(c)),me(W)},[c,E,I,me]);return n(function(){se(E(c))},[c,E]),e.createElement("input",s({},D,{value:M?M(oe):oe,spellCheck:"false",onChange:ie,onBlur:Y}))},ye=function(r){return"#"+r},er=function(r){var t=r.prefixed,c=r.alpha,m=T(r,["prefixed","alpha"]),P=a(function(I){return I.replace(/([^0-9A-F]+)/gi,"").substring(0,c?8:6)},[c]),E=a(function(I){return function(M,K){var D=He.exec(M),z=D?D[1].length:0;return z===3||z===6||!!K&&z===4||!!K&&z===8}(I,c)},[c]);return e.createElement(Ke,s({},m,{escape:P,format:t?ye:void 0,process:ye,validate:E}))}},"../../node_modules/react-use/esm/useThrottleFn.js":function(U,S,d){d.d(S,{A:function(){return C}});var l=d("../../node_modules/react/index.js"),s=d("../../node_modules/react-use/esm/useEffectOnce.js"),T=function(g){var h=(0,l.useRef)(g);h.current=g,(0,s.A)(function(){return function(){return h.current()}})},b=T,v=function(g,h,i){h===void 0&&(h=200);var w=(0,l.useState)(null),k=w[0],L=w[1],y=(0,l.useRef)(),j=(0,l.useRef)();return(0,l.useEffect)(function(){if(y.current)j.current=i;else{L(g.apply(void 0,i));var N=function(){j.current?(L(g.apply(void 0,j.current)),j.current=void 0,y.current=setTimeout(N,h)):y.current=void 0};y.current=setTimeout(N,h)}},i),b(function(){y.current&&clearTimeout(y.current)}),k},C=v},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(U,S,d){/**
 * @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 l=d("../../node_modules/react/index.js"),s=Symbol.for("react.element"),T=Symbol.for("react.fragment"),b=Object.prototype.hasOwnProperty,v=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function g(h,i,w){var k,L={},y=null,j=null;w!==void 0&&(y=""+w),i.key!==void 0&&(y=""+i.key),i.ref!==void 0&&(j=i.ref);for(k in i)b.call(i,k)&&!C.hasOwnProperty(k)&&(L[k]=i[k]);if(h&&h.defaultProps)for(k in i=h.defaultProps,i)L[k]===void 0&&(L[k]=i[k]);return{$$typeof:s,type:h,key:y,ref:j,props:L,_owner:v.current}}S.Fragment=T,S.jsx=g,S.jsxs=g},"../../node_modules/react/jsx-runtime.js":function(U,S,d){U.exports=d("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
