"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[6750],{"./src/components/TagsInput/TagsInput.story.tsx":function(D,x,t){t.r(x),t.d(x,{Basic:function(){return T},WithManyTags:function(){return B},default:function(){return w}});var o=t("../../node_modules/react/index.js"),l=t("./src/utils/storybook/StoryExample.tsx"),y=t("./src/components/Layout/Layout.tsx"),f=t("./src/components/TagsInput/TagsInput.tsx"),u=t("../../node_modules/react/jsx-runtime.js"),h=t("../../node_modules/@mdx-js/react/lib/index.js"),g=t("../../node_modules/@storybook/blocks/dist/index.mjs");function m(i){const p=Object.assign({h1:"h1",p:"p",h3:"h3"},(0,h.RP)(),i.components);return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(g.W8,{title:"MDX|TagsInput",component:f.u}),`
`,(0,u.jsx)(p.h1,{id:"tagsinput",children:"TagsInput"}),`
`,(0,u.jsx)(p.p,{children:'A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed next to the input and can be removed by clicking the "X" icon. You can customize the width of the input.'}),`
`,(0,u.jsx)(p.h3,{id:"props",children:"Props"}),`
`,(0,u.jsx)(g.ov,{of:f.u})]})}function E(i={}){const{wrapper:p}=Object.assign({},(0,h.RP)(),i.components);return p?(0,u.jsx)(p,Object.assign({},i,{children:(0,u.jsx)(m,i)})):m(i)}var P=E,C=Object.defineProperty,d=Object.defineProperties,_=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,I=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable,A=(i,p,R)=>p in i?C(i,p,{enumerable:!0,configurable:!0,writable:!0,value:R}):i[p]=R,S=(i,p)=>{for(var R in p||(p={}))I.call(p,R)&&A(i,R,p[R]);if(b)for(var R of b(p))L.call(p,R)&&A(i,R,p[R]);return i},s=(i,p)=>d(i,_(p)),e,n,a,r,c,v;const O={title:"Forms/TagsInput",component:f.u,parameters:{docs:{page:P},controls:{exclude:["onChange","className","tags"]}}},T=i=>{const[p,R]=(0,o.useState)([]);return o.createElement(f.u,s(S({},i),{tags:p,onChange:R}))},B=()=>{const[i,p]=(0,o.useState)(["dashboard","prod","server","frontend","game","kubernetes"]);return o.createElement(y.gW,null,o.createElement(l.Q,{name:"With many tags"},o.createElement(f.u,{tags:i,onChange:p})))};var w=O;T.parameters=s(S({},T.parameters),{docs:s(S({},(e=T.parameters)==null?void 0:e.docs),{source:S({originalSource:`props => {
  const [tags, setTags] = useState<string[]>([]);
  return <TagsInput {...props} tags={tags} onChange={setTags} />;
}`},(a=(n=T.parameters)==null?void 0:n.docs)==null?void 0:a.source)})}),B.parameters=s(S({},B.parameters),{docs:s(S({},(r=B.parameters)==null?void 0:r.docs),{source:S({originalSource:`() => {
  const [tags, setTags] = useState<string[]>(['dashboard', 'prod', 'server', 'frontend', 'game', 'kubernetes']);
  return <VerticalGroup>
      <StoryExample name="With many tags">
        <TagsInput tags={tags} onChange={setTags} />
      </StoryExample>
    </VerticalGroup>;
}`},(v=(c=B.parameters)==null?void 0:c.docs)==null?void 0:v.source)})})},"../grafana-data/src/types/dataFrame.ts":function(D,x,t){t.d(x,{Bc:function(){return l},LE:function(){return y},PU:function(){return o}});var o=(u=>(u.time="time",u.number="number",u.string="string",u.boolean="boolean",u.trace="trace",u.geo="geo",u.enum="enum",u.other="other",u.frame="frame",u.nestedFrames="nestedFrames",u))(o||{});const l="Value",y="Time",f="Metric"},"../grafana-data/src/utils/deprecationWarning.ts":function(D,x,t){t.d(x,{l:function(){return l}});const o={},l=(y,f,u)=>{let h=`[Deprecation warning] ${y}: ${f} is deprecated`;u&&(h+=`. Use ${u} instead`);const g=Date.now(),m=o[h];(!m||g-m>1e4)&&(console.warn(h),o[h]=g)}},"./src/components/IconButton/IconButton.tsx":function(D,x,t){t.d(x,{K:function(){return e}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("../grafana-data/src/utils/deprecationWarning.ts"),f=t("../grafana-data/src/themes/colorManipulator.ts"),u=t("./src/themes/ThemeContext.tsx"),h=t("./src/themes/mixins.ts"),g=t("./src/components/Icon/Icon.tsx"),m=t("./src/components/Icon/utils.ts"),E=t("./src/components/Tooltip/Tooltip.tsx"),P=Object.defineProperty,C=Object.defineProperties,d=Object.getOwnPropertyDescriptors,_=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable,L=(a,r,c)=>r in a?P(a,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[r]=c,A=(a,r)=>{for(var c in r||(r={}))b.call(r,c)&&L(a,c,r[c]);if(_)for(var c of _(r))I.call(r,c)&&L(a,c,r[c]);return a},S=(a,r)=>C(a,d(r)),s=(a,r)=>{var c={};for(var v in a)b.call(a,v)&&r.indexOf(v)<0&&(c[v]=a[v]);if(a!=null&&_)for(var v of _(a))r.indexOf(v)<0&&I.call(a,v)&&(c[v]=a[v]);return c};const e=l.forwardRef((a,r)=>{const{size:c="md",variant:v="secondary"}=a;let O;c==="xxl"||c==="xxxl"?((0,y.l)("IconButton",'size="xxl" and size="xxxl"','size="xl"'),O="xl"):O=c;const T=(0,u.of)(n,O,v);let B,w;if("tooltip"in a){const{tooltip:i}=a;B=typeof i=="string"?i:void 0}else if("ariaLabel"in a||"aria-label"in a){const{ariaLabel:i,["aria-label"]:p}=a;B=p||i,w=r}if("tooltip"in a){const i=a,{name:p,iconType:R,className:N,tooltip:j,tooltipPlacement:V}=i,W=s(i,["name","iconType","className","tooltip","tooltipPlacement"]);return l.createElement(E.m,{ref:r,content:j,placement:V},l.createElement("button",S(A({},W),{ref:w,"aria-label":B,className:(0,o.cx)(T.button,N),type:"button"}),l.createElement(g.I,{name:p,size:O,className:T.icon,type:R})))}else{const i=a,{name:p,iconType:R,className:N}=i,j=s(i,["name","iconType","className"]);return l.createElement("button",S(A({},j),{ref:w,"aria-label":B,className:(0,o.cx)(T.button,N),type:"button"}),l.createElement(g.I,{name:p,size:O,className:T.icon,type:R}))}});e.displayName="IconButton";const n=(a,r,c)=>{const v=(0,m.cs)(r)+a.spacing.gridSize;let O=a.colors.text.primary;return c==="primary"?O=a.colors.primary.text:c==="destructive"&&(O=a.colors.error.text),{button:(0,o.AH)({zIndex:0,position:"relative",margin:`0 ${a.spacing.x0_5} 0 0`,boxShadow:"none",border:"none",display:"inline-flex",background:"transparent",justifyContent:"center",alignItems:"center",padding:0,color:O,"&[disabled], &:disabled":{cursor:"not-allowed",color:a.colors.action.disabledText,opacity:.65},"&:before":{zIndex:-1,position:"absolute",opacity:0,width:`${v}px`,height:`${v}px`,borderRadius:a.shape.radius.default,content:'""',transitionDuration:"0.2s",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionProperty:"opacity"},"&:focus, &:focus-visible":(0,h.Hi)(a),"&:focus:not(:focus-visible)":(0,h.cr)(a),"&:hover":{"&:before":{backgroundColor:c==="secondary"?a.colors.action.hover:f.X4(O,.12),opacity:1}}}),icon:(0,o.AH)({verticalAlign:"baseline"})}};try{e.displayName="IconButton",e.__docgenInfo={description:"",displayName:"IconButton",props:{tooltip:{defaultValue:null,description:"Tooltip content to display on hover and as the aria-label",name:"tooltip",required:!0,type:{name:"PopoverContent"}},tooltipPlacement:{defaultValue:null,description:"Position of the tooltip",name:"tooltipPlacement",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"'}]}},name:{defaultValue:null,description:"Name of the icon *",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:null,description:"Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'},{value:'"xxxl"'}]}},iconType:{defaultValue:null,description:"Type of the icon - mono or default",name:"iconType",required:!1,type:{name:"enum",value:[{value:'"solid"'},{value:'"default"'},{value:'"mono"'}]}},variant:{defaultValue:null,description:"Variant to change the color of the Icon",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"destructive"'}]}},ariaLabel:{defaultValue:null,description:"@deprecated use aria-label instead",name:"ariaLabel",required:!1,type:{name:"string"}},"aria-label":{defaultValue:null,description:"Text available only for screen readers. No tooltip will be set in this case.",name:"aria-label",required:!0,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/IconButton/IconButton.tsx#IconButton"]={docgenInfo:e.__docgenInfo,name:"IconButton",path:"src/components/IconButton/IconButton.tsx#IconButton"})}catch{}},"./src/components/Input/Input.tsx":function(D,x,t){t.d(x,{n:function(){return s},p:function(){return S}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("../../node_modules/react-use/lib/useMeasure.js"),f=t("./src/themes/ThemeContext.tsx"),u=t("./src/themes/stylesFactory.ts"),h=t("./src/components/Forms/commonStyles.ts"),g=t("./src/components/Spinner/Spinner.tsx"),m=Object.defineProperty,E=Object.defineProperties,P=Object.getOwnPropertyDescriptors,C=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,b=(e,n,a)=>n in e?m(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,I=(e,n)=>{for(var a in n||(n={}))d.call(n,a)&&b(e,a,n[a]);if(C)for(var a of C(n))_.call(n,a)&&b(e,a,n[a]);return e},L=(e,n)=>E(e,P(n)),A=(e,n)=>{var a={};for(var r in e)d.call(e,r)&&n.indexOf(r)<0&&(a[r]=e[r]);if(e!=null&&C)for(var r of C(e))n.indexOf(r)<0&&_.call(e,r)&&(a[r]=e[r]);return a};const S=l.forwardRef((e,n)=>{const a=e,{className:r,addonAfter:c,addonBefore:v,prefix:O,suffix:T,invalid:B,loading:w,width:i=0}=a,p=A(a,["className","addonAfter","addonBefore","prefix","suffix","invalid","loading","width"]),[R,N]=(0,y.A)(),[j,V]=(0,y.A)(),W=(0,f.$j)(),M=s({theme:W,invalid:!!B,width:i});return l.createElement("div",{className:(0,o.cx)(M.wrapper,r),"data-testid":"input-wrapper"},!!v&&l.createElement("div",{className:M.addon},v),l.createElement("div",{className:M.inputWrapper},O&&l.createElement("div",{className:M.prefix,ref:R},O),l.createElement("input",L(I({ref:n,className:M.input},p),{style:{paddingLeft:O?N.width+12:void 0,paddingRight:T||w?V.width+12:void 0}})),(T||w)&&l.createElement("div",{className:M.suffix,ref:j},w&&l.createElement(g.y,{className:M.loadingIndicator,inline:!0}),T)),!!c&&l.createElement("div",{className:M.addon},c))});S.displayName="Input";const s=(0,u.N)(({theme:e,invalid:n=!1,width:a})=>{const r="28px",c=(0,o.AH)({position:"absolute",top:0,zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",flexGrow:0,flexShrink:0,fontSize:e.typography.size.md,height:"100%",minWidth:r,color:e.colors.text.secondary});return{wrapper:(0,o.cx)((0,o.AH)({label:"input-wrapper",display:"flex",width:a?e.spacing(a):"100%",height:e.spacing(e.components.height.md),borderRadius:e.shape.radius.default,"&:hover":{"> .prefix, .suffix, .input":{borderColor:n?e.colors.error.border:e.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,o.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:r},"&:not(:last-child)":{paddingRight:r},"&[readonly]":{cursor:"default"}}}),input:(0,o.cx)((0,h.gm)(e),(0,h.Xb)(e,n),(0,o.AH)({label:"input-input",position:"relative",zIndex:0,flexGrow:1,borderRadius:e.shape.radius.default,height:"100%",width:"100%"})),inputDisabled:(0,o.AH)({backgroundColor:e.colors.action.disabledBackground,color:e.colors.action.disabledText,border:`1px solid ${e.colors.action.disabledBackground}`,"&:focus":{boxShadow:"none"}}),addon:(0,o.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,o.cx)(c,(0,o.AH)({label:"input-prefix",paddingLeft:e.spacing(1),paddingRight:e.spacing(.5),borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0})),suffix:(0,o.cx)(c,(0,o.AH)({label:"input-suffix",paddingLeft:e.spacing(1),paddingRight:e.spacing(1),marginBottom:"-2px",borderLeft:"none",borderTopLeftRadius:0,borderBottomLeftRadius:0,right:0})),loadingIndicator:(0,o.AH)({"& + *":{marginLeft:e.spacing(.5)}})}});try{S.displayName="Input",S.__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:S.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch{}},"./src/components/Layout/Layout.tsx":function(D,x,t){t.d(x,{Gy:function(){return _},PE:function(){return d},gW:function(){return b}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("./src/themes/ThemeContext.tsx"),f=Object.defineProperty,u=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,m=(s,e,n)=>e in s?f(s,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[e]=n,E=(s,e)=>{for(var n in e||(e={}))h.call(e,n)&&m(s,n,e[n]);if(u)for(var n of u(e))g.call(e,n)&&m(s,n,e[n]);return s},P=(s,e)=>{var n={};for(var a in s)h.call(s,a)&&e.indexOf(a)<0&&(n[a]=s[a]);if(s!=null&&u)for(var a of u(s))e.indexOf(a)<0&&g.call(s,a)&&(n[a]=s[a]);return n},C=(s=>(s[s.Horizontal=0]="Horizontal",s[s.Vertical=1]="Vertical",s))(C||{});const d=s=>{var e=s,{children:n,orientation:a=0,spacing:r="sm",justify:c="flex-start",align:v="normal",wrap:O=!1,width:T="100%",height:B="100%"}=e,w=P(e,["children","orientation","spacing","justify","align","wrap","width","height"]);const i=(0,y.of)(L,a,r,c,v,O);return l.createElement("div",E({className:i.layout,style:{width:T,height:B}},w),l.Children.toArray(n).filter(Boolean).map((p,R)=>l.createElement("div",{className:i.childWrapper,key:R},p)))},_=({children:s,spacing:e,justify:n,align:a="center",wrap:r,width:c,height:v})=>l.createElement(d,{spacing:e,justify:n,orientation:0,align:a,width:c,height:v,wrap:r},s),b=({children:s,spacing:e,justify:n,align:a,width:r,height:c})=>l.createElement(d,{spacing:e,justify:n,orientation:1,align:a,width:r,height:c},s),I=({children:s,padding:e,margin:n,grow:a,shrink:r})=>{const c=useStyles2(S,e,n);return React.createElement("div",{className:cx(c.wrapper,a!==void 0&&css({flexGrow:a}),r!==void 0&&css({flexShrink:r}))},s)},L=(s,e,n,a,r,c)=>{const v=n!=="none"?s.spacing(A[n]):0,O=e===0&&!c||e===1?0:`-${v}`,T=e===1?"vertical-group":"horizontal-group";return{layout:(0,o.AH)({label:T,display:"flex",flexDirection:e===1?"column":"row",flexWrap:c?"wrap":"nowrap",justifyContent:a,alignItems:r,height:"100%",maxWidth:"100%",marginBottom:O}),childWrapper:(0,o.AH)({label:"layoutChildrenWrapper",marginBottom:e===0&&!c?0:v,marginRight:e===0?v:0,display:"flex",alignItems:r,"&:last-child":{marginBottom:e===1?0:void 0,marginRight:e===0?0:void 0}})}},A={none:0,xs:.5,sm:1,md:2,lg:3},S=(s,e,n)=>{const a=e&&e!=="none"&&s.spacing(A[e])||0,r=n&&n!=="none"&&s.spacing(A[n])||0;return{wrapper:css({label:"container",margin:r,padding:a})}};try{d.displayName="Layout",d.__docgenInfo={description:"",displayName:"Layout",props:{orientation:{defaultValue:{value:"Orientation.Horizontal"},description:"",name:"orientation",required:!1,type:{name:"enum",value:[{value:"0"},{value:"1"}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},wrap:{defaultValue:{value:"false"},description:"",name:"wrap",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#Layout"]={docgenInfo:d.__docgenInfo,name:"Layout",path:"src/components/Layout/Layout.tsx#Layout"})}catch{}try{_.displayName="HorizontalGroup",_.__docgenInfo={description:"",displayName:"HorizontalGroup",props:{width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},wrap:{defaultValue:{value:"false"},description:"",name:"wrap",required:!1,type:{name:"boolean"}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#HorizontalGroup"]={docgenInfo:_.__docgenInfo,name:"HorizontalGroup",path:"src/components/Layout/Layout.tsx#HorizontalGroup"})}catch{}try{b.displayName="VerticalGroup",b.__docgenInfo={description:"",displayName:"VerticalGroup",props:{width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#VerticalGroup"]={docgenInfo:b.__docgenInfo,name:"VerticalGroup",path:"src/components/Layout/Layout.tsx#VerticalGroup"})}catch{}try{I.displayName="Container",I.__docgenInfo={description:"",displayName:"Container",props:{padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},margin:{defaultValue:null,description:"",name:"margin",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},grow:{defaultValue:null,description:"",name:"grow",required:!1,type:{name:"number"}},shrink:{defaultValue:null,description:"",name:"shrink",required:!1,type:{name:"number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#Container"]={docgenInfo:I.__docgenInfo,name:"Container",path:"src/components/Layout/Layout.tsx#Container"})}catch{}},"./src/components/Spinner/Spinner.tsx":function(D,x,t){t.d(x,{y:function(){return m}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("../../node_modules/react-inlinesvg/esm/index.js"),f=t("./src/themes/ThemeContext.tsx"),u=t("./src/types/icon.ts"),h=t("./src/components/Icon/Icon.tsx"),g=t("./src/components/Icon/utils.ts");const m=({className:C,inline:d=!1,iconClassName:_,style:b,size:I="md"})=>{const L=(0,f.of)(E),A=(0,f.of)(P,I);if(typeof I!="string"||!(0,u.rJ)(I)){const S=(0,g.Wj)(),s="spinner",e=(0,g.Xi)(s,"default"),n=`${S}${e}/${s}.svg`;return l.createElement("div",{"data-testid":"Spinner",style:b,className:(0,o.cx)({[L.inline]:d},A.wrapper,C)},l.createElement(y.A,{src:n,width:I,height:I,className:(0,o.cx)("fa-spin",A.icon,C),style:b}))}return l.createElement("div",{"data-testid":"Spinner",style:b,className:(0,o.cx)({[L.inline]:d},C)},l.createElement(h.I,{className:(0,o.cx)("fa-spin",_),name:"spinner",size:I,"aria-label":"loading spinner"}))},E=C=>({inline:(0,o.AH)({display:"inline-block"})}),P=(C,d)=>({wrapper:(0,o.AH)({fontSize:typeof d=="string"?d:`${d}px`}),icon:(0,o.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"})});try{m.displayName="Spinner",m.__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:m.__docgenInfo,name:"Spinner",path:"src/components/Spinner/Spinner.tsx#Spinner"})}catch{}},"./src/components/TagsInput/TagsInput.tsx":function(D,x,t){t.d(x,{u:function(){return P}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("./src/themes/ThemeContext.tsx"),f=t("./src/components/Button/Button.tsx"),u=t("./src/components/Input/Input.tsx"),h=t("./src/utils/tags.ts"),g=t("./src/components/IconButton/IconButton.tsx");const m=({name:d,disabled:_,onRemove:b})=>{const{color:I,borderColor:L}=(0,l.useMemo)(()=>(0,h.MC)(d),[d]),A=(0,y.of)(E);return l.createElement("li",{className:A.itemStyle,style:{backgroundColor:I,borderColor:L}},l.createElement("span",{className:A.nameStyle},d),l.createElement(g.K,{name:"times",size:"lg",disabled:_,tooltip:`Remove "${d}" tag`,onClick:()=>b(d),className:A.buttonStyles}))},E=d=>{const _=d.spacing.gridSize*3;return{itemStyle:(0,o.AH)({display:"flex",gap:"3px",alignItems:"center",height:`${_}px`,lineHeight:`${_-2}px`,color:"#fff",borderWidth:"1px",borderStyle:"solid",borderRadius:d.shape.radius.default,padding:`0 ${d.spacing(.5)}`,whiteSpace:"nowrap",textShadow:"none",fontWeight:500,fontSize:d.typography.size.sm}),nameStyle:(0,o.AH)({maxWidth:"25ch",textOverflow:"ellipsis",overflow:"hidden"}),buttonStyles:(0,o.AH)({margin:0,"&:hover::before":{display:"none"}})}};try{m.displayName="TagItem",m.__docgenInfo={description:"",displayName:"TagItem",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},onRemove:{defaultValue:null,description:"",name:"onRemove",required:!0,type:{name:"(tag: string) => void"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/TagsInput/TagItem.tsx#TagItem"]={docgenInfo:m.__docgenInfo,name:"TagItem",path:"src/components/TagsInput/TagItem.tsx#TagItem"})}catch{}const P=({placeholder:d="New tag (enter key to add)",tags:_=[],onChange:b,width:I,className:L,disabled:A,addOnBlur:S,invalid:s,id:e})=>{const[n,a]=(0,l.useState)(""),r=(0,y.of)(C),c=(0,y.$j)(),v=(0,l.useCallback)(i=>{a(i.target.value)},[]),O=i=>{b(_.filter(p=>p!==i))},T=i=>{i?.preventDefault(),_.includes(n)||b(_.concat(n)),a("")},B=()=>{S&&n&&T()},w=i=>{i.key==="Enter"&&n!==""&&T(i)};return l.createElement("div",{className:(0,o.cx)(r.wrapper,L,I?(0,o.AH)({width:c.spacing(I)}):"")},l.createElement(u.p,{id:e,disabled:A,placeholder:d,onChange:v,value:n,onKeyDown:w,onBlur:B,invalid:s,suffix:l.createElement(f.$n,{fill:"text",className:r.addButtonStyle,onClick:T,size:"md",disabled:n.length<=0},"Add")}),_?.length>0&&l.createElement("ul",{className:r.tags},_.map(i=>l.createElement(m,{key:i,name:i,onRemove:O,disabled:A}))))},C=d=>({wrapper:(0,o.AH)({minHeight:d.spacing(4),display:"flex",flexDirection:"column",gap:d.spacing(1),flexWrap:"wrap"}),tags:(0,o.AH)({display:"flex",justifyContent:"flex-start",flexWrap:"wrap",gap:d.spacing(.5)}),addButtonStyle:(0,o.AH)({margin:`0 -${d.spacing(1)}`})});try{P.displayName="TagsInput",P.__docgenInfo={description:"",displayName:"TagsInput",props:{placeholder:{defaultValue:{value:"New tag (enter key to add)"},description:"",name:"placeholder",required:!1,type:{name:"string"}},tags:{defaultValue:{value:"[]"},description:"Array of selected tags",name:"tags",required:!1,type:{name:"string[]"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(tags: string[]) => void"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"number"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Toggle disabled state",name:"disabled",required:!1,type:{name:"boolean"}},addOnBlur:{defaultValue:null,description:"Enable adding new tags when input loses focus",name:"addOnBlur",required:!1,type:{name:"boolean"}},invalid:{defaultValue:null,description:"Toggle invalid state",name:"invalid",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/TagsInput/TagsInput.tsx#TagsInput"]={docgenInfo:P.__docgenInfo,name:"TagsInput",path:"src/components/TagsInput/TagsInput.tsx#TagsInput"})}catch{}},"./src/themes/stylesFactory.ts":function(D,x,t){t.d(x,{N:function(){return y}});var o=t("../../node_modules/micro-memoize/dist/micro-memoize.js"),l=t.n(o);function y(f){return l()(f)}},"./src/types/icon.ts":function(D,x,t){t.d(x,{GO:function(){return f},SS:function(){return u},rJ:function(){return y}});var o=t("../grafana-data/src/types/icon.ts"),l=t("../grafana-data/src/types/dataFrame.ts");const y=g=>["xs","sm","md","lg","xl","xxl","xxxl"].includes(g),f=()=>Object.keys(o.az);function u(g){return h(g?.type)}function h(g){if(g)switch(g){case l.PU.time:return"clock-nine";case l.PU.string:return"font";case l.PU.number:return"calculator-alt";case l.PU.boolean:return"toggle-on";case l.PU.trace:return"info-circle";case l.PU.enum:return"list-ol";case l.PU.geo:return"map-marker";case l.PU.other:return"brackets-curly"}return"question-circle"}},"./src/utils/storybook/StoryExample.tsx":function(D,x,t){t.d(x,{Q:function(){return f}});var o=t("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),l=t("../../node_modules/react/index.js"),y=t("./src/themes/ThemeContext.tsx");const f=({name:u,children:h})=>{const g=(0,y.$j)(),m=(0,o.AH)({width:"100%",padding:"16px"}),E=(0,o.AH)({color:g.colors.text.secondary,marginBottom:"16px"});return l.createElement("div",{className:m},l.createElement("h5",{className:E},u),h)};f.displayName="StoryExample";try{f.displayName="StoryExample",f.__docgenInfo={description:"",displayName:"StoryExample",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/utils/storybook/StoryExample.tsx#StoryExample"]={docgenInfo:f.__docgenInfo,name:"StoryExample",path:"src/utils/storybook/StoryExample.tsx#StoryExample"})}catch{}},"./src/utils/tags.ts":function(D,x,t){t.d(x,{MC:function(){return f},yC:function(){return u}});const o=["#D32D20","#1E72B8","#B240A2","#705DA0","#466803","#497A3C","#3D71AA","#B15415","#890F02","#6E6E6E","#0A437C","#6D1F62","#584477","#4C7A3F","#2F4F4F","#BF1B00","#7662B1","#8A2EB8","#517A00","#000000","#3F6833","#2F575E","#99440A","#AE561A","#0E4AB4","#58140C","#052B51","#511749","#3F2B5B"],l=["#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29","#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B","#3069A2","#934588","#7E6A9D","#88C477","#557575","#E54126","#A694DD","#B054DE","#8FC426","#262626","#658E59","#557D84","#BF6A30","#FF9B53","#3470DA","#7E3A32","#2B5177","#773D6F","#655181"];function y(m=""){const E=h(m.toLowerCase());return Math.abs(E%o.length)}function f(m=""){const E=y(m);return u(E)}function u(m){return{color:o[m],borderColor:l[m]}}function h(m){let E=5381;for(let P=0;P<m.length;P++)E=(E<<5)+E+m.charCodeAt(P);return E}var g={getTagColorsFromName:f}}}]);
