@storybook/blocks 7.1.0-alpha.11 → 7.1.0-alpha.13
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/Color-3YIJY6X7.mjs +11 -1
- package/dist/chunk-GWAJ4KRU.mjs +3 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +6 -6
- package/dist/index.mjs +52 -28
- package/package.json +15 -15
package/dist/Color-3YIJY6X7.mjs
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
import{getControlId}from
|
|
1
|
+
import { getControlId } from './chunk-GWAJ4KRU.mjs';
|
|
2
|
+
import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
|
3
|
+
import { HexColorPicker, RgbaStringColorPicker, HslaStringColorPicker } from 'react-colorful';
|
|
4
|
+
import convert from 'color-convert';
|
|
5
|
+
import throttle from 'lodash/throttle.js';
|
|
6
|
+
import { styled } from '@storybook/theming';
|
|
7
|
+
import { WithTooltip, TooltipNote, Form, Icons } from '@storybook/components';
|
|
8
|
+
|
|
9
|
+
var Wrapper=styled.div({position:"relative",maxWidth:250}),PickerTooltip=styled(WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return React.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input=styled(Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=styled(Icons)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={["hex"]:HexColorPicker,["rgb"]:RgbaStringColorPicker,["hsl"]:HslaStringColorPicker},fallbackColor={["hex"]:"transparent",["rgb"]:"rgba(0, 0, 0, 0)",["hsl"]:"hsla(0, 0%, 0%, 0)"},stringToArgs=value=>{let match=value?.match(COLOR_REGEXP);if(!match)return [0,0,0,1];let[,x,y,z,a=1]=match;return [x,y,z,a].map(Number)},parseValue=value=>{if(!value)return;let valid=!0;if(RGB_REGEXP.test(value)){let[r,g,b,a]=stringToArgs(value),[h,s,l]=convert.rgb.hsl([r,g,b])||[0,0,0];return {valid,value,keyword:convert.rgb.keyword([r,g,b]),colorSpace:"rgb",["rgb"]:value,["hsl"]:`hsla(${h}, ${s}%, ${l}%, ${a})`,["hex"]:`#${convert.rgb.hex([r,g,b]).toLowerCase()}`}}if(HSL_REGEXP.test(value)){let[h,s,l,a]=stringToArgs(value),[r,g,b]=convert.hsl.rgb([h,s,l])||[0,0,0];return {valid,value,keyword:convert.hsl.keyword([h,s,l]),colorSpace:"hsl",["rgb"]:`rgba(${r}, ${g}, ${b}, ${a})`,["hsl"]:value,["hex"]:`#${convert.hsl.hex([h,s,l]).toLowerCase()}`}}let plain=value.replace("#",""),rgb=convert.keyword.rgb(plain)||convert.hex.rgb(plain),hsl=convert.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{convert.keyword.hex(mapped);}catch{valid=!1;}return {valid,value:mapped,keyword:convert.rgb.keyword(rgb),colorSpace:"hex",["rgb"]:`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,["hsl"]:`hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,["hex"]:mapped}},getRealValue=(value,color,colorSpace)=>{if(!value||!color?.valid)return fallbackColor[colorSpace];if(colorSpace!=="hex")return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return `#${convert.keyword.hex(color.hex)}`}catch{return fallbackColor.hex}let short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;let[r,g,b]=short[1].split("");return `#${r}${r}${g}${g}${b}${b}`},useColorInput=(initialValue,onChange)=>{let[value,setValue]=useState(initialValue||""),[color,setColor]=useState(()=>parseValue(value)),[colorSpace,setColorSpace]=useState(color?.colorSpace||"hex");useEffect(()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"hex");},[initialValue]);let realValue=useMemo(()=>getRealValue(value,color,colorSpace).toLowerCase(),[value,color,colorSpace]),updateValue=useCallback(update=>{let parsed=parseValue(update),v=parsed?.value||update||"";setValue(v),v===""&&(setColor(void 0),onChange(void 0)),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value));},[onChange]),cycleColorSpace=useCallback(()=>{let next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);let update=color?.[COLOR_SPACES[next]]||"";setValue(update),onChange(update);},[color,colorSpace,onChange]);return {value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value=>value.replace(/\s*/,"").toLowerCase(),usePresets=(presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=useState(currentColor?.valid?[currentColor]:[]);useEffect(()=>{currentColor===void 0&&setSelectedColors([]);},[currentColor]);let presets=useMemo(()=>(presetColors||[]).map(preset=>typeof preset=="string"?parseValue(preset):preset.title?{...parseValue(preset.color),keyword:preset.title}:parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27),[presetColors,selectedColors]),addPreset=useCallback(color=>{color?.valid&&(presets.some(preset=>id(preset[colorSpace])===id(color[colorSpace]))||setSelectedColors(arr=>arr.concat(color)));},[colorSpace,presets]);return {presets,addPreset}},ColorControl=({name,value:initialValue,onChange,onFocus,onBlur,presetColors,startOpen=!1})=>{let throttledOnChange=useCallback(throttle(onChange,200),[onChange]),{value,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,throttledOnChange),{presets,addPreset}=usePresets(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace];return React.createElement(Wrapper,null,React.createElement(PickerTooltip,{startOpen,closeOnOutsideClick:!0,onVisibleChange:()=>addPreset(color),tooltip:React.createElement(TooltipContent,null,React.createElement(Picker,{color:realValue==="transparent"?"#000000":realValue,onChange:updateValue,onFocus,onBlur}),presets.length>0&&React.createElement(Swatches,null,presets.map((preset,index)=>React.createElement(WithTooltip,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:React.createElement(Note,{note:preset.keyword||preset.value})},React.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)})))))},React.createElement(Swatch,{value:realValue,style:{margin:4}})),React.createElement(Input,{id:getControlId(name),value,onChange:e=>updateValue(e.target.value),onFocus:e=>e.target.select(),placeholder:"Choose color..."}),value?React.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}):null)},Color_default=ColorControl;
|
|
10
|
+
|
|
11
|
+
export { ColorControl, Color_default as default };
|
package/dist/chunk-GWAJ4KRU.mjs
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
var getControlId=value=>`control-${value.replace(/\s+/g,"-")}`,getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,"-")}`;
|
|
1
|
+
var getControlId=value=>`control-${value.replace(/\s+/g,"-")}`,getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,"-")}`;
|
|
2
|
+
|
|
3
|
+
export { getControlId, getControlSetterButtonId };
|
package/dist/index.d.ts
CHANGED
|
@@ -500,11 +500,11 @@ interface DescriptionProps {
|
|
|
500
500
|
}
|
|
501
501
|
declare const DescriptionContainer: FC<DescriptionProps>;
|
|
502
502
|
|
|
503
|
-
type DocsProps<
|
|
503
|
+
type DocsProps<TRenderer extends Renderer$1 = Renderer$1> = {
|
|
504
504
|
docsParameter: Parameters$1;
|
|
505
|
-
context: DocsContextProps<
|
|
505
|
+
context: DocsContextProps<TRenderer>;
|
|
506
506
|
};
|
|
507
|
-
declare
|
|
507
|
+
declare function Docs<TRenderer extends Renderer$1 = Renderer$1>({ context, docsParameter, }: DocsProps<TRenderer>): JSX.Element;
|
|
508
508
|
|
|
509
509
|
declare const DocsPage: FC;
|
|
510
510
|
|
|
@@ -516,10 +516,10 @@ declare const DocsContainer: FC<PropsWithChildren<DocsContainerProps>>;
|
|
|
516
516
|
|
|
517
517
|
declare const DocsStory: FC<DocsStoryProps>;
|
|
518
518
|
|
|
519
|
-
type ExternalDocsProps<
|
|
520
|
-
projectAnnotationsList: ProjectAnnotations<
|
|
519
|
+
type ExternalDocsProps<TRenderer extends Renderer$1 = Renderer$1> = {
|
|
520
|
+
projectAnnotationsList: ProjectAnnotations<TRenderer>[];
|
|
521
521
|
};
|
|
522
|
-
declare
|
|
522
|
+
declare function ExternalDocs<TRenderer extends Renderer$1 = Renderer$1>({ projectAnnotationsList, children, }: PropsWithChildren<ExternalDocsProps<TRenderer>>): JSX.Element;
|
|
523
523
|
|
|
524
524
|
declare const ExternalDocsContainer: React.FC<{
|
|
525
525
|
projectAnnotations: any;
|
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
|
|
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.
|
|
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.
|
|
@@ -28,7 +28,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
28
28
|
`),(_c=storyContext.parameters.jsx)!=null&&_c.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
|
29
29
|
|
|
30
30
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
|
31
|
-
`);let transformer=transformFromProps??sourceParameters.transform??sourceParameters.transformSource??((_d=storyContext.parameters.docs)==null?void 0:_d.transformSource)??((_e=storyContext.parameters.jsx)==null?void 0:_e.transformSource);return(transformer==null?void 0:transformer(code,storyContext))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()]}catch{}
|
|
31
|
+
`);let transformer=transformFromProps??sourceParameters.transform??sourceParameters.transformSource??((_d=storyContext.parameters.docs)==null?void 0:_d.transformSource)??((_e=storyContext.parameters.jsx)==null?void 0:_e.transformSource);return(transformer==null?void 0:transformer(code,storyContext))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()]}catch{}if(!storiesFromIds.every(Boolean))return{error:"Oh no! The source is not available.",state:"none"};let sourceParameters=((_c=(_b=(_a=stories[0])==null?void 0:_a.parameters)==null?void 0:_b.docs)==null?void 0:_c.source)||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{var _a2,_b2;if(!story)return"";let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??((_b2=(_a2=story.parameters.docs)==null?void 0:_a2.source)==null?void 0:_b2.format)??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
|
|
32
32
|
|
|
33
33
|
`));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
|
34
34
|
|
|
@@ -36,7 +36,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
36
36
|
`),props.ids&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
|
37
37
|
|
|
38
38
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
|
39
|
-
`);let sourceContext=(0,
|
|
39
|
+
`);let sourceContext=(0,import_react42.useContext)(SourceContext),docsContext=(0,import_react42.useContext)(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return import_react42.default.createElement(Source,{...sourceProps})};var import_react43=__toESM(require("react")),import_client_logger7=require("@storybook/client-logger"),import_ts_dedent3=__toESM(require("ts-dedent"));var getStoryId2=(props,context)=>{let{id:id2,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
|
40
40
|
|
|
41
41
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id2;let{name}=props;return name?((0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
|
42
42
|
|
|
@@ -48,7 +48,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
48
48
|
`);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
|
49
49
|
|
|
50
50
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
|
51
|
-
`),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,
|
|
51
|
+
`),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,import_react43.useContext)(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return import_react43.default.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?import_react43.default.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=import_react44.Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return{isLoading,previewProps:props};let layout=layoutProp;return import_react44.Children.forEach(children,child=>{var _a,_b;layout||(layout=(_b=(_a=child==null?void 0:child.props)==null?void 0:_a.parameters)==null?void 0:_b.layout)}),stories.forEach(story=>{var _a,_b;layout||!story||(layout=(story==null?void 0:story.parameters.layout)??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout))}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{var _a,_b,_c,_d,_e,_f,_g,_h,_i,_j;let docsContext=(0,import_react44.useContext)(DocsContext),sourceContext=(0,import_react44.useContext)(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]))}catch(error){children||(hookError=error)}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext)}catch(error){children||(hookError=error)}if(hookError)throw hookError;if(props.withSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
|
52
52
|
|
|
53
53
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
54
54
|
`),props.mdxSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
|
@@ -60,7 +60,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
60
60
|
`),children)return(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
|
61
61
|
|
|
62
62
|
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
|
63
|
-
`),isLoading?
|
|
63
|
+
`),isLoading?import_react44.default.createElement(PreviewSkeleton,null):import_react44.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react44.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react44.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react47=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react45=require("react"),import_core_events2=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react45.useState)(storyContext.globals);return(0,import_react45.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react46=require("react"),import_core_events3=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react46.useState)(storyContext.args);(0,import_react46.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react46.useCallback)(updatedArgs=>context.channel.emit(import_core_events3.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react46.useCallback)(argNames=>context.channel.emit(import_core_events3.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react47.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react47.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react50=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react49=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react48=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components30=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming26=require("@storybook/theming");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react48.default.useContext(DocsContext);return import_react48.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react48.default.createElement(import_components30.Code,null,children);let language=className&&className.split("-");return import_react48.default.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}var A=import_components30.components.a,AnchorInPage=({hash,children})=>{let context=(0,import_react48.useContext)(DocsContext);return import_react48.default.createElement(A,{href:hash,target:"_self",onClick:event=>{let id2=hash.substring(1);document2.getElementById(id2)&&navigate(context,hash)}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=(0,import_react48.useContext)(DocsContext);if(href){if(href.startsWith("#"))return import_react48.default.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return import_react48.default.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")))},target,...rest},children)}return import_react48.default.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming26.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming26.styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id:id2,children,...rest})=>{let context=(0,import_react48.useContext)(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id2}`;return import_react48.default.createElement(OcticonHeader,{id:id2,...rest},import_react48.default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id2)&&navigate(context,hash)}},import_react48.default.createElement(import_components30.Icons,{icon:"link"})),children)},HeaderMdx=props=>{let{as,id:id2,children,...rest}=props;if(id2)return import_react48.default.createElement(HeaderWithOcticonAnchor,{as,id:id2,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return import_react48.default.createElement(Component4,{...(0,import_components30.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react48.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{var _a;if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent5.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
|
|
64
64
|
This is often caused by not wrapping the child in a template string.
|
|
65
65
|
|
|
66
66
|
This is invalid:
|
|
@@ -78,4 +78,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
78
78
|
</Markdown>
|
|
79
79
|
`);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react50.useContext)(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&(0,import_client_logger9.deprecate)(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&(0,import_client_logger9.deprecate)(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&(0,import_client_logger9.deprecate)(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react60=__toESM(require("react"));var import_react51=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming27=require("@storybook/theming");var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>((0,import_react51.useEffect)(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),import_react51.default.createElement(DocsContext.Provider,{value:context},import_react51.default.createElement(SourceContainer,{channel:context.channel},import_react51.default.createElement(import_theming27.ThemeProvider,{theme:(0,import_theming27.ensure)(theme)},import_react51.default.createElement(DocsPageWrapper,null,children)))));var import_react59=__toESM(require("react"));var import_react52=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title2=({children})=>{let context=(0,import_react52.useContext)(DocsContext),content=children||extractTitle(context.storyById().title);return content?import_react52.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var import_react53=__toESM(require("react"));var Subtitle2=({children})=>{let docsContext=(0,import_react53.useContext)(DocsContext),{parameters}=docsContext.storyById(),content=children||(parameters==null?void 0:parameters.componentSubtitle);return content?import_react53.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var import_react56=__toESM(require("react")),import_ts_dedent6=__toESM(require("ts-dedent")),import_client_logger10=require("@storybook/client-logger");var import_react55=__toESM(require("react"));var import_react54=__toESM(require("react")),import_components35=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react54.default.createElement(import_components35.H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react54.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{var _a,_b;let{story}=useOf(of||"story",["story"]),withToolbar=((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.withToolbar)??withToolbarProp;return import_react55.default.createElement(Anchor,{storyId:story.id},expanded&&import_react55.default.createElement(import_react55.default.Fragment,null,import_react55.default.createElement(Subheading,null,story.name),import_react55.default.createElement(DescriptionContainer,{of})),import_react55.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=({name})=>{let docsContext=(0,import_react56.useContext)(DocsContext);name&&(0,import_client_logger10.deprecate)(import_ts_dedent6.default`\`name\` prop is deprecated on the Primary block.
|
|
80
80
|
The Primary block should only be used to render the primary story, which is automatically found.
|
|
81
|
-
`);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react56.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react58=__toESM(require("react")),import_theming28=require("@storybook/theming");var import_react57=__toESM(require("react")),import_components36=require("@storybook/components");var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react57.default.createElement(import_components36.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react57.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming28.styled)(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=(0,import_react58.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react58.default.createElement(import_react58.default.Fragment,null,import_react58.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react58.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(Title2,null),import_react59.default.createElement(Subtitle2,null),import_react59.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react59.default.createElement(DescriptionContainer,{of:"story"}):null,import_react59.default.createElement(Primary,null),import_react59.default.createElement(Controls3,null),isSingleStory?null:import_react59.default.createElement(Stories,null))};
|
|
81
|
+
`);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react56.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react58=__toESM(require("react")),import_theming28=require("@storybook/theming");var import_react57=__toESM(require("react")),import_components36=require("@storybook/components");var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react57.default.createElement(import_components36.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react57.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming28.styled)(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=(0,import_react58.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react58.default.createElement(import_react58.default.Fragment,null,import_react58.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react58.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(Title2,null),import_react59.default.createElement(Subtitle2,null),import_react59.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react59.default.createElement(DescriptionContainer,{of:"story"}):null,import_react59.default.createElement(Primary,null),import_react59.default.createElement(Controls3,null),isSingleStory?null:import_react59.default.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react60.default.createElement(Container,{context,theme:docsParameter.theme},import_react60.default.createElement(Page,null))}var import_react61=__toESM(require("react")),import_preview_api6=require("@storybook/preview-api");var import_preview_api5=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api4=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api4.DocsContext{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends import_preview_api5.Preview{constructor(projectAnnotations){super(new import_channels.Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id:id2,name})=>{this.storyIndex.entries[id2]={id:id2,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>(0,import_preview_api5.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=(0,import_react61.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotationsList,children}){var _a;let projectAnnotations=(0,import_preview_api6.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...(_a=projectAnnotations.parameters)==null?void 0:_a.docs,page:()=>children};return import_react61.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})}var import_react62=__toESM(require("react")),import_theming29=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react62.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react62.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(import_theming29.themes.light)},children)));var import_react63=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react63.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react63.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react64=__toESM(require("react")),Unstyled=props=>import_react64.default.createElement("div",{...props,className:"sb-unstyled"});var import_react65=__toESM(require("react")),Wrapper9=({children})=>import_react65.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NoControlsWarning,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,SourceState,Stories,Story,StoryTable,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps});
|