@storybook/addon-controls 8.3.0-alpha.1 → 8.3.0-alpha.3
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/manager.js +1 -1
- package/package.json +3 -3
package/dist/manager.js
CHANGED
|
@@ -198,4 +198,4 @@ To pass a single animation please supply them in simple values, e.g. animation('
|
|
|
198
198
|
${curriedDarken$1(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
|
199
199
|
${theme.color.green} 0%, ${theme.color.green} ${(value22-min)/(max-min)*100}%,
|
|
200
200
|
${curriedLighten$1(.02,theme.input.background)} ${(value22-min)/(max-min)*100}%,
|
|
201
|
-
${curriedLighten$1(.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","[aria-readonly=true] &":{opacity:.5}}),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:name2,value:value22,onChange,min=0,max=100,step=1,onBlur,onFocus,argType})=>{let handleChange=event=>{onChange(parse22(event.target.value));},hasValue=value22!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]),readonly=!!argType?.table?.readonly;return React17__default.createElement(RangeWrapper,{"aria-readonly":readonly},React17__default.createElement(RangeLabel,null,min),React17__default.createElement(RangeInput,{id:getControlId(name2),type:"range",disabled:readonly,onChange:handleChange,name:name2,value:value22,min,max,step,onFocus,onBlur}),React17__default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value22.toFixed(numberOFDecimalsPlaces):"--"," / ",max))},Wrapper7=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name:name2,value:value22,onChange,onFocus,onBlur,maxLength,argType})=>{let handleChange=event=>{onChange(event.target.value);},readonly=!!argType?.table?.readonly,[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value22===void 0)return React17__default.createElement(Button,{variant:"outline",size:"medium",disabled:readonly,id:getControlSetterButtonId(name2),onClick:onForceVisible},"Set string");let isValid=typeof value22=="string";return React17__default.createElement(Wrapper7,null,React17__default.createElement(Form.Textarea,{id:getControlId(name2),maxLength,onChange:handleChange,disabled:readonly,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name:name2,value:isValid?value22:"",onFocus,onBlur}),maxLength&&React17__default.createElement(MaxLength,{isMaxed:value22?.length===maxLength},value22?.length??0," / ",maxLength))},FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name:name2,accept="image/*",value:value22,argType})=>{let inputElement=useRef(null),readonly=argType?.control?.readOnly;function handleFileChange(e2){if(!e2.target.files)return;let fileUrls=Array.from(e2.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value22);}return useEffect(()=>{value22==null&&inputElement.current&&(inputElement.current.value=null);},[value22,name2]),React17__default.createElement(FileInput,{ref:inputElement,id:getControlId(name2),type:"file",name:name2,multiple:!0,disabled:readonly,onChange:handleFileChange,accept,size:"flex"})},LazyColorControl=lazy(()=>import('./Color-KGDBMAHA-KKVYPLVP.js')),ColorControl=props=>React17__default.createElement(Suspense,{fallback:React17__default.createElement("div",null)},React17__default.createElement(LazyColorControl,{...props})),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__default.createElement(React17__default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key:key2,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({[key2]:argVal}),argVal),[updateArgs,key2]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable){let canBeSetup=control?.disable!==!0&&row?.type?.name!=="function";return isHovered&&canBeSetup?React17__default.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):React17__default.createElement(NoControl,null)}let props={name:key2,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17__default.createElement(Control,{...props,...control,controlType:control.type})},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"?curriedTransparentize$1(.1,theme.color.defaultText):curriedTransparentize$1(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?curriedTransparentize$1(.1,theme.color.defaultText):curriedTransparentize$1(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),toSummary=value22=>value22&&{summary:typeof value22=="string"?value22:value22.name},ArgRow=props=>{let[isHovered,setIsHovered]=useState(!1),{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name:name2,description}=row,table=row.table||{},type=table.type||toSummary(row.type),defaultValue=table.defaultValue||row.defaultValue,required=row.type?.required,hasDescription=description!=null&&description!=="";return React17__default.createElement("tr",{onMouseEnter:()=>setIsHovered(!0),onMouseLeave:()=>setIsHovered(!1)},React17__default.createElement(StyledTd,{expandable},React17__default.createElement(Name,null,name2),required?React17__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React17__default.createElement("td",null,hasDescription&&React17__default.createElement(Description,null,React17__default.createElement(index_modern_default,null,description)),table.jsDocTags!=null?React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(TypeWithJsDoc,{hasDescription},React17__default.createElement(ArgValue,{value:type,initialExpandedArgs})),React17__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React17__default.createElement(Type,{hasDescription},React17__default.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React17__default.createElement("td",null,React17__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React17__default.createElement("td",null,React17__default.createElement(ArgControl,{...props,isHovered})):null)},ExpanderIconDown=styled(ChevronDownIcon$1)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.3,theme.color.defaultText),border:"none",display:"inline-block"})),ExpanderIconRight=styled(ChevronRightIcon)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.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"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.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:`${curriedLighten$1(.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":""}`:"",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(StyledTr,{title:helperText},React17__default.createElement(Level,{colSpan:1},React17__default.createElement(ClickIntercept,{onClick:e2=>setExpanded(!expanded),tabIndex:0},helperText),React17__default.createElement(FlexWrapper,null,expanded?React17__default.createElement(ExpanderIconDown,null):React17__default.createElement(ExpanderIconRight,null),label)),React17__default.createElement(StyledTd2,{colSpan:colSpan-1},React17__default.createElement(ClickIntercept,{onClick:e2=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)},Row=styled.div(({theme})=>({display:"flex",gap:16,borderBottom:`1px solid ${theme.appBorderColor}`,"&:last-child":{borderBottom:0}})),Column=styled.div(({numColumn})=>({display:"flex",flexDirection:"column",flex:numColumn||1,gap:5,padding:"12px 20px"})),SkeletonText=styled.div(({theme,width,height})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,width:width||"100%",height:height||16,borderRadius:3})),columnWidth=[2,4,2,2],Skeleton=()=>React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"})))),Wrapper8=styled.div(({inAddonPanel,theme})=>({height:inAddonPanel?"100%":"auto",display:"flex",border:inAddonPanel?"none":`1px solid ${theme.appBorderColor}`,borderRadius:inAddonPanel?0:theme.appBorderRadius,padding:inAddonPanel?0:40,alignItems:"center",justifyContent:"center",flexDirection:"column",gap:15,background:theme.background.content,boxShadow:"rgba(0, 0, 0, 0.10) 0 1px 3px 0"})),Links=styled.div(({theme})=>({display:"flex",fontSize:theme.typography.size.s2-1,gap:25})),Divider=styled.div(({theme})=>({width:1,height:16,backgroundColor:theme.appBorderColor})),Empty=({inAddonPanel})=>{let[isLoading,setIsLoading]=useState(!0);return useEffect(()=>{let load=setTimeout(()=>{setIsLoading(!1);},100);return ()=>clearTimeout(load)},[]),isLoading?null:React17__default.createElement(Wrapper8,{inAddonPanel},React17__default.createElement(EmptyTabContent,{title:inAddonPanel?"Interactive story playground":"Args table with interactive controls couldn't be auto-generated",description:React17__default.createElement(React17__default.Fragment,null,"Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically."),footer:React17__default.createElement(Links,null,inAddonPanel&&React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(Link,{href:"https://youtu.be/0gOfS6K0x0E",target:"_blank",withArrow:!0},React17__default.createElement(VideoIcon,null)," Watch 5m video"),React17__default.createElement(Divider,null),React17__default.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Read docs")),!inAddonPanel&&React17__default.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Learn how to set that up"))}))},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"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.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}}}}})),StyledIconButton=styled(IconButton)(({theme})=>({margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled.span({display:"flex",justifyContent:"space-between"}),sortFns={alpha:(a2,b2)=>a2.name.localeCompare(b2.name),requiredFirst:(a2,b2)=>+!!b2.type?.required-+!!a2.type?.required||a2.name.localeCompare(b2.name),none:void 0},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key2,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key:key2,...row});else {let subsection=section.subsections[subcategory]||[];subsection.push({key:key2,...row}),section.subsections[subcategory]=subsection;}sections.sections[category]=section;}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key:key2,...row}),sections.ungroupedSubsections[subcategory]=subsection;}else sections.ungrouped.push({key:key2,...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,args2,globals)=>{try{return P(row,args2,globals)}catch(err){return once.warn(err.message),!1}},ArgsTable=props=>{let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none",isLoading}=props;if("error"in props){let{error}=props;return React17__default.createElement(EmptyBlock,null,error,"\xA0",React17__default.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Read the docs"))}if(isLoading)return React17__default.createElement(Skeleton,null);let{rows,args:args2,globals}="rows"in props&&props,groups=groupRows(pickBy(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args2||{},globals||{})),sort),hasNoUngrouped=groups.ungrouped.length===0,hasNoSections=Object.entries(groups.sections).length===0,hasNoUngroupedSubsections=Object.entries(groups.ungroupedSubsections).length===0;if(hasNoUngrouped&&hasNoSections&&hasNoUngroupedSubsections)return React17__default.createElement(Empty,{inAddonPanel});let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return React17__default.createElement(ResetWrapper,null,React17__default.createElement(TableWrapper,{compact,inAddonPanel,className:"docblock-argstable sb-unstyled"},React17__default.createElement("thead",{className:"docblock-argstable-head"},React17__default.createElement("tr",null,React17__default.createElement("th",null,React17__default.createElement("span",null,"Name")),compact?null:React17__default.createElement("th",null,React17__default.createElement("span",null,"Description")),compact?null:React17__default.createElement("th",null,React17__default.createElement("span",null,"Default")),updateArgs?React17__default.createElement("th",null,React17__default.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React17__default.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React17__default.createElement(UndoIcon,{"aria-hidden":!0})))):null)),React17__default.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React17__default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React17__default.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React17__default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],expandable,...common})))))))))};styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"});styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}});styled.div(withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"}));styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText}));styled.div(({theme})=>({color:theme.base==="light"?curriedTransparentize$1(.2,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5});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"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}}));styled.div({display:"flex",flexDirection:"row"});styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}}));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"}));styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30});styled.div({flex:1,display:"flex",flexDirection:"row"});styled.div({display:"flex",alignItems:"flex-start"});styled.div({flex:"0 0 30%"});styled.div({flex:1});styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2}));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}}));styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"});styled.div({display:"flex",flexFlow:"row wrap"});scope&&scope.__DOCS_CONTEXT__===void 0&&(scope.__DOCS_CONTEXT__=createContext(null),scope.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=scope?scope.__DOCS_CONTEXT__:createContext(null);createContext({sources:{}});var{document:document2}=scope;function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}components.a;var SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17__default.createElement(OcticonHeader,{id,...rest},React17__default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17__default.createElement(LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17__default.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17__default.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})};SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17__default.createElement(HeaderMdx,{as:headerType,...props})}),{});var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{});__toESM2(require_js());styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}}));styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}}));styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10}));var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React17__default.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17__default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};styled(Heading2)(({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"}}));var ADDON_ID="addon-controls",PARAM_KEY="controls";var slideIn=keyframes({from:{transform:"translateY(40px)"},to:{transform:"translateY(0)"}}),highlight=keyframes({from:{background:"var(--highlight-bg-color)"},to:{}}),Container=styled.div({containerType:"size",position:"sticky",bottom:0,height:39,overflow:"hidden",zIndex:1}),Bar2=styled(Bar$1)(({theme})=>({"--highlight-bg-color":theme.base==="dark"?"#153B5B":"#E0F0FF",display:"flex",flexDirection:"row-reverse",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,padding:"6px 10px",animation:`${slideIn} 300ms, ${highlight} 2s`,background:theme.background.bar,borderTop:`1px solid ${theme.appBorderColor}`,fontSize:theme.typography.size.s2,"@container (max-width: 799px)":{flexDirection:"row",justifyContent:"flex-end"}})),Info=styled.div({display:"flex",flex:"99 0 auto",alignItems:"center",marginLeft:10,gap:6}),Actions=styled.div(({theme})=>({display:"flex",flex:"1 0 0",alignItems:"center",gap:2,color:theme.color.mediumdark,fontSize:theme.typography.size.s2})),Label5=styled.div({"@container (max-width: 799px)":{lineHeight:0,textIndent:"-9999px","&::after":{content:"attr(data-short-label)",display:"block",lineHeight:"initial",textIndent:"0"}}}),ModalInput=styled(Form.Input)(({theme})=>({"::placeholder":{color:theme.color.mediumdark},"&:invalid:not(:placeholder-shown)":{boxShadow:`${theme.color.negative} 0 0 0 1px inset`}})),SaveStory=({saveStory,createStory,resetArgs})=>{let inputRef=React17__default.useRef(null),[saving,setSaving]=React17__default.useState(!1),[creating,setCreating]=React17__default.useState(!1),[storyName,setStoryName]=React17__default.useState(""),[errorMessage,setErrorMessage]=React17__default.useState(null),onSaveStory=async()=>{saving||(setSaving(!0),await saveStory().catch(()=>{}),setSaving(!1));},onShowForm=()=>{setCreating(!0),setStoryName(""),setTimeout(()=>inputRef.current?.focus(),0);},onChange=e2=>{let value3=e2.target.value.replace(/^[^a-z]/i,"").replace(/[^a-z0-9-_ ]/gi,"").replaceAll(/([-_ ]+[a-z0-9])/gi,match=>match.toUpperCase().replace(/[-_ ]/g,""));setStoryName(value3.charAt(0).toUpperCase()+value3.slice(1));};return React17__default.createElement(Container,{id:"save-from-controls"},React17__default.createElement(Bar2,null,React17__default.createElement(Actions,null,React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Save changes to story"})},React17__default.createElement(IconButton,{"aria-label":"Save changes to story",disabled:saving,onClick:onSaveStory},React17__default.createElement(CheckIcon,null),React17__default.createElement(Label5,{"data-short-label":"Save"},"Update story"))),React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Create new story with these settings"})},React17__default.createElement(IconButton,{"aria-label":"Create new story with these settings",onClick:onShowForm},React17__default.createElement(AddIcon,null),React17__default.createElement(Label5,{"data-short-label":"New"},"Create new story"))),React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Reset changes"})},React17__default.createElement(IconButton,{"aria-label":"Reset changes",onClick:()=>resetArgs()},React17__default.createElement(UndoIcon,null),React17__default.createElement("span",null,"Reset")))),React17__default.createElement(Info,null,React17__default.createElement(Label5,{"data-short-label":"Unsaved changes"},"You modified this story. Do you want to save your changes?")),React17__default.createElement(Modal,{width:350,open:creating,onOpenChange:setCreating},React17__default.createElement(Form,{onSubmit:async event=>{if(event.preventDefault(),!saving)try{setErrorMessage(null),setSaving(!0),await createStory(storyName.replace(/^[^a-z]/i,"").replaceAll(/[^a-z0-9]/gi,"")),setCreating(!1),setSaving(!1);}catch(e2){setErrorMessage(e2.message),setSaving(!1);}},id:"create-new-story-form"},React17__default.createElement(Modal.Content,null,React17__default.createElement(Modal.Header,null,React17__default.createElement(Modal.Title,null,"Create new story"),React17__default.createElement(Modal.Description,null,"This will add a new story to your existing stories file.")),React17__default.createElement(ModalInput,{onChange,placeholder:"Story export name",readOnly:saving,ref:inputRef,value:storyName}),React17__default.createElement(Modal.Actions,null,React17__default.createElement(Button,{disabled:saving||!storyName,size:"medium",type:"submit",variant:"solid"},"Create"),React17__default.createElement(Modal.Dialog.Close,{asChild:!0},React17__default.createElement(Button,{disabled:saving,size:"medium",type:"reset"},"Cancel"))))),errorMessage&&React17__default.createElement(Modal.Error,null,errorMessage))))};var clean=obj=>Object.entries(obj).reduce((acc,[key2,value3])=>value3!==void 0?Object.assign(acc,{[key2]:value3}):acc,{}),AddonWrapper=styled.div({display:"grid",gridTemplateRows:"1fr 39px",height:"100%",maxHeight:"100vh",overflowY:"auto"}),ControlsPanel=({saveStory,createStory})=>{let[isLoading,setIsLoading]=useState(!0),[args2,updateArgs,resetArgs,initialArgs]=useArgs(),[globals]=useGlobals(),rows=useArgTypes(),{expanded,sort,presetColors}=useParameter(PARAM_KEY,{}),{path,previewInitialized}=useStorybookState();useEffect(()=>{previewInitialized&&setIsLoading(!1);},[previewInitialized]);let hasControls=Object.values(rows).some(arg=>arg?.control),withPresetColors=Object.entries(rows).reduce((acc,[key2,arg])=>{let control=arg?.control;return typeof control!="object"||control?.type!=="color"||control?.presetColors?acc[key2]=arg:acc[key2]={...arg,control:{...control,presetColors}},acc},{}),hasUpdatedArgs=useMemo(()=>!!args2&&!!initialArgs&&!dequal(clean(args2),clean(initialArgs)),[args2,initialArgs]);return React17__default.createElement(AddonWrapper,null,React17__default.createElement(ArgsTable,{key:path,compact:!expanded&&hasControls,rows:withPresetColors,args:args2,globals,updateArgs,resetArgs,inAddonPanel:!0,sort,isLoading}),hasControls&&hasUpdatedArgs&&scope.CONFIG_TYPE==="DEVELOPMENT"&&React17__default.createElement(SaveStory,{resetArgs,saveStory,createStory}))};function Title2(){let rows=useArgTypes(),controlsCount=Object.values(rows).filter(argType=>argType?.control&&!argType?.table?.disable).length;return React17__default.createElement("div",null,React17__default.createElement(Spaced,{col:1},React17__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Controls"),controlsCount===0?"":React17__default.createElement(Badge,{status:"neutral"},controlsCount)))}var stringifyArgs=args2=>JSON.stringify(args2,(_2,value3)=>typeof value3=="function"?"__sb_empty_function_arg__":value3);addons.register(ADDON_ID,api=>{let channel=addons.getChannel(),saveStory=async()=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");try{let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:stringifyArgs(Object.entries(data.args||{}).reduce((acc,[key2,value3])=>(dequal(value3,data.initialArgs?.[key2])||(acc[key2]=value3),acc),{})),csfId:data.id,importPath:data.importPath});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story saved",subHeadline:React17__default.createElement(React17__default.Fragment,null,"Updated story ",React17__default.createElement("b",null,response.sourceStoryName),".")},duration:8e3});}catch(error){throw api.addNotification({id:"save-story-error",icon:{name:"failed",color:color.negative},content:{headline:"Failed to save story",subHeadline:error?.message||"Check the Storybook process on the command line for more details."},duration:8e3}),error}},createStory=async name2=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:data.args&&stringifyArgs(data.args),csfId:data.id,importPath:data.importPath,name:name2});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story created",subHeadline:React17__default.createElement(React17__default.Fragment,null,"Added story ",React17__default.createElement("b",null,response.newStoryName)," based on ",React17__default.createElement("b",null,response.sourceStoryName),".")},duration:8e3,onClick:({onDismiss})=>{onDismiss(),api.selectStory(response.newStoryId);}});};addons.add(ADDON_ID,{title:Title2,type:types.PANEL,paramKey:PARAM_KEY,render:({active})=>!active||!api.getCurrentStoryData()?null:React17__default.createElement(AddonPanel,{active},React17__default.createElement(ControlsPanel,{saveStory,createStory}))}),channel.on(SAVE_STORY_RESPONSE,data=>{if(!data.success)return;let story=api.getCurrentStoryData();story.type==="story"&&(api.resetStoryArgs(story),data.payload.newStoryId&&api.selectStory(data.payload.newStoryId));});});
|
|
201
|
+
${curriedLighten$1(.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","[aria-readonly=true] &":{opacity:.5}}),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:name2,value:value22,onChange,min=0,max=100,step=1,onBlur,onFocus,argType})=>{let handleChange=event=>{onChange(parse22(event.target.value));},hasValue=value22!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]),readonly=!!argType?.table?.readonly;return React17__default.createElement(RangeWrapper,{"aria-readonly":readonly},React17__default.createElement(RangeLabel,null,min),React17__default.createElement(RangeInput,{id:getControlId(name2),type:"range",disabled:readonly,onChange:handleChange,name:name2,value:value22,min,max,step,onFocus,onBlur}),React17__default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value22.toFixed(numberOFDecimalsPlaces):"--"," / ",max))},Wrapper7=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name:name2,value:value22,onChange,onFocus,onBlur,maxLength,argType})=>{let handleChange=event=>{onChange(event.target.value);},readonly=!!argType?.table?.readonly,[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value22===void 0)return React17__default.createElement(Button,{variant:"outline",size:"medium",disabled:readonly,id:getControlSetterButtonId(name2),onClick:onForceVisible},"Set string");let isValid=typeof value22=="string";return React17__default.createElement(Wrapper7,null,React17__default.createElement(Form.Textarea,{id:getControlId(name2),maxLength,onChange:handleChange,disabled:readonly,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name:name2,value:isValid?value22:"",onFocus,onBlur}),maxLength&&React17__default.createElement(MaxLength,{isMaxed:value22?.length===maxLength},value22?.length??0," / ",maxLength))},FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name:name2,accept="image/*",value:value22,argType})=>{let inputElement=useRef(null),readonly=argType?.control?.readOnly;function handleFileChange(e2){if(!e2.target.files)return;let fileUrls=Array.from(e2.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value22);}return useEffect(()=>{value22==null&&inputElement.current&&(inputElement.current.value=null);},[value22,name2]),React17__default.createElement(FileInput,{ref:inputElement,id:getControlId(name2),type:"file",name:name2,multiple:!0,disabled:readonly,onChange:handleFileChange,accept,size:"flex"})},LazyColorControl=lazy(()=>import('./Color-KGDBMAHA-KKVYPLVP.js')),ColorControl=props=>React17__default.createElement(Suspense,{fallback:React17__default.createElement("div",null)},React17__default.createElement(LazyColorControl,{...props})),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__default.createElement(React17__default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key:key2,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({[key2]:argVal}),argVal),[updateArgs,key2]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable){let canBeSetup=control?.disable!==!0&&row?.type?.name!=="function";return isHovered&&canBeSetup?React17__default.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):React17__default.createElement(NoControl,null)}let props={name:key2,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17__default.createElement(Control,{...props,...control,controlType:control.type})},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"?curriedTransparentize$1(.1,theme.color.defaultText):curriedTransparentize$1(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?curriedTransparentize$1(.1,theme.color.defaultText):curriedTransparentize$1(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),toSummary=value22=>value22&&{summary:typeof value22=="string"?value22:value22.name},ArgRow=props=>{let[isHovered,setIsHovered]=useState(!1),{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name:name2,description}=row,table=row.table||{},type=table.type||toSummary(row.type),defaultValue=table.defaultValue||row.defaultValue,required=row.type?.required,hasDescription=description!=null&&description!=="";return React17__default.createElement("tr",{onMouseEnter:()=>setIsHovered(!0),onMouseLeave:()=>setIsHovered(!1)},React17__default.createElement(StyledTd,{expandable},React17__default.createElement(Name,null,name2),required?React17__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React17__default.createElement("td",null,hasDescription&&React17__default.createElement(Description,null,React17__default.createElement(index_modern_default,null,description)),table.jsDocTags!=null?React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(TypeWithJsDoc,{hasDescription},React17__default.createElement(ArgValue,{value:type,initialExpandedArgs})),React17__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React17__default.createElement(Type,{hasDescription},React17__default.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React17__default.createElement("td",null,React17__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React17__default.createElement("td",null,React17__default.createElement(ArgControl,{...props,isHovered})):null)},ExpanderIconDown=styled(ChevronDownIcon$1)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.3,theme.color.defaultText),border:"none",display:"inline-block"})),ExpanderIconRight=styled(ChevronRightIcon)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.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"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.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:`${curriedLighten$1(.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":""}`:"",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(StyledTr,{title:helperText},React17__default.createElement(Level,{colSpan:1},React17__default.createElement(ClickIntercept,{onClick:e2=>setExpanded(!expanded),tabIndex:0},helperText),React17__default.createElement(FlexWrapper,null,expanded?React17__default.createElement(ExpanderIconDown,null):React17__default.createElement(ExpanderIconRight,null),label)),React17__default.createElement(StyledTd2,{colSpan:colSpan-1},React17__default.createElement(ClickIntercept,{onClick:e2=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)},Row=styled.div(({theme})=>({display:"flex",gap:16,borderBottom:`1px solid ${theme.appBorderColor}`,"&:last-child":{borderBottom:0}})),Column=styled.div(({numColumn})=>({display:"flex",flexDirection:"column",flex:numColumn||1,gap:5,padding:"12px 20px"})),SkeletonText=styled.div(({theme,width,height})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,width:width||"100%",height:height||16,borderRadius:3})),columnWidth=[2,4,2,2],Skeleton=()=>React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"}))),React17__default.createElement(Row,null,React17__default.createElement(Column,{numColumn:columnWidth[0]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[1]},React17__default.createElement(SkeletonText,{width:"80%"}),React17__default.createElement(SkeletonText,{width:"30%"})),React17__default.createElement(Column,{numColumn:columnWidth[2]},React17__default.createElement(SkeletonText,{width:"60%"})),React17__default.createElement(Column,{numColumn:columnWidth[3]},React17__default.createElement(SkeletonText,{width:"60%"})))),Wrapper8=styled.div(({inAddonPanel,theme})=>({height:inAddonPanel?"100%":"auto",display:"flex",border:inAddonPanel?"none":`1px solid ${theme.appBorderColor}`,borderRadius:inAddonPanel?0:theme.appBorderRadius,padding:inAddonPanel?0:40,alignItems:"center",justifyContent:"center",flexDirection:"column",gap:15,background:theme.background.content,boxShadow:"rgba(0, 0, 0, 0.10) 0 1px 3px 0"})),Links=styled.div(({theme})=>({display:"flex",fontSize:theme.typography.size.s2-1,gap:25})),Divider=styled.div(({theme})=>({width:1,height:16,backgroundColor:theme.appBorderColor})),Empty=({inAddonPanel})=>{let[isLoading,setIsLoading]=useState(!0);return useEffect(()=>{let load=setTimeout(()=>{setIsLoading(!1);},100);return ()=>clearTimeout(load)},[]),isLoading?null:React17__default.createElement(Wrapper8,{inAddonPanel},React17__default.createElement(EmptyTabContent,{title:inAddonPanel?"Interactive story playground":"Args table with interactive controls couldn't be auto-generated",description:React17__default.createElement(React17__default.Fragment,null,"Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically."),footer:React17__default.createElement(Links,null,inAddonPanel&&React17__default.createElement(React17__default.Fragment,null,React17__default.createElement(Link,{href:"https://youtu.be/0gOfS6K0x0E",target:"_blank",withArrow:!0},React17__default.createElement(VideoIcon,null)," Watch 5m video"),React17__default.createElement(Divider,null),React17__default.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Read docs")),!inAddonPanel&&React17__default.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Learn how to set that up"))}))},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"?curriedTransparentize$1(.25,theme.color.defaultText):curriedTransparentize$1(.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}}}}})),StyledIconButton=styled(IconButton)(({theme})=>({margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled.span({display:"flex",justifyContent:"space-between"}),sortFns={alpha:(a2,b2)=>a2.name.localeCompare(b2.name),requiredFirst:(a2,b2)=>+!!b2.type?.required-+!!a2.type?.required||a2.name.localeCompare(b2.name),none:void 0},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key2,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key:key2,...row});else {let subsection=section.subsections[subcategory]||[];subsection.push({key:key2,...row}),section.subsections[subcategory]=subsection;}sections.sections[category]=section;}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key:key2,...row}),sections.ungroupedSubsections[subcategory]=subsection;}else sections.ungrouped.push({key:key2,...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,args2,globals)=>{try{return P(row,args2,globals)}catch(err){return once.warn(err.message),!1}},ArgsTable=props=>{let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none",isLoading}=props;if("error"in props){let{error}=props;return React17__default.createElement(EmptyBlock,null,error,"\xA0",React17__default.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},React17__default.createElement(DocumentIcon,null)," Read the docs"))}if(isLoading)return React17__default.createElement(Skeleton,null);let{rows,args:args2,globals}="rows"in props&&props,groups=groupRows(pickBy(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args2||{},globals||{})),sort),hasNoUngrouped=groups.ungrouped.length===0,hasNoSections=Object.entries(groups.sections).length===0,hasNoUngroupedSubsections=Object.entries(groups.ungroupedSubsections).length===0;if(hasNoUngrouped&&hasNoSections&&hasNoUngroupedSubsections)return React17__default.createElement(Empty,{inAddonPanel});let colSpan=1;updateArgs&&(colSpan+=1),compact||(colSpan+=2);let expandable=Object.keys(groups.sections).length>0,common={updateArgs,compact,inAddonPanel,initialExpandedArgs};return React17__default.createElement(ResetWrapper,null,React17__default.createElement(TableWrapper,{compact,inAddonPanel,className:"docblock-argstable sb-unstyled"},React17__default.createElement("thead",{className:"docblock-argstable-head"},React17__default.createElement("tr",null,React17__default.createElement("th",null,React17__default.createElement("span",null,"Name")),compact?null:React17__default.createElement("th",null,React17__default.createElement("span",null,"Description")),compact?null:React17__default.createElement("th",null,React17__default.createElement("span",null,"Default")),updateArgs?React17__default.createElement("th",null,React17__default.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React17__default.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React17__default.createElement(UndoIcon,{"aria-hidden":!0})))):null)),React17__default.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React17__default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React17__default.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React17__default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17__default.createElement(ArgRow,{key:row.key,row,arg:args2&&args2[row.key],expandable,...common})))))))))};styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"});styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}});styled.div(withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"}));styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText}));styled.div(({theme})=>({color:theme.base==="light"?curriedTransparentize$1(.2,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5});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"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}}));styled.div({display:"flex",flexDirection:"row"});styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}}));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"}));styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30});styled.div({flex:1,display:"flex",flexDirection:"row"});styled.div({display:"flex",alignItems:"flex-start"});styled.div({flex:"0 0 30%"});styled.div({flex:1});styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?curriedTransparentize$1(.4,theme.color.defaultText):curriedTransparentize$1(.6,theme.color.defaultText)}));styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2}));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}}));styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"});styled.div({display:"flex",flexFlow:"row wrap"});scope&&scope.__DOCS_CONTEXT__===void 0&&(scope.__DOCS_CONTEXT__=createContext(null),scope.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=scope?scope.__DOCS_CONTEXT__:createContext(null);createContext({sources:{}});var{document:document2}=scope;function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}components.a;var SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17__default.createElement(OcticonHeader,{id,...rest},React17__default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17__default.createElement(LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17__default.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17__default.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})};SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17__default.createElement(HeaderMdx,{as:headerType,...props})}),{});var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{});__toESM2(require_js());styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}}));styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}}));styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10}));var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React17__default.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17__default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};styled(Heading2)(({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"}}));var ADDON_ID="addon-controls",PARAM_KEY="controls";var slideIn=keyframes({from:{transform:"translateY(40px)"},to:{transform:"translateY(0)"}}),highlight=keyframes({from:{background:"var(--highlight-bg-color)"},to:{}}),Container=styled.div({containerType:"size",position:"sticky",bottom:0,height:39,overflow:"hidden",zIndex:1}),Bar2=styled(Bar$1)(({theme})=>({"--highlight-bg-color":theme.base==="dark"?"#153B5B":"#E0F0FF",display:"flex",flexDirection:"row-reverse",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,padding:"6px 10px",animation:`${slideIn} 300ms, ${highlight} 2s`,background:theme.background.bar,borderTop:`1px solid ${theme.appBorderColor}`,fontSize:theme.typography.size.s2,"@container (max-width: 799px)":{flexDirection:"row",justifyContent:"flex-end"}})),Info=styled.div({display:"flex",flex:"99 0 auto",alignItems:"center",marginLeft:10,gap:6}),Actions=styled.div(({theme})=>({display:"flex",flex:"1 0 0",alignItems:"center",gap:2,color:theme.color.mediumdark,fontSize:theme.typography.size.s2})),Label5=styled.div({"@container (max-width: 799px)":{lineHeight:0,textIndent:"-9999px","&::after":{content:"attr(data-short-label)",display:"block",lineHeight:"initial",textIndent:"0"}}}),ModalInput=styled(Form.Input)(({theme})=>({"::placeholder":{color:theme.color.mediumdark},"&:invalid:not(:placeholder-shown)":{boxShadow:`${theme.color.negative} 0 0 0 1px inset`}})),SaveStory=({saveStory,createStory,resetArgs})=>{let inputRef=React17__default.useRef(null),[saving,setSaving]=React17__default.useState(!1),[creating,setCreating]=React17__default.useState(!1),[storyName,setStoryName]=React17__default.useState(""),[errorMessage,setErrorMessage]=React17__default.useState(null),onSaveStory=async()=>{saving||(setSaving(!0),await saveStory().catch(()=>{}),setSaving(!1));},onShowForm=()=>{setCreating(!0),setStoryName(""),setTimeout(()=>inputRef.current?.focus(),0);},onChange=e2=>{let value3=e2.target.value.replace(/^[^a-z]/i,"").replace(/[^a-z0-9-_ ]/gi,"").replaceAll(/([-_ ]+[a-z0-9])/gi,match=>match.toUpperCase().replace(/[-_ ]/g,""));setStoryName(value3.charAt(0).toUpperCase()+value3.slice(1));};return React17__default.createElement(Container,{id:"save-from-controls"},React17__default.createElement(Bar2,null,React17__default.createElement(Actions,null,React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Save changes to story"})},React17__default.createElement(IconButton,{"aria-label":"Save changes to story",disabled:saving,onClick:onSaveStory},React17__default.createElement(CheckIcon,null),React17__default.createElement(Label5,{"data-short-label":"Save"},"Update story"))),React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Create new story with these settings"})},React17__default.createElement(IconButton,{"aria-label":"Create new story with these settings",onClick:onShowForm},React17__default.createElement(AddIcon,null),React17__default.createElement(Label5,{"data-short-label":"New"},"Create new story"))),React17__default.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React17__default.createElement(TooltipNote,{note:"Reset changes"})},React17__default.createElement(IconButton,{"aria-label":"Reset changes",onClick:()=>resetArgs()},React17__default.createElement(UndoIcon,null),React17__default.createElement("span",null,"Reset")))),React17__default.createElement(Info,null,React17__default.createElement(Label5,{"data-short-label":"Unsaved changes"},"You modified this story. Do you want to save your changes?")),React17__default.createElement(Modal,{width:350,open:creating,onOpenChange:setCreating},React17__default.createElement(Form,{onSubmit:async event=>{if(event.preventDefault(),!saving)try{setErrorMessage(null),setSaving(!0),await createStory(storyName.replace(/^[^a-z]/i,"").replaceAll(/[^a-z0-9]/gi,"")),setCreating(!1),setSaving(!1);}catch(e2){setErrorMessage(e2.message),setSaving(!1);}},id:"create-new-story-form"},React17__default.createElement(Modal.Content,null,React17__default.createElement(Modal.Header,null,React17__default.createElement(Modal.Title,null,"Create new story"),React17__default.createElement(Modal.Description,null,"This will add a new story to your existing stories file.")),React17__default.createElement(ModalInput,{onChange,placeholder:"Story export name",readOnly:saving,ref:inputRef,value:storyName}),React17__default.createElement(Modal.Actions,null,React17__default.createElement(Button,{disabled:saving||!storyName,size:"medium",type:"submit",variant:"solid"},"Create"),React17__default.createElement(Modal.Dialog.Close,{asChild:!0},React17__default.createElement(Button,{disabled:saving,size:"medium",type:"reset"},"Cancel"))))),errorMessage&&React17__default.createElement(Modal.Error,null,errorMessage))))};var clean=obj=>Object.entries(obj).reduce((acc,[key2,value3])=>value3!==void 0?Object.assign(acc,{[key2]:value3}):acc,{}),AddonWrapper=styled.div({display:"grid",gridTemplateRows:"1fr 39px",height:"100%",maxHeight:"100vh",overflowY:"auto"}),ControlsPanel=({saveStory,createStory})=>{let[isLoading,setIsLoading]=useState(!0),[args2,updateArgs,resetArgs,initialArgs]=useArgs(),[globals]=useGlobals(),rows=useArgTypes(),{expanded,sort,presetColors,disableSaveFromUI=!1}=useParameter(PARAM_KEY,{}),{path,previewInitialized}=useStorybookState();useEffect(()=>{previewInitialized&&setIsLoading(!1);},[previewInitialized]);let hasControls=Object.values(rows).some(arg=>arg?.control),withPresetColors=Object.entries(rows).reduce((acc,[key2,arg])=>{let control=arg?.control;return typeof control!="object"||control?.type!=="color"||control?.presetColors?acc[key2]=arg:acc[key2]={...arg,control:{...control,presetColors}},acc},{}),hasUpdatedArgs=useMemo(()=>!!args2&&!!initialArgs&&!dequal(clean(args2),clean(initialArgs)),[args2,initialArgs]);return React17__default.createElement(AddonWrapper,null,React17__default.createElement(ArgsTable,{key:path,compact:!expanded&&hasControls,rows:withPresetColors,args:args2,globals,updateArgs,resetArgs,inAddonPanel:!0,sort,isLoading}),hasControls&&hasUpdatedArgs&&scope.CONFIG_TYPE==="DEVELOPMENT"&&disableSaveFromUI!==!0&&React17__default.createElement(SaveStory,{resetArgs,saveStory,createStory}))};function Title2(){let rows=useArgTypes(),controlsCount=Object.values(rows).filter(argType=>argType?.control&&!argType?.table?.disable).length;return React17__default.createElement("div",null,React17__default.createElement(Spaced,{col:1},React17__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Controls"),controlsCount===0?"":React17__default.createElement(Badge,{status:"neutral"},controlsCount)))}var stringifyArgs=args2=>JSON.stringify(args2,(_2,value3)=>typeof value3=="function"?"__sb_empty_function_arg__":value3);addons.register(ADDON_ID,api=>{let channel=addons.getChannel(),saveStory=async()=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");try{let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:stringifyArgs(Object.entries(data.args||{}).reduce((acc,[key2,value3])=>(dequal(value3,data.initialArgs?.[key2])||(acc[key2]=value3),acc),{})),csfId:data.id,importPath:data.importPath});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story saved",subHeadline:React17__default.createElement(React17__default.Fragment,null,"Updated story ",React17__default.createElement("b",null,response.sourceStoryName),".")},duration:8e3});}catch(error){throw api.addNotification({id:"save-story-error",icon:{name:"failed",color:color.negative},content:{headline:"Failed to save story",subHeadline:error?.message||"Check the Storybook process on the command line for more details."},duration:8e3}),error}},createStory=async name2=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:data.args&&stringifyArgs(data.args),csfId:data.id,importPath:data.importPath,name:name2});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story created",subHeadline:React17__default.createElement(React17__default.Fragment,null,"Added story ",React17__default.createElement("b",null,response.newStoryName)," based on ",React17__default.createElement("b",null,response.sourceStoryName),".")},duration:8e3,onClick:({onDismiss})=>{onDismiss(),api.selectStory(response.newStoryId);}});};addons.add(ADDON_ID,{title:Title2,type:types.PANEL,paramKey:PARAM_KEY,render:({active})=>!active||!api.getCurrentStoryData()?null:React17__default.createElement(AddonPanel,{active},React17__default.createElement(ControlsPanel,{saveStory,createStory}))}),channel.on(SAVE_STORY_RESPONSE,data=>{if(!data.success)return;let story=api.getCurrentStoryData();story.type==="story"&&(api.resetStoryArgs(story),data.payload.newStoryId&&api.selectStory(data.payload.newStoryId));});});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-controls",
|
|
3
|
-
"version": "8.3.0-alpha.
|
|
3
|
+
"version": "8.3.0-alpha.3",
|
|
4
4
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -56,13 +56,13 @@
|
|
|
56
56
|
"ts-dedent": "^2.0.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@storybook/blocks": "8.3.0-alpha.
|
|
59
|
+
"@storybook/blocks": "8.3.0-alpha.3",
|
|
60
60
|
"@storybook/icons": "^1.2.5",
|
|
61
61
|
"react": "^18.2.0",
|
|
62
62
|
"react-dom": "^18.2.0"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"storybook": "^8.3.0-alpha.
|
|
65
|
+
"storybook": "^8.3.0-alpha.3"
|
|
66
66
|
},
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|