@storybook/blocks 7.0.0-beta.63 → 7.0.0-beta.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +6 -6
- package/dist/index.mjs +6 -6
- package/package.json +12 -12
package/dist/index.js
CHANGED
|
@@ -16,10 +16,10 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
16
16
|
${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
|
17
17
|
${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
|
18
18
|
${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
|
19
|
-
${(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"}),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(RangeLabel,null,`${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,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,context,include,exclude,sort)=>({...tabs,...(0,import_mapValues.default)(components2,comp=>({rows:extractComponentArgTypes2(comp,context,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},context,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,context,include,exclude)}return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return import_react40.default.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let context=(0,import_react40.useContext)(DocsContext),{components:components2,include,exclude,sort}=props,tabs=addComponentTabs({},components2,context,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.
|
|
19
|
+
${(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"}),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(RangeLabel,null,`${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,context,include,exclude,sort)=>({...tabs,...(0,import_mapValues.default)(components2,comp=>({rows:extractComponentArgTypes2(comp,context,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},context,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,context,include,exclude)}return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return import_react40.default.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let context=(0,import_react40.useContext)(DocsContext),{components:components2,include,exclude,sort}=props,tabs=addComponentTabs({},components2,context,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.
|
|
20
20
|
|
|
21
21
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
|
|
22
|
-
`);let context=(0,import_react40.useContext)(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;({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});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort})};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,story,typeFromProps)=>{var _a,_b;let{__isArgsStory:isArgsStory}=story.parameters,sourceParameters=((_a=story.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||"";return((_b=sourceParameters.transformSource)==null?void 0:_b.call(sourceParameters,code,story))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds;if(props
|
|
22
|
+
`);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});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort})};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,story,typeFromProps)=>{var _a,_b;let{__isArgsStory:isArgsStory}=story.parameters,sourceParameters=((_a=story.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||"";return((_b=sourceParameters.transformSource)==null?void 0:_b.call(sourceParameters,code,story))||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]||[],argsForSource=props.__forceInitialArgs?docsContext.getStoryContext(story).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(source.code,story,props.type)}).join(`
|
|
23
23
|
|
|
24
24
|
`));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.
|
|
25
25
|
|
|
@@ -27,7 +27,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
27
27
|
`),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.
|
|
28
28
|
|
|
29
29
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
|
30
|
-
`);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(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
|
30
|
+
`);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.
|
|
31
31
|
|
|
32
32
|
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.
|
|
33
33
|
|
|
@@ -39,7 +39,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
39
39
|
`);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.
|
|
40
40
|
|
|
41
41
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
|
42
|
-
`),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)
|
|
42
|
+
`),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.
|
|
43
43
|
|
|
44
44
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
45
45
|
`),props.mdxSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
|
@@ -51,7 +51,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
51
51
|
`),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.
|
|
52
52
|
|
|
53
53
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
54
|
-
`),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
|
|
54
|
+
`),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.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}'
|
|
55
55
|
This is often caused by not wrapping the child in a template string.
|
|
56
56
|
|
|
57
57
|
This is invalid:
|
|
@@ -67,6 +67,6 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
67
67
|
A paragraph
|
|
68
68
|
\`}
|
|
69
69
|
</Markdown>
|
|
70
|
-
`);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props
|
|
70
|
+
`);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=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_react50.useContext)(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&(0,import_client_logger9.deprecate)(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&(0,import_client_logger9.deprecate)(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&(0,import_client_logger9.deprecate)(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react60=__toESM(require("react"));var import_react51=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming27=require("@storybook/theming");var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>((0,import_react51.useEffect)(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),import_react51.default.createElement(DocsContext.Provider,{value:context},import_react51.default.createElement(SourceContainer,{channel:context.channel},import_react51.default.createElement(import_theming27.ThemeProvider,{theme:(0,import_theming27.ensure)(theme)},import_react51.default.createElement(DocsPageWrapper,null,children)))));var import_react59=__toESM(require("react"));var import_react52=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title2=({children})=>{let context=(0,import_react52.useContext)(DocsContext),text=children;return text||(text=extractTitle(context.storyById().title)),text?import_react52.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},text):null};var import_react53=__toESM(require("react"));var Subtitle2=({children})=>{let docsContext=(0,import_react53.useContext)(DocsContext),{parameters}=docsContext.storyById(),text=children;return text||(text=parameters==null?void 0:parameters.componentSubtitle),text?import_react53.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},text):null};var import_react56=__toESM(require("react")),import_ts_dedent6=__toESM(require("ts-dedent")),import_client_logger10=require("@storybook/client-logger");var import_react55=__toESM(require("react"));var import_react54=__toESM(require("react")),import_components35=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react54.default.createElement(import_components35.H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react54.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{var _a,_b;let{story}=useOf(of||"story",["story"]),withToolbar=((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.withToolbar)??withToolbarProp;return import_react55.default.createElement(Anchor,{storyId:story.id},expanded&&import_react55.default.createElement(import_react55.default.Fragment,null,import_react55.default.createElement(Subheading,null,story.name),import_react55.default.createElement(DescriptionContainer,{of})),import_react55.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=({name})=>{let docsContext=(0,import_react56.useContext)(DocsContext);name&&(0,import_client_logger10.deprecate)(import_ts_dedent6.default`\`name\` prop is deprecated on the Primary block.
|
|
71
71
|
The Primary block should only be used to render the primary story, which is automatically found.
|
|
72
72
|
`);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react56.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react58=__toESM(require("react")),import_theming28=require("@storybook/theming");var import_react57=__toESM(require("react")),import_components36=require("@storybook/components");var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react57.default.createElement(import_components36.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react57.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming28.styled)(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=(0,import_react58.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react58.default.createElement(import_react58.default.Fragment,null,import_react58.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react58.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(Title2,null),import_react59.default.createElement(Subtitle2,null),import_react59.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react59.default.createElement(DescriptionContainer,{of:"story"}):null,import_react59.default.createElement(Primary,null),import_react59.default.createElement(Controls3,null),isSingleStory?null:import_react59.default.createElement(Stories,null))};var Docs=({docsParameter,context})=>{let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react60.default.createElement(Container,{context,theme:docsParameter.theme},import_react60.default.createElement(Page,null))};var import_react61=__toESM(require("react")),import_preview_api6=require("@storybook/preview-api");var import_preview_api5=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api4=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api4.DocsContext{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends import_preview_api5.Preview{constructor(projectAnnotations){super(new import_channels.Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id:id2,name})=>{this.storyIndex.entries[id2]={id:id2,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>(0,import_preview_api5.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=(0,import_react61.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}var ExternalDocs=({projectAnnotationsList,children})=>{var _a;let projectAnnotations=(0,import_preview_api6.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...(_a=projectAnnotations.parameters)==null?void 0:_a.docs,page:()=>children};return import_react61.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})};var import_react62=__toESM(require("react")),import_theming29=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react62.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react62.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(import_theming29.themes.light)},children)));var import_react63=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react63.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react63.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react64=__toESM(require("react")),Unstyled=props=>import_react64.default.createElement("div",{...props,className:"sb-unstyled"});var import_react65=__toESM(require("react")),Wrapper9=({children})=>import_react65.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NoControlsWarning,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,SourceState,Stories,Story,StoryTable,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps});
|
package/dist/index.mjs
CHANGED
|
@@ -16,10 +16,10 @@ import{getControlId,getControlSetterButtonId}from"./chunk-GWAJ4KRU.mjs";import R
|
|
|
16
16
|
${darken2(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
|
17
17
|
${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
|
18
18
|
${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
|
19
|
-
${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=styled15.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeWrapper=styled15.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=useMemo2(()=>getNumberOfDecimalPlaces(step),[step]);return React20.createElement(RangeWrapper,null,React20.createElement(RangeLabel,null,min),React20.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React20.createElement(RangeLabel,null,`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};import React21,{useCallback as useCallback5,useState as useState8}from"react";import{styled as styled16}from"@storybook/theming";import{Form as Form5}from"@storybook/components";var Wrapper6=styled16.label({display:"flex"}),MaxLength=styled16.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]=useState8(!1),onForceVisible=useCallback5(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return React21.createElement(Form5.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React21.createElement(Wrapper6,null,React21.createElement(Form5.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&&React21.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};import React22,{useEffect as useEffect6,useRef as useRef5}from"react";import{styled as styled17}from"@storybook/theming";import{Form as Form6}from"@storybook/components";var FileInput=styled17(Form6.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=useRef5(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 useEffect6(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),React22.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=>React23.createElement(Suspense,{fallback:React23.createElement("div",null)},React23.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=()=>React24.createElement(React24.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=useState9(!1),[boxedValue,setBoxedValue]=useState9({value:arg});useEffect7(()=>{isFocused||setBoxedValue({value:arg})},[isFocused,arg]);let onChange=useCallback6(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback6(()=>setFocused(!1),[]),onFocus=useCallback6(()=>setFocused(!0),[]);if(!control||control.disable)return React24.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React24.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled18.span({fontWeight:"bold"}),Required=styled18.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled18.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...codeCommon3({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=styled18.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize4(.1,theme.color.defaultText):transparentize4(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled18.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize4(.1,theme.color.defaultText):transparentize4(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled18.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 React25.createElement("tr",null,React25.createElement(StyledTd,{expandable},React25.createElement(Name,null,name),required?React25.createElement(Required,{title:"Required"},"*"):null),compact?null:React25.createElement("td",null,hasDescription&&React25.createElement(Description,null,React25.createElement(Markdown,null,description)),table.jsDocTags!=null?React25.createElement(React25.Fragment,null,React25.createElement(TypeWithJsDoc,{hasDescription},React25.createElement(ArgValue,{value:type,initialExpandedArgs})),React25.createElement(ArgJsDoc,{tags:table.jsDocTags})):React25.createElement(Type,{hasDescription},React25.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React25.createElement("td",null,React25.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React25.createElement("td",null,React25.createElement(ArgControl,{...props})):null)};import React26,{useState as useState10}from"react";import{transparentize as transparentize5,lighten as lighten2}from"polished";import{styled as styled19}from"@storybook/theming";import{Icons as Icons5}from"@storybook/components";var ExpanderIcon=styled19(Icons5)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize5(.25,theme.color.defaultText):transparentize5(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=styled19.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=styled19.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?transparentize5(.4,theme.color.defaultText):transparentize5(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=styled19.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=styled19.td(()=>({position:"relative"})),StyledTr=styled19.tr(({theme})=>({"&:hover > td":{backgroundColor:`${lighten2(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=styled19.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]=useState10(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 React26.createElement(React26.Fragment,null,React26.createElement(StyledTr,{title:helperText},React26.createElement(Level,{colSpan:1},React26.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),React26.createElement(FlexWrapper,null,React26.createElement(ExpanderIcon,{icon}),label)),React26.createElement(StyledTd2,{colSpan:colSpan-1},React26.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=styled20.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"?transparentize6(.25,theme.color.defaultText):transparentize6(.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=styled20(IconButton3)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled20.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 React27.createElement(EmptyBlock,null,props.error,"\xA0",React27.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 React27.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",React27.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 React27.createElement(ResetWrapper,null,React27.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},React27.createElement("thead",{className:"docblock-argstable-head"},React27.createElement("tr",null,React27.createElement("th",null,React27.createElement("span",null,"Name")),compact?null:React27.createElement("th",null,React27.createElement("span",null,"Description")),compact?null:React27.createElement("th",null,React27.createElement("span",null,"Default")),updateArgs?React27.createElement("th",null,React27.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React27.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React27.createElement(Icons6,{icon:"undo","aria-hidden":!0})))):null)),React27.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React27.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React27.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React27.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};import React28 from"react";import{TabsState}from"@storybook/components";var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?React28.createElement(ArgsTable,{...entries[0][1],...props}):React28.createElement(TabsState,null,entries.map(entry=>{let[label,table]=entry,id=`prop_table_div_${label}`;return React28.createElement("div",{key:id,id,title:label},({active})=>active?React28.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};import React29 from"react";import{styled as styled21}from"@storybook/theming";import{Link as Link2}from"@storybook/components";var NoControlsWrapper=styled21.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>React29.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",React29.createElement(Link2,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));import React30 from"react";import{transparentize as transparentize7}from"polished";import{styled as styled22}from"@storybook/theming";import{withReset as withReset3}from"@storybook/components";var Label4=styled22.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?transparentize7(.4,theme.color.defaultText):transparentize7(.6,theme.color.defaultText)})),Sample=styled22.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=styled22.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper7=styled22.div(withReset3,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>React30.createElement(Wrapper7,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>React30.createElement(TypeSpecimen,{key:size},React30.createElement(Label4,null,size),React30.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));import React31 from"react";import{transparentize as transparentize8}from"polished";import{styled as styled23}from"@storybook/theming";import{ResetWrapper as ResetWrapper2}from"@storybook/components";var ItemTitle=styled23.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=styled23.div(({theme})=>({color:theme.base==="light"?transparentize8(.2,theme.color.defaultText):transparentize8(.6,theme.color.defaultText)})),ItemDescription=styled23.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=styled23.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?transparentize8(.4,theme.color.defaultText):transparentize8(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=styled23.div({display:"flex",flexDirection:"row"}),Swatch=styled23.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=styled23.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=styled23.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches=styled23.div({flex:1,display:"flex",flexDirection:"row"}),Item=styled23.div({display:"flex",alignItems:"flex-start"}),ListName=styled23.div({flex:"0 0 30%"}),ListSwatches=styled23.div({flex:1}),ListHeading=styled23.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?transparentize8(.4,theme.color.defaultText):transparentize8(.6,theme.color.defaultText)})),List=styled23.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return React31.createElement(Swatch,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return React31.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},React31.createElement("div",null,color,colorDescription&&React31.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?React31.createElement(SwatchSpecimen,null,React31.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),React31.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):React31.createElement(SwatchSpecimen,null,React31.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),React31.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>React31.createElement(Item,null,React31.createElement(ItemDescription,null,React31.createElement(ItemTitle,null,title),React31.createElement(ItemSubtitle,null,subtitle)),React31.createElement(Swatches,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>React31.createElement(ResetWrapper2,null,React31.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},React31.createElement(ListHeading,null,React31.createElement(ListName,null,"Name"),React31.createElement(ListSwatches,null,"Swatches")),children));import React32 from"react";import{styled as styled24}from"@storybook/theming";import{ResetWrapper as ResetWrapper3}from"@storybook/components";var ItemLabel=styled24.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=styled24.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=styled24.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=styled24.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>React32.createElement(Item2,null,React32.createElement(ItemSpecimen,null,children),React32.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>React32.createElement(ResetWrapper3,null,React32.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));import React33 from"react";var anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>React33.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);import{filterArgTypes}from"@storybook/preview-api";import React34 from"react";import{useContext}from"react";import{createContext as createContext2}from"react";import{global as global5}from"@storybook/global";global5&&global5.__DOCS_CONTEXT__===void 0&&(global5.__DOCS_CONTEXT__=createContext2(null),global5.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=global5?global5.__DOCS_CONTEXT__:createContext2(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,resolved=useOf(of||"meta"),{argTypes,parameters}=getArgTypesFromResolved(resolved,props),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 React34.createElement(ArgsTable,{rows:filteredArgTypes,sort})};import React35,{useContext as useContext2,useEffect as useEffect9,useState as useState12,useCallback as useCallback7}from"react";import mapValues from"lodash/mapValues.js";import{filterArgTypes as filterArgTypes2}from"@storybook/preview-api";import{STORY_ARGS_UPDATED,UPDATE_STORY_ARGS,RESET_STORY_ARGS,GLOBALS_UPDATED}from"@storybook/core-events";import{deprecate}from"@storybook/client-logger";import dedent from"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"})}import{useState as useState11,useEffect as useEffect8}from"react";function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=useState11({});return useEffect8(()=>{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]=useState12(storyContext.args);useEffect9(()=>{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=useCallback7(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=useCallback7(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return[args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=useState12(storyContext.globals);return useEffect9(()=>{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=filterArgTypes2(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,context,include,exclude,sort)=>({...tabs,...mapValues(components2,comp=>({rows:extractComponentArgTypes2(comp,context,include,exclude),sort}))}),StoryTable=props=>{let context=useContext2(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 React35.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=filterArgTypes2(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},context,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,context,include,exclude)}return React35.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return React35.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let context=useContext2(DocsContext),{components:components2,include,exclude,sort}=props,tabs=addComponentTabs({},components2,context,include,exclude);return React35.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{deprecate(dedent`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
|
|
19
|
+
${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=styled15.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeWrapper=styled15.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=useMemo2(()=>getNumberOfDecimalPlaces(step),[step]);return React20.createElement(RangeWrapper,null,React20.createElement(RangeLabel,null,min),React20.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React20.createElement(RangeLabel,null,`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};import React21,{useCallback as useCallback5,useState as useState8}from"react";import{styled as styled16}from"@storybook/theming";import{Form as Form5}from"@storybook/components";var Wrapper6=styled16.label({display:"flex"}),MaxLength=styled16.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]=useState8(!1),onForceVisible=useCallback5(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return React21.createElement(Form5.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React21.createElement(Wrapper6,null,React21.createElement(Form5.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&&React21.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};import React22,{useEffect as useEffect6,useRef as useRef5}from"react";import{styled as styled17}from"@storybook/theming";import{Form as Form6}from"@storybook/components";var FileInput=styled17(Form6.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=useRef5(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 useEffect6(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),React22.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=>React23.createElement(Suspense,{fallback:React23.createElement("div",null)},React23.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=()=>React24.createElement(React24.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=useState9(!1),[boxedValue,setBoxedValue]=useState9({value:arg});useEffect7(()=>{isFocused||setBoxedValue({value:arg})},[isFocused,arg]);let onChange=useCallback6(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback6(()=>setFocused(!1),[]),onFocus=useCallback6(()=>setFocused(!0),[]);if(!control||control.disable)return React24.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React24.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled18.span({fontWeight:"bold"}),Required=styled18.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled18.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...codeCommon3({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=styled18.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize4(.1,theme.color.defaultText):transparentize4(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled18.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize4(.1,theme.color.defaultText):transparentize4(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled18.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 React25.createElement("tr",null,React25.createElement(StyledTd,{expandable},React25.createElement(Name,null,name),required?React25.createElement(Required,{title:"Required"},"*"):null),compact?null:React25.createElement("td",null,hasDescription&&React25.createElement(Description,null,React25.createElement(Markdown,null,description)),table.jsDocTags!=null?React25.createElement(React25.Fragment,null,React25.createElement(TypeWithJsDoc,{hasDescription},React25.createElement(ArgValue,{value:type,initialExpandedArgs})),React25.createElement(ArgJsDoc,{tags:table.jsDocTags})):React25.createElement(Type,{hasDescription},React25.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React25.createElement("td",null,React25.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React25.createElement("td",null,React25.createElement(ArgControl,{...props})):null)};import React26,{useState as useState10}from"react";import{transparentize as transparentize5,lighten as lighten2}from"polished";import{styled as styled19}from"@storybook/theming";import{Icons as Icons5}from"@storybook/components";var ExpanderIcon=styled19(Icons5)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize5(.25,theme.color.defaultText):transparentize5(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=styled19.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=styled19.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?transparentize5(.4,theme.color.defaultText):transparentize5(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=styled19.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=styled19.td(()=>({position:"relative"})),StyledTr=styled19.tr(({theme})=>({"&:hover > td":{backgroundColor:`${lighten2(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=styled19.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]=useState10(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 React26.createElement(React26.Fragment,null,React26.createElement(StyledTr,{title:helperText},React26.createElement(Level,{colSpan:1},React26.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),React26.createElement(FlexWrapper,null,React26.createElement(ExpanderIcon,{icon}),label)),React26.createElement(StyledTd2,{colSpan:colSpan-1},React26.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=styled20.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"?transparentize6(.25,theme.color.defaultText):transparentize6(.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=styled20(IconButton3)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled20.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 React27.createElement(EmptyBlock,null,props.error,"\xA0",React27.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 React27.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",React27.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 React27.createElement(ResetWrapper,null,React27.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},React27.createElement("thead",{className:"docblock-argstable-head"},React27.createElement("tr",null,React27.createElement("th",null,React27.createElement("span",null,"Name")),compact?null:React27.createElement("th",null,React27.createElement("span",null,"Description")),compact?null:React27.createElement("th",null,React27.createElement("span",null,"Default")),updateArgs?React27.createElement("th",null,React27.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React27.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React27.createElement(Icons6,{icon:"undo","aria-hidden":!0})))):null)),React27.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React27.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React27.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React27.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React27.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};import React28 from"react";import{TabsState}from"@storybook/components";var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?React28.createElement(ArgsTable,{...entries[0][1],...props}):React28.createElement(TabsState,null,entries.map(entry=>{let[label,table]=entry,id=`prop_table_div_${label}`;return React28.createElement("div",{key:id,id,title:label},({active})=>active?React28.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};import React29 from"react";import{styled as styled21}from"@storybook/theming";import{Link as Link2}from"@storybook/components";var NoControlsWrapper=styled21.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>React29.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",React29.createElement(Link2,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));import React30 from"react";import{transparentize as transparentize7}from"polished";import{styled as styled22}from"@storybook/theming";import{withReset as withReset3}from"@storybook/components";var Label4=styled22.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?transparentize7(.4,theme.color.defaultText):transparentize7(.6,theme.color.defaultText)})),Sample=styled22.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=styled22.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper7=styled22.div(withReset3,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>React30.createElement(Wrapper7,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>React30.createElement(TypeSpecimen,{key:size},React30.createElement(Label4,null,size),React30.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));import React31 from"react";import{transparentize as transparentize8}from"polished";import{styled as styled23}from"@storybook/theming";import{ResetWrapper as ResetWrapper2}from"@storybook/components";var ItemTitle=styled23.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=styled23.div(({theme})=>({color:theme.base==="light"?transparentize8(.2,theme.color.defaultText):transparentize8(.6,theme.color.defaultText)})),ItemDescription=styled23.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=styled23.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?transparentize8(.4,theme.color.defaultText):transparentize8(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=styled23.div({display:"flex",flexDirection:"row"}),Swatch=styled23.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=styled23.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=styled23.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches=styled23.div({flex:1,display:"flex",flexDirection:"row"}),Item=styled23.div({display:"flex",alignItems:"flex-start"}),ListName=styled23.div({flex:"0 0 30%"}),ListSwatches=styled23.div({flex:1}),ListHeading=styled23.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?transparentize8(.4,theme.color.defaultText):transparentize8(.6,theme.color.defaultText)})),List=styled23.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return React31.createElement(Swatch,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return React31.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},React31.createElement("div",null,color,colorDescription&&React31.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?React31.createElement(SwatchSpecimen,null,React31.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),React31.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):React31.createElement(SwatchSpecimen,null,React31.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),React31.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>React31.createElement(Item,null,React31.createElement(ItemDescription,null,React31.createElement(ItemTitle,null,title),React31.createElement(ItemSubtitle,null,subtitle)),React31.createElement(Swatches,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>React31.createElement(ResetWrapper2,null,React31.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},React31.createElement(ListHeading,null,React31.createElement(ListName,null,"Name"),React31.createElement(ListSwatches,null,"Swatches")),children));import React32 from"react";import{styled as styled24}from"@storybook/theming";import{ResetWrapper as ResetWrapper3}from"@storybook/components";var ItemLabel=styled24.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=styled24.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=styled24.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=styled24.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>React32.createElement(Item2,null,React32.createElement(ItemSpecimen,null,children),React32.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>React32.createElement(ResetWrapper3,null,React32.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));import React33 from"react";var anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>React33.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);import{filterArgTypes}from"@storybook/preview-api";import React34 from"react";import{useContext}from"react";import{createContext as createContext2}from"react";import{global as global5}from"@storybook/global";global5&&global5.__DOCS_CONTEXT__===void 0&&(global5.__DOCS_CONTEXT__=createContext2(null),global5.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=global5?global5.__DOCS_CONTEXT__:createContext2(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,props),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 React34.createElement(ArgsTable,{rows:filteredArgTypes,sort})};import React35,{useContext as useContext2,useEffect as useEffect9,useState as useState12,useCallback as useCallback7}from"react";import mapValues from"lodash/mapValues.js";import{filterArgTypes as filterArgTypes2}from"@storybook/preview-api";import{STORY_ARGS_UPDATED,UPDATE_STORY_ARGS,RESET_STORY_ARGS,GLOBALS_UPDATED}from"@storybook/core-events";import{deprecate}from"@storybook/client-logger";import dedent from"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"})}import{useState as useState11,useEffect as useEffect8}from"react";function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=useState11({});return useEffect8(()=>{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]=useState12(storyContext.args);useEffect9(()=>{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=useCallback7(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=useCallback7(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return[args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=useState12(storyContext.globals);return useEffect9(()=>{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=filterArgTypes2(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,context,include,exclude,sort)=>({...tabs,...mapValues(components2,comp=>({rows:extractComponentArgTypes2(comp,context,include,exclude),sort}))}),StoryTable=props=>{let context=useContext2(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 React35.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=filterArgTypes2(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},context,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,context,include,exclude)}return React35.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return React35.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let context=useContext2(DocsContext),{components:components2,include,exclude,sort}=props,tabs=addComponentTabs({},components2,context,include,exclude);return React35.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{deprecate(dedent`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
|
|
20
20
|
|
|
21
21
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
|
|
22
|
-
`);let context=useContext2(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;({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 React35.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 React35.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React35.createElement(ComponentsTable,{...props,components:components2,sort});let mainLabel=getComponentName(main);return React35.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort})};ArgsTable2.defaultProps={of:PRIMARY_STORY};import React39,{Children as Children2,useContext as useContext5}from"react";import{deprecate as deprecate4}from"@storybook/client-logger";import dedent4 from"ts-dedent";import React36,{createContext as createContext3,useEffect as useEffect10,useState as useState13}from"react";import{dequal as deepEqual}from"dequal";import{SNIPPET_RENDERED}from"@storybook/docs-tools";import{stringify}from"telejson";function argsHash(args){return stringify(args)}var SourceContext=createContext3({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState13({});return useEffect10(()=>{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 deepEqual(current,newSources)?current:newSources})};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React36.createElement(SourceContext.Provider,{value:{sources}},children)};import React37,{useContext as useContext3}from"react";import{SourceType}from"@storybook/docs-tools";import{deprecate as deprecate2}from"@storybook/client-logger";import dedent2 from"ts-dedent";import{useCallback as useCallback8,useEffect as useEffect11,useState as useState14}from"react";import{STORY_ARGS_UPDATED as STORY_ARGS_UPDATED2,UPDATE_STORY_ARGS as UPDATE_STORY_ARGS2,RESET_STORY_ARGS as RESET_STORY_ARGS2}from"@storybook/core-events";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]=useState14(storyContext.args);useEffect11(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(STORY_ARGS_UPDATED2,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED2,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback8(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS2,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback8(argNames=>context.channel.emit(RESET_STORY_ARGS2,{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,story,typeFromProps)=>{let{__isArgsStory:isArgsStory}=story.parameters,sourceParameters=story.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?.(code,story)||code},useSourceProps=(props,docsContext,sourceContext)=>{let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds;if(props
|
|
22
|
+
`);let context=useContext2(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 React35.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 React35.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React35.createElement(ComponentsTable,{...props,components:components2,sort});let mainLabel=getComponentName(main);return React35.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort})};ArgsTable2.defaultProps={of:PRIMARY_STORY};import React39,{Children as Children2,useContext as useContext5}from"react";import{deprecate as deprecate4}from"@storybook/client-logger";import dedent4 from"ts-dedent";import React36,{createContext as createContext3,useEffect as useEffect10,useState as useState13}from"react";import{dequal as deepEqual}from"dequal";import{SNIPPET_RENDERED}from"@storybook/docs-tools";import{stringify}from"telejson";function argsHash(args){return stringify(args)}var SourceContext=createContext3({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState13({});return useEffect10(()=>{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 deepEqual(current,newSources)?current:newSources})};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React36.createElement(SourceContext.Provider,{value:{sources}},children)};import React37,{useContext as useContext3}from"react";import{SourceType}from"@storybook/docs-tools";import{deprecate as deprecate2}from"@storybook/client-logger";import dedent2 from"ts-dedent";import{useCallback as useCallback8,useEffect as useEffect11,useState as useState14}from"react";import{STORY_ARGS_UPDATED as STORY_ARGS_UPDATED2,UPDATE_STORY_ARGS as UPDATE_STORY_ARGS2,RESET_STORY_ARGS as RESET_STORY_ARGS2}from"@storybook/core-events";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]=useState14(storyContext.args);useEffect11(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(STORY_ARGS_UPDATED2,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED2,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback8(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS2,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback8(argNames=>context.channel.emit(RESET_STORY_ARGS2,{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,story,typeFromProps)=>{let{__isArgsStory:isArgsStory}=story.parameters,sourceParameters=story.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?.(code,story)||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]||[],argsForSource=props.__forceInitialArgs?docsContext.getStoryContext(story).initialArgs:args,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??story.parameters.docs?.source?.format??!1),getSnippet(source.code,story,props.type)}).join(`
|
|
23
23
|
|
|
24
24
|
`));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&&deprecate2(dedent2`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
|
25
25
|
|
|
@@ -27,7 +27,7 @@ import{getControlId,getControlSetterButtonId}from"./chunk-GWAJ4KRU.mjs";import R
|
|
|
27
27
|
`),props.ids&&deprecate2(dedent2`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
|
28
28
|
|
|
29
29
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
|
30
|
-
`);let sourceContext=useContext3(SourceContext),docsContext=useContext3(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return React37.createElement(Source,{...sourceProps})};import React38,{useContext as useContext4}from"react";import{deprecate as deprecate3}from"@storybook/client-logger";import dedent3 from"ts-dedent";var getStoryId2=(props,context)=>{let{id,of,meta,story}=props;if(id)return deprecate3(dedent3`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
|
30
|
+
`);let sourceContext=useContext3(SourceContext),docsContext=useContext3(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return React37.createElement(Source,{...sourceProps})};import React38,{useContext as useContext4}from"react";import{deprecate as deprecate3}from"@storybook/client-logger";import dedent3 from"ts-dedent";var getStoryId2=(props,context)=>{let{id,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(id)return deprecate3(dedent3`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
|
31
31
|
|
|
32
32
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id;let{name}=props;return name?(deprecate3(dedent3`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
|
33
33
|
|
|
@@ -39,7 +39,7 @@ import{getControlId,getControlSetterButtonId}from"./chunk-GWAJ4KRU.mjs";import R
|
|
|
39
39
|
`);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&deprecate3(dedent3`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
|
40
40
|
|
|
41
41
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
|
42
|
-
`),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=useContext4(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return React38.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?React38.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=Children2.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)
|
|
42
|
+
`),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=useContext4(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return React38.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?React38.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=Children2.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 Children2.forEach(children,child=>{layout||(layout=child?.props?.parameters?.layout)}),stories.forEach(story=>{layout||!story||(layout=story?.parameters.layout??story.parameters.docs?.canvas?.layout)}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{let docsContext=useContext5(DocsContext),sourceContext=useContext5(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&&deprecate4(dedent4`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
|
43
43
|
|
|
44
44
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
45
45
|
`),props.mdxSource&&deprecate4(dedent4`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
|
@@ -51,7 +51,7 @@ import{getControlId,getControlSetterButtonId}from"./chunk-GWAJ4KRU.mjs";import R
|
|
|
51
51
|
`),children)return deprecate4(dedent4`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
|
52
52
|
|
|
53
53
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
54
|
-
`),isLoading?React39.createElement(PreviewSkeleton,null):React39.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 React39.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React39.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};import React40,{useContext as useContext6}from"react";import{filterArgTypes as filterArgTypes3}from"@storybook/preview-api";import{useEffect as useEffect12,useState as useState15}from"react";import{GLOBALS_UPDATED as GLOBALS_UPDATED2}from"@storybook/core-events";var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState15(storyContext.globals);return useEffect12(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(GLOBALS_UPDATED2,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED2,onGlobalsUpdated)},[context.channel]),[globals]};var Controls3=props=>{let{of}=props
|
|
54
|
+
`),isLoading?React39.createElement(PreviewSkeleton,null):React39.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 React39.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React39.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};import React40,{useContext as useContext6}from"react";import{filterArgTypes as filterArgTypes3}from"@storybook/preview-api";import{useEffect as useEffect12,useState as useState15}from"react";import{GLOBALS_UPDATED as GLOBALS_UPDATED2}from"@storybook/core-events";var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState15(storyContext.globals);return useEffect12(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(GLOBALS_UPDATED2,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED2,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=useContext6(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=filterArgTypes3(argTypes,include,exclude);return React40.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};import React43,{useContext as useContext8}from"react";import{str}from"@storybook/docs-tools";import{deprecate as deprecate5}from"@storybook/client-logger";import React42 from"react";import PureMarkdown from"markdown-to-jsx";import dedent5 from"ts-dedent";import React41,{useContext as useContext7}from"react";import{NAVIGATE_URL}from"@storybook/core-events";import{Code,components,Icons as Icons7,nameSpaceClassNames}from"@storybook/components";import{global as global6}from"@storybook/global";import{styled as styled25}from"@storybook/theming";var{document:document2}=global6,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React41.useContext(DocsContext);return React41.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React41.createElement(Code,null,children);let language=className&&className.split("-");return React41.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=useContext7(DocsContext);return React41.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=useContext7(DocsContext);if(href){if(href.startsWith("#"))return React41.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React41.createElement(A,{href,onClick:event=>{event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href"))},target,...rest},children)}return React41.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled25(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled25.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext7(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React41.createElement(OcticonHeader,{id,...rest},React41.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash)}},React41.createElement(Icons7,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React41.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React41.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React41.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent5`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
|
|
55
55
|
This is often caused by not wrapping the child in a template string.
|
|
56
56
|
|
|
57
57
|
This is invalid:
|
|
@@ -67,6 +67,6 @@ import{getControlId,getControlSetterButtonId}from"./chunk-GWAJ4KRU.mjs";import R
|
|
|
67
67
|
A paragraph
|
|
68
68
|
\`}
|
|
69
69
|
</Markdown>
|
|
70
|
-
`);return React42.createElement(PureMarkdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:str(notes.markdown)||str(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:str(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&deprecate5(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description?.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props
|
|
70
|
+
`);return React42.createElement(PureMarkdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:str(notes.markdown)||str(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:str(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&deprecate5(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description?.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext8(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&deprecate5(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&deprecate5(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&deprecate5(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?React43.createElement(Markdown2,null,markdown):null};import React53 from"react";import React44,{useEffect as useEffect13}from"react";import{global as global7}from"@storybook/global";import{ThemeProvider as ThemeProvider2,ensure as ensureTheme}from"@storybook/theming";var{document:document3,window:globalWindow3}=global7,DocsContainer=({context,theme,children})=>(useEffect13(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),React44.createElement(DocsContext.Provider,{value:context},React44.createElement(SourceContainer,{channel:context.channel},React44.createElement(ThemeProvider2,{theme:ensureTheme(theme)},React44.createElement(DocsPageWrapper,null,children)))));import React52 from"react";import React45,{useContext as useContext9}from"react";var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title2=({children})=>{let context=useContext9(DocsContext),text=children;return text||(text=extractTitle(context.storyById().title)),text?React45.createElement(Title,{className:"sbdocs-title sb-unstyled"},text):null};import React46,{useContext as useContext10}from"react";var Subtitle2=({children})=>{let docsContext=useContext10(DocsContext),{parameters}=docsContext.storyById(),text=children;return text||(text=parameters?.componentSubtitle),text?React46.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},text):null};import React49,{useContext as useContext11}from"react";import dedent6 from"ts-dedent";import{deprecate as deprecate6}from"@storybook/client-logger";import React48 from"react";import React47 from"react";import{H3}from"@storybook/components";var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return React47.createElement(H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React47.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{let{story}=useOf(of||"story",["story"]),withToolbar=story.parameters.docs?.canvas?.withToolbar??withToolbarProp;return React48.createElement(Anchor,{storyId:story.id},expanded&&React48.createElement(React48.Fragment,null,React48.createElement(Subheading,null,story.name),React48.createElement(DescriptionContainer,{of})),React48.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=({name})=>{let docsContext=useContext11(DocsContext);name&&deprecate6(dedent6`\`name\` prop is deprecated on the Primary block.
|
|
71
71
|
The Primary block should only be used to render the primary story, which is automatically found.
|
|
72
72
|
`);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?React49.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};import React51,{useContext as useContext12}from"react";import{styled as styled26}from"@storybook/theming";import React50 from"react";import{H2}from"@storybook/components";var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React50.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React50.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=styled26(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=useContext12(DocsContext),stories=componentStories().filter(story=>!story.parameters?.docs?.disable);return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:React51.createElement(React51.Fragment,null,React51.createElement(StyledHeading,null,title),stories.map(story=>story&&React51.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return React52.createElement(React52.Fragment,null,React52.createElement(Title2,null),React52.createElement(Subtitle2,null),React52.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?React52.createElement(DescriptionContainer,{of:"story"}):null,React52.createElement(Primary,null),React52.createElement(Controls3,null),isSingleStory?null:React52.createElement(Stories,null))};var Docs=({docsParameter,context})=>{let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return React53.createElement(Container,{context,theme:docsParameter.theme},React53.createElement(Page,null))};import React54,{useRef as useRef6}from"react";import{composeConfigs as composeConfigs2}from"@storybook/preview-api";import{Preview as Preview2,composeConfigs}from"@storybook/preview-api";import{Channel}from"@storybook/channels";import{DocsContext as DocsContext2}from"@storybook/preview-api";var ExternalDocsContext=class extends DocsContext2{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends Preview2{constructor(projectAnnotations){super(new Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id,name})=>{this.storyIndex.entries[id]={id,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>composeConfigs([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=useRef6();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}var ExternalDocs=({projectAnnotationsList,children})=>{let projectAnnotations=composeConfigs2(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...projectAnnotations.parameters?.docs,page:()=>children};return React54.createElement(Docs,{docsParameter,context:preview2.docsContext()})};import React55 from"react";import{ThemeProvider as ThemeProvider3,themes as themes2,ensure}from"@storybook/theming";var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),React55.createElement(DocsContext.Provider,{value:preview.docsContext()},React55.createElement(ThemeProvider3,{theme:ensure(themes2.light)},children)));import React56,{useContext as useContext13}from"react";var Meta=({of})=>{let context=useContext13(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return React56.createElement(Anchor,{storyId:primary.id})}catch{return null}};import React57 from"react";var Unstyled=props=>React57.createElement("div",{...props,className:"sb-unstyled"});import React58 from"react";var Wrapper8=({children})=>React58.createElement("div",{style:{fontFamily:"sans-serif"}},children);export{AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable2 as ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls3 as Controls,DateControl,DescriptionContainer as Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown2 as Markdown,Meta,NoControlsWarning,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,ArgsTable as PureArgsTable,RangeControl,Source2 as Source,SourceContainer,SourceContext,SourceState,Stories,Story2 as Story,StoryTable,Subheading,Subtitle2 as Subtitle,TextControl,Title2 as Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper8 as Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes2 as extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId2 as getStoryId,getStoryProps,parse2 as parse,parseDate,parseTime,useOf,useSourceProps};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/blocks",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.64",
|
|
4
4
|
"description": "Storybook Doc Blocks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -43,17 +43,17 @@
|
|
|
43
43
|
"prep": "../../../scripts/prepare/bundle.ts"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@storybook/channels": "7.0.0-beta.
|
|
47
|
-
"@storybook/client-logger": "7.0.0-beta.
|
|
48
|
-
"@storybook/components": "7.0.0-beta.
|
|
49
|
-
"@storybook/core-events": "7.0.0-beta.
|
|
46
|
+
"@storybook/channels": "7.0.0-beta.64",
|
|
47
|
+
"@storybook/client-logger": "7.0.0-beta.64",
|
|
48
|
+
"@storybook/components": "7.0.0-beta.64",
|
|
49
|
+
"@storybook/core-events": "7.0.0-beta.64",
|
|
50
50
|
"@storybook/csf": "next",
|
|
51
|
-
"@storybook/docs-tools": "7.0.0-beta.
|
|
51
|
+
"@storybook/docs-tools": "7.0.0-beta.64",
|
|
52
52
|
"@storybook/global": "^5.0.0",
|
|
53
|
-
"@storybook/manager-api": "7.0.0-beta.
|
|
54
|
-
"@storybook/preview-api": "7.0.0-beta.
|
|
55
|
-
"@storybook/theming": "7.0.0-beta.
|
|
56
|
-
"@storybook/types": "7.0.0-beta.
|
|
53
|
+
"@storybook/manager-api": "7.0.0-beta.64",
|
|
54
|
+
"@storybook/preview-api": "7.0.0-beta.64",
|
|
55
|
+
"@storybook/theming": "7.0.0-beta.64",
|
|
56
|
+
"@storybook/types": "7.0.0-beta.64",
|
|
57
57
|
"@types/lodash": "^4.14.167",
|
|
58
58
|
"color-convert": "^2.0.1",
|
|
59
59
|
"dequal": "^2.0.2",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"util-deprecate": "^1.0.2"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@storybook/addon-actions": "7.0.0-beta.
|
|
70
|
+
"@storybook/addon-actions": "7.0.0-beta.64",
|
|
71
71
|
"@types/color-convert": "^2.0.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"./src/index.ts"
|
|
83
83
|
]
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "f33337d997ae5db03f3b7681cffe0a154e1798f3"
|
|
86
86
|
}
|