"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[286],{"../../node_modules/@mdx-js/react/lib/index.js":function(j,_,o){o.d(_,{BN:function(){return p},RP:function(){return h},gz:function(){return t},xA:function(){return O}});var m=o("../../node_modules/react/index.js");const p=m.createContext({});function t(s){return l;function l(a){const f=h(a.components);return m.createElement(s,{...a,allComponents:f})}}function h(s){const l=m.useContext(p);return m.useMemo(()=>typeof s=="function"?s(l):{...l,...s},[l,s])}const y={};function O({components:s,children:l,disableParentContext:a}){let f;return a?f=typeof s=="function"?s({}):s||y:f=h(s),m.createElement(p.Provider,{value:f},l)}},"./src/components/Forms/Legend.story.tsx":function(j,_,o){o.r(_),o.d(_,{Basic:function(){return x},default:function(){return C}});var m=o("../../node_modules/react/index.js"),p=o("./src/components/Forms/Legend.tsx"),t=o("../../node_modules/react/jsx-runtime.js"),h=o("../../node_modules/@mdx-js/react/lib/index.js"),y=o("../../node_modules/@storybook/blocks/dist/index.mjs");function O(i){const n=Object.assign({h1:"h1",h3:"h3",p:"p",code:"code",pre:"pre"},(0,h.RP)(),i.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(y.W8,{title:"MDX|Legend",component:p.s}),`
`,(0,t.jsx)(n.h1,{id:"legend",children:"Legend"}),`
`,(0,t.jsx)(n.h3,{id:"when-to-use",children:"When to use"}),`
`,(0,t.jsxs)(n.p,{children:["Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a ",(0,t.jsx)(n.code,{children:"FieldSet"}),"."]}),`
`,(0,t.jsx)(n.h3,{id:"usage",children:"Usage"}),`
`,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`import { Forms } from '@grafana/ui';

<Legend>{label}</Legend>;
`})}),`
`,(0,t.jsx)(n.h3,{id:"props",children:"Props"}),`
`,(0,t.jsx)(y.ov,{of:p.s})]})}function s(i={}){const{wrapper:n}=Object.assign({},(0,h.RP)(),i.components);return n?(0,t.jsx)(n,Object.assign({},i,{children:(0,t.jsx)(O,i)})):O(i)}var l=s,a=Object.defineProperty,f=Object.defineProperties,u=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,e=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,d=(i,n,v)=>n in i?a(i,n,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[n]=v,c=(i,n)=>{for(var v in n||(n={}))e.call(n,v)&&d(i,v,n[v]);if(g)for(var v of g(n))r.call(n,v)&&d(i,v,n[v]);return i},L=(i,n)=>f(i,u(n)),P,b,S;const E={title:"Forms/Legend",component:p.s,parameters:{docs:{page:l},controls:{exclude:["description"]}},argTypes:{children:{name:"Label"}}},x=i=>m.createElement(p.s,null,i.children);x.args={children:"Form section"};var C=E;x.parameters=L(c({},x.parameters),{docs:L(c({},(P=x.parameters)==null?void 0:P.docs),{source:c({originalSource:`args => {
  return <Legend>{args.children}</Legend>;
}`},(S=(b=x.parameters)==null?void 0:b.docs)==null?void 0:S.source)})})},"./src/components/Forms/Legend.tsx":function(j,_,o){o.d(_,{s:function(){return g}});var m=o("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),p=o("../../node_modules/react/index.js"),t=o("./src/themes/ThemeContext.tsx"),h=Object.defineProperty,y=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,l=(e,r,d)=>r in e?h(e,r,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[r]=d,a=(e,r)=>{for(var d in r||(r={}))O.call(r,d)&&l(e,d,r[d]);if(y)for(var d of y(r))s.call(r,d)&&l(e,d,r[d]);return e},f=(e,r)=>{var d={};for(var c in e)O.call(e,c)&&r.indexOf(c)<0&&(d[c]=e[c]);if(e!=null&&y)for(var c of y(e))r.indexOf(c)<0&&s.call(e,c)&&(d[c]=e[c]);return d};const u=e=>({legend:(0,m.AH)({fontSize:e.typography.h3.fontSize,fontWeight:e.typography.fontWeightRegular,margin:e.spacing(0,0,2,0)})}),g=e=>{var r=e,{children:d,className:c}=r,L=f(r,["children","className"]);const P=(0,t.of)(u);return p.createElement("legend",a({className:(0,m.cx)(P.legend,c)},L),d)};try{u.displayName="getLegendStyles",u.__docgenInfo={description:"",displayName:"getLegendStyles",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/Legend.tsx#getLegendStyles"]={docgenInfo:u.__docgenInfo,name:"getLegendStyles",path:"src/components/Forms/Legend.tsx#getLegendStyles"})}catch{}try{g.displayName="Legend",g.__docgenInfo={description:"",displayName:"Legend",props:{description:{defaultValue:null,description:"",name:"description",required:!1,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Forms/Legend.tsx#Legend"]={docgenInfo:g.__docgenInfo,name:"Legend",path:"src/components/Forms/Legend.tsx#Legend"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(j,_,o){/**
 * @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 m=o("../../node_modules/react/index.js"),p=Symbol.for("react.element"),t=Symbol.for("react.fragment"),h=Object.prototype.hasOwnProperty,y=m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,O={key:!0,ref:!0,__self:!0,__source:!0};function s(l,a,f){var u,g={},e=null,r=null;f!==void 0&&(e=""+f),a.key!==void 0&&(e=""+a.key),a.ref!==void 0&&(r=a.ref);for(u in a)h.call(a,u)&&!O.hasOwnProperty(u)&&(g[u]=a[u]);if(l&&l.defaultProps)for(u in a=l.defaultProps,a)g[u]===void 0&&(g[u]=a[u]);return{$$typeof:p,type:l,key:e,ref:r,props:g,_owner:y.current}}_.Fragment=t,_.jsx=s,_.jsxs=s},"../../node_modules/react/jsx-runtime.js":function(j,_,o){j.exports=o("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
