@storybook/blocks 7.0.11 → 7.0.12

package/dist/index.js

@@ -19,7 +19,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
             ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=import_theming15.styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=(0,import_theming15.styled)(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=import_theming15.styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value))},hasValue=value2!==void 0,numberOFDecimalsPlaces=(0,import_react21.useMemo)(()=>getNumberOfDecimalPlaces(step),[step]);return import_react21.default.createElement(RangeWrapper,null,import_react21.default.createElement(RangeLabel,null,min),import_react21.default.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),import_react21.default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};var import_react22=__toESM(require("react")),import_theming16=require("@storybook/theming"),import_components14=require("@storybook/components");init_helpers();var Wrapper6=import_theming16.styled.label({display:"flex"}),MaxLength=import_theming16.styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value)},[forceVisible,setForceVisible]=(0,import_react22.useState)(!1),onForceVisible=(0,import_react22.useCallback)(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return import_react22.default.createElement(import_components14.Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return import_react22.default.createElement(Wrapper6,null,import_react22.default.createElement(import_components14.Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&import_react22.default.createElement(MaxLength,{isMaxed:(value2==null?void 0:value2.length)===maxLength},(value2==null?void 0:value2.length)??0," / ",maxLength))};var import_react23=__toESM(require("react")),import_theming17=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();var FileInput=(0,import_theming17.styled)(import_components15.Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url)})}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=(0,import_react23.useRef)(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2)}return(0,import_react23.useEffect)(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),import_react23.default.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=(0,import_react25.lazy)(()=>Promise.resolve().then(()=>(init_Color(),Color_exports))),ColorControl2=props=>import_react25.default.createElement(import_react25.Suspense,{fallback:import_react25.default.createElement("div",null)},import_react25.default.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl2,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>import_react26.default.createElement(import_react26.default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=(0,import_react26.useState)(!1),[boxedValue,setBoxedValue]=(0,import_react26.useState)({value:arg});(0,import_react26.useEffect)(()=>{isFocused||setBoxedValue({value:arg})},[isFocused,arg]);let onChange=(0,import_react26.useCallback)(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=(0,import_react26.useCallback)(()=>setFocused(!1),[]),onFocus=(0,import_react26.useCallback)(()=>setFocused(!0),[]);if(!control||control.disable)return import_react26.default.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return import_react26.default.createElement(Control,{...props,...control,controlType:control.type})};var Name=import_theming19.styled.span({fontWeight:"bold"}),Required=import_theming19.styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=import_theming19.styled.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...(0,import_components17.codeCommon)({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=import_theming19.styled.div(({theme,hasDescription})=>({color:theme.base==="light"?(0,import_polished6.transparentize)(.1,theme.color.defaultText):(0,import_polished6.transparentize)(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=import_theming19.styled.div(({theme,hasDescription})=>({color:theme.base==="light"?(0,import_polished6.transparentize)(.1,theme.color.defaultText):(0,import_polished6.transparentize)(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=import_theming19.styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),ArgRow=props=>{var _a;let{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,description}=row,table=row.table||{},type=table.type||row.type,defaultValue=table.defaultValue||row.defaultValue,required=(_a=row.type)==null?void 0:_a.required,hasDescription=description!=null&&description!=="";return import_react27.default.createElement("tr",null,import_react27.default.createElement(StyledTd,{expandable},import_react27.default.createElement(Name,null,name),required?import_react27.default.createElement(Required,{title:"Required"},"*"):null),compact?null:import_react27.default.createElement("td",null,hasDescription&&import_react27.default.createElement(Description,null,import_react27.default.createElement(import_markdown_to_jsx.default,null,description)),table.jsDocTags!=null?import_react27.default.createElement(import_react27.default.Fragment,null,import_react27.default.createElement(TypeWithJsDoc,{hasDescription},import_react27.default.createElement(ArgValue,{value:type,initialExpandedArgs})),import_react27.default.createElement(ArgJsDoc,{tags:table.jsDocTags})):import_react27.default.createElement(Type,{hasDescription},import_react27.default.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:import_react27.default.createElement("td",null,import_react27.default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?import_react27.default.createElement("td",null,import_react27.default.createElement(ArgControl,{...props})):null)};var import_react28=__toESM(require("react")),import_polished7=require("polished"),import_theming20=require("@storybook/theming"),import_components18=require("@storybook/components"),ExpanderIcon=(0,import_theming20.styled)(import_components18.Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?(0,import_polished7.transparentize)(.25,theme.color.defaultText):(0,import_polished7.transparentize)(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=import_theming20.styled.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=import_theming20.styled.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?(0,import_polished7.transparentize)(.4,theme.color.defaultText):(0,import_polished7.transparentize)(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=import_theming20.styled.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=import_theming20.styled.td(()=>({position:"relative"})),StyledTr=import_theming20.styled.tr(({theme})=>({"&:hover > td":{backgroundColor:`${(0,import_polished7.lighten)(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=import_theming20.styled.button(()=>({background:"none",border:"none",padding:"0",font:"inherit",position:"absolute",top:0,bottom:0,left:0,right:0,height:"100%",width:"100%",color:"transparent",cursor:"row-resize !important"})),SectionRow=({level="section",label,children,initialExpanded=!0,colSpan=3})=>{let[expanded,setExpanded]=(0,import_react28.useState)(initialExpanded),Level=level==="subsection"?Subsection:Section,itemCount=(children==null?void 0:children.length)||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",icon=expanded?"arrowdown":"arrowright",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return import_react28.default.createElement(import_react28.default.Fragment,null,import_react28.default.createElement(StyledTr,{title:helperText},import_react28.default.createElement(Level,{colSpan:1},import_react28.default.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),import_react28.default.createElement(FlexWrapper,null,import_react28.default.createElement(ExpanderIcon,{icon}),label)),import_react28.default.createElement(StyledTd2,{colSpan:colSpan-1},import_react28.default.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=import_theming21.styled.table(({theme,compact,inAddonPanel})=>({"&&":{borderSpacing:0,color:theme.color.defaultText,"td, th":{padding:0,border:"none",verticalAlign:"top",textOverflow:"ellipsis"},fontSize:theme.typography.size.s2-1,lineHeight:"20px",textAlign:"left",width:"100%",marginTop:inAddonPanel?0:25,marginBottom:inAddonPanel?0:40,"thead th:first-of-type, td:first-of-type":{width:"25%"},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...compact?null:{width:"35%"}},"td:nth-of-type(3)":{...compact?null:{width:"15%"}},"th:last-of-type, td:last-of-type":{paddingRight:20,...compact?null:{width:"25%"}},th:{color:theme.base==="light"?(0,import_polished8.transparentize)(.25,theme.color.defaultText):(0,import_polished8.transparentize)(.45,theme.color.defaultText),paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:"10px",paddingBottom:"10px","&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginLeft:inAddonPanel?0:1,marginRight:inAddonPanel?0:1,tbody:{...inAddonPanel?null:{filter:theme.base==="light"?"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))":"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))"},"> tr > *":{background:theme.background.content,borderTop:`1px solid ${theme.appBorderColor}`},...inAddonPanel?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${theme.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${theme.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${theme.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${theme.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:theme.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:theme.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:theme.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:theme.appBorderRadius}}}}}),({isLoading,theme})=>isLoading?{"th span, td span, td button":{display:"inline",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,color:"transparent",boxShadow:"none",borderRadius:0}}:{}),StyledIconButton=(0,import_theming21.styled)(import_components19.IconButton)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=import_theming21.styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>{var _a,_b;return Number(!!((_a=b.type)!=null&&_a.required))-Number(!!((_b=a.type)!=null&&_b.required))||a.name.localeCompare(b.name)},none:void 0},rowLoadingData=key=>({key,name:"propertyName",description:"This is a short description",control:{type:"text"},table:{type:{summary:"summary"},defaultValue:{summary:"defaultValue"}}}),argsTableLoadingData={rows:{row1:rowLoadingData("row1"),row2:rowLoadingData("row2"),row3:rowLoadingData("row3")}},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=(row==null?void 0:row.table)||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else{let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection}sections.sections[category]=section}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection}else sections.ungrouped.push({key,...row})});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return{ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return(0,import_csf.includeConditionalArg)(row,args,globals)}catch(err){return import_client_logger4.once.warn(err.message),!1}},ArgsTable=props=>{if("error"in props)return import_react29.default.createElement(EmptyBlock,null,props.error,"\xA0",import_react29.default.createElement(import_components19.Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none"}=props,isLoading="isLoading"in props,{rows,args,globals}="rows"in props?props:argsTableLoadingData,groups=groupRows((0,import_pickBy.default)(rows,row=>{var _a;return!((_a=row==null?void 0:row.table)!=null&&_a.disable)&&safeIncludeConditionalArg(row,args||{},globals||{})}),sort);if(groups.ungrouped.length===0&&Object.entries(groups.sections).length===0&&Object.entries(groups.ungroupedSubsections).length===0)return import_react29.default.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",import_react29.default.createElement(import_components19.Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return import_react29.default.createElement(import_components19.ResetWrapper,null,import_react29.default.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},import_react29.default.createElement("thead",{className:"docblock-argstable-head"},import_react29.default.createElement("tr",null,import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Name")),compact?null:import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Description")),compact?null:import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Default")),updateArgs?import_react29.default.createElement("th",null,import_react29.default.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&import_react29.default.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},import_react29.default.createElement(import_components19.Icons,{icon:"undo","aria-hidden":!0})))):null)),import_react29.default.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>import_react29.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>import_react29.default.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>import_react29.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var import_react30=__toESM(require("react")),import_components20=require("@storybook/components");var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?import_react30.default.createElement(ArgsTable,{...entries[0][1],...props}):import_react30.default.createElement(import_components20.TabsState,null,entries.map(entry=>{let[label,table]=entry,id2=`prop_table_div_${label}`;return import_react30.default.createElement("div",{key:id2,id:id2,title:label},({active})=>active?import_react30.default.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};var import_react31=__toESM(require("react")),import_theming22=require("@storybook/theming"),import_components21=require("@storybook/components"),NoControlsWrapper=import_theming22.styled.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>import_react31.default.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",import_react31.default.createElement(import_components21.Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));var import_react32=__toESM(require("react")),import_polished9=require("polished"),import_theming23=require("@storybook/theming"),import_components22=require("@storybook/components");var Label4=import_theming23.styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?(0,import_polished9.transparentize)(.4,theme.color.defaultText):(0,import_polished9.transparentize)(.6,theme.color.defaultText)})),Sample=import_theming23.styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=import_theming23.styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper8=import_theming23.styled.div(import_components22.withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>import_react32.default.createElement(Wrapper8,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>import_react32.default.createElement(TypeSpecimen,{key:size},import_react32.default.createElement(Label4,null,size),import_react32.default.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var import_react33=__toESM(require("react")),import_polished10=require("polished"),import_theming24=require("@storybook/theming"),import_components23=require("@storybook/components");var ItemTitle=import_theming24.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=import_theming24.styled.div(({theme})=>({color:theme.base==="light"?(0,import_polished10.transparentize)(.2,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText)})),ItemDescription=import_theming24.styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=import_theming24.styled.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?(0,import_polished10.transparentize)(.4,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=import_theming24.styled.div({display:"flex",flexDirection:"row"}),Swatch2=import_theming24.styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=import_theming24.styled.div(({theme})=>({...getBlockBackgroundStyle(theme),display:"flex",flexDirection:"row",height:50,marginBottom:5,overflow:"hidden",backgroundColor:"white",backgroundImage:"repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",backgroundClip:"padding-box"})),SwatchSpecimen=import_theming24.styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches2=import_theming24.styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=import_theming24.styled.div({display:"flex",alignItems:"flex-start"}),ListName=import_theming24.styled.div({flex:"0 0 30%"}),ListSwatches=import_theming24.styled.div({flex:1}),ListHeading=import_theming24.styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?(0,import_polished10.transparentize)(.4,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText)})),List=import_theming24.styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return import_react33.default.createElement(Swatch2,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return import_react33.default.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},import_react33.default.createElement("div",null,color,colorDescription&&import_react33.default.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?import_react33.default.createElement(SwatchSpecimen,null,import_react33.default.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),import_react33.default.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):import_react33.default.createElement(SwatchSpecimen,null,import_react33.default.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),import_react33.default.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>import_react33.default.createElement(Item,null,import_react33.default.createElement(ItemDescription,null,import_react33.default.createElement(ItemTitle,null,title),import_react33.default.createElement(ItemSubtitle,null,subtitle)),import_react33.default.createElement(Swatches2,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>import_react33.default.createElement(import_components23.ResetWrapper,null,import_react33.default.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},import_react33.default.createElement(ListHeading,null,import_react33.default.createElement(ListName,null,"Name"),import_react33.default.createElement(ListSwatches,null,"Swatches")),children));var import_react34=__toESM(require("react")),import_theming25=require("@storybook/theming"),import_components24=require("@storybook/components");var ItemLabel=import_theming25.styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=import_theming25.styled.div(({theme})=>({...getBlockBackgroundStyle(theme),overflow:"hidden",height:40,width:40,display:"flex",alignItems:"center",justifyContent:"center",flex:"none","> img, > svg":{width:20,height:20}})),Item2=import_theming25.styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=import_theming25.styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>import_react34.default.createElement(Item2,null,import_react34.default.createElement(ItemSpecimen,null,children),import_react34.default.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>import_react34.default.createElement(import_components24.ResetWrapper,null,import_react34.default.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var import_react35=__toESM(require("react")),anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>import_react35.default.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);var import_preview_api=require("@storybook/preview-api"),import_react38=__toESM(require("react"));var import_react37=require("react");var import_react36=require("react"),import_global5=require("@storybook/global");import_global5.global&&import_global5.global.__DOCS_CONTEXT__===void 0&&(import_global5.global.__DOCS_CONTEXT__=(0,import_react36.createContext)(null),import_global5.global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=import_global5.global?import_global5.global.__DOCS_CONTEXT__:(0,import_react36.createContext)(null);var useOf=(moduleExportOrType,validTypes)=>(0,import_react37.useContext)(DocsContext).resolveOf(moduleExportOrType,validTypes);function extractComponentArgTypes(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}function getArgTypesFromResolved(resolved,props){if(resolved.type==="component"){let{component,projectAnnotations:{parameters:parameters2}}=resolved;return{argTypes:extractComponentArgTypes(component,parameters2),parameters:parameters2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2}}=resolved;return{argTypes:argTypes2,parameters:parameters2}}let{story:{argTypes,parameters}}=resolved;return{argTypes,parameters}}var ArgTypes=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters}=getArgTypesFromResolved(resolved,props),argTypesParameters=((_a=parameters.docs)==null?void 0:_a.argTypes)||{},include=props.include??argTypesParameters.include,exclude=props.exclude??argTypesParameters.exclude,sort=props.sort??argTypesParameters.sort,filteredArgTypes=(0,import_preview_api.filterArgTypes)(argTypes,include,exclude);return import_react38.default.createElement(ArgsTable,{rows:filteredArgTypes,sort})};var import_react40=__toESM(require("react")),import_mapValues=__toESM(require("lodash/mapValues.js")),import_preview_api2=require("@storybook/preview-api"),import_core_events=require("@storybook/core-events"),import_client_logger5=require("@storybook/client-logger"),import_ts_dedent=__toESM(require("ts-dedent"));var PRIMARY_STORY="^";var titleCase=str2=>str2.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"})}var import_react39=require("react");function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=(0,import_react39.useState)({});return(0,import_react39.useEffect)(()=>{Promise.all(storyIds.map(async storyId=>{let story=await context.loadStory(storyId);setStories(current=>current[storyId]===story?current:{...current,[storyId]:story})}))}),storyIds.map(storyId=>{if(storiesById[storyId])return storiesById[storyId];try{return context.storyById(storyId)}catch{return null}})}var useArgs=(storyId,context)=>{let storyContext=context.getStoryContext(context.storyById()),[args,setArgs]=(0,import_react40.useState)(storyContext.args);(0,import_react40.useEffect)(()=>{let cb=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events.STORY_ARGS_UPDATED,cb),()=>context.channel.off(import_core_events.STORY_ARGS_UPDATED,cb)},[storyId]);let updateArgs=(0,import_react40.useCallback)(updatedArgs=>context.channel.emit(import_core_events.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=(0,import_react40.useCallback)(argNames=>context.channel.emit(import_core_events.RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return[args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=(0,import_react40.useState)(storyContext.globals);return(0,import_react40.useEffect)(()=>{let cb=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events.GLOBALS_UPDATED,cb),()=>context.channel.off(import_core_events.GLOBALS_UPDATED,cb)},[]),[globals]},extractComponentArgTypes2=(component,parameters,include,exclude)=>{let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");let argTypes=extractArgTypes(component);return argTypes=(0,import_preview_api2.filterArgTypes)(argTypes,include,exclude),argTypes},isShortcut=value2=>value2&&[PRIMARY_STORY].includes(value2),getComponent=(props={},component)=>{let{of}=props,{story}=props;if(isShortcut(of)||isShortcut(story))return component||null;if(!of)throw new Error("No component found.");return of},addComponentTabs=(tabs,components2,parameters,include,exclude,sort)=>({...tabs,...(0,import_mapValues.default)(components2,comp=>({rows:extractComponentArgTypes2(comp,parameters,include,exclude),sort}))}),StoryTable=props=>{let context=(0,import_react40.useContext)(DocsContext),{story:storyName,component,subcomponents,showComponent,include,exclude,sort}=props;try{let storyId;switch(storyName){case PRIMARY_STORY:{storyId=context.storyById().id;break}default:storyId=context.storyIdByName(storyName)}let story=useStory(storyId,context),[args,updateArgs,resetArgs]=useArgs(storyId,context),[globals]=useGlobals(context);if(!story)return import_react40.default.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=(0,import_preview_api2.filterArgTypes)(story.argTypes,include,exclude),mainLabel=getComponentName(component)||"Story",tabs={[mainLabel]:{rows:argTypes,args,globals,updateArgs,resetArgs}},storyHasArgsWithControls=argTypes&&Object.values(argTypes).find(v=>!!(v!=null&&v.control));if(storyHasArgsWithControls||(updateArgs=null,resetArgs=null,tabs={}),component&&(!storyHasArgsWithControls||showComponent)&&(tabs=addComponentTabs(tabs,{[mainLabel]:component},story.parameters,include,exclude)),subcomponents){if(Array.isArray(subcomponents))throw new Error("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");tabs=addComponentTabs(tabs,subcomponents,story.parameters,include,exclude)}return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return import_react40.default.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let{components:components2,include,exclude,sort,parameters}=props,tabs=addComponentTabs({},components2,parameters,include,exclude);return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{var _a;(0,import_client_logger5.deprecate)(import_ts_dedent.default`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
     
   Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
-  `);let context=(0,import_react40.useContext)(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]))}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||((_a=parameters.controls)==null?void 0:_a.sort),main=getComponent(props,component);if(storyName)return import_react40.default.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)}}catch(err){mainProps={error:err.message}}return import_react40.default.createElement(ArgsTable,{...mainProps,sort})}if(components2)return import_react40.default.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react45=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react41=__toESM(require("react")),import_dequal=require("dequal"),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args)}var SourceContext=(0,import_react41.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react41.useState)({});return(0,import_react41.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id2]&&sources[id2][hash]&&sources[id2][hash].code===source||setSources(current=>{let newSources={...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}};return(0,import_dequal.dequal)(current,newSources)?current:newSources})};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react41.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react43=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var import_react42=require("react"),import_core_events2=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react42.useState)(storyContext.args);(0,import_react42.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events2.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events2.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react42.useCallback)(updatedArgs=>context.channel.emit(import_core_events2.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react42.useCallback)(argNames=>context.channel.emit(import_core_events2.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};function useArgsList(stories,context){return stories.map(story=>useArgsIfDefined(story,context))}var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
+  `);let context=(0,import_react40.useContext)(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]))}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||((_a=parameters.controls)==null?void 0:_a.sort),main=getComponent(props,component);if(storyName)return import_react40.default.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)}}catch(err){mainProps={error:err.message}}return import_react40.default.createElement(ArgsTable,{...mainProps,sort})}if(components2)return import_react40.default.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react44=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react41=__toESM(require("react")),import_dequal=require("dequal"),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args)}var SourceContext=(0,import_react41.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react41.useState)({});return(0,import_react41.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id2]&&sources[id2][hash]&&sources[id2][hash].code===source||setSources(current=>{let newSources={...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}};return(0,import_dequal.dequal)(current,newSources)?current:newSources})};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react41.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react42=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
   `),(_b=storyContext.parameters.docs)!=null&&_b.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
@@ -28,7 +28,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
   `),(_c=storyContext.parameters.jsx)!=null&&_c.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);let transformer=transformFromProps??sourceParameters.transform??sourceParameters.transformSource??((_d=storyContext.parameters.docs)==null?void 0:_d.transformSource)??((_e=storyContext.parameters.jsx)==null?void 0:_e.transformSource);return(transformer==null?void 0:transformer(code,storyContext))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()]}catch{}let argsFromStories=useArgsList(stories,docsContext);if(!storiesFromIds.every(Boolean))return{error:"Oh no! The source is not available.",state:"none"};let sourceParameters=((_c=(_b=(_a=stories[0])==null?void 0:_a.parameters)==null?void 0:_b.docs)==null?void 0:_c.source)||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{var _a2,_b2;if(!story)return"";let[args]=argsFromStories[index]||[],storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:args,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??((_b2=(_a2=story.parameters.docs)==null?void 0:_a2.source)==null?void 0:_b2.format)??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
+  `);let transformer=transformFromProps??sourceParameters.transform??sourceParameters.transformSource??((_d=storyContext.parameters.docs)==null?void 0:_d.transformSource)??((_e=storyContext.parameters.jsx)==null?void 0:_e.transformSource);return(transformer==null?void 0:transformer(code,storyContext))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()]}catch{}if(!storiesFromIds.every(Boolean))return{error:"Oh no! The source is not available.",state:"none"};let sourceParameters=((_c=(_b=(_a=stories[0])==null?void 0:_a.parameters)==null?void 0:_b.docs)==null?void 0:_c.source)||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{var _a2,_b2;if(!story)return"";let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??((_b2=(_a2=story.parameters.docs)==null?void 0:_a2.source)==null?void 0:_b2.format)??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
 
 `));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story. 
     
@@ -36,7 +36,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
   `),props.ids&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);let sourceContext=(0,import_react43.useContext)(SourceContext),docsContext=(0,import_react43.useContext)(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return import_react43.default.createElement(Source,{...sourceProps})};var import_react44=__toESM(require("react")),import_client_logger7=require("@storybook/client-logger"),import_ts_dedent3=__toESM(require("ts-dedent"));var getStoryId2=(props,context)=>{let{id:id2,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead. 
+  `);let sourceContext=(0,import_react42.useContext)(SourceContext),docsContext=(0,import_react42.useContext)(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return import_react42.default.createElement(Source,{...sourceProps})};var import_react43=__toESM(require("react")),import_client_logger7=require("@storybook/client-logger"),import_ts_dedent3=__toESM(require("ts-dedent"));var getStoryId2=(props,context)=>{let{id:id2,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead. 
     
       Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id2;let{name}=props;return name?((0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`name\` is deprecated, please use \`of\` instead. 
     
@@ -48,7 +48,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
     `);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead. 
     
       Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-    `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,import_react44.useContext)(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return import_react44.default.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?import_react44.default.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=import_react45.Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return{isLoading,previewProps:props};let layout=layoutProp;return import_react45.Children.forEach(children,child=>{var _a,_b;layout||(layout=(_b=(_a=child==null?void 0:child.props)==null?void 0:_a.parameters)==null?void 0:_b.layout)}),stories.forEach(story=>{var _a,_b;layout||!story||(layout=(story==null?void 0:story.parameters.layout)??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout))}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{var _a,_b,_c,_d,_e,_f,_g,_h,_i,_j;let docsContext=(0,import_react45.useContext)(DocsContext),sourceContext=(0,import_react45.useContext)(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]))}catch(error){children||(hookError=error)}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext)}catch(error){children||(hookError=error)}if(hookError)throw hookError;if(props.withSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
+    `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,import_react43.useContext)(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return import_react43.default.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?import_react43.default.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=import_react44.Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return{isLoading,previewProps:props};let layout=layoutProp;return import_react44.Children.forEach(children,child=>{var _a,_b;layout||(layout=(_b=(_a=child==null?void 0:child.props)==null?void 0:_a.parameters)==null?void 0:_b.layout)}),stories.forEach(story=>{var _a,_b;layout||!story||(layout=(story==null?void 0:story.parameters.layout)??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout))}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{var _a,_b,_c,_d,_e,_f,_g,_h,_i,_j;let docsContext=(0,import_react44.useContext)(DocsContext),sourceContext=(0,import_react44.useContext)(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]))}catch(error){children||(hookError=error)}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext)}catch(error){children||(hookError=error)}if(hookError)throw hookError;if(props.withSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
     `),props.mdxSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead. 
@@ -60,7 +60,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
     `),children)return(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
-  `),isLoading?import_react45.default.createElement(PreviewSkeleton,null):import_react45.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react45.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react45.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react47=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react46=require("react"),import_core_events3=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react46.useState)(storyContext.globals);return(0,import_react46.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events3.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events3.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var Controls3=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react47.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react47.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react50=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react49=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react48=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components30=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming26=require("@storybook/theming");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react48.default.useContext(DocsContext);return import_react48.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react48.default.createElement(import_components30.Code,null,children);let language=className&&className.split("-");return import_react48.default.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}var A=import_components30.components.a,AnchorInPage=({hash,children})=>{let context=(0,import_react48.useContext)(DocsContext);return import_react48.default.createElement(A,{href:hash,target:"_self",onClick:event=>{let id2=hash.substring(1);document2.getElementById(id2)&&navigate(context,hash)}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=(0,import_react48.useContext)(DocsContext);if(href){if(href.startsWith("#"))return import_react48.default.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return import_react48.default.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")))},target,...rest},children)}return import_react48.default.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming26.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming26.styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id:id2,children,...rest})=>{let context=(0,import_react48.useContext)(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id2}`;return import_react48.default.createElement(OcticonHeader,{id:id2,...rest},import_react48.default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id2)&&navigate(context,hash)}},import_react48.default.createElement(import_components30.Icons,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id:id2,children,...rest}=props;if(id2)return import_react48.default.createElement(HeaderWithOcticonAnchor,{as,id:id2,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return import_react48.default.createElement(Component4,{...(0,import_components30.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react48.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{var _a;if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent5.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
+  `),isLoading?import_react44.default.createElement(PreviewSkeleton,null):import_react44.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react44.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react44.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react47=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react45=require("react"),import_core_events2=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react45.useState)(storyContext.globals);return(0,import_react45.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react46=require("react"),import_core_events3=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react46.useState)(storyContext.args);(0,import_react46.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react46.useCallback)(updatedArgs=>context.channel.emit(import_core_events3.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react46.useCallback)(argNames=>context.channel.emit(import_core_events3.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react47.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react47.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react50=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react49=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react48=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components30=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming26=require("@storybook/theming");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react48.default.useContext(DocsContext);return import_react48.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react48.default.createElement(import_components30.Code,null,children);let language=className&&className.split("-");return import_react48.default.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}var A=import_components30.components.a,AnchorInPage=({hash,children})=>{let context=(0,import_react48.useContext)(DocsContext);return import_react48.default.createElement(A,{href:hash,target:"_self",onClick:event=>{let id2=hash.substring(1);document2.getElementById(id2)&&navigate(context,hash)}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=(0,import_react48.useContext)(DocsContext);if(href){if(href.startsWith("#"))return import_react48.default.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return import_react48.default.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")))},target,...rest},children)}return import_react48.default.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming26.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming26.styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id:id2,children,...rest})=>{let context=(0,import_react48.useContext)(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id2}`;return import_react48.default.createElement(OcticonHeader,{id:id2,...rest},import_react48.default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id2)&&navigate(context,hash)}},import_react48.default.createElement(import_components30.Icons,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id:id2,children,...rest}=props;if(id2)return import_react48.default.createElement(HeaderWithOcticonAnchor,{as,id:id2,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return import_react48.default.createElement(Component4,{...(0,import_components30.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react48.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{var _a;if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent5.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
         This is often caused by not wrapping the child in a template string.
         
         This is invalid:

package/dist/index.mjs

@@ -41,7 +41,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
             ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=styled(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value));},hasValue=value2!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React17.createElement(RangeWrapper,null,React17.createElement(RangeLabel,null,min),React17.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React17.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};var Wrapper6=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value);},[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value2===void 0)return React17.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React17.createElement(Wrapper6,null,React17.createElement(Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&React17.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=useRef(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2);}return useEffect(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null);},[value2,name]),React17.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=lazy(()=>import('./Color-3YIJY6X7.mjs')),ColorControl=props=>React17.createElement(Suspense,{fallback:React17.createElement("div",null)},React17.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>React17.createElement(React17.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=useState(!1),[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{isFocused||setBoxedValue({value:arg});},[isFocused,arg]);let onChange=useCallback(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable)return React17.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled.span({fontWeight:"bold"}),Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...codeCommon({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),ArgRow=props=>{let{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,description}=row,table=row.table||{},type=table.type||row.type,defaultValue=table.defaultValue||row.defaultValue,required=row.type?.required,hasDescription=description!=null&&description!=="";return React17.createElement("tr",null,React17.createElement(StyledTd,{expandable},React17.createElement(Name,null,name),required?React17.createElement(Required,{title:"Required"},"*"):null),compact?null:React17.createElement("td",null,hasDescription&&React17.createElement(Description,null,React17.createElement(Markdown,null,description)),table.jsDocTags!=null?React17.createElement(React17.Fragment,null,React17.createElement(TypeWithJsDoc,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs})),React17.createElement(ArgJsDoc,{tags:table.jsDocTags})):React17.createElement(Type,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React17.createElement("td",null,React17.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React17.createElement("td",null,React17.createElement(ArgControl,{...props})):null)};var ExpanderIcon=styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=styled.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=styled.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=styled.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=styled.td(()=>({position:"relative"})),StyledTr=styled.tr(({theme})=>({"&:hover > td":{backgroundColor:`${lighten(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=styled.button(()=>({background:"none",border:"none",padding:"0",font:"inherit",position:"absolute",top:0,bottom:0,left:0,right:0,height:"100%",width:"100%",color:"transparent",cursor:"row-resize !important"})),SectionRow=({level="section",label,children,initialExpanded=!0,colSpan=3})=>{let[expanded,setExpanded]=useState(initialExpanded),Level=level==="subsection"?Subsection:Section,itemCount=children?.length||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",icon=expanded?"arrowdown":"arrowright",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return React17.createElement(React17.Fragment,null,React17.createElement(StyledTr,{title:helperText},React17.createElement(Level,{colSpan:1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),React17.createElement(FlexWrapper,null,React17.createElement(ExpanderIcon,{icon}),label)),React17.createElement(StyledTd2,{colSpan:colSpan-1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=styled.table(({theme,compact,inAddonPanel})=>({"&&":{borderSpacing:0,color:theme.color.defaultText,"td, th":{padding:0,border:"none",verticalAlign:"top",textOverflow:"ellipsis"},fontSize:theme.typography.size.s2-1,lineHeight:"20px",textAlign:"left",width:"100%",marginTop:inAddonPanel?0:25,marginBottom:inAddonPanel?0:40,"thead th:first-of-type, td:first-of-type":{width:"25%"},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...compact?null:{width:"35%"}},"td:nth-of-type(3)":{...compact?null:{width:"15%"}},"th:last-of-type, td:last-of-type":{paddingRight:20,...compact?null:{width:"25%"}},th:{color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.45,theme.color.defaultText),paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:"10px",paddingBottom:"10px","&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginLeft:inAddonPanel?0:1,marginRight:inAddonPanel?0:1,tbody:{...inAddonPanel?null:{filter:theme.base==="light"?"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))":"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))"},"> tr > *":{background:theme.background.content,borderTop:`1px solid ${theme.appBorderColor}`},...inAddonPanel?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${theme.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${theme.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${theme.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${theme.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:theme.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:theme.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:theme.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:theme.appBorderRadius}}}}}),({isLoading,theme})=>isLoading?{"th span, td span, td button":{display:"inline",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,color:"transparent",boxShadow:"none",borderRadius:0}}:{}),StyledIconButton=styled(IconButton)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>Number(!!b.type?.required)-Number(!!a.type?.required)||a.name.localeCompare(b.name),none:void 0},rowLoadingData=key=>({key,name:"propertyName",description:"This is a short description",control:{type:"text"},table:{type:{summary:"summary"},defaultValue:{summary:"defaultValue"}}}),argsTableLoadingData={rows:{row1:rowLoadingData("row1"),row2:rowLoadingData("row2"),row3:rowLoadingData("row3")}},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else {let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection;}sections.sections[category]=section;}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection;}else sections.ungrouped.push({key,...row});});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return {ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return includeConditionalArg(row,args,globals)}catch(err){return once.warn(err.message),!1}},ArgsTable=props=>{if("error"in props)return React17.createElement(EmptyBlock,null,props.error,"\xA0",React17.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none"}=props,isLoading="isLoading"in props,{rows,args,globals}="rows"in props?props:argsTableLoadingData,groups=groupRows(pickBy(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args||{},globals||{})),sort);if(groups.ungrouped.length===0&&Object.entries(groups.sections).length===0&&Object.entries(groups.ungroupedSubsections).length===0)return React17.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",React17.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return React17.createElement(ResetWrapper,null,React17.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},React17.createElement("thead",{className:"docblock-argstable-head"},React17.createElement("tr",null,React17.createElement("th",null,React17.createElement("span",null,"Name")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Description")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Default")),updateArgs?React17.createElement("th",null,React17.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React17.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React17.createElement(Icons,{icon:"undo","aria-hidden":!0})))):null)),React17.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React17.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?React17.createElement(ArgsTable,{...entries[0][1],...props}):React17.createElement(TabsState,null,entries.map(entry=>{let[label,table]=entry,id=`prop_table_div_${label}`;return React17.createElement("div",{key:id,id,title:label},({active})=>active?React17.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};var NoControlsWrapper=styled.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>React17.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",React17.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));var Label4=styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),Sample=styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper7=styled.div(withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>React17.createElement(Wrapper7,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>React17.createElement(TypeSpecimen,{key:size},React17.createElement(Label4,null,size),React17.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var ItemTitle=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=styled.div(({theme})=>({color:theme.base==="light"?transparentize(.2,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),ItemDescription=styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=styled.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=styled.div({display:"flex",flexDirection:"row"}),Swatch=styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),display:"flex",flexDirection:"row",height:50,marginBottom:5,overflow:"hidden",backgroundColor:"white",backgroundImage:"repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",backgroundClip:"padding-box"})),SwatchSpecimen=styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches=styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=styled.div({display:"flex",alignItems:"flex-start"}),ListName=styled.div({flex:"0 0 30%"}),ListSwatches=styled.div({flex:1}),ListHeading=styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),List=styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return React17.createElement(Swatch,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return React17.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},React17.createElement("div",null,color,colorDescription&&React17.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),React17.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),React17.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>React17.createElement(Item,null,React17.createElement(ItemDescription,null,React17.createElement(ItemTitle,null,title),React17.createElement(ItemSubtitle,null,subtitle)),React17.createElement(Swatches,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},React17.createElement(ListHeading,null,React17.createElement(ListName,null,"Name"),React17.createElement(ListSwatches,null,"Swatches")),children));var ItemLabel=styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),overflow:"hidden",height:40,width:40,display:"flex",alignItems:"center",justifyContent:"center",flex:"none","> img, > svg":{width:20,height:20}})),Item2=styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>React17.createElement(Item2,null,React17.createElement(ItemSpecimen,null,children),React17.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>React17.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);global&&global.__DOCS_CONTEXT__===void 0&&(global.__DOCS_CONTEXT__=createContext(null),global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=global?global.__DOCS_CONTEXT__:createContext(null);var useOf=(moduleExportOrType,validTypes)=>useContext(DocsContext).resolveOf(moduleExportOrType,validTypes);function extractComponentArgTypes(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}function getArgTypesFromResolved(resolved,props){if(resolved.type==="component"){let{component,projectAnnotations:{parameters:parameters2}}=resolved;return {argTypes:extractComponentArgTypes(component,parameters2),parameters:parameters2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2}}=resolved;return {argTypes:argTypes2,parameters:parameters2}}let{story:{argTypes,parameters}}=resolved;return {argTypes,parameters}}var ArgTypes=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters}=getArgTypesFromResolved(resolved),argTypesParameters=parameters.docs?.argTypes||{},include=props.include??argTypesParameters.include,exclude=props.exclude??argTypesParameters.exclude,sort=props.sort??argTypesParameters.sort,filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,sort})};var PRIMARY_STORY="^";var titleCase=str2=>str2.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"});}function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=useState({});return useEffect(()=>{Promise.all(storyIds.map(async storyId=>{let story=await context.loadStory(storyId);setStories(current=>current[storyId]===story?current:{...current,[storyId]:story});}));}),storyIds.map(storyId=>{if(storiesById[storyId])return storiesById[storyId];try{return context.storyById(storyId)}catch{return null}})}var useArgs=(storyId,context)=>{let storyContext=context.getStoryContext(context.storyById()),[args,setArgs]=useState(storyContext.args);useEffect(()=>{let cb=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,cb),()=>context.channel.off(STORY_ARGS_UPDATED,cb)},[storyId]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return [args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let cb=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,cb),()=>context.channel.off(GLOBALS_UPDATED,cb)},[]),[globals]},extractComponentArgTypes2=(component,parameters,include,exclude)=>{let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");let argTypes=extractArgTypes(component);return argTypes=filterArgTypes(argTypes,include,exclude),argTypes},isShortcut=value2=>value2&&[PRIMARY_STORY].includes(value2),getComponent=(props={},component)=>{let{of}=props,{story}=props;if(isShortcut(of)||isShortcut(story))return component||null;if(!of)throw new Error("No component found.");return of},addComponentTabs=(tabs,components2,parameters,include,exclude,sort)=>({...tabs,...mapValues(components2,comp=>({rows:extractComponentArgTypes2(comp,parameters,include,exclude),sort}))}),StoryTable=props=>{let context=useContext(DocsContext),{story:storyName,component,subcomponents,showComponent,include,exclude,sort}=props;try{let storyId;switch(storyName){case PRIMARY_STORY:{storyId=context.storyById().id;break}default:storyId=context.storyIdByName(storyName);}let story=useStory(storyId,context),[args,updateArgs,resetArgs]=useArgs(storyId,context),[globals]=useGlobals(context);if(!story)return React17.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=filterArgTypes(story.argTypes,include,exclude),mainLabel=getComponentName(component)||"Story",tabs={[mainLabel]:{rows:argTypes,args,globals,updateArgs,resetArgs}},storyHasArgsWithControls=argTypes&&Object.values(argTypes).find(v=>!!v?.control);if(storyHasArgsWithControls||(updateArgs=null,resetArgs=null,tabs={}),component&&(!storyHasArgsWithControls||showComponent)&&(tabs=addComponentTabs(tabs,{[mainLabel]:component},story.parameters,include,exclude)),subcomponents){if(Array.isArray(subcomponents))throw new Error("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");tabs=addComponentTabs(tabs,subcomponents,story.parameters,include,exclude);}return React17.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return React17.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let{components:components2,include,exclude,sort,parameters}=props,tabs=addComponentTabs({},components2,parameters,include,exclude);return React17.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{deprecate(dedent2`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
     
   Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
-  `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id]&&sources[id][hash]&&sources[id][hash].code===source||setSources(current=>{let newSources={...current,[id]:{...current[id],[hash]:{code:source,format:format2}}};return dequal(current,newSources)?current:newSources});};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};function useArgsList(stories,context){return stories.map(story=>useArgsIfDefined(story,context))}var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
+  `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id]&&sources[id][hash]&&sources[id][hash].code===source||setSources(current=>{let newSources={...current,[id]:{...current[id],[hash]:{code:source,format:format2}}};return dequal(current,newSources)?current:newSources});};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
   `),storyContext.parameters.docs?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
@@ -50,7 +50,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
   `),storyContext.parameters.jsx?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `),(transformFromProps??sourceParameters.transform??sourceParameters.transformSource??storyContext.parameters.docs?.transformSource??storyContext.parameters.jsx?.transformSource)?.(code,storyContext)||code},useSourceProps=(props,docsContext,sourceContext)=>{let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()];}catch{}let argsFromStories=useArgsList(stories,docsContext);if(!storiesFromIds.every(Boolean))return {error:"Oh no! The source is not available.",state:"none"};let sourceParameters=stories[0]?.parameters?.docs?.source||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{if(!story)return "";let[args]=argsFromStories[index]||[],storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:args,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??story.parameters.docs?.source?.format??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
+  `),(transformFromProps??sourceParameters.transform??sourceParameters.transformSource??storyContext.parameters.docs?.transformSource??storyContext.parameters.jsx?.transformSource)?.(code,storyContext)||code},useSourceProps=(props,docsContext,sourceContext)=>{let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()];}catch{}if(!storiesFromIds.every(Boolean))return {error:"Oh no! The source is not available.",state:"none"};let sourceParameters=stories[0]?.parameters?.docs?.source||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{if(!story)return "";let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??story.parameters.docs?.source?.format??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
 
 `));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&deprecate(dedent2`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story. 
     
@@ -82,7 +82,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
     `),children)return deprecate(dedent2`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
-  `),isLoading?React17.createElement(PreviewSkeleton,null):React17.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);if(href){if(href.startsWith("#"))return React17.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)}return React17.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17.createElement(Icons,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent2`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
+  `),isLoading?React17.createElement(PreviewSkeleton,null):React17.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);if(href){if(href.startsWith("#"))return React17.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)}return React17.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17.createElement(Icons,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent2`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
         This is often caused by not wrapping the child in a template string.
         
         This is invalid:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "7.0.11",
+  "version": "7.0.12",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -43,17 +43,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.11",
-    "@storybook/client-logger": "7.0.11",
-    "@storybook/components": "7.0.11",
-    "@storybook/core-events": "7.0.11",
+    "@storybook/channels": "7.0.12",
+    "@storybook/client-logger": "7.0.12",
+    "@storybook/components": "7.0.12",
+    "@storybook/core-events": "7.0.12",
     "@storybook/csf": "^0.1.0",
-    "@storybook/docs-tools": "7.0.11",
+    "@storybook/docs-tools": "7.0.12",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.11",
-    "@storybook/preview-api": "7.0.11",
-    "@storybook/theming": "7.0.11",
-    "@storybook/types": "7.0.11",
+    "@storybook/manager-api": "7.0.12",
+    "@storybook/preview-api": "7.0.12",
+    "@storybook/theming": "7.0.12",
+    "@storybook/types": "7.0.12",
     "@types/lodash": "^4.14.167",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
@@ -67,7 +67,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.11",
+    "@storybook/addon-actions": "7.0.12",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
@@ -82,5 +82,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "43e5c1aa449b2438e50b23d72f13155f3c2ab236"
+  "gitHead": "7b73b43500a411f4044d8f78c0c13f48f176fa08"
 }