"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[3182],{"../../node_modules/@mdx-js/react/lib/index.js":function(A,x,i){i.d(x,{BN:function(){return u},RP:function(){return t},gz:function(){return h},xA:function(){return m}});var n=i("../../node_modules/react/index.js");const u=n.createContext({});function h(p){return v;function v(y){const E=t(y.components);return n.createElement(p,{...y,allComponents:E})}}function t(p){const v=n.useContext(u);return n.useMemo(()=>typeof p=="function"?p(v):{...v,...p},[v,p])}const g={};function m({components:p,children:v,disableParentContext:y}){let E;return y?E=typeof p=="function"?p({}):p||g:E=t(p),n.createElement(u.Provider,{value:E},v)}},"./src/components/Forms/Checkbox.story.tsx":function(A,x,i){i.r(x),i.d(x,{AllStates:function(){return z},Basic:function(){return P},InAField:function(){return B},StackedList:function(){return N},default:function(){return q}});var n=i("../../node_modules/react/index.js"),u=i("./src/components/Layout/Layout.tsx"),h=i("./src/components/Forms/Checkbox.tsx"),t=i("../../node_modules/react/jsx-runtime.js"),g=i("../../node_modules/@mdx-js/react/lib/index.js"),m=i("../../node_modules/@storybook/blocks/dist/index.mjs");function p(w){const s=Object.assign({h1:"h1",h3:"h3",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",pre:"pre"},(0,g.RP)(),w.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(m.W8,{title:"MDX|Checkbox",component:h.S}),`
`,(0,t.jsx)(s.h1,{id:"checkbox",children:"Checkbox"}),`
`,(0,t.jsx)(s.h3,{id:"when-to-use",children:"When to use"}),`
`,(0,t.jsxs)(s.p,{children:["Checked represents true, un-checked represent false. So you can use them to select a binary option or multiple options in a set. ",(0,t.jsx)(s.code,{children:"Checkbox"})," can be used in groups, where the single checkboxes have no dependencies. That means that selecting one doesn\u2019t affect any other ",(0,t.jsx)(s.code,{children:"Checkbox"}),". When adding a description to your ",(0,t.jsx)(s.code,{children:"Checkbox"}),', write positive statements so that "checked" means "yes" and not "no". That way, you can avoid confusion.']}),`
`,(0,t.jsxs)(s.ul,{children:[`
`,(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"DO:"})," [ ] Hide options"]}),`
`,(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"DON'T:"})," [ ] Do not show options"]}),`
`]}),`
`,(0,t.jsxs)(s.p,{children:["Checkboxes typically only trigger changes after sending a form. If your component should trigger a change immediately, it's better to use a toggle switch instead. Furthermore, checkboxes are not mutually exclusive. That means that selecting one will not disable the others or impact them in any other way. If you want to offer a mutually exclusive choice, use ",(0,t.jsx)(s.code,{children:"RadioButtonGroup"})," or a ",(0,t.jsx)(s.code,{children:"Select"})," dropdown."]}),`
`,(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"DO:"})," Show series"]}),`
`,(0,t.jsxs)(s.ul,{children:[`
`,(0,t.jsx)(s.li,{children:"[ ] A-series"}),`
`,(0,t.jsx)(s.li,{children:"[ ] B-series"}),`
`,(0,t.jsx)(s.li,{children:"[ ] C-series"}),`
`]}),`
`,(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"DON'T:"})," Show only"]}),`
`,(0,t.jsxs)(s.ul,{children:[`
`,(0,t.jsx)(s.li,{children:"[ ] A-series"}),`
`,(0,t.jsx)(s.li,{children:"[ ] B-series"}),`
`,(0,t.jsx)(s.li,{children:"[ ] C-series"}),`
`]}),`
`,(0,t.jsxs)(s.p,{children:[`The indeterminate state of the checkbox should be used when there is a group of child checkboxes that are in a mix of checked and unchecked states. For instance when you have a list of checkboxes representing the columns of a table, and you want to allow the user to select which columns to display. If some of the columns are checked, and some are unchecked, then the parent checkbox should be in an indeterminate state. If all the columns are checked, then the parent should be checked. If none of the columns are checked, then the parent should be unchecked.
It is discouraged to set both `,(0,t.jsx)(s.code,{children:"indeterminate"})," and ",(0,t.jsx)(s.code,{children:"checked"})," state as a checkboxs emit boolean values which can only ever be TRUE or FALSE, and if something is partially true, then it is false."]}),`
`,(0,t.jsxs)(s.ul,{children:[`
`,(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"DON'T:"})," ",(0,t.jsx)(s.code,{children:"<Checkbox checked indeterminate />"})]}),`
`]}),`
`,(0,t.jsx)(s.h3,{id:"usage",children:"Usage"}),`
`,(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-jsx",children:`import { Forms } from '@grafana/ui';

<Checkbox value={true|false} label={...} description={...} onChange={...} />
`})}),`
`,(0,t.jsx)(s.h3,{id:"props",children:"Props"}),`
`,(0,t.jsx)(m.ov,{of:h.S})]})}function v(w={}){const{wrapper:s}=Object.assign({},(0,g.RP)(),w.components);return s?(0,t.jsx)(s,Object.assign({},w,{children:(0,t.jsx)(p,w)})):p(w)}var y=v,E=i("./src/components/Forms/Field.tsx"),O=Object.defineProperty,C=Object.defineProperties,k=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,l=(w,s,V)=>s in w?O(w,s,{enumerable:!0,configurable:!0,writable:!0,value:V}):w[s]=V,e=(w,s)=>{for(var V in s||(s={}))b.call(s,V)&&l(w,V,s[V]);if(c)for(var V of c(s))d.call(s,V)&&l(w,V,s[V]);return w},a=(w,s)=>C(w,k(s)),r,o,f,_,S,I,j,T,R,D,M,F;const L={title:"Forms/Checkbox",component:h.S,parameters:{docs:{page:y},controls:{exclude:["value","htmlValue"]}}},P=w=>{const[s,V]=(0,n.useState)(!1),W=(0,n.useCallback)(H=>V(H.currentTarget.checked),[V]);return n.createElement("div",null,n.createElement(h.S,e({value:s,onChange:W},w)))};P.args={label:"Skip TLS cert validation",description:"Set to true if you want to skip TLS cert validation",disabled:!1,indeterminate:!1,invalid:!1};const N=()=>n.createElement("div",null,n.createElement(u.gW,null,n.createElement(h.S,{defaultChecked:!0,label:"Skip TLS cert validation",description:"Set to true if you want to skip TLS cert validation"}),n.createElement(h.S,{defaultChecked:!0,label:"Another checkbox",description:"Another long description that does not make any sense"}),n.createElement(h.S,{defaultChecked:!0,label:"Another checkbox times 2",description:"Another long description that does not make any sense or does it?"}))),B=w=>n.createElement("div",null,n.createElement(E.D,e({},w),n.createElement(h.S,{name:"hide",id:"hide",defaultChecked:!0})));B.args={label:"Hidden",description:"Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden.",disabled:!1,indeterminate:!1,invalid:!1};const z=w=>{const[s,V]=(0,n.useState)(!1),W=(0,n.useCallback)(H=>V(H.currentTarget.checked),[V]);return n.createElement("div",null,n.createElement(u.gW,null,n.createElement(h.S,e({value:s,onChange:W},w)),n.createElement(h.S,{value:!0,label:"Checked"}),n.createElement(h.S,{value:!1,label:"Unchecked"}),n.createElement(h.S,{value:!1,indeterminate:!0,label:"Interdeterminate"}),n.createElement(h.S,{value:!1,invalid:!0,label:"Invalid and unchecked"}),n.createElement(h.S,{value:!0,invalid:!0,label:"Invalid and checked"})))};z.args={label:"Props set from controls",description:"Set to true if you want to skip TLS cert validation",disabled:!1,indeterminate:!1,invalid:!1};var q=L;P.parameters=a(e({},P.parameters),{docs:a(e({},(r=P.parameters)==null?void 0:r.docs),{source:e({originalSource:`args => {
  const [checked, setChecked] = useState(false);
  const onChange = useCallback((e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked), [setChecked]);
  return <div>
      <Checkbox value={checked} onChange={onChange} {...args} />
    </div>;
}`},(f=(o=P.parameters)==null?void 0:o.docs)==null?void 0:f.source)})}),N.parameters=a(e({},N.parameters),{docs:a(e({},(_=N.parameters)==null?void 0:_.docs),{source:e({originalSource:`() => {
  return <div>
      <VerticalGroup>
        <Checkbox defaultChecked={true} label="Skip TLS cert validation" description="Set to true if you want to skip TLS cert validation" />
        <Checkbox defaultChecked={true} label="Another checkbox" description="Another long description that does not make any sense" />
        <Checkbox defaultChecked={true} label="Another checkbox times 2" description="Another long description that does not make any sense or does it?" />
      </VerticalGroup>
    </div>;
}`},(I=(S=N.parameters)==null?void 0:S.docs)==null?void 0:I.source)})}),B.parameters=a(e({},B.parameters),{docs:a(e({},(j=B.parameters)==null?void 0:j.docs),{source:e({originalSource:`args => {
  return <div>
      <Field {...args}>
        <Checkbox name="hide" id="hide" defaultChecked={true} />
      </Field>
    </div>;
}`},(R=(T=B.parameters)==null?void 0:T.docs)==null?void 0:R.source)})}),z.parameters=a(e({},z.parameters),{docs:a(e({},(D=z.parameters)==null?void 0:D.docs),{source:e({originalSource:`args => {
  const [checked, setChecked] = useState(false);
  const onChange = useCallback((e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked), [setChecked]);
  return <div>
      <VerticalGroup>
        <Checkbox value={checked} onChange={onChange} {...args} />
        <Checkbox value={true} label="Checked" />
        <Checkbox value={false} label="Unchecked" />
        <Checkbox value={false} indeterminate={true} label="Interdeterminate" />
        <Checkbox value={false} invalid={true} label="Invalid and unchecked" />
        <Checkbox value={true} invalid={true} label="Invalid and checked" />
      </VerticalGroup>
    </div>;
}`},(F=(M=z.parameters)==null?void 0:M.docs)==null?void 0:F.source)})})},"../grafana-data/src/types/icon.ts":function(A,x,i){i.d(x,{Uo:function(){return h},az:function(){return n},n6:function(){return u}});const n={google:!0,microsoft:!0,github:!0,gitlab:!0,okta:!0,discord:!0,hipchat:!0,amazon:!0,"google-hangouts-alt":!0,pagerduty:!0,line:!0,anchor:!0,"adjust-circle":!0,"angle-double-down":!0,"angle-double-right":!0,"angle-double-up":!0,"angle-down":!0,"angle-left":!0,"angle-right":!0,"angle-up":!0,"align-left":!0,"align-right":!0,"application-observability":!0,apps:!0,"archive-alt":!0,arrow:!0,"arrow-down":!0,"arrow-from-right":!0,"arrow-left":!0,"arrow-random":!0,"arrow-right":!0,"arrow-to-right":!0,"arrow-up":!0,"arrows-h":!0,"arrows-v":!0,asserts:!0,"expand-arrows":!0,at:!0,ai:!0,backward:!0,bars:!0,bell:!0,"bell-slash":!0,bolt:!0,book:!0,bookmark:!0,"book-open":!0,"brackets-curly":!0,bug:!0,building:!0,"calculator-alt":!0,"calendar-alt":!0,"calendar-slash":!0,camera:!0,capture:!0,"channel-add":!0,"chart-line":!0,check:!0,"check-circle":!0,"check-square":!0,circle:!0,"circle-mono":!0,"clipboard-alt":!0,"clock-nine":!0,cloud:!0,"cloud-download":!0,"cloud-upload":!0,"code-branch":!0,cog:!0,columns:!0,"comment-alt":!0,"comment-alt-message":!0,"comment-alt-share":!0,"comments-alt":!0,compass:!0,copy:!0,"corner-down-right-alt":!0,"create-dashboard":!0,"credit-card":!0,crosshair:!0,cube:!0,dashboard:!0,database:!0,"dice-three":!0,docker:!0,"document-info":!0,"download-alt":!0,draggabledots:!0,edit:!0,"ellipsis-v":!0,envelope:!0,"exchange-alt":!0,"exclamation-triangle":!0,"exclamation-circle":!0,"external-link-alt":!0,eye:!0,"eye-slash":!0,"ellipsis-h":!0,"fa fa-spinner":!0,favorite:!0,"file-alt":!0,"file-blank":!0,"file-copy-alt":!0,"file-download":!0,"file-edit-alt":!0,"file-landscape-alt":!0,filter:!0,flip:!0,folder:!0,font:!0,fire:!0,"folder-open":!0,"folder-plus":!0,"folder-upload":!0,forward:!0,"frontend-observability":!0,"gf-bar-alignment-after":!0,"gf-bar-alignment-before":!0,"gf-bar-alignment-center":!0,"gf-glue":!0,"gf-grid":!0,"gf-interpolation-linear":!0,"gf-interpolation-smooth":!0,"gf-interpolation-step-after":!0,"gf-interpolation-step-before":!0,"gf-landscape":!0,"gf-layout-simple":!0,"gf-logs":!0,"gf-ml":!0,"gf-movepane-left":!0,"gf-movepane-right":!0,"gf-portrait":!0,"gf-service-account":!0,"gf-show-context":!0,"gf-pin":!0,"gf-prometheus":!0,"gf-traces":!0,globe:!0,grafana:!0,"graph-bar":!0,heart:!0,"heart-rate":!0,"heart-break":!0,history:!0,"history-alt":!0,home:!0,"home-alt":!0,"horizontal-align-center":!0,"horizontal-align-left":!0,"horizontal-align-right":!0,hourglass:!0,import:!0,info:!0,"info-circle":!0,k6:!0,"key-skeleton-alt":!0,keyboard:!0,"layer-group":!0,"layers-alt":!0,"library-panel":!0,"line-alt":!0,link:!0,"list-ui-alt":!0,"list-ul":!0,"list-ol":!0,lock:!0,"map-marker":!0,"map-marker-plus":!0,"map-marker-minus":!0,message:!0,minus:!0,"minus-circle":!0,"mobile-android":!0,monitor:!0,palette:!0,"panel-add":!0,"pathfinder-unite":!0,pause:!0,pen:!0,percentage:!0,play:!0,plug:!0,plus:!0,"plus-circle":!0,"plus-square":!0,power:!0,"presentation-play":!0,process:!0,"question-circle":!0,"record-audio":!0,repeat:!0,rocket:!0,"ruler-combined":!0,save:!0,search:!0,"search-minus":!0,"search-plus":!0,"share-alt":!0,shield:!0,"shield-exclamation":!0,signal:!0,signin:!0,signout:!0,sitemap:!0,slack:!0,"sliders-v-alt":!0,spinner:!0,"sort-amount-down":!0,"sort-amount-up":!0,"square-shape":!0,star:!0,"step-backward":!0,stopwatch:!0,"stopwatch-slash":!0,sync:!0,"sync-slash":!0,table:!0,"tag-alt":!0,"telegram-alt":!0,"text-fields":!0,"thumbs-up":!0,times:!0,"times-circle":!0,"toggle-on":!0,"toggle-off":!0,"trash-alt":!0,unarchive:!0,unlock:!0,upload:!0,user:!0,"users-alt":!0,"user-arrows":!0,"vertical-align-bottom":!0,"vertical-align-center":!0,"vertical-align-top":!0,"web-section-alt":!0,"wrap-text":!0,rss:!0,x:!0};function u(t){return!t||typeof t!="string"?!1:t in n}function h(t){if(u(t))return t}},"./src/components/Forms/Checkbox.tsx":function(A,x,i){i.d(x,{S:function(){return d}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("./src/themes/ThemeContext.tsx"),t=i("./src/themes/mixins.ts"),g=i("./src/components/Forms/Label.tsx"),m=Object.defineProperty,p=Object.defineProperties,v=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,C=(e,a,r)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,k=(e,a)=>{for(var r in a||(a={}))E.call(a,r)&&C(e,r,a[r]);if(y)for(var r of y(a))O.call(a,r)&&C(e,r,a[r]);return e},c=(e,a)=>p(e,v(a)),b=(e,a)=>{var r={};for(var o in e)E.call(e,o)&&a.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&y)for(var o of y(e))a.indexOf(o)<0&&O.call(e,o)&&(r[o]=e[o]);return r};const d=u.forwardRef((e,a)=>{var r=e,{label:o,description:f,value:_,htmlValue:S,onChange:I,disabled:j,className:T,indeterminate:R,invalid:D}=r,M=b(r,["label","description","value","htmlValue","onChange","disabled","className","indeterminate","invalid"]);const F=(0,u.useCallback)(N=>{I&&I(N)},[I]),L=(0,h.of)(l,D),P=R?"mixed":void 0;return u.createElement("label",{className:(0,n.cx)(L.wrapper,T)},u.createElement("div",{className:L.checkboxWrapper},u.createElement("input",c(k({type:"checkbox",className:(0,n.cx)(L.input,R&&L.inputIndeterminate),checked:_,disabled:j,onChange:F,value:S,"aria-checked":P},M),{ref:a})),u.createElement("span",{className:L.checkmark})),o&&u.createElement("span",{className:L.label},o),f&&u.createElement("span",{className:L.description},f))}),l=(e,a=!1)=>{const r=(0,g.f)(e),o=2,f=1,_=S=>a?e.colors.error.border:S;return{wrapper:(0,n.AH)({display:"inline-grid",alignItems:"center",columnGap:e.spacing(f),gridAutoRows:"max-content",position:"relative",verticalAlign:"middle"}),input:(0,n.AH)({position:"absolute",zIndex:1,top:0,left:0,width:"100% !important",height:"100%",opacity:0,"&:focus + span, &:focus-visible + span":(0,t.Hi)(e),"&:focus:not(:focus-visible) + span":(0,t.cr)(e),"&:checked + span":{background:e.colors.primary.main,border:`1px solid ${_(e.colors.primary.main)}`,"&:hover":{background:e.colors.primary.shade},"&:after":{content:'""',position:"absolute",zIndex:2,left:"4px",top:0,width:"6px",height:"12px",border:`solid ${e.colors.primary.contrastText}`,borderWidth:"0 3px 3px 0",transform:"rotate(45deg)"}},"&:disabled + span":{backgroundColor:e.colors.action.disabledBackground,cursor:"not-allowed",border:`1px solid ${_(e.colors.action.disabledBackground)}`,"&:hover":{backgroundColor:e.colors.action.disabledBackground},"&:after":{borderColor:e.colors.action.disabledText}}}),inputIndeterminate:(0,n.AH)({"&[aria-checked='mixed'] + span":{border:`1px solid ${_(e.colors.primary.main)}`,background:e.colors.primary.main,"&:hover":{background:e.colors.primary.shade},"&:after":{content:'""',position:"absolute",zIndex:2,left:"2px",right:"2px",top:"calc(50% - 1.5px)",height:"3px",border:`1.5px solid ${e.colors.primary.contrastText}`,backgroundColor:e.colors.primary.contrastText,width:"auto",transform:"none"}},"&:disabled[aria-checked='mixed'] + span":{backgroundColor:e.colors.action.disabledBackground,border:`1px solid ${_(e.colors.error.transparent)}`,"&:after":{borderColor:e.colors.action.disabledText}}}),checkboxWrapper:(0,n.AH)({display:"flex",alignItems:"center",gridColumnStart:1,gridRowStart:1}),checkmark:(0,n.AH)({position:"relative",zIndex:2,display:"inline-block",width:e.spacing(o),height:e.spacing(o),borderRadius:e.shape.radius.default,background:e.components.input.background,border:`1px solid ${_(e.components.input.borderColor)}`,"&:hover":{cursor:"pointer",borderColor:_(e.components.input.borderHover)}}),label:(0,n.cx)(r.label,(0,n.AH)({gridColumnStart:2,gridRowStart:1,position:"relative",zIndex:2,cursor:"pointer",maxWidth:"fit-content",lineHeight:e.typography.bodySmall.lineHeight,marginBottom:0})),description:(0,n.cx)(r.description,(0,n.AH)({gridColumnStart:2,gridRowStart:2,lineHeight:e.typography.bodySmall.lineHeight,marginTop:0}))}};d.displayName="Checkbox";try{d.displayName="Checkbox",d.__docgenInfo={description:"",displayName:"Checkbox",props:{label:{defaultValue:null,description:"Label to display next to checkbox",name:"label",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"Current value of the checkbox",name:"value",required:!1,type:{name:"boolean"}},invalid:{defaultValue:null,description:"Show an invalid state around the input",name:"invalid",required:!1,type:{name:"boolean"}},description:{defaultValue:null,description:"Description to display under the label",name:"description",required:!1,type:{name:"string | ReactElement<any, string | JSXElementConstructor<any>>"}},htmlValue:{defaultValue:null,description:'htmlValue allows to specify the input "value" attribute',name:"htmlValue",required:!1,type:{name:"string | number"}},indeterminate:{defaultValue:null,description:'Sets the checkbox into a "mixed" state. This is only a visual change and does not affect the value.',name:"indeterminate",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Checkbox.tsx#Checkbox"]={docgenInfo:d.__docgenInfo,name:"Checkbox",path:"src/components/Forms/Checkbox.tsx#Checkbox"})}catch{}},"./src/components/Forms/Field.tsx":function(A,x,i){i.d(x,{D:function(){return c}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("./src/themes/ThemeContext.tsx"),t=i("./src/utils/reactUtils.ts"),g=i("./src/components/Forms/FieldValidationMessage.tsx"),m=i("./src/components/Forms/Label.tsx"),p=Object.defineProperty,v=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,O=(l,e,a)=>e in l?p(l,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[e]=a,C=(l,e)=>{for(var a in e||(e={}))y.call(e,a)&&O(l,a,e[a]);if(v)for(var a of v(e))E.call(e,a)&&O(l,a,e[a]);return l},k=(l,e)=>{var a={};for(var r in l)y.call(l,r)&&e.indexOf(r)<0&&(a[r]=l[r]);if(l!=null&&v)for(var r of v(l))e.indexOf(r)<0&&E.call(l,r)&&(a[r]=l[r]);return a};const c=u.forwardRef((l,e)=>{var a=l,{label:r,description:o,horizontal:f,invalid:_,loading:S,disabled:I,required:j,error:T,children:R,className:D,validationMessageHorizontalOverflow:M,htmlFor:F}=a,L=k(a,["label","description","horizontal","invalid","loading","disabled","required","error","children","className","validationMessageHorizontalOverflow","htmlFor"]);const P=(0,h.of)(d),N=F??(0,t.e)(R),B=typeof r=="string"?u.createElement(m.J,{htmlFor:N,description:o},`${r}${j?" *":""}`):r,z=b({invalid:_,disabled:I,loading:S});return u.createElement("div",C({className:(0,n.cx)(P.field,f&&P.fieldHorizontal,D)},L),B,u.createElement("div",null,u.createElement("div",{ref:e},u.cloneElement(R,z)),_&&T&&!f&&u.createElement("div",{className:(0,n.cx)(P.fieldValidationWrapper,{[P.validationMessageHorizontalOverflow]:!!M})},u.createElement(g.P,null,T))),_&&T&&f&&u.createElement("div",{className:(0,n.cx)(P.fieldValidationWrapper,P.fieldValidationWrapperHorizontal,{[P.validationMessageHorizontalOverflow]:!!M})},u.createElement(g.P,null,T)))});c.displayName="Field";function b(l){for(const e in l)l[e]===void 0&&delete l[e];return l}const d=l=>({field:(0,n.AH)({display:"flex",flexDirection:"column",marginBottom:l.spacing(2)}),fieldHorizontal:(0,n.AH)({flexDirection:"row",justifyContent:"space-between",flexWrap:"wrap"}),fieldValidationWrapper:(0,n.AH)({marginTop:l.spacing(.5)}),fieldValidationWrapperHorizontal:(0,n.AH)({flex:"1 1 100%"}),validationMessageHorizontalOverflow:(0,n.AH)({width:0,overflowX:"visible","& > *":{whiteSpace:"nowrap"}})});try{c.displayName="Field",c.__docgenInfo={description:"",displayName:"Field",props:{children:{defaultValue:null,description:"Form input element, i.e Input or Switch",name:"children",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},label:{defaultValue:null,description:"Label for the field",name:"label",required:!1,type:{name:"ReactNode"}},description:{defaultValue:null,description:"Description of the field",name:"description",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Indicates if field is in invalid state",name:"invalid",required:!1,type:{name:"boolean"}},loading:{defaultValue:null,description:"Indicates if field is in loading state",name:"loading",required:!1,type:{name:"boolean"}},disabled:{defaultValue:null,description:"Indicates if field is disabled",name:"disabled",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"Indicates if field is required",name:"required",required:!1,type:{name:"boolean"}},error:{defaultValue:null,description:"Error message to display",name:"error",required:!1,type:{name:"ReactNode"}},horizontal:{defaultValue:null,description:"Indicates horizontal layout of the field",name:"horizontal",required:!1,type:{name:"boolean"}},validationMessageHorizontalOverflow:{defaultValue:null,description:"make validation message overflow horizontally. Prevents pushing out adjacent inline components",name:"validationMessageHorizontalOverflow",required:!1,type:{name:"boolean"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},htmlFor:{defaultValue:null,description:"A unique id that associates the label of the Field component with the control with the unique id.\nIf the `htmlFor` property is missing the `htmlFor` will be inferred from the `id` or `inputId` property of the first child.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for",name:"htmlFor",required:!1,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Field.tsx#Field"]={docgenInfo:c.__docgenInfo,name:"Field",path:"src/components/Forms/Field.tsx#Field"})}catch{}},"./src/components/Forms/FieldValidationMessage.tsx":function(A,x,i){i.d(x,{P:function(){return g}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("./src/themes/ThemeContext.tsx"),t=i("./src/components/Icon/Icon.tsx");const g=({children:p,horizontal:v,className:y})=>{const E=(0,h.of)(m),O=(0,n.cx)(v?E.horizontal:E.vertical,y);return u.createElement("div",{role:"alert",className:O},u.createElement(t.I,{className:E.fieldValidationMessageIcon,name:"exclamation-triangle"}),p)},m=p=>{const v=`
      font-size: ${p.typography.size.sm};
      font-weight: ${p.typography.fontWeightMedium};
      padding: ${p.spacing(.5,1)};
      color: ${p.colors.error.contrastText};
      background: ${p.colors.error.main};
      border-radius: ${p.shape.radius.default};
      position: relative;
      display: inline-block;
      align-self: flex-start;

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

      a:hover {
        text-decoration: none;
      }
    `;return{vertical:(0,n.AH)(v,{margin:p.spacing(.5,0,0,0),"&:before":{content:'""',position:"absolute",left:"9px",top:"-5px",width:0,height:0,borderWidth:"0 4px 5px 4px",borderColor:`transparent transparent ${p.colors.error.main} transparent`,borderStyle:"solid"}}),horizontal:(0,n.AH)(v,{marginLeft:"10px","&:before":{content:'""',position:"absolute",left:"-5px",top:"9px",width:0,height:0,borderWidth:"4px 5px 4px 0",borderColor:"transparent #e02f44 transparent transparent",borderStyle:"solid"}}),fieldValidationMessageIcon:(0,n.AH)({marginRight:p.spacing()})}};try{g.displayName="FieldValidationMessage",g.__docgenInfo={description:"",displayName:"FieldValidationMessage",props:{className:{defaultValue:null,description:"Override component style",name:"className",required:!1,type:{name:"string"}},horizontal:{defaultValue:null,description:"",name:"horizontal",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/FieldValidationMessage.tsx#FieldValidationMessage"]={docgenInfo:g.__docgenInfo,name:"FieldValidationMessage",path:"src/components/Forms/FieldValidationMessage.tsx#FieldValidationMessage"})}catch{}try{m.displayName="getFieldValidationMessageStyles",m.__docgenInfo={description:"",displayName:"getFieldValidationMessageStyles",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},isDark:{defaultValue:null,description:"",name:"isDark",required:!0,type:{name:"boolean"}},isLight:{defaultValue:null,description:"",name:"isLight",required:!0,type:{name:"boolean"}},colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"ThemeColors"}},breakpoints:{defaultValue:null,description:"",name:"breakpoints",required:!0,type:{name:"ThemeBreakpoints"}},spacing:{defaultValue:null,description:"",name:"spacing",required:!0,type:{name:"ThemeSpacing"}},shape:{defaultValue:null,description:"",name:"shape",required:!0,type:{name:"ThemeShape"}},components:{defaultValue:null,description:"",name:"components",required:!0,type:{name:"ThemeComponents"}},typography:{defaultValue:null,description:"",name:"typography",required:!0,type:{name:"ThemeTypography"}},zIndex:{defaultValue:null,description:"",name:"zIndex",required:!0,type:{name:"{ activePanel: number; navbarFixed: number; sidemenu: number; dropdown: number; typeahead: number; tooltip: number; modalBackdrop: number; modal: number; portal: number; }"}},shadows:{defaultValue:null,description:"",name:"shadows",required:!0,type:{name:"ThemeShadows"}},visualization:{defaultValue:null,description:"",name:"visualization",required:!0,type:{name:"ThemeVisualizationColors"}},transitions:{defaultValue:null,description:"",name:"transitions",required:!0,type:{name:"ThemeTransitions"}},v1:{defaultValue:null,description:"@deprecated Will be removed in a future version",name:"v1",required:!0,type:{name:"GrafanaTheme"}},flags:{defaultValue:null,description:"feature flags that might impact component looks",name:"flags",required:!0,type:{name:"{}"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/FieldValidationMessage.tsx#getFieldValidationMessageStyles"]={docgenInfo:m.__docgenInfo,name:"getFieldValidationMessageStyles",path:"src/components/Forms/FieldValidationMessage.tsx#getFieldValidationMessageStyles"})}catch{}},"./src/components/Forms/Label.tsx":function(A,x,i){i.d(x,{J:function(){return C},f:function(){return k}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("./src/themes/ThemeContext.tsx"),t=i("./src/components/Icon/Icon.tsx"),g=Object.defineProperty,m=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,y=(c,b,d)=>b in c?g(c,b,{enumerable:!0,configurable:!0,writable:!0,value:d}):c[b]=d,E=(c,b)=>{for(var d in b||(b={}))p.call(b,d)&&y(c,d,b[d]);if(m)for(var d of m(b))v.call(b,d)&&y(c,d,b[d]);return c},O=(c,b)=>{var d={};for(var l in c)p.call(c,l)&&b.indexOf(l)<0&&(d[l]=c[l]);if(c!=null&&m)for(var l of m(c))b.indexOf(l)<0&&v.call(c,l)&&(d[l]=c[l]);return d};const C=c=>{var b=c,{children:d,description:l,className:e,category:a}=b,r=O(b,["children","description","className","category"]);const o=(0,h.of)(k),f=a?.map((_,S)=>u.createElement("span",{className:o.categories,key:`${_}/${S}`},u.createElement("span",null,_),u.createElement(t.I,{name:"angle-right",className:o.chevron})));return u.createElement("div",{className:(0,n.cx)(o.label,e)},u.createElement("label",E({},r),u.createElement("div",{className:o.labelContent},f,d),l&&u.createElement("span",{className:o.description},l)))},k=c=>({label:(0,n.AH)({label:"Label",fontSize:c.typography.size.sm,fontWeight:c.typography.fontWeightMedium,lineHeight:1.25,marginBottom:c.spacing(.5),color:c.colors.text.primary,maxWidth:"480px"}),labelContent:(0,n.AH)({display:"flex",alignItems:"center"}),description:(0,n.AH)({label:"Label-description",color:c.colors.text.secondary,fontSize:c.typography.size.sm,fontWeight:c.typography.fontWeightRegular,marginTop:c.spacing(.25),display:"block"}),categories:(0,n.AH)({label:"Label-categories",display:"inline-flex",alignItems:"center"}),chevron:(0,n.AH)({margin:c.spacing(0,.25)})});try{C.displayName="Label",C.__docgenInfo={description:"",displayName:"Label",props:{description:{defaultValue:null,description:"",name:"description",required:!1,type:{name:"ReactNode"}},category:{defaultValue:null,description:"",name:"category",required:!1,type:{name:"ReactNode[]"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Label.tsx#Label"]={docgenInfo:C.__docgenInfo,name:"Label",path:"src/components/Forms/Label.tsx#Label"})}catch{}try{k.displayName="getLabelStyles",k.__docgenInfo={description:"",displayName:"getLabelStyles",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},isDark:{defaultValue:null,description:"",name:"isDark",required:!0,type:{name:"boolean"}},isLight:{defaultValue:null,description:"",name:"isLight",required:!0,type:{name:"boolean"}},colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"ThemeColors"}},breakpoints:{defaultValue:null,description:"",name:"breakpoints",required:!0,type:{name:"ThemeBreakpoints"}},spacing:{defaultValue:null,description:"",name:"spacing",required:!0,type:{name:"ThemeSpacing"}},shape:{defaultValue:null,description:"",name:"shape",required:!0,type:{name:"ThemeShape"}},components:{defaultValue:null,description:"",name:"components",required:!0,type:{name:"ThemeComponents"}},typography:{defaultValue:null,description:"",name:"typography",required:!0,type:{name:"ThemeTypography"}},zIndex:{defaultValue:null,description:"",name:"zIndex",required:!0,type:{name:"{ activePanel: number; navbarFixed: number; sidemenu: number; dropdown: number; typeahead: number; tooltip: number; modalBackdrop: number; modal: number; portal: number; }"}},shadows:{defaultValue:null,description:"",name:"shadows",required:!0,type:{name:"ThemeShadows"}},visualization:{defaultValue:null,description:"",name:"visualization",required:!0,type:{name:"ThemeVisualizationColors"}},transitions:{defaultValue:null,description:"",name:"transitions",required:!0,type:{name:"ThemeTransitions"}},v1:{defaultValue:null,description:"@deprecated Will be removed in a future version",name:"v1",required:!0,type:{name:"GrafanaTheme"}},flags:{defaultValue:null,description:"feature flags that might impact component looks",name:"flags",required:!0,type:{name:"{}"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Label.tsx#getLabelStyles"]={docgenInfo:k.__docgenInfo,name:"getLabelStyles",path:"src/components/Forms/Label.tsx#getLabelStyles"})}catch{}},"./src/components/Icon/Icon.tsx":function(A,x,i){i.d(x,{I:function(){return b}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("../../node_modules/react-inlinesvg/esm/index.js"),t=i("../grafana-data/src/types/icon.ts"),g=i("./src/themes/ThemeContext.tsx"),m=i("./src/components/Icon/utils.ts"),p=Object.defineProperty,v=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,O=(d,l,e)=>l in d?p(d,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):d[l]=e,C=(d,l)=>{for(var e in l||(l={}))y.call(l,e)&&O(d,e,l[e]);if(v)for(var e of v(l))E.call(l,e)&&O(d,e,l[e]);return d},k=(d,l)=>{var e={};for(var a in d)y.call(d,a)&&l.indexOf(a)<0&&(e[a]=d[a]);if(d!=null&&v)for(var a of v(d))l.indexOf(a)<0&&E.call(d,a)&&(e[a]=d[a]);return e};const c=d=>({icon:(0,n.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"}),orange:(0,n.AH)({fill:d.v1.palette.orange})}),b=u.forwardRef((d,l)=>{var e=d,{size:a="md",type:r="default",name:o,className:f,style:_,title:S=""}=e,I=k(e,["size","type","name","className","style","title"]);const j=(0,g.of)(c);(0,t.n6)(o)||console.warn("Icon component passed an invalid icon name",o);const T=o==="fa fa-spinner"?"spinner":o,R=(0,m.Wj)(),D=(0,m.cs)(a),M=D,F=o.startsWith("gf-bar-align")?16:o.startsWith("gf-interp")?30:D,L=(0,m.Xi)(T,r),P=`${R}${L}/${T}.svg`,N=(0,n.cx)(j.icon,f,r==="mono"?{[j.orange]:o==="favorite"}:"",T==="spinner"&&"fa-spin");return u.createElement(h.A,C({innerRef:l,src:P,width:F,height:M,title:S,className:N,style:_},I))});b.displayName="Icon";try{b.displayName="Icon",b.__docgenInfo={description:"",displayName:"Icon",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"enum",value:[{value:'"play"'},{value:'"google"'},{value:'"microsoft"'},{value:'"github"'},{value:'"gitlab"'},{value:'"okta"'},{value:'"discord"'},{value:'"hipchat"'},{value:'"amazon"'},{value:'"google-hangouts-alt"'},{value:'"pagerduty"'},{value:'"line"'},{value:'"anchor"'},{value:'"adjust-circle"'},{value:'"angle-double-down"'},{value:'"angle-double-right"'},{value:'"angle-double-up"'},{value:'"angle-down"'},{value:'"angle-left"'},{value:'"angle-right"'},{value:'"angle-up"'},{value:'"align-left"'},{value:'"align-right"'},{value:'"application-observability"'},{value:'"apps"'},{value:'"archive-alt"'},{value:'"arrow"'},{value:'"arrow-down"'},{value:'"arrow-from-right"'},{value:'"arrow-left"'},{value:'"arrow-random"'},{value:'"arrow-right"'},{value:'"arrow-to-right"'},{value:'"arrow-up"'},{value:'"arrows-h"'},{value:'"arrows-v"'},{value:'"asserts"'},{value:'"expand-arrows"'},{value:'"at"'},{value:'"ai"'},{value:'"backward"'},{value:'"bars"'},{value:'"bell"'},{value:'"bell-slash"'},{value:'"bolt"'},{value:'"book"'},{value:'"bookmark"'},{value:'"book-open"'},{value:'"brackets-curly"'},{value:'"bug"'},{value:'"building"'},{value:'"calculator-alt"'},{value:'"calendar-alt"'},{value:'"calendar-slash"'},{value:'"camera"'},{value:'"capture"'},{value:'"channel-add"'},{value:'"chart-line"'},{value:'"check"'},{value:'"check-circle"'},{value:'"check-square"'},{value:'"circle"'},{value:'"circle-mono"'},{value:'"clipboard-alt"'},{value:'"clock-nine"'},{value:'"cloud"'},{value:'"cloud-download"'},{value:'"cloud-upload"'},{value:'"code-branch"'},{value:'"cog"'},{value:'"columns"'},{value:'"comment-alt"'},{value:'"comment-alt-message"'},{value:'"comment-alt-share"'},{value:'"comments-alt"'},{value:'"compass"'},{value:'"copy"'},{value:'"corner-down-right-alt"'},{value:'"create-dashboard"'},{value:'"credit-card"'},{value:'"crosshair"'},{value:'"cube"'},{value:'"dashboard"'},{value:'"database"'},{value:'"dice-three"'},{value:'"docker"'},{value:'"document-info"'},{value:'"download-alt"'},{value:'"draggabledots"'},{value:'"edit"'},{value:'"ellipsis-v"'},{value:'"envelope"'},{value:'"exchange-alt"'},{value:'"exclamation-triangle"'},{value:'"exclamation-circle"'},{value:'"external-link-alt"'},{value:'"eye"'},{value:'"eye-slash"'},{value:'"ellipsis-h"'},{value:'"fa fa-spinner"'},{value:'"favorite"'},{value:'"file-alt"'},{value:'"file-blank"'},{value:'"file-copy-alt"'},{value:'"file-download"'},{value:'"file-edit-alt"'},{value:'"file-landscape-alt"'},{value:'"filter"'},{value:'"flip"'},{value:'"folder"'},{value:'"font"'},{value:'"fire"'},{value:'"folder-open"'},{value:'"folder-plus"'},{value:'"folder-upload"'},{value:'"forward"'},{value:'"frontend-observability"'},{value:'"gf-bar-alignment-after"'},{value:'"gf-bar-alignment-before"'},{value:'"gf-bar-alignment-center"'},{value:'"gf-glue"'},{value:'"gf-grid"'},{value:'"gf-interpolation-linear"'},{value:'"gf-interpolation-smooth"'},{value:'"gf-interpolation-step-after"'},{value:'"gf-interpolation-step-before"'},{value:'"gf-landscape"'},{value:'"gf-layout-simple"'},{value:'"gf-logs"'},{value:'"gf-ml"'},{value:'"gf-movepane-left"'},{value:'"gf-movepane-right"'},{value:'"gf-portrait"'},{value:'"gf-service-account"'},{value:'"gf-show-context"'},{value:'"gf-pin"'},{value:'"gf-prometheus"'},{value:'"gf-traces"'},{value:'"globe"'},{value:'"grafana"'},{value:'"graph-bar"'},{value:'"heart"'},{value:'"heart-rate"'},{value:'"heart-break"'},{value:'"history"'},{value:'"history-alt"'},{value:'"home"'},{value:'"home-alt"'},{value:'"horizontal-align-center"'},{value:'"horizontal-align-left"'},{value:'"horizontal-align-right"'},{value:'"hourglass"'},{value:'"import"'},{value:'"info"'},{value:'"info-circle"'},{value:'"k6"'},{value:'"key-skeleton-alt"'},{value:'"keyboard"'},{value:'"layer-group"'},{value:'"layers-alt"'},{value:'"library-panel"'},{value:'"line-alt"'},{value:'"link"'},{value:'"list-ui-alt"'},{value:'"list-ul"'},{value:'"list-ol"'},{value:'"lock"'},{value:'"map-marker"'},{value:'"map-marker-plus"'},{value:'"map-marker-minus"'},{value:'"message"'},{value:'"minus"'},{value:'"minus-circle"'},{value:'"mobile-android"'},{value:'"monitor"'},{value:'"palette"'},{value:'"panel-add"'},{value:'"pathfinder-unite"'},{value:'"pause"'},{value:'"pen"'},{value:'"percentage"'},{value:'"plug"'},{value:'"plus"'},{value:'"plus-circle"'},{value:'"plus-square"'},{value:'"power"'},{value:'"presentation-play"'},{value:'"process"'},{value:'"question-circle"'},{value:'"record-audio"'},{value:'"repeat"'},{value:'"rocket"'},{value:'"ruler-combined"'},{value:'"save"'},{value:'"search"'},{value:'"search-minus"'},{value:'"search-plus"'},{value:'"share-alt"'},{value:'"shield"'},{value:'"shield-exclamation"'},{value:'"signal"'},{value:'"signin"'},{value:'"signout"'},{value:'"sitemap"'},{value:'"slack"'},{value:'"sliders-v-alt"'},{value:'"spinner"'},{value:'"sort-amount-down"'},{value:'"sort-amount-up"'},{value:'"square-shape"'},{value:'"star"'},{value:'"step-backward"'},{value:'"stopwatch"'},{value:'"stopwatch-slash"'},{value:'"sync"'},{value:'"sync-slash"'},{value:'"table"'},{value:'"tag-alt"'},{value:'"telegram-alt"'},{value:'"text-fields"'},{value:'"thumbs-up"'},{value:'"times"'},{value:'"times-circle"'},{value:'"toggle-on"'},{value:'"toggle-off"'},{value:'"trash-alt"'},{value:'"unarchive"'},{value:'"unlock"'},{value:'"upload"'},{value:'"user"'},{value:'"users-alt"'},{value:'"user-arrows"'},{value:'"vertical-align-bottom"'},{value:'"vertical-align-center"'},{value:'"vertical-align-top"'},{value:'"web-section-alt"'},{value:'"wrap-text"'},{value:'"rss"'},{value:'"x"'}]}},size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'},{value:'"xxxl"'}]}},type:{defaultValue:{value:"default"},description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"solid"'},{value:'"default"'},{value:'"mono"'}]}},title:{defaultValue:{value:""},description:"",name:"title",required:!1,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Icon/Icon.tsx#Icon"]={docgenInfo:b.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch{}},"./src/components/Icon/utils.ts":function(A,x,i){i.d(x,{Wj:function(){return g},Xi:function(){return u},cs:function(){return h}});const n=["grafana","favorite","heart-break","heart","panel-add","library-panel","circle-mono"];function u(m,p){return m?.startsWith("gf-")?"custom":n.includes(m)?"mono":p==="default"?"unicons":p==="solid"?"solid":"mono"}function h(m){switch(m){case"xs":return 12;case"sm":return 14;case"md":return 16;case"lg":return 18;case"xl":return 24;case"xxl":return 36;case"xxxl":return 48}}let t;function g(){if(t)return t;const m=typeof window<"u"&&window.__grafana_public_path__;return m?t=m+"img/icons/":t="public/img/icons/",t}},"./src/components/Layout/Layout.tsx":function(A,x,i){i.d(x,{Gy:function(){return k},PE:function(){return C},gW:function(){return c}});var n=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=i("../../node_modules/react/index.js"),h=i("./src/themes/ThemeContext.tsx"),t=Object.defineProperty,g=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,v=(a,r,o)=>r in a?t(a,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[r]=o,y=(a,r)=>{for(var o in r||(r={}))m.call(r,o)&&v(a,o,r[o]);if(g)for(var o of g(r))p.call(r,o)&&v(a,o,r[o]);return a},E=(a,r)=>{var o={};for(var f in a)m.call(a,f)&&r.indexOf(f)<0&&(o[f]=a[f]);if(a!=null&&g)for(var f of g(a))r.indexOf(f)<0&&p.call(a,f)&&(o[f]=a[f]);return o},O=(a=>(a[a.Horizontal=0]="Horizontal",a[a.Vertical=1]="Vertical",a))(O||{});const C=a=>{var r=a,{children:o,orientation:f=0,spacing:_="sm",justify:S="flex-start",align:I="normal",wrap:j=!1,width:T="100%",height:R="100%"}=r,D=E(r,["children","orientation","spacing","justify","align","wrap","width","height"]);const M=(0,h.of)(d,f,_,S,I,j);return u.createElement("div",y({className:M.layout,style:{width:T,height:R}},D),u.Children.toArray(o).filter(Boolean).map((F,L)=>u.createElement("div",{className:M.childWrapper,key:L},F)))},k=({children:a,spacing:r,justify:o,align:f="center",wrap:_,width:S,height:I})=>u.createElement(C,{spacing:r,justify:o,orientation:0,align:f,width:S,height:I,wrap:_},a),c=({children:a,spacing:r,justify:o,align:f,width:_,height:S})=>u.createElement(C,{spacing:r,justify:o,orientation:1,align:f,width:_,height:S},a),b=({children:a,padding:r,margin:o,grow:f,shrink:_})=>{const S=useStyles2(e,r,o);return React.createElement("div",{className:cx(S.wrapper,f!==void 0&&css({flexGrow:f}),_!==void 0&&css({flexShrink:_}))},a)},d=(a,r,o,f,_,S)=>{const I=o!=="none"?a.spacing(l[o]):0,j=r===0&&!S||r===1?0:`-${I}`,T=r===1?"vertical-group":"horizontal-group";return{layout:(0,n.AH)({label:T,display:"flex",flexDirection:r===1?"column":"row",flexWrap:S?"wrap":"nowrap",justifyContent:f,alignItems:_,height:"100%",maxWidth:"100%",marginBottom:j}),childWrapper:(0,n.AH)({label:"layoutChildrenWrapper",marginBottom:r===0&&!S?0:I,marginRight:r===0?I:0,display:"flex",alignItems:_,"&:last-child":{marginBottom:r===1?0:void 0,marginRight:r===0?0:void 0}})}},l={none:0,xs:.5,sm:1,md:2,lg:3},e=(a,r,o)=>{const f=r&&r!=="none"&&a.spacing(l[r])||0,_=o&&o!=="none"&&a.spacing(l[o])||0;return{wrapper:css({label:"container",margin:_,padding:f})}};try{C.displayName="Layout",C.__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:C.__docgenInfo,name:"Layout",path:"src/components/Layout/Layout.tsx#Layout"})}catch{}try{k.displayName="HorizontalGroup",k.__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:k.__docgenInfo,name:"HorizontalGroup",path:"src/components/Layout/Layout.tsx#HorizontalGroup"})}catch{}try{c.displayName="VerticalGroup",c.__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:c.__docgenInfo,name:"VerticalGroup",path:"src/components/Layout/Layout.tsx#VerticalGroup"})}catch{}try{b.displayName="Container",b.__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:b.__docgenInfo,name:"Container",path:"src/components/Layout/Layout.tsx#Container"})}catch{}},"./src/utils/reactUtils.ts":function(A,x,i){i.d(x,{b:function(){return h},e:function(){return u}});var n=i("../../node_modules/react/index.js");function u(t){let g;const m=n.Children.only(t);return"id"in m?.props?g=m.props.id:"inputId"in m.props&&(g=m?.props.inputId),typeof g=="string"?g:void 0}function h(t,g){if(n.isValidElement(t)||typeof t=="string"||typeof t=="number")return t;if(typeof t=="function"&&g)return t(g);throw new Error(`${t} is not a React element nor a function that returns React element`)}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(A,x,i){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var n=i("../../node_modules/react/index.js"),u=Symbol.for("react.element"),h=Symbol.for("react.fragment"),t=Object.prototype.hasOwnProperty,g=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,m={key:!0,ref:!0,__self:!0,__source:!0};function p(v,y,E){var O,C={},k=null,c=null;E!==void 0&&(k=""+E),y.key!==void 0&&(k=""+y.key),y.ref!==void 0&&(c=y.ref);for(O in y)t.call(y,O)&&!m.hasOwnProperty(O)&&(C[O]=y[O]);if(v&&v.defaultProps)for(O in y=v.defaultProps,y)C[O]===void 0&&(C[O]=y[O]);return{$$typeof:u,type:v,key:k,ref:c,props:C,_owner:g.current}}x.Fragment=h,x.jsx=p,x.jsxs=p},"../../node_modules/react/jsx-runtime.js":function(A,x,i){A.exports=i("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
