"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[1870],{"./src/components/IconButton/IconButton.story.tsx":function(U,R,c){c.r(R),c.d(R,{Basic:function(){return M},ExamplesBackground:function(){return N},ExamplesSizes:function(){return A},default:function(){return X}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("./src/themes/ThemeContext.tsx"),o=c("./src/components/Layout/Layout.tsx"),p=c("./src/components/IconButton/IconButton.tsx"),s=c("../../node_modules/react/jsx-runtime.js"),b=c("../../node_modules/@mdx-js/react/lib/index.js"),k=c("../../node_modules/@storybook/blocks/dist/index.mjs"),K=c("./src/components/Icon/Icon.tsx"),Y=c("./src/components/Alert/Alert.tsx");function L(_){const v=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",strong:"strong"},(0,b.RP)(),_.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(k.W8,{title:"MDX|IconButton",component:p.K}),`
`,(0,s.jsx)(v.h1,{id:"iconbutton",children:"IconButton"}),`
`,(0,s.jsx)(v.p,{children:"This component looks just like an icon but behaves like a button. It fulfils an action when you click it and has a hover as well a focus states. You can choose which icon size you would like to use."}),`
`,(0,s.jsxs)(v.p,{children:[(0,s.jsx)(v.code,{children:"IconButton"})," is best used when you only want an icon instead of a button with text, for example when you want to place a solitary clickable icon next to text. An example where an ",(0,s.jsx)(v.code,{children:"IconButton"}),` is used in Grafana is the hamburger icon at the top left which opens the new navigation.
When using `,(0,s.jsx)(v.code,{children:"IconButton"})," right next to a text element consider wrapping both in a flex container and use ",(0,s.jsx)(v.code,{children:"align-items: center;"})," to make them align properly."]}),`
`,(0,s.jsx)(v.p,{children:"There are two options to use the IconButton:"}),`
`,(0,s.jsxs)(v.ul,{children:[`
`,(0,s.jsxs)(v.li,{children:["with ",(0,s.jsx)(v.code,{children:"Tooltip"}),": This is the preferred option since we don't want to rely on assumptions when it comes to the meaning an ",(0,s.jsx)(v.code,{children:"Icon"})," has. Add a text for the ",(0,s.jsx)(v.code,{children:"Tooltip"}),". It will be used for the ",(0,s.jsx)(v.code,{children:"aria-label"})," as well."]}),`
`,(0,s.jsxs)(v.li,{children:["without ",(0,s.jsx)(v.code,{children:"Tooltip"}),": This is an option for use cases where the ",(0,s.jsx)(v.code,{children:"Icon"})," is unambiguous e.g ",(0,s.jsx)(K.I,{name:"angle-down"})," for expanding a folder. Add a text for the ",(0,s.jsx)(v.code,{children:"aria-label"})," and there will ",(0,s.jsx)(v.strong,{children:"not"})," be a ",(0,s.jsx)(v.code,{children:"Tooltip"}),"."]}),`
`]}),`
`,(0,s.jsxs)(v.p,{children:["The IconButton used to have a property called ",(0,s.jsx)(v.code,{children:"ariaLabel"})," which got deprecated. You can now use the regular property ",(0,s.jsx)(v.code,{children:"aria-label"})," instead."]}),`
`,(0,s.jsx)(Y.F,{severity:"warning",title:"Please note:",children:(0,s.jsx)(v.p,{children:`After reviewing this component we would like you to know that there are only 5 sizes available (sizes xs to xl). Sizes
xxl and xxxl are now shown in size xl as well and will be deprecated in the future.`})}),`
`,(0,s.jsx)(k.ov,{of:p.K})]})}function O(_={}){const{wrapper:v}=Object.assign({},(0,b.RP)(),_.components);return v?(0,s.jsx)(v,Object.assign({},_,{children:(0,s.jsx)(L,_)})):L(_)}var P=O,V=Object.defineProperty,j=Object.defineProperties,l=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,a=(_,v,B)=>v in _?V(_,v,{enumerable:!0,configurable:!0,writable:!0,value:B}):_[v]=B,t=(_,v)=>{for(var B in v||(v={}))h.call(v,B)&&a(_,B,v[B]);if(g)for(var B of g(v))n.call(v,B)&&a(_,B,v[B]);return _},e=(_,v)=>j(_,l(v)),u,d,m,y,E,T,S,x,I;const C=["ariaLabel","aria-label"],D=["size","name","variant","iconType"],z={title:"Buttons/IconButton",component:p.K,parameters:{docs:{page:P},controls:{exclude:C}},args:{name:"apps",size:"md",iconType:"default",tooltip:"sample tooltip message",tooltipPlacement:"top",variant:"secondary"},argTypes:{tooltip:{control:"text"}}},M=_=>r.createElement(p.K,t({},_)),A=_=>{const v=(0,w.$j)(),B=["xs","sm","md","lg","xl"],q=["search","trash-alt","arrow-left","times"],G=["primary","secondary","destructive"],i=(0,f.AH)({display:"flex",gap:v.spacing(1),marginBottom:v.spacing(2)});return r.createElement(o.Gy,{justify:"center"},G.map(W=>r.createElement("div",{key:W,className:(0,f.AH)({margin:`auto ${v.spacing(1)}`})},r.createElement("p",null,W),q.map(H=>r.createElement("div",{className:i,key:H},B.map($=>r.createElement("span",{key:H+$},r.createElement(p.K,{name:H,size:$,variant:W,tooltip:_.tooltip}))))))),r.createElement("div",null,r.createElement("p",null,"disabled"),q.map(W=>r.createElement("div",{className:i,key:W},B.map(H=>r.createElement("span",{key:W+H},r.createElement(p.K,{name:W,size:H,tooltip:_.tooltip,disabled:!0})))))))};A.parameters={controls:{exclude:[...C,...D]}};const N=_=>{const v=({background:B})=>{const q=(0,w.$j)(),G=["primary","secondary","destructive"];return r.createElement("div",{className:(0,f.AH)({padding:"30px",background:q.colors.background[B]})},r.createElement(o.gW,{spacing:"md"},r.createElement("div",null,B),r.createElement("div",{className:(0,f.AH)({display:"flex",gap:q.spacing(2)})},G.map(i=>r.createElement(p.K,{name:"times",size:"xl",variant:i,key:i,tooltip:_.tooltip})),r.createElement(p.K,{name:"times",size:"xl",tooltip:_.tooltip,disabled:!0}))))};return r.createElement("div",null,r.createElement(v,{background:"canvas"}),r.createElement(v,{background:"primary"}),r.createElement(v,{background:"secondary"}))};N.parameters={controls:{exclude:[...C,...D]}};var X=z;M.parameters=e(t({},M.parameters),{docs:e(t({},(u=M.parameters)==null?void 0:u.docs),{source:t({originalSource:`(args: IconButtonProps) => {
  return <IconButton {...args} />;
}`},(m=(d=M.parameters)==null?void 0:d.docs)==null?void 0:m.source)})}),A.parameters=e(t({},A.parameters),{docs:e(t({},(y=A.parameters)==null?void 0:y.docs),{source:t({originalSource:`(args: BasePropsWithTooltip) => {
  const theme = useTheme2();
  const sizes: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
  const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
  const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];
  const rowStyle = css({
    display: 'flex',
    gap: theme.spacing(1),
    marginBottom: theme.spacing(2)
  });
  return <HorizontalGroup justify="center">
      {variants.map(variant => {
      return <div key={variant} className={css({
        margin: \`auto \${theme.spacing(1)}\`
      })}>
            <p>{variant}</p>
            {icons.map(icon => {
          return <div className={rowStyle} key={icon}>
                  {sizes.map(size => <span key={icon + size}>
                      <IconButton name={icon} size={size} variant={variant} tooltip={args.tooltip} />
                    </span>)}
                </div>;
        })}
          </div>;
    })}
      <div>
        <p>disabled</p>
        {icons.map(icon => <div className={rowStyle} key={icon}>
            {sizes.map(size => <span key={icon + size}>
                <IconButton name={icon} size={size} tooltip={args.tooltip} disabled />
              </span>)}
          </div>)}
      </div>
    </HorizontalGroup>;
}`},(T=(E=A.parameters)==null?void 0:E.docs)==null?void 0:T.source)})}),N.parameters=e(t({},N.parameters),{docs:e(t({},(S=N.parameters)==null?void 0:S.docs),{source:t({originalSource:`(args: BasePropsWithTooltip) => {
  const RenderBackgroundScenario = ({
    background
  }: ScenarioProps) => {
    const theme = useTheme2();
    const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];
    return <div className={css({
      padding: '30px',
      background: theme.colors.background[background]
    })}>
        <VerticalGroup spacing="md">
          <div>{background}</div>
          <div className={css({
          display: 'flex',
          gap: theme.spacing(2)
        })}>
            {variants.map(variant => {
            return <IconButton name="times" size="xl" variant={variant} key={variant} tooltip={args.tooltip} />;
          })}
            <IconButton name="times" size="xl" tooltip={args.tooltip} disabled />
          </div>
        </VerticalGroup>
      </div>;
  };
  return <div>
      <RenderBackgroundScenario background="canvas" />
      <RenderBackgroundScenario background="primary" />
      <RenderBackgroundScenario background="secondary" />
    </div>;
}`},(I=(x=N.parameters)==null?void 0:x.docs)==null?void 0:I.source)})});try{A.displayName="ExamplesSizes",A.__docgenInfo={description:"",displayName:"ExamplesSizes",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"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/IconButton/IconButton.story.tsx#ExamplesSizes"]={docgenInfo:A.__docgenInfo,name:"ExamplesSizes",path:"src/components/IconButton/IconButton.story.tsx#ExamplesSizes"})}catch{}try{N.displayName="ExamplesBackground",N.__docgenInfo={description:"",displayName:"ExamplesBackground",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"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/IconButton/IconButton.story.tsx#ExamplesBackground"]={docgenInfo:N.__docgenInfo,name:"ExamplesBackground",path:"src/components/IconButton/IconButton.story.tsx#ExamplesBackground"})}catch{}},"../grafana-data/src/utils/deprecationWarning.ts":function(U,R,c){c.d(R,{l:function(){return r}});const f={},r=(w,o,p)=>{let s=`[Deprecation warning] ${w}: ${o} is deprecated`;p&&(s+=`. Use ${p} instead`);const b=Date.now(),k=f[s];(!k||b-k>1e4)&&(console.warn(s),f[s]=b)}},"./src/components/Alert/Alert.tsx":function(U,R,c){c.d(R,{F:function(){return l}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("../grafana-e2e-selectors/src/selectors/index.ts"),o=c("./src/themes/ThemeContext.tsx"),p=c("./src/components/Button/Button.tsx"),s=c("./src/components/Icon/Icon.tsx"),b=c("./src/components/Layout/Box/Box.tsx"),k=c("./src/components/Text/Text.tsx"),K=Object.defineProperty,Y=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,P=(n,a,t)=>a in n?K(n,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[a]=t,V=(n,a)=>{for(var t in a||(a={}))L.call(a,t)&&P(n,t,a[t]);if(Y)for(var t of Y(a))O.call(a,t)&&P(n,t,a[t]);return n},j=(n,a)=>{var t={};for(var e in n)L.call(n,e)&&a.indexOf(e)<0&&(t[e]=n[e]);if(n!=null&&Y)for(var e of Y(n))a.indexOf(e)<0&&O.call(n,e)&&(t[e]=n[e]);return t};const l=r.forwardRef((n,a)=>{var t=n,{title:e,onRemove:u,children:d,buttonContent:m,elevated:y,bottomSpacing:E,topSpacing:T,className:S,severity:x="error"}=t,I=j(t,["title","onRemove","children","buttonContent","elevated","bottomSpacing","topSpacing","className","severity"]);const C=(0,o.$j)(),z=h(C,x,!!e,y,E,T),M={error:"alert",warning:"alert",info:"status",success:"status"},A=I.role||M[x],N=I["aria-label"]||e;return r.createElement("div",V({ref:a,className:(0,f.cx)(z.wrapper,S),role:A,"aria-label":N},I),r.createElement(b.a,{"data-testid":w.Tp.components.Alert.alertV2(x),display:"flex",backgroundColor:x,borderRadius:"default",paddingY:1,paddingX:2,borderStyle:"solid",borderColor:x,alignItems:"stretch",boxShadow:y?"z3":void 0},r.createElement(b.a,{paddingTop:1,paddingRight:2},r.createElement("div",{className:z.icon},r.createElement(s.I,{size:"xl",name:g(x)}))),r.createElement(b.a,{paddingY:1,grow:1},r.createElement(k.E,{color:"primary",weight:"medium"},e),d&&r.createElement("div",{className:z.content},d)),u&&!m&&r.createElement("div",{className:z.close},r.createElement(p.$n,{"aria-label":"Close alert",icon:"times",onClick:u,type:"button",fill:"text",variant:"secondary"})),u&&m&&r.createElement(b.a,{marginLeft:1,display:"flex",alignItems:"center"},r.createElement(p.$n,{"aria-label":"Close alert",variant:"secondary",onClick:u,type:"button"},m))))});l.displayName="Alert";const g=n=>{switch(n){case"error":return"exclamation-circle";case"warning":return"exclamation-triangle";case"info":return"info-circle";case"success":return"check"}},h=(n,a,t,e,u,d)=>{const m=n.colors[a];return{wrapper:(0,f.AH)({flexGrow:1,marginBottom:n.spacing(u??2),marginTop:n.spacing(d??0),position:"relative","&:before":{content:'""',position:"absolute",top:0,left:0,bottom:0,right:0,background:n.colors.background.primary,zIndex:-1}}),icon:(0,f.AH)({color:m.text}),content:(0,f.AH)({color:n.colors.text.primary,paddingTop:t?n.spacing(.5):0,maxHeight:"50vh",overflowY:"auto"}),close:(0,f.AH)({position:"relative",color:n.colors.text.secondary,background:"none",display:"flex",top:"-6px",right:"-14px"})}};try{l.displayName="Alert",l.__docgenInfo={description:"",displayName:"Alert",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},onRemove:{defaultValue:null,description:"On click handler for alert button, mostly used for dismissing the alert",name:"onRemove",required:!1,type:{name:"((event: MouseEvent<Element, MouseEvent>) => void)"}},severity:{defaultValue:{value:"error"},description:"",name:"severity",required:!1,type:{name:"enum",value:[{value:'"info"'},{value:'"success"'},{value:'"error"'},{value:'"warning"'}]}},elevated:{defaultValue:null,description:"",name:"elevated",required:!1,type:{name:"boolean"}},buttonContent:{defaultValue:null,description:"",name:"buttonContent",required:!1,type:{name:"ReactNode"}},bottomSpacing:{defaultValue:null,description:"",name:"bottomSpacing",required:!1,type:{name:"number"}},topSpacing:{defaultValue:null,description:"",name:"topSpacing",required:!1,type:{name:"number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Alert/Alert.tsx#Alert"]={docgenInfo:l.__docgenInfo,name:"Alert",path:"src/components/Alert/Alert.tsx#Alert"})}catch{}},"./src/components/IconButton/IconButton.tsx":function(U,R,c){c.d(R,{K:function(){return a}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("../grafana-data/src/utils/deprecationWarning.ts"),o=c("../grafana-data/src/themes/colorManipulator.ts"),p=c("./src/themes/ThemeContext.tsx"),s=c("./src/themes/mixins.ts"),b=c("./src/components/Icon/Icon.tsx"),k=c("./src/components/Icon/utils.ts"),K=c("./src/components/Tooltip/Tooltip.tsx"),Y=Object.defineProperty,L=Object.defineProperties,O=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,V=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,l=(e,u,d)=>u in e?Y(e,u,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[u]=d,g=(e,u)=>{for(var d in u||(u={}))V.call(u,d)&&l(e,d,u[d]);if(P)for(var d of P(u))j.call(u,d)&&l(e,d,u[d]);return e},h=(e,u)=>L(e,O(u)),n=(e,u)=>{var d={};for(var m in e)V.call(e,m)&&u.indexOf(m)<0&&(d[m]=e[m]);if(e!=null&&P)for(var m of P(e))u.indexOf(m)<0&&j.call(e,m)&&(d[m]=e[m]);return d};const a=r.forwardRef((e,u)=>{const{size:d="md",variant:m="secondary"}=e;let y;d==="xxl"||d==="xxxl"?((0,w.l)("IconButton",'size="xxl" and size="xxxl"','size="xl"'),y="xl"):y=d;const E=(0,p.of)(t,y,m);let T,S;if("tooltip"in e){const{tooltip:x}=e;T=typeof x=="string"?x:void 0}else if("ariaLabel"in e||"aria-label"in e){const{ariaLabel:x,["aria-label"]:I}=e;T=I||x,S=u}if("tooltip"in e){const x=e,{name:I,iconType:C,className:D,tooltip:z,tooltipPlacement:M}=x,A=n(x,["name","iconType","className","tooltip","tooltipPlacement"]);return r.createElement(K.m,{ref:u,content:z,placement:M},r.createElement("button",h(g({},A),{ref:S,"aria-label":T,className:(0,f.cx)(E.button,D),type:"button"}),r.createElement(b.I,{name:I,size:y,className:E.icon,type:C})))}else{const x=e,{name:I,iconType:C,className:D}=x,z=n(x,["name","iconType","className"]);return r.createElement("button",h(g({},z),{ref:S,"aria-label":T,className:(0,f.cx)(E.button,D),type:"button"}),r.createElement(b.I,{name:I,size:y,className:E.icon,type:C}))}});a.displayName="IconButton";const t=(e,u,d)=>{const m=(0,k.cs)(u)+e.spacing.gridSize;let y=e.colors.text.primary;return d==="primary"?y=e.colors.primary.text:d==="destructive"&&(y=e.colors.error.text),{button:(0,f.AH)({zIndex:0,position:"relative",margin:`0 ${e.spacing.x0_5} 0 0`,boxShadow:"none",border:"none",display:"inline-flex",background:"transparent",justifyContent:"center",alignItems:"center",padding:0,color:y,"&[disabled], &:disabled":{cursor:"not-allowed",color:e.colors.action.disabledText,opacity:.65},"&:before":{zIndex:-1,position:"absolute",opacity:0,width:`${m}px`,height:`${m}px`,borderRadius:e.shape.radius.default,content:'""',transitionDuration:"0.2s",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionProperty:"opacity"},"&:focus, &:focus-visible":(0,s.Hi)(e),"&:focus:not(:focus-visible)":(0,s.cr)(e),"&:hover":{"&:before":{backgroundColor:d==="secondary"?e.colors.action.hover:o.X4(y,.12),opacity:1}}}),icon:(0,f.AH)({verticalAlign:"baseline"})}};try{a.displayName="IconButton",a.__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:a.__docgenInfo,name:"IconButton",path:"src/components/IconButton/IconButton.tsx#IconButton"})}catch{}},"./src/components/Layout/Box/Box.tsx":function(U,R,c){c.d(R,{a:function(){return O}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("./src/themes/ThemeContext.tsx"),o=c("./src/components/Layout/utils/responsiveness.tsx"),p=Object.defineProperty,s=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,K=(l,g,h)=>g in l?p(l,g,{enumerable:!0,configurable:!0,writable:!0,value:h}):l[g]=h,Y=(l,g)=>{for(var h in g||(g={}))b.call(g,h)&&K(l,h,g[h]);if(s)for(var h of s(g))k.call(g,h)&&K(l,h,g[h]);return l},L=(l,g)=>{var h={};for(var n in l)b.call(l,n)&&g.indexOf(n)<0&&(h[n]=l[n]);if(l!=null&&s)for(var n of s(l))g.indexOf(n)<0&&k.call(l,n)&&(h[n]=l[n]);return h};const O=(0,r.forwardRef)((l,g)=>{const h=l,{children:n,margin:a,marginX:t,marginY:e,marginTop:u,marginBottom:d,marginLeft:m,marginRight:y,padding:E,paddingX:T,paddingY:S,paddingTop:x,paddingBottom:I,paddingLeft:C,paddingRight:D,display:z,backgroundColor:M,grow:A,shrink:N,basis:X,flex:_,borderColor:v,borderStyle:B,borderRadius:q,justifyContent:G,alignItems:i,boxShadow:W,element:H,gap:$}=h,F=L(h,["children","margin","marginX","marginY","marginTop","marginBottom","marginLeft","marginRight","padding","paddingX","paddingY","paddingTop","paddingBottom","paddingLeft","paddingRight","display","backgroundColor","grow","shrink","basis","flex","borderColor","borderStyle","borderRadius","justifyContent","alignItems","boxShadow","element","gap"]),J=(0,w.of)(j,a,t,e,u,d,m,y,E,T,S,x,I,C,D,z,M,A,N,X,_,v,B,q,G,i,W,$),Q=H??"div";return r.createElement(Q,Y({ref:g,className:J.root},F),n)});O.displayName="Box";const P=(l,g)=>{switch(l){case"error":case"success":case"info":case"warning":return g.colors[l].borderTransparent;default:return l?g.colors.border[l]:void 0}},V=(l,g)=>{switch(l){case"error":case"success":case"info":case"warning":return g.colors[l].transparent;default:return l?g.colors.background[l]:void 0}},j=(l,g,h,n,a,t,e,u,d,m,y,E,T,S,x,I,C,D,z,M,A,N,X,_,v,B,q,G)=>({root:(0,f.AH)([(0,o.Y)(l,g,i=>({margin:l.spacing(i)})),(0,o.Y)(l,h,i=>({marginLeft:l.spacing(i),marginRight:l.spacing(i)})),(0,o.Y)(l,n,i=>({marginTop:l.spacing(i),marginBottom:l.spacing(i)})),(0,o.Y)(l,a,i=>({marginTop:l.spacing(i)})),(0,o.Y)(l,t,i=>({marginBottom:l.spacing(i)})),(0,o.Y)(l,e,i=>({marginLeft:l.spacing(i)})),(0,o.Y)(l,u,i=>({marginRight:l.spacing(i)})),(0,o.Y)(l,d,i=>({padding:l.spacing(i)})),(0,o.Y)(l,m,i=>({paddingLeft:l.spacing(i),paddingRight:l.spacing(i)})),(0,o.Y)(l,y,i=>({paddingTop:l.spacing(i),paddingBottom:l.spacing(i)})),(0,o.Y)(l,E,i=>({paddingTop:l.spacing(i)})),(0,o.Y)(l,T,i=>({paddingBottom:l.spacing(i)})),(0,o.Y)(l,S,i=>({paddingLeft:l.spacing(i)})),(0,o.Y)(l,x,i=>({paddingRight:l.spacing(i)})),(0,o.Y)(l,I,i=>({display:i})),(0,o.Y)(l,C,i=>({backgroundColor:V(i,l)})),(0,o.Y)(l,D,i=>({flexGrow:i})),(0,o.Y)(l,z,i=>({flexShrink:i})),(0,o.Y)(l,M,i=>({flexBasis:i})),(0,o.Y)(l,A,i=>({flex:i})),(0,o.Y)(l,X,i=>({borderStyle:i})),(0,o.Y)(l,N,i=>({borderColor:P(i,l)})),(X||N)&&{borderWidth:"1px"},(0,o.Y)(l,v,i=>({justifyContent:i})),(0,o.Y)(l,B,i=>({alignItems:i})),(0,o.Y)(l,_,i=>({borderRadius:l.shape.radius[i]})),(0,o.Y)(l,q,i=>({boxShadow:l.shadows[i]})),(0,o.Y)(l,G,i=>({gap:l.spacing(i)}))])});try{O.displayName="Box",O.__docgenInfo={description:"",displayName:"Box",props:{margin:{defaultValue:null,description:"Sets the property `margin`",name:"margin",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginX:{defaultValue:null,description:"Sets the properties `margin-top` and `margin-bottom`. Higher priority than margin.",name:"marginX",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginY:{defaultValue:null,description:"Sets the properties `margin-left` and `margin-right`. Higher priority than margin.",name:"marginY",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginTop:{defaultValue:null,description:"Sets the property `margin-top`. Higher priority than margin and marginY.",name:"marginTop",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginBottom:{defaultValue:null,description:"Sets the property `margin-bottom`. Higher priority than margin and marginXY",name:"marginBottom",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginLeft:{defaultValue:null,description:"Sets the property `margin-left`. Higher priority than margin and marginX.",name:"marginLeft",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},marginRight:{defaultValue:null,description:"Sets the property `margin-right`. Higher priority than margin and marginX.",name:"marginRight",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},padding:{defaultValue:null,description:"Sets the property `padding`",name:"padding",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingX:{defaultValue:null,description:"Sets the properties `padding-top` and `padding-bottom`. Higher priority than padding.",name:"paddingX",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingY:{defaultValue:null,description:"Sets the properties `padding-left` and `padding-right`. Higher priority than padding.",name:"paddingY",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingTop:{defaultValue:null,description:"Sets the property `padding-top`. Higher priority than padding and paddingY.",name:"paddingTop",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingBottom:{defaultValue:null,description:"Sets the property `padding-bottom`. Higher priority than padding and paddingY.",name:"paddingBottom",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingLeft:{defaultValue:null,description:"Sets the property `padding-left`. Higher priority than padding and paddingX.",name:"paddingLeft",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},paddingRight:{defaultValue:null,description:"Sets the property `padding-right`. Higher priority than padding and paddingX.",name:"paddingRight",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},borderStyle:{defaultValue:null,description:"",name:"borderStyle",required:!1,type:{name:"ResponsiveProp<BorderStyle>"}},borderColor:{defaultValue:null,description:"",name:"borderColor",required:!1,type:{name:"ResponsiveProp<BorderColor>"}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:"ResponsiveProp<keyof Radii>"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"ResponsiveProp<AlignItems>"}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"ResponsiveProp<JustifyContent>"}},gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},backgroundColor:{defaultValue:null,description:"",name:"backgroundColor",required:!1,type:{name:"ResponsiveProp<BackgroundColor>"}},display:{defaultValue:null,description:"",name:"display",required:!1,type:{name:"ResponsiveProp<Display>"}},boxShadow:{defaultValue:null,description:"",name:"boxShadow",required:!1,type:{name:"ResponsiveProp<keyof ThemeShadows>"}},element:{defaultValue:null,description:"Sets the HTML element that will be rendered as a Box. Defaults to 'div'",name:"element",required:!1,type:{name:"ElementType"}},grow:{defaultValue:null,description:"Sets the property `flex-grow`",name:"grow",required:!1,type:{name:"ResponsiveProp<number>"}},shrink:{defaultValue:null,description:"Sets the property `flex-shrink`",name:"shrink",required:!1,type:{name:"ResponsiveProp<number>"}},basis:{defaultValue:null,description:"Sets the property `flex-basis`",name:"basis",required:!1,type:{name:"ResponsiveProp<FlexBasis>"}},flex:{defaultValue:null,description:"Sets the property `flex`",name:"flex",required:!1,type:{name:"ResponsiveProp<Flex>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Box/Box.tsx#Box"]={docgenInfo:O.__docgenInfo,name:"Box",path:"src/components/Layout/Box/Box.tsx#Box"})}catch{}},"./src/components/Layout/Layout.tsx":function(U,R,c){c.d(R,{Gy:function(){return P},PE:function(){return O},gW:function(){return V}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("./src/themes/ThemeContext.tsx"),o=Object.defineProperty,p=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable,k=(n,a,t)=>a in n?o(n,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[a]=t,K=(n,a)=>{for(var t in a||(a={}))s.call(a,t)&&k(n,t,a[t]);if(p)for(var t of p(a))b.call(a,t)&&k(n,t,a[t]);return n},Y=(n,a)=>{var t={};for(var e in n)s.call(n,e)&&a.indexOf(e)<0&&(t[e]=n[e]);if(n!=null&&p)for(var e of p(n))a.indexOf(e)<0&&b.call(n,e)&&(t[e]=n[e]);return t},L=(n=>(n[n.Horizontal=0]="Horizontal",n[n.Vertical=1]="Vertical",n))(L||{});const O=n=>{var a=n,{children:t,orientation:e=0,spacing:u="sm",justify:d="flex-start",align:m="normal",wrap:y=!1,width:E="100%",height:T="100%"}=a,S=Y(a,["children","orientation","spacing","justify","align","wrap","width","height"]);const x=(0,w.of)(l,e,u,d,m,y);return r.createElement("div",K({className:x.layout,style:{width:E,height:T}},S),r.Children.toArray(t).filter(Boolean).map((I,C)=>r.createElement("div",{className:x.childWrapper,key:C},I)))},P=({children:n,spacing:a,justify:t,align:e="center",wrap:u,width:d,height:m})=>r.createElement(O,{spacing:a,justify:t,orientation:0,align:e,width:d,height:m,wrap:u},n),V=({children:n,spacing:a,justify:t,align:e,width:u,height:d})=>r.createElement(O,{spacing:a,justify:t,orientation:1,align:e,width:u,height:d},n),j=({children:n,padding:a,margin:t,grow:e,shrink:u})=>{const d=useStyles2(h,a,t);return React.createElement("div",{className:cx(d.wrapper,e!==void 0&&css({flexGrow:e}),u!==void 0&&css({flexShrink:u}))},n)},l=(n,a,t,e,u,d)=>{const m=t!=="none"?n.spacing(g[t]):0,y=a===0&&!d||a===1?0:`-${m}`,E=a===1?"vertical-group":"horizontal-group";return{layout:(0,f.AH)({label:E,display:"flex",flexDirection:a===1?"column":"row",flexWrap:d?"wrap":"nowrap",justifyContent:e,alignItems:u,height:"100%",maxWidth:"100%",marginBottom:y}),childWrapper:(0,f.AH)({label:"layoutChildrenWrapper",marginBottom:a===0&&!d?0:m,marginRight:a===0?m:0,display:"flex",alignItems:u,"&:last-child":{marginBottom:a===1?0:void 0,marginRight:a===0?0:void 0}})}},g={none:0,xs:.5,sm:1,md:2,lg:3},h=(n,a,t)=>{const e=a&&a!=="none"&&n.spacing(g[a])||0,u=t&&t!=="none"&&n.spacing(g[t])||0;return{wrapper:css({label:"container",margin:u,padding:e})}};try{O.displayName="Layout",O.__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:O.__docgenInfo,name:"Layout",path:"src/components/Layout/Layout.tsx#Layout"})}catch{}try{P.displayName="HorizontalGroup",P.__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:P.__docgenInfo,name:"HorizontalGroup",path:"src/components/Layout/Layout.tsx#HorizontalGroup"})}catch{}try{V.displayName="VerticalGroup",V.__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:V.__docgenInfo,name:"VerticalGroup",path:"src/components/Layout/Layout.tsx#VerticalGroup"})}catch{}try{j.displayName="Container",j.__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:j.__docgenInfo,name:"Container",path:"src/components/Layout/Layout.tsx#Container"})}catch{}},"./src/components/Layout/utils/responsiveness.tsx":function(U,R,c){c.d(R,{Y:function(){return r}});function f(w,o,p,s){const b=o[s];if(b!=null)return{[w.breakpoints.up(s)]:p(b)}}function r(w,o,p){return o==null?null:typeof o!="object"||!("xs"in o)?p(o):[f(w,o,p,"xs"),f(w,o,p,"sm"),f(w,o,p,"md"),f(w,o,p,"lg"),f(w,o,p,"xl"),f(w,o,p,"xxl")]}try{r.displayName="getResponsiveStyle",r.__docgenInfo={description:"Function that converts a ResponsiveProp object into CSS",displayName:"getResponsiveStyle",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"]={docgenInfo:r.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"./src/components/Text/Text.tsx":function(U,R,c){c.d(R,{E:function(){return h}});var f=c("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),r=c("../../node_modules/react/index.js"),w=c("./src/themes/ThemeContext.tsx"),o=c("../../node_modules/react-dom/server.browser.js"),p=c("./src/components/Tooltip/Tooltip.tsx");const s=r.forwardRef(({childElement:a,children:t},e)=>{const[u,d]=(0,r.useState)(!1),m=(0,r.useRef)(null);(0,r.useImperativeHandle)(e,()=>m.current);const y=(0,r.useMemo)(()=>new ResizeObserver(T=>{for(const S of T)S.target.clientWidth&&S.target.scrollWidth&&(S.target.scrollWidth>S.target.clientWidth&&d(!0),S.target.scrollWidth<=S.target.clientWidth&&d(!1))}),[]);(0,r.useEffect)(()=>{const{current:T}=m;return T&&y.observe(T),()=>{y.disconnect()}},[d,y]);const E=T=>typeof T=="string"?T:o.renderToStaticMarkup(r.createElement(r.Fragment,null,T)).replace(/(<([^>]+)>)/gi,"");return u?r.createElement(p.m,{ref:m,content:E(t)},a(void 0)):a(m)});s.displayName="TruncatedText";try{s.displayName="TruncatedText",s.__docgenInfo={description:"",displayName:"TruncatedText",props:{childElement:{defaultValue:null,description:"",name:"childElement",required:!0,type:{name:"(ref: ForwardedRef<HTMLElement> | undefined) => ReactElement<any, string | JSXElementConstructor<any>>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Text/TruncatedText.tsx#TruncatedText"]={docgenInfo:s.__docgenInfo,name:"TruncatedText",path:"src/components/Text/TruncatedText.tsx#TruncatedText"})}catch{}var b=c("./src/components/Text/utils.ts"),k=Object.defineProperty,K=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,L=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,V=(a,t,e)=>t in a?k(a,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[t]=e,j=(a,t)=>{for(var e in t||(t={}))O.call(t,e)&&V(a,e,t[e]);if(L)for(var e of L(t))P.call(t,e)&&V(a,e,t[e]);return a},l=(a,t)=>K(a,Y(t)),g=(a,t)=>{var e={};for(var u in a)O.call(a,u)&&t.indexOf(u)<0&&(e[u]=a[u]);if(a!=null&&L)for(var u of L(a))t.indexOf(u)<0&&P.call(a,u)&&(e[u]=a[u]);return e};const h=r.forwardRef((a,t)=>{var e=a,{element:u="span",variant:d,weight:m,color:y,truncate:E,italic:T,textAlignment:S,children:x}=e,I=g(e,["element","variant","weight","color","truncate","italic","textAlignment","children"]);const C=(0,w.of)(n,u,d,y,m,E,T,S),D=z=>(0,r.createElement)(u,l(j({},I),{style:void 0,className:C,ref:z}),x);return!E||u==="span"?D(void 0):r.createElement(s,{childElement:D,children:x,ref:t})});h.displayName="Text";const n=(a,t,e,u,d,m,y,E)=>(0,f.AH)([j({margin:0,padding:0},(0,b.d$)(a,t,e)),e&&j({},a.typography[e]),u&&{color:(0,b.vT)(u,a)},d&&{fontWeight:(0,b.iV)(d,a)},m&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},y&&{fontStyle:"italic"},E&&{textAlign:E}]);try{h.displayName="Text",h.__docgenInfo={description:"",displayName:"Text",props:{element:{defaultValue:{value:"span"},description:'Defines what HTML element is defined underneath. "span" by default',name:"element",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'},{value:'"p"'},{value:'"span"'}]}},variant:{defaultValue:null,description:"What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed",name:"variant",required:!1,type:{name:"enum",value:[{value:'"body"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'},{value:'"bodySmall"'}]}},weight:{defaultValue:null,description:"Override the default weight for the used variant",name:"weight",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"light"'},{value:'"regular"'},{value:'"bold"'}]}},color:{defaultValue:null,description:"Color to use for text",name:"color",required:!1,type:{name:"enum",value:[{value:'"info"'},{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"success"'},{value:'"error"'},{value:'"disabled"'},{value:'"warning"'},{value:'"maxContrast"'}]}},truncate:{defaultValue:null,description:"Use to cut the text off with ellipsis if there isn't space to show all of it. On hover shows the rest of the text",name:"truncate",required:!1,type:{name:"boolean"}},italic:{defaultValue:null,description:"If true, show the text as italic. False by default",name:"italic",required:!1,type:{name:"boolean"}},textAlignment:{defaultValue:null,description:"Whether to align the text to left, center or right",name:"textAlignment",required:!1,type:{name:"enum",value:[{value:'"right"'},{value:'"left"'},{value:'"start"'},{value:'"end"'},{value:'"center"'},{value:'"inherit"'},{value:'"justify"'},{value:'"initial"'},{value:'"-moz-initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"-webkit-match-parent"'},{value:'"match-parent"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Text/Text.tsx#Text"]={docgenInfo:h.__docgenInfo,name:"Text",path:"src/components/Text/Text.tsx#Text"})}catch{}},"./src/components/Text/utils.ts":function(U,R,c){c.d(R,{d$:function(){return w},iV:function(){return f},vT:function(){return r}});const f=(o,p)=>{switch(o){case"bold":return p.typography.fontWeightBold;case"medium":return p.typography.fontWeightMedium;case"light":return p.typography.fontWeightLight;case"regular":case void 0:return p.typography.fontWeightRegular}},r=(o,p)=>{switch(o){case"error":return p.colors.error.text;case"success":return p.colors.success.text;case"info":return p.colors.info.text;case"warning":return p.colors.warning.text;default:return o?p.colors.text[o]:void 0}},w=(o,p,s)=>{if(s)return o.typography[s];switch(p){case"span":return;case"h1":return o.typography.h1;case"h2":return o.typography.h2;case"h3":return o.typography.h3;case"h4":return o.typography.h4;case"h5":return o.typography.h5;case"h6":return o.typography.h6;default:return o.typography.body}}}}]);
