@storybook/blocks 7.0.18 → 7.0.20

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.
Files changed (3) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.mjs +1 -2
  3. package/package.json +12 -12
package/dist/index.js CHANGED
@@ -19,7 +19,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
19
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"}),RangeCurrentAndMaxLabel=(0,import_theming15.styled)(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=import_theming15.styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value))},hasValue=value2!==void 0,numberOFDecimalsPlaces=(0,import_react21.useMemo)(()=>getNumberOfDecimalPlaces(step),[step]);return import_react21.default.createElement(RangeWrapper,null,import_react21.default.createElement(RangeLabel,null,min),import_react21.default.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),import_react21.default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};var import_react22=__toESM(require("react")),import_theming16=require("@storybook/theming"),import_components14=require("@storybook/components");init_helpers();var Wrapper6=import_theming16.styled.label({display:"flex"}),MaxLength=import_theming16.styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value)},[forceVisible,setForceVisible]=(0,import_react22.useState)(!1),onForceVisible=(0,import_react22.useCallback)(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return import_react22.default.createElement(import_components14.Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return import_react22.default.createElement(Wrapper6,null,import_react22.default.createElement(import_components14.Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&import_react22.default.createElement(MaxLength,{isMaxed:(value2==null?void 0:value2.length)===maxLength},(value2==null?void 0:value2.length)??0," / ",maxLength))};var import_react23=__toESM(require("react")),import_theming17=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();var FileInput=(0,import_theming17.styled)(import_components15.Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url)})}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=(0,import_react23.useRef)(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2)}return(0,import_react23.useEffect)(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),import_react23.default.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=(0,import_react25.lazy)(()=>Promise.resolve().then(()=>(init_Color(),Color_exports))),ColorControl2=props=>import_react25.default.createElement(import_react25.Suspense,{fallback:import_react25.default.createElement("div",null)},import_react25.default.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl2,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>import_react26.default.createElement(import_react26.default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=(0,import_react26.useState)(!1),[boxedValue,setBoxedValue]=(0,import_react26.useState)({value:arg});(0,import_react26.useEffect)(()=>{isFocused||setBoxedValue({value:arg})},[isFocused,arg]);let onChange=(0,import_react26.useCallback)(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=(0,import_react26.useCallback)(()=>setFocused(!1),[]),onFocus=(0,import_react26.useCallback)(()=>setFocused(!0),[]);if(!control||control.disable)return import_react26.default.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return import_react26.default.createElement(Control,{...props,...control,controlType:control.type})};var Name=import_theming19.styled.span({fontWeight:"bold"}),Required=import_theming19.styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=import_theming19.styled.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...(0,import_components17.codeCommon)({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=import_theming19.styled.div(({theme,hasDescription})=>({color:theme.base==="light"?(0,import_polished6.transparentize)(.1,theme.color.defaultText):(0,import_polished6.transparentize)(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=import_theming19.styled.div(({theme,hasDescription})=>({color:theme.base==="light"?(0,import_polished6.transparentize)(.1,theme.color.defaultText):(0,import_polished6.transparentize)(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=import_theming19.styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),ArgRow=props=>{var _a;let{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,description}=row,table=row.table||{},type=table.type||row.type,defaultValue=table.defaultValue||row.defaultValue,required=(_a=row.type)==null?void 0:_a.required,hasDescription=description!=null&&description!=="";return import_react27.default.createElement("tr",null,import_react27.default.createElement(StyledTd,{expandable},import_react27.default.createElement(Name,null,name),required?import_react27.default.createElement(Required,{title:"Required"},"*"):null),compact?null:import_react27.default.createElement("td",null,hasDescription&&import_react27.default.createElement(Description,null,import_react27.default.createElement(import_markdown_to_jsx.default,null,description)),table.jsDocTags!=null?import_react27.default.createElement(import_react27.default.Fragment,null,import_react27.default.createElement(TypeWithJsDoc,{hasDescription},import_react27.default.createElement(ArgValue,{value:type,initialExpandedArgs})),import_react27.default.createElement(ArgJsDoc,{tags:table.jsDocTags})):import_react27.default.createElement(Type,{hasDescription},import_react27.default.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:import_react27.default.createElement("td",null,import_react27.default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?import_react27.default.createElement("td",null,import_react27.default.createElement(ArgControl,{...props})):null)};var import_react28=__toESM(require("react")),import_polished7=require("polished"),import_theming20=require("@storybook/theming"),import_components18=require("@storybook/components"),ExpanderIcon=(0,import_theming20.styled)(import_components18.Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?(0,import_polished7.transparentize)(.25,theme.color.defaultText):(0,import_polished7.transparentize)(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=import_theming20.styled.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=import_theming20.styled.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?(0,import_polished7.transparentize)(.4,theme.color.defaultText):(0,import_polished7.transparentize)(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=import_theming20.styled.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=import_theming20.styled.td(()=>({position:"relative"})),StyledTr=import_theming20.styled.tr(({theme})=>({"&:hover > td":{backgroundColor:`${(0,import_polished7.lighten)(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=import_theming20.styled.button(()=>({background:"none",border:"none",padding:"0",font:"inherit",position:"absolute",top:0,bottom:0,left:0,right:0,height:"100%",width:"100%",color:"transparent",cursor:"row-resize !important"})),SectionRow=({level="section",label,children,initialExpanded=!0,colSpan=3})=>{let[expanded,setExpanded]=(0,import_react28.useState)(initialExpanded),Level=level==="subsection"?Subsection:Section,itemCount=(children==null?void 0:children.length)||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",icon=expanded?"arrowdown":"arrowright",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return import_react28.default.createElement(import_react28.default.Fragment,null,import_react28.default.createElement(StyledTr,{title:helperText},import_react28.default.createElement(Level,{colSpan:1},import_react28.default.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),import_react28.default.createElement(FlexWrapper,null,import_react28.default.createElement(ExpanderIcon,{icon}),label)),import_react28.default.createElement(StyledTd2,{colSpan:colSpan-1},import_react28.default.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=import_theming21.styled.table(({theme,compact,inAddonPanel})=>({"&&":{borderSpacing:0,color:theme.color.defaultText,"td, th":{padding:0,border:"none",verticalAlign:"top",textOverflow:"ellipsis"},fontSize:theme.typography.size.s2-1,lineHeight:"20px",textAlign:"left",width:"100%",marginTop:inAddonPanel?0:25,marginBottom:inAddonPanel?0:40,"thead th:first-of-type, td:first-of-type":{width:"25%"},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...compact?null:{width:"35%"}},"td:nth-of-type(3)":{...compact?null:{width:"15%"}},"th:last-of-type, td:last-of-type":{paddingRight:20,...compact?null:{width:"25%"}},th:{color:theme.base==="light"?(0,import_polished8.transparentize)(.25,theme.color.defaultText):(0,import_polished8.transparentize)(.45,theme.color.defaultText),paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:"10px",paddingBottom:"10px","&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginLeft:inAddonPanel?0:1,marginRight:inAddonPanel?0:1,tbody:{...inAddonPanel?null:{filter:theme.base==="light"?"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))":"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))"},"> tr > *":{background:theme.background.content,borderTop:`1px solid ${theme.appBorderColor}`},...inAddonPanel?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${theme.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${theme.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${theme.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${theme.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:theme.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:theme.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:theme.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:theme.appBorderRadius}}}}}),({isLoading,theme})=>isLoading?{"th span, td span, td button":{display:"inline",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,color:"transparent",boxShadow:"none",borderRadius:0}}:{}),StyledIconButton=(0,import_theming21.styled)(import_components19.IconButton)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=import_theming21.styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>{var _a,_b;return Number(!!((_a=b.type)!=null&&_a.required))-Number(!!((_b=a.type)!=null&&_b.required))||a.name.localeCompare(b.name)},none:void 0},rowLoadingData=key=>({key,name:"propertyName",description:"This is a short description",control:{type:"text"},table:{type:{summary:"summary"},defaultValue:{summary:"defaultValue"}}}),argsTableLoadingData={rows:{row1:rowLoadingData("row1"),row2:rowLoadingData("row2"),row3:rowLoadingData("row3")}},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=(row==null?void 0:row.table)||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else{let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection}sections.sections[category]=section}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection}else sections.ungrouped.push({key,...row})});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return{ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return(0,import_csf.includeConditionalArg)(row,args,globals)}catch(err){return import_client_logger4.once.warn(err.message),!1}},ArgsTable=props=>{if("error"in props)return import_react29.default.createElement(EmptyBlock,null,props.error,"\xA0",import_react29.default.createElement(import_components19.Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none"}=props,isLoading="isLoading"in props,{rows,args,globals}="rows"in props?props:argsTableLoadingData,groups=groupRows((0,import_pickBy.default)(rows,row=>{var _a;return!((_a=row==null?void 0:row.table)!=null&&_a.disable)&&safeIncludeConditionalArg(row,args||{},globals||{})}),sort);if(groups.ungrouped.length===0&&Object.entries(groups.sections).length===0&&Object.entries(groups.ungroupedSubsections).length===0)return import_react29.default.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",import_react29.default.createElement(import_components19.Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return import_react29.default.createElement(import_components19.ResetWrapper,null,import_react29.default.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},import_react29.default.createElement("thead",{className:"docblock-argstable-head"},import_react29.default.createElement("tr",null,import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Name")),compact?null:import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Description")),compact?null:import_react29.default.createElement("th",null,import_react29.default.createElement("span",null,"Default")),updateArgs?import_react29.default.createElement("th",null,import_react29.default.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&import_react29.default.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},import_react29.default.createElement(import_components19.Icons,{icon:"undo","aria-hidden":!0})))):null)),import_react29.default.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>import_react29.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>import_react29.default.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>import_react29.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react29.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var import_react30=__toESM(require("react")),import_components20=require("@storybook/components");var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?import_react30.default.createElement(ArgsTable,{...entries[0][1],...props}):import_react30.default.createElement(import_components20.TabsState,null,entries.map(entry=>{let[label,table]=entry,id2=`prop_table_div_${label}`;return import_react30.default.createElement("div",{key:id2,id:id2,title:label},({active})=>active?import_react30.default.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};var import_react31=__toESM(require("react")),import_theming22=require("@storybook/theming"),import_components21=require("@storybook/components"),NoControlsWrapper=import_theming22.styled.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>import_react31.default.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",import_react31.default.createElement(import_components21.Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));var import_react32=__toESM(require("react")),import_polished9=require("polished"),import_theming23=require("@storybook/theming"),import_components22=require("@storybook/components");var Label4=import_theming23.styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?(0,import_polished9.transparentize)(.4,theme.color.defaultText):(0,import_polished9.transparentize)(.6,theme.color.defaultText)})),Sample=import_theming23.styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=import_theming23.styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper8=import_theming23.styled.div(import_components22.withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>import_react32.default.createElement(Wrapper8,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>import_react32.default.createElement(TypeSpecimen,{key:size},import_react32.default.createElement(Label4,null,size),import_react32.default.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var import_react33=__toESM(require("react")),import_polished10=require("polished"),import_theming24=require("@storybook/theming"),import_components23=require("@storybook/components");var ItemTitle=import_theming24.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=import_theming24.styled.div(({theme})=>({color:theme.base==="light"?(0,import_polished10.transparentize)(.2,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText)})),ItemDescription=import_theming24.styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=import_theming24.styled.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?(0,import_polished10.transparentize)(.4,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=import_theming24.styled.div({display:"flex",flexDirection:"row"}),Swatch2=import_theming24.styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=import_theming24.styled.div(({theme})=>({...getBlockBackgroundStyle(theme),display:"flex",flexDirection:"row",height:50,marginBottom:5,overflow:"hidden",backgroundColor:"white",backgroundImage:"repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",backgroundClip:"padding-box"})),SwatchSpecimen=import_theming24.styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches2=import_theming24.styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=import_theming24.styled.div({display:"flex",alignItems:"flex-start"}),ListName=import_theming24.styled.div({flex:"0 0 30%"}),ListSwatches=import_theming24.styled.div({flex:1}),ListHeading=import_theming24.styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?(0,import_polished10.transparentize)(.4,theme.color.defaultText):(0,import_polished10.transparentize)(.6,theme.color.defaultText)})),List=import_theming24.styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return import_react33.default.createElement(Swatch2,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return import_react33.default.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},import_react33.default.createElement("div",null,color,colorDescription&&import_react33.default.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?import_react33.default.createElement(SwatchSpecimen,null,import_react33.default.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),import_react33.default.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):import_react33.default.createElement(SwatchSpecimen,null,import_react33.default.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),import_react33.default.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>import_react33.default.createElement(Item,null,import_react33.default.createElement(ItemDescription,null,import_react33.default.createElement(ItemTitle,null,title),import_react33.default.createElement(ItemSubtitle,null,subtitle)),import_react33.default.createElement(Swatches2,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>import_react33.default.createElement(import_components23.ResetWrapper,null,import_react33.default.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},import_react33.default.createElement(ListHeading,null,import_react33.default.createElement(ListName,null,"Name"),import_react33.default.createElement(ListSwatches,null,"Swatches")),children));var import_react34=__toESM(require("react")),import_theming25=require("@storybook/theming"),import_components24=require("@storybook/components");var ItemLabel=import_theming25.styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=import_theming25.styled.div(({theme})=>({...getBlockBackgroundStyle(theme),overflow:"hidden",height:40,width:40,display:"flex",alignItems:"center",justifyContent:"center",flex:"none","> img, > svg":{width:20,height:20}})),Item2=import_theming25.styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=import_theming25.styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>import_react34.default.createElement(Item2,null,import_react34.default.createElement(ItemSpecimen,null,children),import_react34.default.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>import_react34.default.createElement(import_components24.ResetWrapper,null,import_react34.default.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var import_react35=__toESM(require("react")),anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>import_react35.default.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);var import_preview_api=require("@storybook/preview-api"),import_react38=__toESM(require("react"));var import_react37=require("react");var import_react36=require("react"),import_global5=require("@storybook/global");import_global5.global&&import_global5.global.__DOCS_CONTEXT__===void 0&&(import_global5.global.__DOCS_CONTEXT__=(0,import_react36.createContext)(null),import_global5.global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=import_global5.global?import_global5.global.__DOCS_CONTEXT__:(0,import_react36.createContext)(null);var useOf=(moduleExportOrType,validTypes)=>(0,import_react37.useContext)(DocsContext).resolveOf(moduleExportOrType,validTypes);function extractComponentArgTypes(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}function getArgTypesFromResolved(resolved,props){if(resolved.type==="component"){let{component,projectAnnotations:{parameters:parameters2}}=resolved;return{argTypes:extractComponentArgTypes(component,parameters2),parameters:parameters2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2}}=resolved;return{argTypes:argTypes2,parameters:parameters2}}let{story:{argTypes,parameters}}=resolved;return{argTypes,parameters}}var ArgTypes=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters}=getArgTypesFromResolved(resolved,props),argTypesParameters=((_a=parameters.docs)==null?void 0:_a.argTypes)||{},include=props.include??argTypesParameters.include,exclude=props.exclude??argTypesParameters.exclude,sort=props.sort??argTypesParameters.sort,filteredArgTypes=(0,import_preview_api.filterArgTypes)(argTypes,include,exclude);return import_react38.default.createElement(ArgsTable,{rows:filteredArgTypes,sort})};var import_react40=__toESM(require("react")),import_mapValues=__toESM(require("lodash/mapValues.js")),import_preview_api2=require("@storybook/preview-api"),import_core_events=require("@storybook/core-events"),import_client_logger5=require("@storybook/client-logger"),import_ts_dedent=__toESM(require("ts-dedent"));var PRIMARY_STORY="^";var titleCase=str2=>str2.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"})}var import_react39=require("react");function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=(0,import_react39.useState)({});return(0,import_react39.useEffect)(()=>{Promise.all(storyIds.map(async storyId=>{let story=await context.loadStory(storyId);setStories(current=>current[storyId]===story?current:{...current,[storyId]:story})}))}),storyIds.map(storyId=>{if(storiesById[storyId])return storiesById[storyId];try{return context.storyById(storyId)}catch{return null}})}var useArgs=(storyId,context)=>{let storyContext=context.getStoryContext(context.storyById()),[args,setArgs]=(0,import_react40.useState)(storyContext.args);(0,import_react40.useEffect)(()=>{let cb=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events.STORY_ARGS_UPDATED,cb),()=>context.channel.off(import_core_events.STORY_ARGS_UPDATED,cb)},[storyId]);let updateArgs=(0,import_react40.useCallback)(updatedArgs=>context.channel.emit(import_core_events.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=(0,import_react40.useCallback)(argNames=>context.channel.emit(import_core_events.RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return[args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=(0,import_react40.useState)(storyContext.globals);return(0,import_react40.useEffect)(()=>{let cb=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events.GLOBALS_UPDATED,cb),()=>context.channel.off(import_core_events.GLOBALS_UPDATED,cb)},[]),[globals]},extractComponentArgTypes2=(component,parameters,include,exclude)=>{let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");let argTypes=extractArgTypes(component);return argTypes=(0,import_preview_api2.filterArgTypes)(argTypes,include,exclude),argTypes},isShortcut=value2=>value2&&[PRIMARY_STORY].includes(value2),getComponent=(props={},component)=>{let{of}=props,{story}=props;if(isShortcut(of)||isShortcut(story))return component||null;if(!of)throw new Error("No component found.");return of},addComponentTabs=(tabs,components2,parameters,include,exclude,sort)=>({...tabs,...(0,import_mapValues.default)(components2,comp=>({rows:extractComponentArgTypes2(comp,parameters,include,exclude),sort}))}),StoryTable=props=>{let context=(0,import_react40.useContext)(DocsContext),{story:storyName,component,subcomponents,showComponent,include,exclude,sort}=props;try{let storyId;switch(storyName){case PRIMARY_STORY:{storyId=context.storyById().id;break}default:storyId=context.storyIdByName(storyName)}let story=useStory(storyId,context),[args,updateArgs,resetArgs]=useArgs(storyId,context),[globals]=useGlobals(context);if(!story)return import_react40.default.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=(0,import_preview_api2.filterArgTypes)(story.argTypes,include,exclude),mainLabel=getComponentName(component)||"Story",tabs={[mainLabel]:{rows:argTypes,args,globals,updateArgs,resetArgs}},storyHasArgsWithControls=argTypes&&Object.values(argTypes).find(v=>!!(v!=null&&v.control));if(storyHasArgsWithControls||(updateArgs=null,resetArgs=null,tabs={}),component&&(!storyHasArgsWithControls||showComponent)&&(tabs=addComponentTabs(tabs,{[mainLabel]:component},story.parameters,include,exclude)),subcomponents){if(Array.isArray(subcomponents))throw new Error("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");tabs=addComponentTabs(tabs,subcomponents,story.parameters,include,exclude)}return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return import_react40.default.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let{components:components2,include,exclude,sort,parameters}=props,tabs=addComponentTabs({},components2,parameters,include,exclude);return import_react40.default.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{var _a;(0,import_client_logger5.deprecate)(import_ts_dedent.default`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
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;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]))}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||((_a=parameters.controls)==null?void 0:_a.sort),main=getComponent(props,component);if(storyName)return import_react40.default.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)}}catch(err){mainProps={error:err.message}}return import_react40.default.createElement(ArgsTable,{...mainProps,sort})}if(components2)return import_react40.default.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react44=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react41=__toESM(require("react")),import_dequal=require("dequal"),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args)}var SourceContext=(0,import_react41.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react41.useState)({});return(0,import_react41.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id2]&&sources[id2][hash]&&sources[id2][hash].code===source||setSources(current=>{let newSources={...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}};return(0,import_dequal.dequal)(current,newSources)?current:newSources})};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react41.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react42=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
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,parameters});let mainLabel=getComponentName(main);return import_react40.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react44=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react41=__toESM(require("react")),import_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;setSources(current=>({...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}}))};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react41.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react42=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
23
23
 
24
24
  Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
25
25
  `),(_b=storyContext.parameters.docs)!=null&&_b.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
package/dist/index.mjs CHANGED
@@ -15,7 +15,6 @@ import { filterArgTypes, composeConfigs, Preview as Preview$1, DocsContext as Do
15
15
  import mapValues from 'lodash/mapValues.js';
16
16
  import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS, GLOBALS_UPDATED, NAVIGATE_URL } from '@storybook/core-events';
17
17
  import dedent2 from 'ts-dedent';
18
- import { dequal } from 'dequal';
19
18
  import { SNIPPET_RENDERED, SourceType, str } from '@storybook/docs-tools';
20
19
  import { stringify } from 'telejson';
21
20
  import { Channel } from '@storybook/channels';
@@ -41,7 +40,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
41
40
  ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=styled(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value));},hasValue=value2!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React17.createElement(RangeWrapper,null,React17.createElement(RangeLabel,null,min),React17.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React17.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},`${hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"}`," / ",max))};var Wrapper6=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value);},[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value2===void 0)return React17.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React17.createElement(Wrapper6,null,React17.createElement(Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&React17.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=useRef(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2);}return useEffect(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null);},[value2,name]),React17.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=lazy(()=>import('./Color-3YIJY6X7.mjs')),ColorControl=props=>React17.createElement(Suspense,{fallback:React17.createElement("div",null)},React17.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>React17.createElement(React17.Fragment,null,"-"),ArgControl=({row,arg,updateArgs})=>{let{key,control}=row,[isFocused,setFocused]=useState(!1),[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{isFocused||setBoxedValue({value:arg});},[isFocused,arg]);let onChange=useCallback(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable)return React17.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled.span({fontWeight:"bold"}),Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...codeCommon({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),ArgRow=props=>{let{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,description}=row,table=row.table||{},type=table.type||row.type,defaultValue=table.defaultValue||row.defaultValue,required=row.type?.required,hasDescription=description!=null&&description!=="";return React17.createElement("tr",null,React17.createElement(StyledTd,{expandable},React17.createElement(Name,null,name),required?React17.createElement(Required,{title:"Required"},"*"):null),compact?null:React17.createElement("td",null,hasDescription&&React17.createElement(Description,null,React17.createElement(Markdown,null,description)),table.jsDocTags!=null?React17.createElement(React17.Fragment,null,React17.createElement(TypeWithJsDoc,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs})),React17.createElement(ArgJsDoc,{tags:table.jsDocTags})):React17.createElement(Type,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React17.createElement("td",null,React17.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React17.createElement("td",null,React17.createElement(ArgControl,{...props})):null)};var ExpanderIcon=styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=styled.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=styled.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=styled.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=styled.td(()=>({position:"relative"})),StyledTr=styled.tr(({theme})=>({"&:hover > td":{backgroundColor:`${lighten(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=styled.button(()=>({background:"none",border:"none",padding:"0",font:"inherit",position:"absolute",top:0,bottom:0,left:0,right:0,height:"100%",width:"100%",color:"transparent",cursor:"row-resize !important"})),SectionRow=({level="section",label,children,initialExpanded=!0,colSpan=3})=>{let[expanded,setExpanded]=useState(initialExpanded),Level=level==="subsection"?Subsection:Section,itemCount=children?.length||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",icon=expanded?"arrowdown":"arrowright",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return React17.createElement(React17.Fragment,null,React17.createElement(StyledTr,{title:helperText},React17.createElement(Level,{colSpan:1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),React17.createElement(FlexWrapper,null,React17.createElement(ExpanderIcon,{icon}),label)),React17.createElement(StyledTd2,{colSpan:colSpan-1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var TableWrapper=styled.table(({theme,compact,inAddonPanel})=>({"&&":{borderSpacing:0,color:theme.color.defaultText,"td, th":{padding:0,border:"none",verticalAlign:"top",textOverflow:"ellipsis"},fontSize:theme.typography.size.s2-1,lineHeight:"20px",textAlign:"left",width:"100%",marginTop:inAddonPanel?0:25,marginBottom:inAddonPanel?0:40,"thead th:first-of-type, td:first-of-type":{width:"25%"},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...compact?null:{width:"35%"}},"td:nth-of-type(3)":{...compact?null:{width:"15%"}},"th:last-of-type, td:last-of-type":{paddingRight:20,...compact?null:{width:"25%"}},th:{color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.45,theme.color.defaultText),paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:"10px",paddingBottom:"10px","&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginLeft:inAddonPanel?0:1,marginRight:inAddonPanel?0:1,tbody:{...inAddonPanel?null:{filter:theme.base==="light"?"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))":"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))"},"> tr > *":{background:theme.background.content,borderTop:`1px solid ${theme.appBorderColor}`},...inAddonPanel?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${theme.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${theme.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${theme.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${theme.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:theme.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:theme.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:theme.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:theme.appBorderRadius}}}}}),({isLoading,theme})=>isLoading?{"th span, td span, td button":{display:"inline",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,color:"transparent",boxShadow:"none",borderRadius:0}}:{}),StyledIconButton=styled(IconButton)(({theme})=>({color:theme.barTextColor,margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>Number(!!b.type?.required)-Number(!!a.type?.required)||a.name.localeCompare(b.name),none:void 0},rowLoadingData=key=>({key,name:"propertyName",description:"This is a short description",control:{type:"text"},table:{type:{summary:"summary"},defaultValue:{summary:"defaultValue"}}}),argsTableLoadingData={rows:{row1:rowLoadingData("row1"),row2:rowLoadingData("row2"),row3:rowLoadingData("row3")}},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else {let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection;}sections.sections[category]=section;}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection;}else sections.ungrouped.push({key,...row});});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return {ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return includeConditionalArg(row,args,globals)}catch(err){return once.warn(err.message),!1}},ArgsTable=props=>{if("error"in props)return React17.createElement(EmptyBlock,null,props.error,"\xA0",React17.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none"}=props,isLoading="isLoading"in props,{rows,args,globals}="rows"in props?props:argsTableLoadingData,groups=groupRows(pickBy(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args||{},globals||{})),sort);if(groups.ungrouped.length===0&&Object.entries(groups.sections).length===0&&Object.entries(groups.ungroupedSubsections).length===0)return React17.createElement(EmptyBlock,null,"No inputs found for this component.\xA0",React17.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},"Read the docs"));let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return React17.createElement(ResetWrapper,null,React17.createElement(TableWrapper,{"aria-hidden":isLoading,compact,inAddonPanel,isLoading,className:"docblock-argstable sb-unstyled"},React17.createElement("thead",{className:"docblock-argstable-head"},React17.createElement("tr",null,React17.createElement("th",null,React17.createElement("span",null,"Name")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Description")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Default")),updateArgs?React17.createElement("th",null,React17.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React17.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React17.createElement(Icons,{icon:"undo","aria-hidden":!0})))):null)),React17.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React17.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?React17.createElement(ArgsTable,{...entries[0][1],...props}):React17.createElement(TabsState,null,entries.map(entry=>{let[label,table]=entry,id=`prop_table_div_${label}`;return React17.createElement("div",{key:id,id,title:label},({active})=>active?React17.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...props}):null)}))};var NoControlsWrapper=styled.div(({theme})=>({background:theme.background.warning,color:theme.color.darkest,padding:"10px 15px",lineHeight:"20px",boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`})),NoControlsWarning=()=>React17.createElement(NoControlsWrapper,null,"This story is not configured to handle controls."," ",React17.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",cancel:!1,withArrow:!0},"Learn how to add controls"));var Label4=styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),Sample=styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper7=styled.div(withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>React17.createElement(Wrapper7,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>React17.createElement(TypeSpecimen,{key:size},React17.createElement(Label4,null,size),React17.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var ItemTitle=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=styled.div(({theme})=>({color:theme.base==="light"?transparentize(.2,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),ItemDescription=styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=styled.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=styled.div({display:"flex",flexDirection:"row"}),Swatch=styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),display:"flex",flexDirection:"row",height:50,marginBottom:5,overflow:"hidden",backgroundColor:"white",backgroundImage:"repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",backgroundClip:"padding-box"})),SwatchSpecimen=styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches=styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=styled.div({display:"flex",alignItems:"flex-start"}),ListName=styled.div({flex:"0 0 30%"}),ListSwatches=styled.div({flex:1}),ListHeading=styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),List=styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return React17.createElement(Swatch,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return React17.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},React17.createElement("div",null,color,colorDescription&&React17.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){return Array.isArray(colors)?React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),React17.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index)))):React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,Object.values(colors).map((color,index)=>renderSwatch(color,index))),React17.createElement(SwatchLabels,null,Object.keys(colors).map((color,index)=>renderSwatchLabel(color,index,colors[color]))))}var ColorItem=({title,subtitle,colors})=>React17.createElement(Item,null,React17.createElement(ItemDescription,null,React17.createElement(ItemTitle,null,title),React17.createElement(ItemSubtitle,null,subtitle)),React17.createElement(Swatches,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},React17.createElement(ListHeading,null,React17.createElement(ListName,null,"Name"),React17.createElement(ListSwatches,null,"Swatches")),children));var ItemLabel=styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),overflow:"hidden",height:40,width:40,display:"flex",alignItems:"center",justifyContent:"center",flex:"none","> img, > svg":{width:20,height:20}})),Item2=styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>React17.createElement(Item2,null,React17.createElement(ItemSpecimen,null,children),React17.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>React17.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);global&&global.__DOCS_CONTEXT__===void 0&&(global.__DOCS_CONTEXT__=createContext(null),global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=global?global.__DOCS_CONTEXT__:createContext(null);var useOf=(moduleExportOrType,validTypes)=>useContext(DocsContext).resolveOf(moduleExportOrType,validTypes);function extractComponentArgTypes(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}function getArgTypesFromResolved(resolved,props){if(resolved.type==="component"){let{component,projectAnnotations:{parameters:parameters2}}=resolved;return {argTypes:extractComponentArgTypes(component,parameters2),parameters:parameters2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2}}=resolved;return {argTypes:argTypes2,parameters:parameters2}}let{story:{argTypes,parameters}}=resolved;return {argTypes,parameters}}var ArgTypes=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters}=getArgTypesFromResolved(resolved),argTypesParameters=parameters.docs?.argTypes||{},include=props.include??argTypesParameters.include,exclude=props.exclude??argTypesParameters.exclude,sort=props.sort??argTypesParameters.sort,filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,sort})};var PRIMARY_STORY="^";var titleCase=str2=>str2.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"});}function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=useState({});return useEffect(()=>{Promise.all(storyIds.map(async storyId=>{let story=await context.loadStory(storyId);setStories(current=>current[storyId]===story?current:{...current,[storyId]:story});}));}),storyIds.map(storyId=>{if(storiesById[storyId])return storiesById[storyId];try{return context.storyById(storyId)}catch{return null}})}var useArgs=(storyId,context)=>{let storyContext=context.getStoryContext(context.storyById()),[args,setArgs]=useState(storyContext.args);useEffect(()=>{let cb=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,cb),()=>context.channel.off(STORY_ARGS_UPDATED,cb)},[storyId]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId]);return [args,updateArgs,resetArgs]},useGlobals=context=>{let storyContext=context.getStoryContext(context.storyById()),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let cb=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,cb),()=>context.channel.off(GLOBALS_UPDATED,cb)},[]),[globals]},extractComponentArgTypes2=(component,parameters,include,exclude)=>{let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");let argTypes=extractArgTypes(component);return argTypes=filterArgTypes(argTypes,include,exclude),argTypes},isShortcut=value2=>value2&&[PRIMARY_STORY].includes(value2),getComponent=(props={},component)=>{let{of}=props,{story}=props;if(isShortcut(of)||isShortcut(story))return component||null;if(!of)throw new Error("No component found.");return of},addComponentTabs=(tabs,components2,parameters,include,exclude,sort)=>({...tabs,...mapValues(components2,comp=>({rows:extractComponentArgTypes2(comp,parameters,include,exclude),sort}))}),StoryTable=props=>{let context=useContext(DocsContext),{story:storyName,component,subcomponents,showComponent,include,exclude,sort}=props;try{let storyId;switch(storyName){case PRIMARY_STORY:{storyId=context.storyById().id;break}default:storyId=context.storyIdByName(storyName);}let story=useStory(storyId,context),[args,updateArgs,resetArgs]=useArgs(storyId,context),[globals]=useGlobals(context);if(!story)return React17.createElement(ArgsTable,{isLoading:!0,updateArgs,resetArgs});let argTypes=filterArgTypes(story.argTypes,include,exclude),mainLabel=getComponentName(component)||"Story",tabs={[mainLabel]:{rows:argTypes,args,globals,updateArgs,resetArgs}},storyHasArgsWithControls=argTypes&&Object.values(argTypes).find(v=>!!v?.control);if(storyHasArgsWithControls||(updateArgs=null,resetArgs=null,tabs={}),component&&(!storyHasArgsWithControls||showComponent)&&(tabs=addComponentTabs(tabs,{[mainLabel]:component},story.parameters,include,exclude)),subcomponents){if(Array.isArray(subcomponents))throw new Error("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");tabs=addComponentTabs(tabs,subcomponents,story.parameters,include,exclude);}return React17.createElement(TabbedArgsTable,{tabs,sort})}catch(err){return React17.createElement(ArgsTable,{error:err.message})}},ComponentsTable=props=>{let{components:components2,include,exclude,sort,parameters}=props,tabs=addComponentTabs({},components2,parameters,include,exclude);return React17.createElement(TabbedArgsTable,{tabs,sort})},ArgsTable2=props=>{deprecate(dedent2`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
42
41
 
43
42
  Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
44
- `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;sources[id]&&sources[id][hash]&&sources[id][hash].code===source||setSources(current=>{let newSources={...current,[id]:{...current[id],[hash]:{code:source,format:format2}}};return dequal(current,newSources)?current:newSources});};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
43
+ `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id]:{...current[id],[hash]:{code:source,format:format2}}}));};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
45
44
 
46
45
  Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
47
46
  `),storyContext.parameters.docs?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/blocks",
3
- "version": "7.0.18",
3
+ "version": "7.0.20",
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.18",
47
- "@storybook/client-logger": "7.0.18",
48
- "@storybook/components": "7.0.18",
49
- "@storybook/core-events": "7.0.18",
46
+ "@storybook/channels": "7.0.20",
47
+ "@storybook/client-logger": "7.0.20",
48
+ "@storybook/components": "7.0.20",
49
+ "@storybook/core-events": "7.0.20",
50
50
  "@storybook/csf": "^0.1.0",
51
- "@storybook/docs-tools": "7.0.18",
51
+ "@storybook/docs-tools": "7.0.20",
52
52
  "@storybook/global": "^5.0.0",
53
- "@storybook/manager-api": "7.0.18",
54
- "@storybook/preview-api": "7.0.18",
55
- "@storybook/theming": "7.0.18",
56
- "@storybook/types": "7.0.18",
53
+ "@storybook/manager-api": "7.0.20",
54
+ "@storybook/preview-api": "7.0.20",
55
+ "@storybook/theming": "7.0.20",
56
+ "@storybook/types": "7.0.20",
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.18",
70
+ "@storybook/addon-actions": "7.0.20",
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": "8edc25418ec52a0ff223860677716303df7cb09f"
85
+ "gitHead": "9fb2573aa274f3f69d3358050e8df9c903e8245f"
86
86
  }