diff --git a/patches/@storybook+blocks+8.1.11.patch b/patches/@storybook+blocks+8.1.11.patch
deleted file mode 100644
index d0521cc0b4..0000000000
--- a/patches/@storybook+blocks+8.1.11.patch
+++ /dev/null
@@ -1,13261 +0,0 @@
-diff --git a/node_modules/@storybook/blocks/dist/index.js b/node_modules/@storybook/blocks/dist/index.js
-index a20435a..63331d0 100644
---- a/node_modules/@storybook/blocks/dist/index.js
-+++ b/node_modules/@storybook/blocks/dist/index.js
-@@ -1,22 +1,6383 @@
--var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var getControlId,getControlSetterButtonId,init_helpers=__esm({"src/controls/helpers.ts"(){getControlId=value2=>`control-${value2.replace(/\s+/g,"-")}`,getControlSetterButtonId=value2=>`set-${value2.replace(/\s+/g,"-")}`}});var Color_exports={};__export(Color_exports,{ColorControl:()=>ColorControl,default:()=>Color_default});var import_react24,import_react_colorful,import_color_convert,import_throttle,import_theming18,import_components15,import_icons5,Wrapper8,PickerTooltip,TooltipContent,Note,Swatches,SwatchColor,swatchBackground,Swatch,Input2,ToggleIcon,ColorSpace,COLOR_SPACES,COLOR_REGEXP,RGB_REGEXP,HSL_REGEXP,HEX_REGEXP,SHORTHEX_REGEXP,ColorPicker,fallbackColor,stringToArgs,parseValue,getRealValue,useColorInput,id,usePresets,ColorControl,Color_default,init_Color=__esm({"src/controls/Color.tsx"(){import_react24=__toESM(require("react")),import_react_colorful=require("react-colorful"),import_color_convert=__toESM(require("color-convert")),import_throttle=__toESM(require("lodash/throttle.js")),import_theming18=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();import_icons5=require("@storybook/icons"),Wrapper8=import_theming18.styled.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),PickerTooltip=(0,import_theming18.styled)(import_components15.WithTooltip)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),TooltipContent=import_theming18.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=(0,import_theming18.styled)(import_components15.TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=import_theming18.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=import_theming18.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:value2,style,...props})=>{let backgroundImage=`linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return import_react24.default.createElement(SwatchColor,{...props,style:{...style,backgroundImage}})},Input2=(0,import_theming18.styled)(import_components15.Form.Input)(({theme,readOnly})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,import_theming18.styled)(import_icons5.MarkupIcon)(({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:import_react_colorful.HexColorPicker,rgb:import_react_colorful.RgbaStringColorPicker,hsl:import_react_colorful.HslaStringColorPicker},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value2=>{let match=value2?.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=value2=>{if(!value2)return;let valid=!0;if(RGB_REGEXP.test(value2)){let[r,g,b,a]=stringToArgs(value2),[h,s,l]=import_color_convert.default.rgb.hsl([r,g,b])||[0,0,0];return{valid,value:value2,keyword:import_color_convert.default.rgb.keyword([r,g,b]),colorSpace:"rgb",rgb:value2,hsl:`hsla(${h}, ${s}%, ${l}%, ${a})`,hex:`#${import_color_convert.default.rgb.hex([r,g,b]).toLowerCase()}`}}if(HSL_REGEXP.test(value2)){let[h,s,l,a]=stringToArgs(value2),[r,g,b]=import_color_convert.default.hsl.rgb([h,s,l])||[0,0,0];return{valid,value:value2,keyword:import_color_convert.default.hsl.keyword([h,s,l]),colorSpace:"hsl",rgb:`rgba(${r}, ${g}, ${b}, ${a})`,hsl:value2,hex:`#${import_color_convert.default.hsl.hex([h,s,l]).toLowerCase()}`}}let plain=value2.replace("#",""),rgb=import_color_convert.default.keyword.rgb(plain)||import_color_convert.default.hex.rgb(plain),hsl=import_color_convert.default.rgb.hsl(rgb),mapped=value2;if(/[^#a-f0-9]/i.test(value2)?mapped=plain:HEX_REGEXP.test(value2)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{import_color_convert.default.keyword.hex(mapped)}catch{valid=!1}return{valid,value:mapped,keyword:import_color_convert.default.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=(value2,color,colorSpace)=>{if(!value2||!color?.valid)return fallbackColor[colorSpace];if(colorSpace!=="hex")return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return`#${import_color_convert.default.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[value2,setValue]=(0,import_react24.useState)(initialValue||""),[color,setColor]=(0,import_react24.useState)(()=>parseValue(value2)),[colorSpace,setColorSpace]=(0,import_react24.useState)(color?.colorSpace||"hex");(0,import_react24.useEffect)(()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"hex")},[initialValue]);let realValue=(0,import_react24.useMemo)(()=>getRealValue(value2,color,colorSpace).toLowerCase(),[value2,color,colorSpace]),updateValue=(0,import_react24.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=(0,import_react24.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:value2,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value2=>value2.replace(/\s*/,"").toLowerCase(),usePresets=(presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=(0,import_react24.useState)(currentColor?.valid?[currentColor]:[]);(0,import_react24.useEffect)(()=>{currentColor===void 0&&setSelectedColors([])},[currentColor]);let presets=(0,import_react24.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=(0,import_react24.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,argType})=>{let throttledOnChange=(0,import_react24.useCallback)((0,import_throttle.default)(onChange,200),[onChange]),{value:value2,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,throttledOnChange),{presets,addPreset}=usePresets(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace],readonly=!!argType?.table?.readonly;return import_react24.default.createElement(Wrapper8,{"aria-readonly":readonly},import_react24.default.createElement(PickerTooltip,{startOpen,trigger:readonly?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>addPreset(color),tooltip:import_react24.default.createElement(TooltipContent,null,import_react24.default.createElement(Picker,{color:realValue==="transparent"?"#000000":realValue,onChange:updateValue,onFocus,onBlur}),presets.length>0&&import_react24.default.createElement(Swatches,null,presets.map((preset,index)=>import_react24.default.createElement(import_components15.WithTooltip,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:import_react24.default.createElement(Note,{note:preset.keyword||preset.value})},import_react24.default.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)})))))},import_react24.default.createElement(Swatch,{value:realValue,style:{margin:4}})),import_react24.default.createElement(Input2,{id:getControlId(name),value:value2,onChange:e=>updateValue(e.target.value),onFocus:e=>e.target.select(),readOnly:readonly,placeholder:"Choose color..."}),value2?import_react24.default.createElement(ToggleIcon,{onClick:cycleColorSpace}):null)},Color_default=ColorControl}});var src_exports={};__export(src_exports,{AddContext:()=>AddContext,Anchor:()=>Anchor,AnchorMdx:()=>AnchorMdx,ArgTypes:()=>ArgTypes,BooleanControl:()=>BooleanControl,Canvas:()=>Canvas,CodeOrSourceMdx:()=>CodeOrSourceMdx,ColorControl:()=>ColorControl2,ColorItem:()=>ColorItem,ColorPalette:()=>ColorPalette,Controls:()=>Controls3,DateControl:()=>DateControl,Description:()=>DescriptionContainer,DescriptionType:()=>DescriptionType,Docs:()=>Docs,DocsContainer:()=>DocsContainer,DocsContext:()=>DocsContext,DocsPage:()=>DocsPage,DocsStory:()=>DocsStory,ExternalDocs:()=>ExternalDocs,ExternalDocsContainer:()=>ExternalDocsContainer,FilesControl:()=>FilesControl,HeaderMdx:()=>HeaderMdx,HeadersMdx:()=>HeadersMdx,Heading:()=>Heading2,IconGallery:()=>IconGallery,IconItem:()=>IconItem,Markdown:()=>Markdown2,Meta:()=>Meta,NumberControl:()=>NumberControl,ObjectControl:()=>ObjectControl,OptionsControl:()=>OptionsControl,PRIMARY_STORY:()=>PRIMARY_STORY,Primary:()=>Primary,PureArgsTable:()=>ArgsTable,RangeControl:()=>RangeControl,Source:()=>Source2,SourceContainer:()=>SourceContainer,SourceContext:()=>SourceContext,Stories:()=>Stories,Story:()=>Story2,Subheading:()=>Subheading,Subtitle:()=>Subtitle2,TextControl:()=>TextControl,Title:()=>Title2,Typeset:()=>Typeset,UNKNOWN_ARGS_HASH:()=>UNKNOWN_ARGS_HASH,Unstyled:()=>Unstyled,Wrapper:()=>Wrapper12,anchorBlockIdFromId:()=>anchorBlockIdFromId,argsHash:()=>argsHash,assertIsFn:()=>assertIsFn,extractTitle:()=>extractTitle,format:()=>format,formatDate:()=>formatDate,formatTime:()=>formatTime,getStoryId:()=>getStoryId2,getStoryProps:()=>getStoryProps,parse:()=>parse2,parseDate:()=>parseDate,parseTime:()=>parseTime,useOf:()=>useOf,useSourceProps:()=>useSourceProps});module.exports=__toCommonJS(src_exports);var import_react2=__toESM(require("react")),import_theming2=require("@storybook/theming"),import_components2=require("@storybook/components");var import_react=__toESM(require("react")),import_polished=require("polished"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components"),Wrapper=import_theming.styled.div(import_components.withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:(0,import_polished.transparentize)(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>import_react.default.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=(0,import_theming2.styled)(import_components2.SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=import_theming2.styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=import_theming2.styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${import_theming2.ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>import_react2.default.createElement(SourceSkeletonWrapper,null,import_react2.default.createElement(SourceSkeletonPlaceholder,null),import_react2.default.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),import_react2.default.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),import_react2.default.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2=!1,...rest})=>{let{typography}=(0,import_theming2.useTheme)();if(isLoading)return import_react2.default.createElement(SourceSkeleton,null);if(error)return import_react2.default.createElement(EmptyBlock,null,error);let syntaxHighlighter=import_react2.default.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?import_theming2.themes.dark:import_theming2.themes.light;return import_react2.default.createElement(import_theming2.ThemeProvider,{theme:(0,import_theming2.convert)({...overrideTheme,fontCode:typography.fonts.mono,fontBase:typography.fonts.base})},syntaxHighlighter)};var import_react3=__toESM(require("react")),import_polished2=require("polished"),import_components3=require("@storybook/components"),import_theming3=require("@storybook/theming"),toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=import_theming3.styled.h1(import_components3.withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=import_theming3.styled.h2(import_components3.withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:(0,import_polished2.transparentize)(.25,theme.color.defaultText)})),DocsContent=import_theming3.styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?(0,import_polished2.transparentize)(.1,theme.color.defaultText):(0,import_polished2.transparentize)(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return{maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...headers,fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h2")]:{...reset,...headers,fontSize:`${theme.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${theme.appBorderColor}`},[toGlobalSelector("h3")]:{...reset,...headers,fontSize:`${theme.typography.size.m1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h4")]:{...reset,...headers,fontSize:`${theme.typography.size.s3}px`},[toGlobalSelector("h5")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`},[toGlobalSelector("h6")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},[toGlobalSelector("hr")]:{border:"0 none",borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},[toGlobalSelector("img")]:{maxWidth:"100%"},[toGlobalSelector("li")]:{...reset,fontSize:theme.typography.size.s2,color:theme.color.defaultText,lineHeight:"24px","& + li":{marginTop:".25em"},"& ul, & ol":{marginTop:".25em",marginBottom:0},"& code":code},[toGlobalSelector("ol")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},[toGlobalSelector("p")]:{...reset,margin:"16px 0",fontSize:theme.typography.size.s2,lineHeight:"24px",color:theme.color.defaultText,"& code":code},[toGlobalSelector("pre")]:{...reset,fontFamily:theme.typography.fonts.mono,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",lineHeight:"18px",padding:"11px 1rem",whiteSpace:"pre-wrap",color:"inherit",borderRadius:3,margin:"1rem 0","&:not(.prismjs)":{background:"transparent",border:"none",borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:"pre-wrap",color:"inherit",fontSize:"13px",lineHeight:"19px",code:{color:"inherit",fontSize:"inherit"}},"& code":{whiteSpace:"pre"},"& code, & tt":{border:"none"}},[toGlobalSelector("span")]:{...reset,"&.frame":{display:"block",overflow:"hidden","& > span":{border:`1px solid ${theme.color.medium}`,display:"block",float:"left",overflow:"hidden",margin:"13px 0 0",padding:7,width:"auto"},"& span img":{display:"block",float:"left"},"& span span":{clear:"both",color:theme.color.darkest,display:"block",padding:"5px 0 0"}},"&.align-center":{display:"block",overflow:"hidden",clear:"both","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"center"},"& span img":{margin:"0 auto",textAlign:"center"}},"&.align-right":{display:"block",overflow:"hidden",clear:"both","& > span":{display:"block",overflow:"hidden",margin:"13px 0 0",textAlign:"right"},"& span img":{margin:0,textAlign:"right"}},"&.float-left":{display:"block",marginRight:13,overflow:"hidden",float:"left","& span":{margin:"13px 0 0"}},"&.float-right":{display:"block",marginLeft:13,overflow:"hidden",float:"right","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"right"}}},[toGlobalSelector("table")]:{...reset,margin:"16px 0",fontSize:theme.typography.size.s2,lineHeight:"24px",padding:0,borderCollapse:"collapse","& tr":{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:theme.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:theme.base==="dark"?theme.color.darker:theme.color.lighter},"& tr th":{fontWeight:"bold",color:theme.color.defaultText,border:`1px solid ${theme.appBorderColor}`,margin:0,padding:"6px 13px"},"& tr td":{border:`1px solid ${theme.appBorderColor}`,color:theme.color.defaultText,margin:0,padding:"6px 13px"},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}},[toGlobalSelector("ul")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0},listStyle:"disc"}}}),DocsWrapper=import_theming3.styled.div(({theme})=>({background:theme.background.content,display:"flex",justifyContent:"center",padding:"4rem 20px",minHeight:"100vh",boxSizing:"border-box",gap:"3rem",[`@media (min-width: ${breakpoint}px)`]:{}})),DocsPageWrapper=({children,toc})=>import_react3.default.createElement(DocsWrapper,{className:"sbdocs sbdocs-wrapper"},import_react3.default.createElement(DocsContent,{className:"sbdocs sbdocs-content"},children),toc);var import_react8=__toESM(require("react")),import_polished3=require("polished"),import_theming5=require("@storybook/theming"),import_global3=require("@storybook/global"),import_components6=require("@storybook/components");var getBlockBackgroundStyle=theme=>({borderRadius:theme.appBorderRadius,background:theme.background.content,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",border:`1px solid ${theme.appBorderColor}`});var import_react4=__toESM(require("react")),import_theming4=require("@storybook/theming"),import_components4=require("@storybook/components"),import_icons=require("@storybook/icons"),Bar=(0,import_theming4.styled)(import_components4.FlexBar)({position:"absolute",left:0,right:0,top:0,transition:"transform .2s linear"}),Wrapper2=import_theming4.styled.div({display:"flex",alignItems:"center",gap:4}),IconPlaceholder=import_theming4.styled.div(({theme})=>({width:14,height:14,borderRadius:2,margin:"0 7px",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),Toolbar=({isLoading,storyId,baseUrl,zoom,resetZoom,...rest})=>import_react4.default.createElement(Bar,{...rest},import_react4.default.createElement(Wrapper2,{key:"left"},isLoading?[1,2,3].map(key=>import_react4.default.createElement(IconPlaceholder,{key})):import_react4.default.createElement(import_react4.default.Fragment,null,import_react4.default.createElement(import_components4.IconButton,{key:"zoomin",onClick:e=>{e.preventDefault(),zoom(.8)},title:"Zoom in"},import_react4.default.createElement(import_icons.ZoomIcon,null)),import_react4.default.createElement(import_components4.IconButton,{key:"zoomout",onClick:e=>{e.preventDefault(),zoom(1.25)},title:"Zoom out"},import_react4.default.createElement(import_icons.ZoomOutIcon,null)),import_react4.default.createElement(import_components4.IconButton,{key:"zoomreset",onClick:e=>{e.preventDefault(),resetZoom()},title:"Reset zoom"},import_react4.default.createElement(import_icons.ZoomResetIcon,null)))));var import_react5=require("react"),ZoomContext=(0,import_react5.createContext)({scale:1});var import_global2=require("@storybook/global"),import_react7=__toESM(require("react")),import_components5=require("@storybook/components");var import_react6=__toESM(require("react")),import_global=require("@storybook/global"),{window:globalWindow}=import_global.global,IFrame=class extends import_react6.Component{constructor(){super(...arguments);this.iframe=null}componentDidMount(){let{id:id2}=this.props;this.iframe=globalWindow.document.getElementById(id2)}shouldComponentUpdate(nextProps){let{scale}=nextProps;return scale!==this.props.scale&&this.setIframeBodyStyle({width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"}),!1}setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style)}render(){let{id:id2,title,src,allowFullScreen,scale,...rest}=this.props;return import_react6.default.createElement("iframe",{id:id2,title,src,...allowFullScreen?{allow:"fullscreen"}:{},loading:"lazy",...rest})}};var{PREVIEW_URL}=import_global2.global,BASE_URL=PREVIEW_URL||"iframe.html",storyBlockIdFromId=({story,primary})=>`story--${story.id}${primary?"--primary":""}`,InlineStory=props=>{let storyRef=(0,import_react7.useRef)(),[showLoader,setShowLoader]=(0,import_react7.useState)(!0),[error,setError]=(0,import_react7.useState)(),{story,height,autoplay,forceInitialArgs,renderStoryToElement}=props;return(0,import_react7.useEffect)(()=>{if(!(story&&storyRef.current))return()=>{};let element=storyRef.current,cleanup=renderStoryToElement(story,element,{showMain:()=>{},showError:({title,description})=>setError(new Error(`${title} - ${description}`)),showException:err=>setError(err)},{autoplay,forceInitialArgs});return setShowLoader(!1),()=>{Promise.resolve().then(()=>cleanup())}},[autoplay,renderStoryToElement,story]),error?import_react7.default.createElement("pre",null,import_react7.default.createElement(import_components5.ErrorFormatter,{error})):import_react7.default.createElement(import_react7.default.Fragment,null,height?import_react7.default.createElement("style",null,`#${storyBlockIdFromId(props)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`):null,showLoader&&import_react7.default.createElement(StorySkeleton,null),import_react7.default.createElement("div",{ref:storyRef,id:`${storyBlockIdFromId(props)}-inner`,"data-name":story.name}))},IFrameStory=({story,height="500px"})=>import_react7.default.createElement("div",{style:{width:"100%",height}},import_react7.default.createElement(ZoomContext.Consumer,null,({scale})=>import_react7.default.createElement(IFrame,{key:"iframe",id:`iframe--${story.id}`,title:story.name,src:(0,import_components5.getStoryHref)(BASE_URL,story.id,{viewMode:"story"}),allowFullScreen:!0,scale,style:{width:"100%",height:"100%",border:"0 none"}}))),Story=props=>{let{inline}=props;return import_react7.default.createElement("div",{id:storyBlockIdFromId(props),className:"sb-story sb-unstyled","data-story-block":"true"},inline?import_react7.default.createElement(InlineStory,{...props}):import_react7.default.createElement(IFrameStory,{...props}))},StorySkeleton=()=>import_react7.default.createElement(import_components5.Loader,null);var ChildrenContainer=import_theming5.styled.div(({isColumn,columns,layout})=>({display:isColumn||!columns?"block":"flex",position:"relative",flexWrap:"wrap",overflow:"auto",flexDirection:isColumn?"column":"row","& .innerZoomElementWrapper > *":isColumn?{width:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"block"}:{maxWidth:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"inline-block"}}),({layout="padded"})=>layout==="centered"||layout==="padded"?{padding:"30px 20px","& .innerZoomElementWrapper > *":{width:"auto",border:"10px solid transparent!important"}}:{},({layout="padded"})=>layout==="centered"?{display:"flex",justifyContent:"center",justifyItems:"center",alignContent:"center",alignItems:"center"}:{},({columns})=>columns&&columns>1?{".innerZoomElementWrapper > *":{minWidth:`calc(100% / ${columns} - 20px)`}}:{}),StyledSource=(0,import_theming5.styled)(Source)(({theme})=>({margin:0,borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:theme.appBorderRadius,borderBottomRightRadius:theme.appBorderRadius,border:"none",background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":(0,import_polished3.darken)(.05,theme.background.content),color:theme.color.lightest,button:{background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":(0,import_polished3.darken)(.05,theme.background.content)}})),PreviewContainer=import_theming5.styled.div(({theme,withSource,isExpanded})=>({position:"relative",overflow:"hidden",margin:"25px 0 40px",...getBlockBackgroundStyle(theme),borderBottomLeftRadius:withSource&&isExpanded&&0,borderBottomRightRadius:withSource&&isExpanded&&0,borderBottomWidth:isExpanded&&0,"h3 + &":{marginTop:"16px"}}),({withToolbar})=>withToolbar&&{paddingTop:40}),getSource=(withSource,expanded,setExpanded)=>{switch(!0){case!!(withSource&&withSource.error):return{source:null,actionItem:{title:"No code available",className:"docblock-code-toggle docblock-code-toggle--disabled",disabled:!0,onClick:()=>setExpanded(!1)}};case expanded:return{source:import_react8.default.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Hide code",className:"docblock-code-toggle docblock-code-toggle--expanded",onClick:()=>setExpanded(!1)}};default:return{source:import_react8.default.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Show code",className:"docblock-code-toggle",onClick:()=>setExpanded(!0)}}}};function getStoryId(children){if(import_react8.Children.count(children)===1){let elt=children;if(elt.props)return elt.props.id}return null}var PositionedToolbar=(0,import_theming5.styled)(Toolbar)({position:"absolute",top:0,left:0,right:0,height:40}),Relative=import_theming5.styled.div({overflow:"hidden",position:"relative"}),Preview=({isLoading,isColumn,columns,children,withSource,withToolbar=!1,isExpanded=!1,additionalActions,className,layout="padded",...props})=>{let[expanded,setExpanded]=(0,import_react8.useState)(isExpanded),{source,actionItem}=getSource(withSource,expanded,setExpanded),[scale,setScale]=(0,import_react8.useState)(1),previewClasses=[className].concat(["sbdocs","sbdocs-preview","sb-unstyled"]),defaultActionItems=withSource?[actionItem]:[],[additionalActionItems,setAdditionalActionItems]=(0,import_react8.useState)(additionalActions?[...additionalActions]:[]),actionItems=[...defaultActionItems,...additionalActionItems],{window:globalWindow4}=import_global3.global,copyToClipboard=(0,import_react8.useCallback)(async text=>{let{createCopyToClipboardFunction}=await import("@storybook/components");createCopyToClipboardFunction()},[]),onCopyCapture=e=>{let selection=globalWindow4.getSelection();selection&&selection.type==="Range"||(e.preventDefault(),additionalActionItems.filter(item=>item.title==="Copied").length===0&&copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:"Copied",onClick:()=>{}}]),globalWindow4.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=="Copied")),1500)}))};return import_react8.default.createElement(PreviewContainer,{withSource,withToolbar,...props,className:previewClasses.join(" ")},withToolbar&&import_react8.default.createElement(PositionedToolbar,{isLoading,border:!0,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),import_react8.default.createElement(ZoomContext.Provider,{value:{scale}},import_react8.default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},import_react8.default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns,layout},import_react8.default.createElement(import_components6.Zoom.Element,{scale},Array.isArray(children)?children.map((child,i)=>import_react8.default.createElement("div",{key:i},child)):import_react8.default.createElement("div",null,children))),import_react8.default.createElement(import_components6.ActionBar,{actionItems}))),withSource&&expanded&&source)},StyledPreview=(0,import_theming5.styled)(Preview)(()=>({".docs-story":{paddingTop:32,paddingBottom:40}}));var import_react31=__toESM(require("react")),import_pickBy=__toESM(require("lodash/pickBy.js")),import_theming23=require("@storybook/theming"),import_polished8=require("polished"),import_csf=require("@storybook/csf"),import_client_logger4=require("@storybook/client-logger"),import_components19=require("@storybook/components"),import_icons8=require("@storybook/icons");var import_react27=__toESM(require("react")),import_markdown_to_jsx=__toESM(require("markdown-to-jsx")),import_polished6=require("polished"),import_theming19=require("@storybook/theming"),import_components17=require("@storybook/components");var import_react9=__toESM(require("react")),import_theming6=require("@storybook/theming"),import_components7=require("@storybook/components"),Table=import_theming6.styled.table(({theme})=>({"&&":{borderCollapse:"collapse",borderSpacing:0,border:"none",tr:{border:"none !important",background:"none"},"td, th":{padding:0,border:"none",width:"auto!important"},marginTop:0,marginBottom:0,"th:first-of-type, td:first-of-type":{paddingLeft:0},"th:last-of-type, td:last-of-type":{paddingRight:0},td:{paddingTop:0,paddingBottom:4,"&:not(:first-of-type)":{paddingLeft:10,paddingRight:0}},tbody:{boxShadow:"none",border:"none"},code:(0,import_components7.codeCommon)({theme}),div:{span:{fontWeight:"bold"}},"& code":{margin:0,display:"inline-block",fontSize:theme.typography.size.s1}}})),ArgJsDoc=({tags})=>{let params=(tags.params||[]).filter(x=>x.description),hasDisplayableParams=params.length!==0,hasDisplayableDeprecated=tags.deprecated!=null,hasDisplayableReturns=tags.returns!=null&&tags.returns.description!=null;return!hasDisplayableParams&&!hasDisplayableReturns&&!hasDisplayableDeprecated?null:import_react9.default.createElement(import_react9.default.Fragment,null,import_react9.default.createElement(Table,null,import_react9.default.createElement("tbody",null,hasDisplayableDeprecated&&import_react9.default.createElement("tr",{key:"deprecated"},import_react9.default.createElement("td",{colSpan:2},import_react9.default.createElement("strong",null,"Deprecated"),": ",tags.deprecated.toString())),hasDisplayableParams&&params.map(x=>import_react9.default.createElement("tr",{key:x.name},import_react9.default.createElement("td",null,import_react9.default.createElement("code",null,x.name)),import_react9.default.createElement("td",null,x.description))),hasDisplayableReturns&&import_react9.default.createElement("tr",{key:"returns"},import_react9.default.createElement("td",null,import_react9.default.createElement("code",null,"Returns")),import_react9.default.createElement("td",null,tags.returns.description)))))};var import_react10=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_uniq=__toESM(require("lodash/uniq.js")),import_theming7=require("@storybook/theming"),import_components8=require("@storybook/components"),import_icons2=require("@storybook/icons"),ITEMS_BEFORE_EXPANSION=8,Summary=import_theming7.styled.div(({isExpanded})=>({display:"flex",flexDirection:isExpanded?"column":"row",flexWrap:"wrap",alignItems:"flex-start",marginBottom:"-4px",minWidth:100})),Text=import_theming7.styled.span(import_components8.codeCommon,({theme,simple=!1})=>({flex:"0 0 auto",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,wordBreak:"break-word",whiteSpace:"normal",maxWidth:"100%",margin:0,marginRight:"4px",marginBottom:"4px",paddingTop:"2px",paddingBottom:"2px",lineHeight:"13px",...simple&&{background:"transparent",border:"0 none",paddingLeft:0}})),ExpandButton=import_theming7.styled.button(({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,marginBottom:"4px",background:"none",border:"none"})),Expandable=import_theming7.styled.div(import_components8.codeCommon,({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,fontSize:theme.typography.size.s1,margin:0,whiteSpace:"nowrap",display:"flex",alignItems:"center"})),Detail=import_theming7.styled.div(({theme,width})=>({width,minWidth:200,maxWidth:800,padding:15,fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,boxSizing:"content-box","& code":{padding:"0 !important"}})),ChevronUpIcon=(0,import_theming7.styled)(import_icons2.ChevronSmallUpIcon)({marginLeft:4}),ChevronDownIcon=(0,import_theming7.styled)(import_icons2.ChevronSmallDownIcon)({marginLeft:4}),EmptyArg=()=>import_react10.default.createElement("span",null,"-"),ArgText=({text,simple})=>import_react10.default.createElement(Text,{simple},text),calculateDetailWidth=(0,import_memoizerific.default)(1e3)(detail=>{let lines=detail.split(/\r?\n/);return`${Math.max(...lines.map(x=>x.length))}ch`}),getSummaryItems=summary=>{if(!summary)return[summary];let summaryItems=summary.split("|").map(value2=>value2.trim());return(0,import_uniq.default)(summaryItems)},renderSummaryItems=(summaryItems,isExpanded=!0)=>{let items=summaryItems;return isExpanded||(items=summaryItems.slice(0,ITEMS_BEFORE_EXPANSION)),items.map(item=>import_react10.default.createElement(ArgText,{key:item,text:item===""?'""':item}))},ArgSummary=({value:value2,initialExpandedArgs})=>{let{summary,detail}=value2,[isOpen,setIsOpen]=(0,import_react10.useState)(!1),[isExpanded,setIsExpanded]=(0,import_react10.useState)(initialExpandedArgs||!1);if(summary==null)return null;let summaryAsString=typeof summary.toString=="function"?summary.toString():summary;if(detail==null){if(/[(){}[\]<>]/.test(summaryAsString))return import_react10.default.createElement(ArgText,{text:summaryAsString});let summaryItems=getSummaryItems(summaryAsString),itemsCount=summaryItems.length;return itemsCount>ITEMS_BEFORE_EXPANSION?import_react10.default.createElement(Summary,{isExpanded},renderSummaryItems(summaryItems,isExpanded),import_react10.default.createElement(ExpandButton,{onClick:()=>setIsExpanded(!isExpanded)},isExpanded?"Show less...":`Show ${itemsCount-ITEMS_BEFORE_EXPANSION} more...`)):import_react10.default.createElement(Summary,null,renderSummaryItems(summaryItems))}return import_react10.default.createElement(import_components8.WithTooltipPure,{closeOnOutsideClick:!0,placement:"bottom",visible:isOpen,onVisibleChange:isVisible=>{setIsOpen(isVisible)},tooltip:import_react10.default.createElement(Detail,{width:calculateDetailWidth(detail)},import_react10.default.createElement(import_components8.SyntaxHighlighter,{language:"jsx",format:!1},detail))},import_react10.default.createElement(Expandable,{className:"sbdocs-expandable"},import_react10.default.createElement("span",null,summaryAsString),isOpen?import_react10.default.createElement(ChevronUpIcon,null):import_react10.default.createElement(ChevronDownIcon,null)))},ArgValue=({value:value2,initialExpandedArgs})=>value2==null?import_react10.default.createElement(EmptyArg,null):import_react10.default.createElement(ArgSummary,{value:value2,initialExpandedArgs});var import_react26=__toESM(require("react")),import_components16=require("@storybook/components");var import_react25=__toESM(require("react"));var import_react11=__toESM(require("react")),import_polished4=require("polished"),import_theming8=require("@storybook/theming"),import_components9=require("@storybook/components");init_helpers();var Label=import_theming8.styled.label(({theme})=>({lineHeight:"18px",alignItems:"center",marginBottom:8,display:"inline-block",position:"relative",whiteSpace:"nowrap",background:theme.boolean.background,borderRadius:"3em",padding:1,'&[aria-disabled="true"]':{opacity:.5,input:{cursor:"not-allowed"}},input:{appearance:"none",width:"100%",height:"100%",position:"absolute",left:0,top:0,margin:0,padding:0,border:"none",background:"transparent",cursor:"pointer",borderRadius:"3em","&:focus":{outline:"none",boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:"center",fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:"1",cursor:"pointer",display:"inline-block",padding:"7px 15px",transition:"all 100ms ease-out",userSelect:"none",borderRadius:"3em",color:(0,import_polished4.transparentize)(.5,theme.color.defaultText),background:"transparent","&:hover":{boxShadow:`${(0,import_polished4.opacify)(.3,theme.appBorderColor)} 0 0 0 1px inset`},"&:active":{boxShadow:`${(0,import_polished4.opacify)(.05,theme.appBorderColor)} 0 0 0 2px inset`,color:(0,import_polished4.opacify)(1,theme.appBorderColor)},"&:first-of-type":{paddingRight:8},"&:last-of-type":{paddingLeft:8}},"input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type":{background:theme.boolean.selectedBackground,boxShadow:theme.base==="light"?`${(0,import_polished4.opacify)(.1,theme.appBorderColor)} 0 0 2px`:`${theme.appBorderColor} 0 0 0 1px`,color:theme.color.defaultText,padding:"7px 15px"}})),parse=value2=>value2==="true",BooleanControl=({name,value:value2,onChange,onBlur,onFocus,argType})=>{let onSetFalse=(0,import_react11.useCallback)(()=>onChange(!1),[onChange]),readonly=!!argType?.table?.readonly;if(value2===void 0)return import_react11.default.createElement(import_components9.Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onSetFalse,disabled:readonly},"Set boolean");let controlId=getControlId(name),parsedValue=typeof value2=="string"?parse(value2):value2;return import_react11.default.createElement(Label,{"aria-disabled":readonly,htmlFor:controlId,"aria-label":name},import_react11.default.createElement("input",{id:controlId,type:"checkbox",onChange:e=>onChange(e.target.checked),checked:parsedValue,role:"switch",disabled:readonly,name,onBlur,onFocus}),import_react11.default.createElement("span",{"aria-hidden":"true"},"False"),import_react11.default.createElement("span",{"aria-hidden":"true"},"True"))};var import_react12=__toESM(require("react")),import_theming9=require("@storybook/theming"),import_components10=require("@storybook/components");init_helpers();var parseDate=value2=>{let[year,month,day]=value2.split("-"),result=new Date;return result.setFullYear(parseInt(year,10),parseInt(month,10)-1,parseInt(day,10)),result},parseTime=value2=>{let[hours,minutes]=value2.split(":"),result=new Date;return result.setHours(parseInt(hours,10)),result.setMinutes(parseInt(minutes,10)),result},formatDate=value2=>{let date=new Date(value2),year=`000${date.getFullYear()}`.slice(-4),month=`0${date.getMonth()+1}`.slice(-2),day=`0${date.getDate()}`.slice(-2);return`${year}-${month}-${day}`},formatTime=value2=>{let date=new Date(value2),hours=`0${date.getHours()}`.slice(-2),minutes=`0${date.getMinutes()}`.slice(-2);return`${hours}:${minutes}`},FormInput=(0,import_theming9.styled)(import_components10.Form.Input)(({readOnly})=>({opacity:readOnly?.5:1})),FlexSpaced=import_theming9.styled.div(({theme})=>({flex:1,display:"flex",input:{marginLeft:10,flex:1,height:32,"&::-webkit-calendar-picker-indicator":{opacity:.5,height:12,filter:theme.base==="light"?void 0:"invert(1)"}},"input:first-of-type":{marginLeft:0,flexGrow:4},"input:last-of-type":{flexGrow:3}})),DateControl=({name,value:value2,onChange,onFocus,onBlur,argType})=>{let[valid,setValid]=(0,import_react12.useState)(!0),dateRef=(0,import_react12.useRef)(),timeRef=(0,import_react12.useRef)(),readonly=!!argType?.table?.readonly;(0,import_react12.useEffect)(()=>{valid!==!1&&(dateRef&&dateRef.current&&(dateRef.current.value=formatDate(value2)),timeRef&&timeRef.current&&(timeRef.current.value=formatTime(value2)))},[value2]);let onDateChange=e=>{let parsed=parseDate(e.target.value),result=new Date(value2);result.setFullYear(parsed.getFullYear(),parsed.getMonth(),parsed.getDate());let time=result.getTime();time&&onChange(time),setValid(!!time)},onTimeChange=e=>{let parsed=parseTime(e.target.value),result=new Date(value2);result.setHours(parsed.getHours()),result.setMinutes(parsed.getMinutes());let time=result.getTime();time&&onChange(time),setValid(!!time)},controlId=getControlId(name);return import_react12.default.createElement(FlexSpaced,null,import_react12.default.createElement(FormInput,{type:"date",max:"9999-12-31",ref:dateRef,id:`${controlId}-date`,name:`${controlId}-date`,readOnly:readonly,onChange:onDateChange,onFocus,onBlur}),import_react12.default.createElement(FormInput,{type:"time",id:`${controlId}-time`,name:`${controlId}-time`,ref:timeRef,onChange:onTimeChange,readOnly:readonly,onFocus,onBlur}),valid?null:import_react12.default.createElement("div",null,"invalid"))};var import_react13=__toESM(require("react")),import_theming10=require("@storybook/theming"),import_components11=require("@storybook/components");init_helpers();var Wrapper3=import_theming10.styled.label({display:"flex"}),parse2=value2=>{let result=parseFloat(value2);return Number.isNaN(result)?void 0:result},format=value2=>value2!=null?String(value2):"",FormInput2=(0,import_theming10.styled)(import_components11.Form.Input)(({readOnly})=>({opacity:readOnly?.5:1})),NumberControl=({name,value:value2,onChange,min,max,step,onBlur,onFocus,argType})=>{let[inputValue,setInputValue]=(0,import_react13.useState)(typeof value2=="number"?value2:""),[forceVisible,setForceVisible]=(0,import_react13.useState)(!1),[parseError,setParseError]=(0,import_react13.useState)(null),readonly=!!argType?.table?.readonly,handleChange=(0,import_react13.useCallback)(event=>{setInputValue(event.target.value);let result=parseFloat(event.target.value);Number.isNaN(result)?setParseError(new Error(`'${event.target.value}' is not a number`)):(onChange(result),setParseError(null))},[onChange,setParseError]),onForceVisible=(0,import_react13.useCallback)(()=>{setInputValue("0"),onChange(0),setForceVisible(!0)},[setForceVisible]),htmlElRef=(0,import_react13.useRef)(null);return(0,import_react13.useEffect)(()=>{forceVisible&&htmlElRef.current&&htmlElRef.current.select()},[forceVisible]),(0,import_react13.useEffect)(()=>{inputValue!==(typeof value2=="number"?value2:"")&&setInputValue(value2)},[value2]),value2===void 0?import_react13.default.createElement(import_components11.Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onForceVisible,disabled:readonly},"Set number"):import_react13.default.createElement(Wrapper3,null,import_react13.default.createElement(FormInput2,{ref:htmlElRef,id:getControlId(name),type:"number",onChange:handleChange,size:"flex",placeholder:"Edit number...",value:inputValue,valid:parseError?"error":null,autoFocus:forceVisible,readOnly:readonly,name,min,max,step,onFocus,onBlur}))};var import_react17=__toESM(require("react"));var import_react14=__toESM(require("react")),import_theming11=require("@storybook/theming"),import_client_logger=require("@storybook/client-logger");var selectedKey=(value2,options)=>{let entry=options&&Object.entries(options).find(([_key,val])=>val===value2);return entry?entry[0]:void 0},selectedKeys=(value2,options)=>value2&&options?Object.entries(options).filter(entry=>value2.includes(entry[1])).map(entry=>entry[0]):[],selectedValues=(keys,options)=>keys&&options&&keys.map(key=>options[key]);init_helpers();var Wrapper4=import_theming11.styled.div(({isInline})=>isInline?{display:"flex",flexWrap:"wrap",alignItems:"flex-start",label:{display:"inline-flex",marginRight:15}}:{label:{display:"flex"}},props=>{if(props["aria-readonly"]==="true")return{input:{cursor:"not-allowed"}}}),Text2=import_theming11.styled.span({"[aria-readonly=true] &":{opacity:.5}}),Label2=import_theming11.styled.label({lineHeight:"20px",alignItems:"center",marginBottom:8,"&:last-child":{marginBottom:0},input:{margin:0,marginRight:6}}),CheckboxControl=({name,options,value:value2,onChange,isInline,argType})=>{if(!options)return import_client_logger.logger.warn(`Checkbox with no options: ${name}`),import_react14.default.createElement(import_react14.default.Fragment,null,"-");let initial=selectedKeys(value2,options),[selected,setSelected]=(0,import_react14.useState)(initial),readonly=!!argType?.table?.readonly,handleChange=e=>{let option=e.target.value,updated=[...selected];updated.includes(option)?updated.splice(updated.indexOf(option),1):updated.push(option),onChange(selectedValues(updated,options)),setSelected(updated)};(0,import_react14.useEffect)(()=>{setSelected(selectedKeys(value2,options))},[value2]);let controlId=getControlId(name);return import_react14.default.createElement(Wrapper4,{"aria-readonly":readonly,isInline},Object.keys(options).map((key,index)=>{let id2=`${controlId}-${index}`;return import_react14.default.createElement(Label2,{key:id2,htmlFor:id2},import_react14.default.createElement("input",{type:"checkbox",disabled:readonly,id:id2,name:id2,value:key,onChange:handleChange,checked:selected?.includes(key)}),import_react14.default.createElement(Text2,null,key))}))};var import_react15=__toESM(require("react")),import_theming12=require("@storybook/theming"),import_client_logger2=require("@storybook/client-logger");init_helpers();var Wrapper5=import_theming12.styled.div(({isInline})=>isInline?{display:"flex",flexWrap:"wrap",alignItems:"flex-start",label:{display:"inline-flex",marginRight:15}}:{label:{display:"flex"}},props=>{if(props["aria-readonly"]==="true")return{input:{cursor:"not-allowed"}}}),Text3=import_theming12.styled.span({"[aria-readonly=true] &":{opacity:.5}}),Label3=import_theming12.styled.label({lineHeight:"20px",alignItems:"center",marginBottom:8,"&:last-child":{marginBottom:0},input:{margin:0,marginRight:6}}),RadioControl=({name,options,value:value2,onChange,isInline,argType})=>{if(!options)return import_client_logger2.logger.warn(`Radio with no options: ${name}`),import_react15.default.createElement(import_react15.default.Fragment,null,"-");let selection=selectedKey(value2,options),controlId=getControlId(name),readonly=!!argType?.table?.readonly;return import_react15.default.createElement(Wrapper5,{"aria-readonly":readonly,isInline},Object.keys(options).map((key,index)=>{let id2=`${controlId}-${index}`;return import_react15.default.createElement(Label3,{key:id2,htmlFor:id2},import_react15.default.createElement("input",{type:"radio",id:id2,name:id2,disabled:readonly,value:key,onChange:e=>onChange(options[e.currentTarget.value]),checked:key===selection}),import_react15.default.createElement(Text3,null,key))}))};var import_react16=__toESM(require("react")),import_theming13=require("@storybook/theming"),import_client_logger3=require("@storybook/client-logger");init_helpers();var import_icons3=require("@storybook/icons"),styleResets={appearance:"none",border:"0 none",boxSizing:"inherit",display:" block",margin:" 0",background:"transparent",padding:0,fontSize:"inherit",position:"relative"},OptionsSelect=import_theming13.styled.select(styleResets,({theme})=>({boxSizing:"border-box",position:"relative",padding:"6px 10px",width:"100%",color:theme.input.color||"inherit",background:theme.input.background,borderRadius:theme.input.borderRadius,boxShadow:`${theme.input.border} 0 0 0 1px inset`,fontSize:theme.typography.size.s2-1,lineHeight:"20px","&:focus":{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:"none"},"&[disabled]":{cursor:"not-allowed",opacity:.5},"::placeholder":{color:theme.textMutedColor},"&[multiple]":{overflow:"auto",padding:0,option:{display:"block",padding:"6px 10px",marginLeft:1,marginRight:1}}})),SelectWrapper=import_theming13.styled.span(({theme})=>({display:"inline-block",lineHeight:"normal",overflow:"hidden",position:"relative",verticalAlign:"top",width:"100%",svg:{position:"absolute",zIndex:1,pointerEvents:"none",height:"12px",marginTop:"-6px",right:"12px",top:"50%",fill:theme.textMutedColor,path:{fill:theme.textMutedColor}}})),NO_SELECTION="Choose option...",SingleSelect=({name,value:value2,options,onChange,argType})=>{let handleChange=e=>{onChange(options[e.currentTarget.value])},selection=selectedKey(value2,options)||NO_SELECTION,controlId=getControlId(name),readonly=!!argType?.table?.readonly;return import_react16.default.createElement(SelectWrapper,null,import_react16.default.createElement(import_icons3.ChevronSmallDownIcon,null),import_react16.default.createElement(OptionsSelect,{disabled:readonly,id:controlId,value:selection,onChange:handleChange},import_react16.default.createElement("option",{key:"no-selection",disabled:!0},NO_SELECTION),Object.keys(options).map(key=>import_react16.default.createElement("option",{key,value:key},key))))},MultiSelect=({name,value:value2,options,onChange,argType})=>{let handleChange=e=>{let selection2=Array.from(e.currentTarget.options).filter(option=>option.selected).map(option=>option.value);onChange(selectedValues(selection2,options))},selection=selectedKeys(value2,options),controlId=getControlId(name),readonly=!!argType?.table?.readonly;return import_react16.default.createElement(SelectWrapper,null,import_react16.default.createElement(OptionsSelect,{disabled:readonly,id:controlId,multiple:!0,value:selection,onChange:handleChange},Object.keys(options).map(key=>import_react16.default.createElement("option",{key,value:key},key))))},SelectControl=props=>{let{name,options}=props;return options?props.isMulti?import_react16.default.createElement(MultiSelect,{...props}):import_react16.default.createElement(SingleSelect,{...props}):(import_client_logger3.logger.warn(`Select with no options: ${name}`),import_react16.default.createElement(import_react16.default.Fragment,null,"-"))};var normalizeOptions=(options,labels)=>Array.isArray(options)?options.reduce((acc,item)=>(acc[labels?.[item]||String(item)]=item,acc),{}):options,Controls={check:CheckboxControl,"inline-check":CheckboxControl,radio:RadioControl,"inline-radio":RadioControl,select:SelectControl,"multi-select":SelectControl},OptionsControl=props=>{let{type="select",labels,argType}=props,normalized={...props,argType,options:argType?normalizeOptions(argType.options,labels):{},isInline:type.includes("inline"),isMulti:type.includes("multi")},Control=Controls[type];if(Control)return import_react17.default.createElement(Control,{...normalized});throw new Error(`Unknown options type: ${type}`)};var import_global4=require("@storybook/global"),import_cloneDeep=__toESM(require("lodash/cloneDeep.js")),import_react20=__toESM(require("react")),import_theming14=require("@storybook/theming"),import_components12=require("@storybook/components"),import_icons4=require("@storybook/icons");var import_react19=__toESM(require("react"));var import_react18=__toESM(require("react"));var VALUE="value",KEY="key";var ERROR="Error",OBJECT="Object",ARRAY="Array",STRING="String",NUMBER="Number",BOOLEAN="Boolean",DATE="Date",NULL="Null",UNDEFINED="Undefined",FUNCTION="Function",SYMBOL="Symbol";var ADD_DELTA_TYPE="ADD_DELTA_TYPE",REMOVE_DELTA_TYPE="REMOVE_DELTA_TYPE",UPDATE_DELTA_TYPE="UPDATE_DELTA_TYPE";function getObjectType(obj){return obj!==null&&typeof obj=="object"&&!Array.isArray(obj)&&typeof obj[Symbol.iterator]=="function"?"Iterable":Object.prototype.toString.call(obj).slice(8,-1)}function isComponentWillChange(oldValue,newValue){let oldType=getObjectType(oldValue),newType=getObjectType(newValue);return(oldType==="Function"||newType==="Function")&&newType!==oldType}var JsonAddValue=class extends import_react18.Component{constructor(props){super(props),this.state={inputRefKey:null,inputRefValue:null},this.refInputValue=this.refInputValue.bind(this),this.refInputKey=this.refInputKey.bind(this),this.onKeydown=this.onKeydown.bind(this),this.onSubmit=this.onSubmit.bind(this)}componentDidMount(){let{inputRefKey,inputRefValue}=this.state,{onlyValue}=this.props;inputRefKey&&typeof inputRefKey.focus=="function"&&inputRefKey.focus(),onlyValue&&inputRefValue&&typeof inputRefValue.focus=="function"&&inputRefValue.focus(),document.addEventListener("keydown",this.onKeydown)}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown)}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.onSubmit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.props.handleCancel()))}onSubmit(){let{handleAdd,onlyValue,onSubmitValueParser,keyPath,deep}=this.props,{inputRefKey,inputRefValue}=this.state,result={};if(!onlyValue){if(!inputRefKey.value)return;result.key=inputRefKey.value}result.newValue=onSubmitValueParser(!1,keyPath,deep,result.key,inputRefValue.value),handleAdd(result)}refInputKey(node){this.state.inputRefKey=node}refInputValue(node){this.state.inputRefValue=node}render(){let{handleCancel,onlyValue,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep}=this.props,addButtonElementLayout=(0,import_react18.cloneElement)(addButtonElement,{onClick:this.onSubmit}),cancelButtonElementLayout=(0,import_react18.cloneElement)(cancelButtonElement,{onClick:handleCancel}),inputElementValue=inputElementGenerator(VALUE,keyPath,deep),inputElementValueLayout=(0,import_react18.cloneElement)(inputElementValue,{placeholder:"Value",ref:this.refInputValue}),inputElementKeyLayout=null;if(!onlyValue){let inputElementKey=inputElementGenerator(KEY,keyPath,deep);inputElementKeyLayout=(0,import_react18.cloneElement)(inputElementKey,{placeholder:"Key",ref:this.refInputKey})}return import_react18.default.createElement("span",{className:"rejt-add-value-node"},inputElementKeyLayout,inputElementValueLayout,cancelButtonElementLayout,addButtonElementLayout)}};JsonAddValue.defaultProps={onlyValue:!1,addButtonElement:import_react18.default.createElement("button",null,"+"),cancelButtonElement:import_react18.default.createElement("button",null,"c")};var JsonArray=class extends import_react18.Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={data:props.data,name:props.name,keyPath,deep:props.deep,nextDeep:props.deep+1,collapsed:props.isCollapsed(keyPath,props.deep,props.data),addFormVisible:!1},this.handleCollapseMode=this.handleCollapseMode.bind(this),this.handleRemoveItem=this.handleRemoveItem.bind(this),this.handleAddMode=this.handleAddMode.bind(this),this.handleAddValueAdd=this.handleAddValueAdd.bind(this),this.handleAddValueCancel=this.handleAddValueCancel.bind(this),this.handleEditValue=this.handleEditValue.bind(this),this.onChildUpdate=this.onChildUpdate.bind(this),this.renderCollapsed=this.renderCollapsed.bind(this),this.renderNotCollapsed=this.renderNotCollapsed.bind(this)}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}onChildUpdate(childKey,childData){let{data,keyPath}=this.state;data[childKey]=childData,this.setState({data});let{onUpdate}=this.props,size=keyPath.length;onUpdate(keyPath[size-1],data)}handleAddMode(){this.setState({addFormVisible:!0})}handleCollapseMode(){this.setState(state=>({collapsed:!state.collapsed}))}handleRemoveItem(index){return()=>{let{beforeRemoveAction,logger:logger4}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[index];beforeRemoveAction(index,keyPath,deep,oldValue).then(()=>{let deltaUpdateResult={keyPath,deep,key:index,oldValue,type:REMOVE_DELTA_TYPE};data.splice(index,1),this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate(deltaUpdateResult)}).catch(logger4.error)}}handleAddValueAdd({newValue}){let{data,keyPath,nextDeep:deep}=this.state,{beforeAddAction,logger:logger4}=this.props;beforeAddAction(data.length,keyPath,deep,newValue).then(()=>{let newData=[...data,newValue];this.setState({data:newData}),this.handleAddValueCancel();let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],newData),onDeltaUpdate({type:ADD_DELTA_TYPE,keyPath,deep,key:newData.length-1,newValue})}).catch(logger4.error)}handleAddValueCancel(){this.setState({addFormVisible:!1})}handleEditValue({key,value:value2}){return new Promise((resolve,reject)=>{let{beforeUpdateAction}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeUpdateAction(key,keyPath,deep,oldValue,value2).then(()=>{data[key]=value2,this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:UPDATE_DELTA_TYPE,keyPath,deep,key,newValue:value2,oldValue}),resolve(void 0)}).catch(reject)})}renderCollapsed(){let{name,data,keyPath,deep}=this.state,{handleRemove,readOnly,getStyle,dataType,minusMenuElement}=this.props,{minus,collapsed}=getStyle(name,data,keyPath,deep,dataType),isReadOnly=readOnly(name,data,keyPath,deep,dataType),removeItemButton=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return import_react18.default.createElement("span",{className:"rejt-collapsed"},import_react18.default.createElement("span",{className:"rejt-collapsed-text",style:collapsed,onClick:this.handleCollapseMode},"[...] ",data.length," ",data.length===1?"item":"items"),!isReadOnly&&removeItemButton)}renderNotCollapsed(){let{name,data,keyPath,deep,addFormVisible,nextDeep}=this.state,{isCollapsed,handleRemove,onDeltaUpdate,readOnly,getStyle,dataType,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,{minus,plus,delimiter,ul,addForm}=getStyle(name,data,keyPath,deep,dataType),isReadOnly=readOnly(name,data,keyPath,deep,dataType),addItemButton=(0,import_react18.cloneElement)(plusMenuElement,{onClick:this.handleAddMode,className:"rejt-plus-menu",style:plus}),removeItemButton=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return import_react18.default.createElement("span",{className:"rejt-not-collapsed"},import_react18.default.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"["),!addFormVisible&&addItemButton,import_react18.default.createElement("ul",{className:"rejt-not-collapsed-list",style:ul},data.map((item,index)=>import_react18.default.createElement(JsonNode,{key:index,name:index.toString(),data:item,keyPath,deep:nextDeep,isCollapsed,handleRemove:this.handleRemoveItem(index),handleUpdateValue:this.handleEditValue,onUpdate:this.onChildUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}))),!isReadOnly&&addFormVisible&&import_react18.default.createElement("div",{className:"rejt-add-form",style:addForm},import_react18.default.createElement(JsonAddValue,{handleAdd:this.handleAddValueAdd,handleCancel:this.handleAddValueCancel,onlyValue:!0,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep,onSubmitValueParser})),import_react18.default.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"]"),!isReadOnly&&removeItemButton)}render(){let{name,collapsed,data,keyPath,deep}=this.state,{dataType,getStyle}=this.props,value2=collapsed?this.renderCollapsed():this.renderNotCollapsed(),style=getStyle(name,data,keyPath,deep,dataType);return import_react18.default.createElement("div",{className:"rejt-array-node"},import_react18.default.createElement("span",{onClick:this.handleCollapseMode},import_react18.default.createElement("span",{className:"rejt-name",style:style.name},name," :"," ")),value2)}};JsonArray.defaultProps={keyPath:[],deep:0,minusMenuElement:import_react18.default.createElement("span",null," - "),plusMenuElement:import_react18.default.createElement("span",null," + ")};var JsonFunctionValue=class extends import_react18.Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={value:props.value,name:props.name,keyPath,deep:props.deep,editEnabled:!1,inputRef:null},this.handleEditMode=this.handleEditMode.bind(this),this.refInput=this.refInput.bind(this),this.handleCancelEdit=this.handleCancelEdit.bind(this),this.handleEdit=this.handleEdit.bind(this),this.onKeydown=this.onKeydown.bind(this)}static getDerivedStateFromProps(props,state){return props.value!==state.value?{value:props.value}:null}componentDidUpdate(){let{editEnabled,inputRef,name,value:value2,keyPath,deep}=this.state,{readOnly,dataType}=this.props,readOnlyResult=readOnly(name,value2,keyPath,deep,dataType);editEnabled&&!readOnlyResult&&typeof inputRef.focus=="function"&&inputRef.focus()}componentDidMount(){document.addEventListener("keydown",this.onKeydown)}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown)}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.handleEdit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.handleCancelEdit()))}handleEdit(){let{handleUpdateValue,originalValue,logger:logger4,onSubmitValueParser,keyPath}=this.props,{inputRef,name,deep}=this.state;if(!inputRef)return;let newValue=onSubmitValueParser(!0,keyPath,deep,name,inputRef.value);handleUpdateValue({value:newValue,key:name}).then(()=>{isComponentWillChange(originalValue,newValue)||this.handleCancelEdit()}).catch(logger4.error)}handleEditMode(){this.setState({editEnabled:!0})}refInput(node){this.state.inputRef=node}handleCancelEdit(){this.setState({editEnabled:!1})}render(){let{name,value:value2,editEnabled,keyPath,deep}=this.state,{handleRemove,originalValue,readOnly,dataType,getStyle,editButtonElement,cancelButtonElement,textareaElementGenerator,minusMenuElement,keyPath:comeFromKeyPath}=this.props,style=getStyle(name,originalValue,keyPath,deep,dataType),result=null,minusElement=null,resultOnlyResult=readOnly(name,originalValue,keyPath,deep,dataType);if(editEnabled&&!resultOnlyResult){let textareaElement=textareaElementGenerator(VALUE,comeFromKeyPath,deep,name,originalValue,dataType),editButtonElementLayout=(0,import_react18.cloneElement)(editButtonElement,{onClick:this.handleEdit}),cancelButtonElementLayout=(0,import_react18.cloneElement)(cancelButtonElement,{onClick:this.handleCancelEdit}),textareaElementLayout=(0,import_react18.cloneElement)(textareaElement,{ref:this.refInput,defaultValue:originalValue});result=import_react18.default.createElement("span",{className:"rejt-edit-form",style:style.editForm},textareaElementLayout," ",cancelButtonElementLayout,editButtonElementLayout),minusElement=null}else{result=import_react18.default.createElement("span",{className:"rejt-value",style:style.value,onClick:resultOnlyResult?null:this.handleEditMode},value2);let minusMenuLayout=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:style.minus});minusElement=resultOnlyResult?null:minusMenuLayout}return import_react18.default.createElement("li",{className:"rejt-function-value-node",style:style.li},import_react18.default.createElement("span",{className:"rejt-name",style:style.name},name," :"," "),result,minusElement)}};JsonFunctionValue.defaultProps={keyPath:[],deep:0,handleUpdateValue:()=>{},editButtonElement:import_react18.default.createElement("button",null,"e"),cancelButtonElement:import_react18.default.createElement("button",null,"c"),minusMenuElement:import_react18.default.createElement("span",null," - ")};var JsonNode=class extends import_react18.Component{constructor(props){super(props),this.state={data:props.data,name:props.name,keyPath:props.keyPath,deep:props.deep}}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}render(){let{data,name,keyPath,deep}=this.state,{isCollapsed,handleRemove,handleUpdateValue,onUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,readOnlyTrue=()=>!0,dataType=getObjectType(data);switch(dataType){case ERROR:return import_react18.default.createElement(JsonObject,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly:readOnlyTrue,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case OBJECT:return import_react18.default.createElement(JsonObject,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case ARRAY:return import_react18.default.createElement(JsonArray,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case STRING:return import_react18.default.createElement(JsonValue,{name,value:`"${data}"`,originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case NUMBER:return import_react18.default.createElement(JsonValue,{name,value:data,originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case BOOLEAN:return import_react18.default.createElement(JsonValue,{name,value:data?"true":"false",originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case DATE:return import_react18.default.createElement(JsonValue,{name,value:data.toISOString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly:readOnlyTrue,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case NULL:return import_react18.default.createElement(JsonValue,{name,value:"null",originalValue:"null",keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case UNDEFINED:return import_react18.default.createElement(JsonValue,{name,value:"undefined",originalValue:"undefined",keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case FUNCTION:return import_react18.default.createElement(JsonFunctionValue,{name,value:data.toString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,textareaElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case SYMBOL:return import_react18.default.createElement(JsonValue,{name,value:data.toString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly:readOnlyTrue,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});default:return null}}};JsonNode.defaultProps={keyPath:[],deep:0};var JsonObject=class extends import_react18.Component{constructor(props){super(props);let keyPath=props.deep===-1?[]:[...props.keyPath,props.name];this.state={name:props.name,data:props.data,keyPath,deep:props.deep,nextDeep:props.deep+1,collapsed:props.isCollapsed(keyPath,props.deep,props.data),addFormVisible:!1},this.handleCollapseMode=this.handleCollapseMode.bind(this),this.handleRemoveValue=this.handleRemoveValue.bind(this),this.handleAddMode=this.handleAddMode.bind(this),this.handleAddValueAdd=this.handleAddValueAdd.bind(this),this.handleAddValueCancel=this.handleAddValueCancel.bind(this),this.handleEditValue=this.handleEditValue.bind(this),this.onChildUpdate=this.onChildUpdate.bind(this),this.renderCollapsed=this.renderCollapsed.bind(this),this.renderNotCollapsed=this.renderNotCollapsed.bind(this)}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}onChildUpdate(childKey,childData){let{data,keyPath}=this.state;data[childKey]=childData,this.setState({data});let{onUpdate}=this.props,size=keyPath.length;onUpdate(keyPath[size-1],data)}handleAddMode(){this.setState({addFormVisible:!0})}handleAddValueCancel(){this.setState({addFormVisible:!1})}handleAddValueAdd({key,newValue}){let{data,keyPath,nextDeep:deep}=this.state,{beforeAddAction,logger:logger4}=this.props;beforeAddAction(key,keyPath,deep,newValue).then(()=>{data[key]=newValue,this.setState({data}),this.handleAddValueCancel();let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:ADD_DELTA_TYPE,keyPath,deep,key,newValue})}).catch(logger4.error)}handleRemoveValue(key){return()=>{let{beforeRemoveAction,logger:logger4}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeRemoveAction(key,keyPath,deep,oldValue).then(()=>{let deltaUpdateResult={keyPath,deep,key,oldValue,type:REMOVE_DELTA_TYPE};delete data[key],this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate(deltaUpdateResult)}).catch(logger4.error)}}handleCollapseMode(){this.setState(state=>({collapsed:!state.collapsed}))}handleEditValue({key,value:value2}){return new Promise((resolve,reject)=>{let{beforeUpdateAction}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeUpdateAction(key,keyPath,deep,oldValue,value2).then(()=>{data[key]=value2,this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:UPDATE_DELTA_TYPE,keyPath,deep,key,newValue:value2,oldValue}),resolve()}).catch(reject)})}renderCollapsed(){let{name,keyPath,deep,data}=this.state,{handleRemove,readOnly,dataType,getStyle,minusMenuElement}=this.props,{minus,collapsed}=getStyle(name,data,keyPath,deep,dataType),keyList=Object.getOwnPropertyNames(data),isReadOnly=readOnly(name,data,keyPath,deep,dataType),removeItemButton=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return import_react18.default.createElement("span",{className:"rejt-collapsed"},import_react18.default.createElement("span",{className:"rejt-collapsed-text",style:collapsed,onClick:this.handleCollapseMode},"{...}"," ",keyList.length," ",keyList.length===1?"key":"keys"),!isReadOnly&&removeItemButton)}renderNotCollapsed(){let{name,data,keyPath,deep,nextDeep,addFormVisible}=this.state,{isCollapsed,handleRemove,onDeltaUpdate,readOnly,getStyle,dataType,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,{minus,plus,addForm,ul,delimiter}=getStyle(name,data,keyPath,deep,dataType),keyList=Object.getOwnPropertyNames(data),isReadOnly=readOnly(name,data,keyPath,deep,dataType),addItemButton=(0,import_react18.cloneElement)(plusMenuElement,{onClick:this.handleAddMode,className:"rejt-plus-menu",style:plus}),removeItemButton=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus}),list=keyList.map(key=>import_react18.default.createElement(JsonNode,{key,name:key,data:data[key],keyPath,deep:nextDeep,isCollapsed,handleRemove:this.handleRemoveValue(key),handleUpdateValue:this.handleEditValue,onUpdate:this.onChildUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}));return import_react18.default.createElement("span",{className:"rejt-not-collapsed"},import_react18.default.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"{"),!isReadOnly&&addItemButton,import_react18.default.createElement("ul",{className:"rejt-not-collapsed-list",style:ul},list),!isReadOnly&&addFormVisible&&import_react18.default.createElement("div",{className:"rejt-add-form",style:addForm},import_react18.default.createElement(JsonAddValue,{handleAdd:this.handleAddValueAdd,handleCancel:this.handleAddValueCancel,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep,onSubmitValueParser})),import_react18.default.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"}"),!isReadOnly&&removeItemButton)}render(){let{name,collapsed,data,keyPath,deep}=this.state,{getStyle,dataType}=this.props,value2=collapsed?this.renderCollapsed():this.renderNotCollapsed(),style=getStyle(name,data,keyPath,deep,dataType);return import_react18.default.createElement("div",{className:"rejt-object-node"},import_react18.default.createElement("span",{onClick:this.handleCollapseMode},import_react18.default.createElement("span",{className:"rejt-name",style:style.name},name," :"," ")),value2)}};JsonObject.defaultProps={keyPath:[],deep:0,minusMenuElement:import_react18.default.createElement("span",null," - "),plusMenuElement:import_react18.default.createElement("span",null," + ")};var JsonValue=class extends import_react18.Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={value:props.value,name:props.name,keyPath,deep:props.deep,editEnabled:!1,inputRef:null},this.handleEditMode=this.handleEditMode.bind(this),this.refInput=this.refInput.bind(this),this.handleCancelEdit=this.handleCancelEdit.bind(this),this.handleEdit=this.handleEdit.bind(this),this.onKeydown=this.onKeydown.bind(this)}static getDerivedStateFromProps(props,state){return props.value!==state.value?{value:props.value}:null}componentDidUpdate(){let{editEnabled,inputRef,name,value:value2,keyPath,deep}=this.state,{readOnly,dataType}=this.props,isReadOnly=readOnly(name,value2,keyPath,deep,dataType);editEnabled&&!isReadOnly&&typeof inputRef.focus=="function"&&inputRef.focus()}componentDidMount(){document.addEventListener("keydown",this.onKeydown)}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown)}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.handleEdit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.handleCancelEdit()))}handleEdit(){let{handleUpdateValue,originalValue,logger:logger4,onSubmitValueParser,keyPath}=this.props,{inputRef,name,deep}=this.state;if(!inputRef)return;let newValue=onSubmitValueParser(!0,keyPath,deep,name,inputRef.value);handleUpdateValue({value:newValue,key:name}).then(()=>{isComponentWillChange(originalValue,newValue)||this.handleCancelEdit()}).catch(logger4.error)}handleEditMode(){this.setState({editEnabled:!0})}refInput(node){this.state.inputRef=node}handleCancelEdit(){this.setState({editEnabled:!1})}render(){let{name,value:value2,editEnabled,keyPath,deep}=this.state,{handleRemove,originalValue,readOnly,dataType,getStyle,editButtonElement,cancelButtonElement,inputElementGenerator,minusMenuElement,keyPath:comeFromKeyPath}=this.props,style=getStyle(name,originalValue,keyPath,deep,dataType),isReadOnly=readOnly(name,originalValue,keyPath,deep,dataType),isEditing=editEnabled&&!isReadOnly,inputElement=inputElementGenerator(VALUE,comeFromKeyPath,deep,name,originalValue,dataType),editButtonElementLayout=(0,import_react18.cloneElement)(editButtonElement,{onClick:this.handleEdit}),cancelButtonElementLayout=(0,import_react18.cloneElement)(cancelButtonElement,{onClick:this.handleCancelEdit}),inputElementLayout=(0,import_react18.cloneElement)(inputElement,{ref:this.refInput,defaultValue:JSON.stringify(originalValue)}),minusMenuLayout=(0,import_react18.cloneElement)(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:style.minus});return import_react18.default.createElement("li",{className:"rejt-value-node",style:style.li},import_react18.default.createElement("span",{className:"rejt-name",style:style.name},name," : "),isEditing?import_react18.default.createElement("span",{className:"rejt-edit-form",style:style.editForm},inputElementLayout," ",cancelButtonElementLayout,editButtonElementLayout):import_react18.default.createElement("span",{className:"rejt-value",style:style.value,onClick:isReadOnly?null:this.handleEditMode},String(value2)),!isReadOnly&&!isEditing&&minusMenuLayout)}};JsonValue.defaultProps={keyPath:[],deep:0,handleUpdateValue:()=>Promise.resolve(),editButtonElement:import_react18.default.createElement("button",null,"e"),cancelButtonElement:import_react18.default.createElement("button",null,"c"),minusMenuElement:import_react18.default.createElement("span",null," - ")};var object={minus:{color:"red"},plus:{color:"green"},collapsed:{color:"grey"},delimiter:{},ul:{padding:"0px",margin:"0 0 0 25px",listStyle:"none"},name:{color:"#2287CD"},addForm:{}},array={minus:{color:"red"},plus:{color:"green"},collapsed:{color:"grey"},delimiter:{},ul:{padding:"0px",margin:"0 0 0 25px",listStyle:"none"},name:{color:"#2287CD"},addForm:{}},value={minus:{color:"red"},editForm:{},value:{color:"#7bba3d"},li:{minHeight:"22px",lineHeight:"22px",outline:"0px"},name:{color:"#2287CD"}};function parse3(string){let result=string;if(result.indexOf("function")===0)return(0,eval)(`(${result})`);try{result=JSON.parse(string)}catch{}return result}var JsonTree=class extends import_react19.Component{constructor(props){super(props),this.state={data:props.data,rootName:props.rootName},this.onUpdate=this.onUpdate.bind(this),this.removeRoot=this.removeRoot.bind(this)}static getDerivedStateFromProps(props,state){return props.data!==state.data||props.rootName!==state.rootName?{data:props.data,rootName:props.rootName}:null}onUpdate(key,data){this.setState({data}),this.props.onFullyUpdate(data)}removeRoot(){this.onUpdate(null,null)}render(){let{data,rootName}=this.state,{isCollapsed,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElement,textareaElement,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser,fallback=null}=this.props,dataType=getObjectType(data),readOnlyFunction=readOnly;getObjectType(readOnly)==="Boolean"&&(readOnlyFunction=()=>readOnly);let inputElementFunction=inputElement;inputElement&&getObjectType(inputElement)!=="Function"&&(inputElementFunction=()=>inputElement);let textareaElementFunction=textareaElement;return textareaElement&&getObjectType(textareaElement)!=="Function"&&(textareaElementFunction=()=>textareaElement),dataType==="Object"||dataType==="Array"?import_react19.default.createElement("div",{className:"rejt-tree"},import_react19.default.createElement(JsonNode,{data,name:rootName,deep:-1,isCollapsed,onUpdate:this.onUpdate,onDeltaUpdate,readOnly:readOnlyFunction,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator:inputElementFunction,textareaElementGenerator:textareaElementFunction,minusMenuElement,plusMenuElement,handleRemove:this.removeRoot,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser})):fallback}};JsonTree.defaultProps={rootName:"root",isCollapsed:(keyPath,deep)=>deep!==-1,getStyle:(keyName,data,keyPath,deep,dataType)=>{switch(dataType){case"Object":case"Error":return object;case"Array":return array;default:return value}},readOnly:()=>!1,onFullyUpdate:()=>{},onDeltaUpdate:()=>{},beforeRemoveAction:()=>Promise.resolve(),beforeAddAction:()=>Promise.resolve(),beforeUpdateAction:()=>Promise.resolve(),logger:{error:()=>{}},onSubmitValueParser:(isEditMode,keyPath,deep,name,rawValue)=>parse3(rawValue),inputElement:()=>import_react19.default.createElement("input",null),textareaElement:()=>import_react19.default.createElement("textarea",null),fallback:null};init_helpers();var{window:globalWindow2}=import_global4.global,Wrapper6=import_theming14.styled.div(({theme})=>({position:"relative",display:"flex",'&[aria-readonly="true"]':{opacity:.5},".rejt-tree":{marginLeft:"1rem",fontSize:"13px"},".rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed":{"& > svg":{opacity:0,transition:"opacity 0.2s"}},".rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed":{"& > svg":{opacity:1}},".rejt-edit-form button":{display:"none"},".rejt-add-form":{marginLeft:10},".rejt-add-value-node":{display:"inline-flex",alignItems:"center"},".rejt-name":{lineHeight:"22px"},".rejt-not-collapsed-delimiter":{lineHeight:"22px"},".rejt-plus-menu":{marginLeft:5},".rejt-object-node > span > *, .rejt-array-node > span > *":{position:"relative",zIndex:2},".rejt-object-node, .rejt-array-node":{position:"relative"},".rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before":{content:'""',position:"absolute",top:0,display:"block",width:"100%",marginLeft:"-1rem",padding:"0 4px 0 1rem",height:22},".rejt-collapsed::before, .rejt-not-collapsed::before":{zIndex:1,background:"transparent",borderRadius:4,transition:"background 0.2s",pointerEvents:"none",opacity:.1},".rejt-object-node:hover, .rejt-array-node:hover":{"& > .rejt-collapsed::before, & > .rejt-not-collapsed::before":{background:theme.color.secondary}},".rejt-collapsed::after, .rejt-not-collapsed::after":{content:'""',position:"absolute",display:"inline-block",pointerEvents:"none",width:0,height:0},".rejt-collapsed::after":{left:-8,top:8,borderTop:"3px solid transparent",borderBottom:"3px solid transparent",borderLeft:"3px solid rgba(153,153,153,0.6)"},".rejt-not-collapsed::after":{left:-10,top:10,borderTop:"3px solid rgba(153,153,153,0.6)",borderLeft:"3px solid transparent",borderRight:"3px solid transparent"},".rejt-value":{display:"inline-block",border:"1px solid transparent",borderRadius:4,margin:"1px 0",padding:"0 4px",cursor:"text",color:theme.color.defaultText},".rejt-value-node:hover > .rejt-value":{background:theme.color.lighter,borderColor:theme.appBorderColor}})),ButtonInline=import_theming14.styled.button(({theme,primary})=>({border:0,height:20,margin:1,borderRadius:4,background:primary?theme.color.secondary:"transparent",color:primary?theme.color.lightest:theme.color.dark,fontWeight:primary?"bold":"normal",cursor:"pointer",order:primary?"initial":9})),ActionAddIcon=(0,import_theming14.styled)(import_icons4.AddIcon)(({theme,disabled})=>({display:"inline-block",verticalAlign:"middle",width:15,height:15,padding:3,marginLeft:5,cursor:disabled?"not-allowed":"pointer",color:theme.textMutedColor,"&:hover":disabled?{}:{color:theme.color.ancillary},"svg + &":{marginLeft:0}})),ActionSubstractIcon=(0,import_theming14.styled)(import_icons4.SubtractIcon)(({theme,disabled})=>({display:"inline-block",verticalAlign:"middle",width:15,height:15,padding:3,marginLeft:5,cursor:disabled?"not-allowed":"pointer",color:theme.textMutedColor,"&:hover":disabled?{}:{color:theme.color.negative},"svg + &":{marginLeft:0}})),Input=import_theming14.styled.input(({theme,placeholder})=>({outline:0,margin:placeholder?1:"1px 0",padding:"3px 4px",color:theme.color.defaultText,background:theme.background.app,border:`1px solid ${theme.appBorderColor}`,borderRadius:4,lineHeight:"14px",width:placeholder==="Key"?80:120,"&:focus":{border:`1px solid ${theme.color.secondary}`}})),RawButton=(0,import_theming14.styled)(import_components12.IconButton)(({theme})=>({position:"absolute",zIndex:2,top:2,right:2,height:21,padding:"0 3px",background:theme.background.bar,border:`1px solid ${theme.appBorderColor}`,borderRadius:3,color:theme.textMutedColor,fontSize:"9px",fontWeight:"bold",textDecoration:"none",span:{marginLeft:3,marginTop:1}})),RawInput=(0,import_theming14.styled)(import_components12.Form.Textarea)(({theme})=>({flex:1,padding:"7px 6px",fontFamily:theme.typography.fonts.mono,fontSize:"12px",lineHeight:"18px","&::placeholder":{fontFamily:theme.typography.fonts.base,fontSize:"13px"},"&:placeholder-shown":{padding:"7px 10px"}})),ENTER_EVENT={bubbles:!0,cancelable:!0,key:"Enter",code:"Enter",keyCode:13},dispatchEnterKey=event=>{event.currentTarget.dispatchEvent(new globalWindow2.KeyboardEvent("keydown",ENTER_EVENT))},selectValue=event=>{event.currentTarget.select()},getCustomStyleFunction=theme=>()=>({name:{color:theme.color.secondary},collapsed:{color:theme.color.dark},ul:{listStyle:"none",margin:"0 0 0 1rem",padding:0},li:{outline:0}}),ObjectControl=({name,value:value2,onChange,argType})=>{let theme=(0,import_theming14.useTheme)(),data=(0,import_react20.useMemo)(()=>value2&&(0,import_cloneDeep.default)(value2),[value2]),hasData=data!=null,[showRaw,setShowRaw]=(0,import_react20.useState)(!hasData),[parseError,setParseError]=(0,import_react20.useState)(null),readonly=!!argType?.table?.readonly,updateRaw=(0,import_react20.useCallback)(raw=>{try{raw&&onChange(JSON.parse(raw)),setParseError(void 0)}catch(e){setParseError(e)}},[onChange]),[forceVisible,setForceVisible]=(0,import_react20.useState)(!1),onForceVisible=(0,import_react20.useCallback)(()=>{onChange({}),setForceVisible(!0)},[setForceVisible]),htmlElRef=(0,import_react20.useRef)(null);if((0,import_react20.useEffect)(()=>{forceVisible&&htmlElRef.current&&htmlElRef.current.select()},[forceVisible]),!hasData)return import_react20.default.createElement(import_components12.Button,{disabled:readonly,id:getControlSetterButtonId(name),onClick:onForceVisible},"Set object");let rawJSONForm=import_react20.default.createElement(RawInput,{ref:htmlElRef,id:getControlId(name),name,defaultValue:value2===null?"":JSON.stringify(value2,null,2),onBlur:event=>updateRaw(event.target.value),placeholder:"Edit JSON string...",autoFocus:forceVisible,valid:parseError?"error":null,readOnly:readonly}),isObjectOrArray=Array.isArray(value2)||typeof value2=="object"&&value2?.constructor===Object;return import_react20.default.createElement(Wrapper6,{"aria-readonly":readonly},isObjectOrArray&&import_react20.default.createElement(RawButton,{onClick:e=>{e.preventDefault(),setShowRaw(v=>!v)}},showRaw?import_react20.default.createElement(import_icons4.EyeCloseIcon,null):import_react20.default.createElement(import_icons4.EyeIcon,null),import_react20.default.createElement("span",null,"RAW")),showRaw?rawJSONForm:import_react20.default.createElement(JsonTree,{readOnly:readonly||!isObjectOrArray,isCollapsed:isObjectOrArray?void 0:()=>!0,data,rootName:name,onFullyUpdate:onChange,getStyle:getCustomStyleFunction(theme),cancelButtonElement:import_react20.default.createElement(ButtonInline,{type:"button"},"Cancel"),editButtonElement:import_react20.default.createElement(ButtonInline,{type:"submit"},"Save"),addButtonElement:import_react20.default.createElement(ButtonInline,{type:"submit",primary:!0},"Save"),plusMenuElement:import_react20.default.createElement(ActionAddIcon,null),minusMenuElement:import_react20.default.createElement(ActionSubstractIcon,null),inputElement:(_,__,___,key)=>key?import_react20.default.createElement(Input,{onFocus:selectValue,onBlur:dispatchEnterKey}):import_react20.default.createElement(Input,null),fallback:rawJSONForm}))};var import_react21=__toESM(require("react")),import_theming15=require("@storybook/theming"),import_polished5=require("polished");init_helpers();var RangeInput=import_theming15.styled.input(({theme,min,max,value:value2,disabled})=>({"&":{width:"100%",backgroundColor:"transparent",appearance:"none"},"&::-webkit-slider-runnable-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:disabled?"not-allowed":"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:disabled?"not-allowed":"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:disabled?"not-allowed":"grab"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:(0,import_polished5.rgba)(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:disabled?"not-allowed":"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:disabled?"not-allowed":"grap",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${(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","[aria-readonly=true] &":{opacity:.5}}),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,argType})=>{let handleChange=event=>{onChange(parse2(event.target.value))},hasValue=value2!==void 0,numberOFDecimalsPlaces=(0,import_react21.useMemo)(()=>getNumberOfDecimalPlaces(step),[step]),readonly=!!argType?.table?.readonly;return import_react21.default.createElement(RangeWrapper,{"aria-readonly":readonly},import_react21.default.createElement(RangeLabel,null,min),import_react21.default.createElement(RangeInput,{id:getControlId(name),type:"range",disabled:readonly,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_components13=require("@storybook/components");init_helpers();var Wrapper7=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,argType})=>{let handleChange=event=>{onChange(event.target.value)},readonly=!!argType?.table?.readonly,[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_components13.Button,{variant:"outline",size:"medium",disabled:readonly,id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return import_react22.default.createElement(Wrapper7,null,import_react22.default.createElement(import_components13.Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,disabled:readonly,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?.length===maxLength},value2?.length??0," / ",maxLength))};var import_react23=__toESM(require("react")),import_theming17=require("@storybook/theming"),import_components14=require("@storybook/components");init_helpers();var FileInput=(0,import_theming17.styled)(import_components14.Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url)})}var FilesControl=({onChange,name,accept="image/*",value:value2,argType})=>{let inputElement=(0,import_react23.useRef)(null),readonly=argType?.control?.readOnly;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,disabled:readonly,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,isHovered})=>{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){let canBeSetup=control?.disable!==!0&&row?.type?.name!=="function";return isHovered&&canBeSetup?import_react26.default.createElement(import_components16.Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):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"})),toSummary=value2=>value2&&{summary:typeof value2=="string"?value2:value2.name},ArgRow=props=>{let[isHovered,setIsHovered]=(0,import_react27.useState)(!1),{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,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 import_react27.default.createElement("tr",{onMouseEnter:()=>setIsHovered(!0),onMouseLeave:()=>setIsHovered(!1)},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,isHovered})):null)};var import_react28=__toESM(require("react")),import_polished7=require("polished"),import_theming20=require("@storybook/theming"),import_icons6=require("@storybook/icons"),ExpanderIconDown=(0,import_theming20.styled)(import_icons6.ChevronDownIcon)(({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"})),ExpanderIconRight=(0,import_theming20.styled)(import_icons6.ChevronRightIcon)(({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?.length||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",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,expanded?import_react28.default.createElement(ExpanderIconDown,null):import_react28.default.createElement(ExpanderIconRight,null),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 import_theming21=require("@storybook/theming"),import_react29=__toESM(require("react")),Row=import_theming21.styled.div(({theme})=>({display:"flex",gap:16,borderBottom:`1px solid ${theme.appBorderColor}`,"&:last-child":{borderBottom:0}})),Column=import_theming21.styled.div(({numColumn})=>({display:"flex",flexDirection:"column",flex:numColumn||1,gap:5,padding:"12px 20px"})),SkeletonText=import_theming21.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=()=>import_react29.default.createElement(import_react29.default.Fragment,null,import_react29.default.createElement(Row,null,import_react29.default.createElement(Column,{numColumn:columnWidth[0]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[1]},import_react29.default.createElement(SkeletonText,{width:"30%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[2]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[3]},import_react29.default.createElement(SkeletonText,{width:"60%"}))),import_react29.default.createElement(Row,null,import_react29.default.createElement(Column,{numColumn:columnWidth[0]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[1]},import_react29.default.createElement(SkeletonText,{width:"80%"}),import_react29.default.createElement(SkeletonText,{width:"30%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[2]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[3]},import_react29.default.createElement(SkeletonText,{width:"60%"}))),import_react29.default.createElement(Row,null,import_react29.default.createElement(Column,{numColumn:columnWidth[0]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[1]},import_react29.default.createElement(SkeletonText,{width:"80%"}),import_react29.default.createElement(SkeletonText,{width:"30%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[2]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[3]},import_react29.default.createElement(SkeletonText,{width:"60%"}))),import_react29.default.createElement(Row,null,import_react29.default.createElement(Column,{numColumn:columnWidth[0]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[1]},import_react29.default.createElement(SkeletonText,{width:"80%"}),import_react29.default.createElement(SkeletonText,{width:"30%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[2]},import_react29.default.createElement(SkeletonText,{width:"60%"})),import_react29.default.createElement(Column,{numColumn:columnWidth[3]},import_react29.default.createElement(SkeletonText,{width:"60%"}))));var import_react30=__toESM(require("react")),import_theming22=require("@storybook/theming"),import_components18=require("@storybook/components"),import_icons7=require("@storybook/icons"),Wrapper9=import_theming22.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=import_theming22.styled.div(({theme})=>({display:"flex",fontSize:theme.typography.size.s2-1,gap:25})),Divider=import_theming22.styled.div(({theme})=>({width:1,height:16,backgroundColor:theme.appBorderColor})),Empty=({inAddonPanel})=>{let[isLoading,setIsLoading]=(0,import_react30.useState)(!0);return(0,import_react30.useEffect)(()=>{let load=setTimeout(()=>{setIsLoading(!1)},100);return()=>clearTimeout(load)},[]),isLoading?null:import_react30.default.createElement(Wrapper9,{inAddonPanel},import_react30.default.createElement(import_components18.EmptyTabContent,{title:inAddonPanel?"Interactive story playground":"Args table with interactive controls couldn't be auto-generated",description:import_react30.default.createElement(import_react30.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:import_react30.default.createElement(Links,null,inAddonPanel&&import_react30.default.createElement(import_react30.default.Fragment,null,import_react30.default.createElement(import_components18.Link,{href:"https://youtu.be/0gOfS6K0x0E",target:"_blank",withArrow:!0},import_react30.default.createElement(import_icons7.VideoIcon,null)," Watch 5m video"),import_react30.default.createElement(Divider,null),import_react30.default.createElement(import_components18.Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},import_react30.default.createElement(import_icons7.DocumentIcon,null)," Read docs")),!inAddonPanel&&import_react30.default.createElement(import_components18.Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},import_react30.default.createElement(import_icons7.DocumentIcon,null)," Learn how to set that up"))}))};var TableWrapper=import_theming23.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}}}}})),StyledIconButton=(0,import_theming23.styled)(import_components19.IconButton)(({theme})=>({margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=import_theming23.styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>+!!b.type?.required-+!!a.type?.required||a.name.localeCompare(b.name),none:void 0},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else{let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection}sections.sections[category]=section}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection}else sections.ungrouped.push({key,...row})});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return{ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return(0,import_csf.includeConditionalArg)(row,args,globals)}catch(err){return import_client_logger4.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 import_react31.default.createElement(EmptyBlock,null,error,"\xA0",import_react31.default.createElement(import_components19.Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},import_react31.default.createElement(import_icons8.DocumentIcon,null)," Read the docs"))}if(isLoading)return import_react31.default.createElement(Skeleton,null);let{rows,args,globals}="rows"in props&&props,groups=groupRows((0,import_pickBy.default)(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args||{},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 import_react31.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 import_react31.default.createElement(import_components19.ResetWrapper,null,import_react31.default.createElement(TableWrapper,{compact,inAddonPanel,className:"docblock-argstable sb-unstyled"},import_react31.default.createElement("thead",{className:"docblock-argstable-head"},import_react31.default.createElement("tr",null,import_react31.default.createElement("th",null,import_react31.default.createElement("span",null,"Name")),compact?null:import_react31.default.createElement("th",null,import_react31.default.createElement("span",null,"Description")),compact?null:import_react31.default.createElement("th",null,import_react31.default.createElement("span",null,"Default")),updateArgs?import_react31.default.createElement("th",null,import_react31.default.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&import_react31.default.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},import_react31.default.createElement(import_icons8.UndoIcon,{"aria-hidden":!0})))):null)),import_react31.default.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>import_react31.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>import_react31.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react31.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>import_react31.default.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>import_react31.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>import_react31.default.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>import_react31.default.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var import_react32=__toESM(require("react")),import_components20=require("@storybook/components");var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?import_react32.default.createElement(ArgsTable,{...entries[0][1],...props}):import_react32.default.createElement(import_components20.TabsState,null,entries.map((entry,index)=>{let[label,table]=entry,id2=`prop_table_div_${label}`,Component4="div",argsTableProps=index===0?props:{sort:props.sort};return import_react32.default.createElement(Component4,{key:id2,id:id2,title:label},({active})=>active?import_react32.default.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...argsTableProps}):null)}))};var import_react33=__toESM(require("react")),import_polished9=require("polished"),import_theming24=require("@storybook/theming"),import_components21=require("@storybook/components");var Label4=import_theming24.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_theming24.styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=import_theming24.styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper10=import_theming24.styled.div(import_components21.withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>import_react33.default.createElement(Wrapper10,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>import_react33.default.createElement(TypeSpecimen,{key:size},import_react33.default.createElement(Label4,null,size),import_react33.default.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var import_react34=__toESM(require("react")),import_polished10=require("polished"),import_theming25=require("@storybook/theming"),import_components22=require("@storybook/components");var ItemTitle=import_theming25.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=import_theming25.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_theming25.styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=import_theming25.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_theming25.styled.div({display:"flex",flexDirection:"row"}),Swatch2=import_theming25.styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=import_theming25.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_theming25.styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches2=import_theming25.styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=import_theming25.styled.div({display:"flex",alignItems:"flex-start"}),ListName=import_theming25.styled.div({flex:"0 0 30%"}),ListSwatches=import_theming25.styled.div({flex:1}),ListHeading=import_theming25.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_theming25.styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return import_react34.default.createElement(Swatch2,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return import_react34.default.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},import_react34.default.createElement("div",null,color,colorDescription&&import_react34.default.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){if(Array.isArray(colors))return import_react34.default.createElement(SwatchSpecimen,null,import_react34.default.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),import_react34.default.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index))));let swatchElements=[],labelElements=[];for(let colorKey in colors){let colorValue=colors[colorKey];swatchElements.push(renderSwatch(colorValue,swatchElements.length)),labelElements.push(renderSwatchLabel(colorKey,labelElements.length,colorValue))}return import_react34.default.createElement(SwatchSpecimen,null,import_react34.default.createElement(SwatchColors,null,swatchElements),import_react34.default.createElement(SwatchLabels,null,labelElements))}var ColorItem=({title,subtitle,colors})=>import_react34.default.createElement(Item,null,import_react34.default.createElement(ItemDescription,null,import_react34.default.createElement(ItemTitle,null,title),import_react34.default.createElement(ItemSubtitle,null,subtitle)),import_react34.default.createElement(Swatches2,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>import_react34.default.createElement(import_components22.ResetWrapper,null,import_react34.default.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},import_react34.default.createElement(ListHeading,null,import_react34.default.createElement(ListName,null,"Name"),import_react34.default.createElement(ListSwatches,null,"Swatches")),children));var import_react35=__toESM(require("react")),import_theming26=require("@storybook/theming"),import_components23=require("@storybook/components");var ItemLabel=import_theming26.styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=import_theming26.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_theming26.styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=import_theming26.styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>import_react35.default.createElement(Item2,null,import_react35.default.createElement(ItemSpecimen,null,children),import_react35.default.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>import_react35.default.createElement(import_components23.ResetWrapper,null,import_react35.default.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var import_react36=__toESM(require("react")),anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>import_react36.default.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);var import_preview_api=require("@storybook/preview-api"),import_react39=__toESM(require("react"));var import_react38=require("react");var import_react37=require("react"),import_global5=require("@storybook/global");import_global5.global&&import_global5.global.__DOCS_CONTEXT__===void 0&&(import_global5.global.__DOCS_CONTEXT__=(0,import_react37.createContext)(null),import_global5.global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=import_global5.global?import_global5.global.__DOCS_CONTEXT__:(0,import_react37.createContext)(null);var useOf=(moduleExportOrType,validTypes)=>(0,import_react38.useContext)(DocsContext).resolveOf(moduleExportOrType,validTypes);var titleCase=str=>str.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"})}function 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){if(resolved.type==="component"){let{component:component2,projectAnnotations:{parameters:parameters2}}=resolved;return{argTypes:extractComponentArgTypes(component2,parameters2),parameters:parameters2,component:component2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2,component:component2,subcomponents:subcomponents2}}=resolved;return{argTypes:argTypes2,parameters:parameters2,component:component2,subcomponents:subcomponents2}}let{story:{argTypes,parameters,component,subcomponents}}=resolved;return{argTypes,parameters,component,subcomponents}}var ArgTypes=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters,component,subcomponents}=getArgTypesFromResolved(resolved),argTypesParameters=parameters.docs?.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);if(!(!!subcomponents&&Object.keys(subcomponents).length>0))return import_react39.default.createElement(ArgsTable,{rows:filteredArgTypes,sort});let mainComponentName=getComponentName(component),subcomponentTabs=Object.fromEntries(Object.entries(subcomponents).map(([key,comp])=>[key,{rows:(0,import_preview_api.filterArgTypes)(extractComponentArgTypes(comp,parameters),include,exclude),sort}])),tabs={[mainComponentName]:{rows:filteredArgTypes,sort},...subcomponentTabs};return import_react39.default.createElement(TabbedArgsTable,{tabs,sort})};var import_react44=__toESM(require("react"));var import_react40=__toESM(require("react")),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args,{allowFunction:!1})}var SourceContext=(0,import_react40.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react40.useState)({});return(0,import_react40.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}}))};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react40.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react41=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools");var getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return(transformFromProps??sourceParameters.transform)?.(code,storyContext)||code},useSourceProps=(props,docsContext,sourceContext)=>{let story,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)story=docsContext.resolveOf(of,["story"]).story;else try{story=docsContext.storyById()}catch{}let sourceParameters=story?.parameters?.docs?.source||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;if(!code&&!story)return{error:"Oh no! The source is not available."};if(code)return{code,format:format2,language,dark};let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return format2=source.format??story.parameters.docs?.source?.format??!1,{code:getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform}),format:format2,language,dark}},Source2=props=>{let sourceContext=(0,import_react41.useContext)(SourceContext),docsContext=(0,import_react41.useContext)(DocsContext),sourceProps=useSourceProps(props,docsContext,sourceContext);return import_react41.default.createElement(Source,{...sourceProps})};var import_react43=__toESM(require("react"));var import_react42=require("react");function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=(0,import_react42.useState)({});return(0,import_react42.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 getStoryId2=(props,context)=>{let{of,meta}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");return meta&&context.referenceMeta(meta,!1),context.resolveOf(of||"story",["story"]).story.id},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;if(props.inline??storyParameters.inline??!1){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??"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 Canvas=props=>{let docsContext=(0,import_react44.useContext)(DocsContext),sourceContext=(0,import_react44.useContext)(SourceContext),{of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{story}=useOf(of||"story",["story"]),sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext),layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return 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_api2=require("@storybook/preview-api");var import_react45=require("react"),import_core_events=require("@storybook/core-events"),useGlobals=(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_events.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react46=require("react"),import_core_events2=require("@storybook/core-events"),useArgs=(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_events2.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events2.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react46.useCallback)(updatedArgs=>context.channel.emit(import_core_events2.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react46.useCallback)(argNames=>context.channel.emit(import_core_events2.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};function extractComponentArgTypes2(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react47.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes,component,subcomponents}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs(story,context),[globals]=useGlobals(story,context),filteredArgTypes=(0,import_preview_api2.filterArgTypes)(argTypes,include,exclude);if(!(!!subcomponents&&Object.keys(subcomponents).length>0))return Object.keys(filteredArgTypes).length>0||Object.keys(args).length>0?import_react47.default.createElement(ArgsTable,{rows:filteredArgTypes,sort,args,globals,updateArgs,resetArgs}):null;let mainComponentName=getComponentName(component),subcomponentTabs=Object.fromEntries(Object.entries(subcomponents).map(([key,comp])=>[key,{rows:(0,import_preview_api2.filterArgTypes)(extractComponentArgTypes2(comp,parameters),include,exclude),sort}])),tabs={[mainComponentName]:{rows:filteredArgTypes,sort},...subcomponentTabs};return import_react47.default.createElement(TabbedArgsTable,{tabs,sort,args,globals,updateArgs,resetArgs})};var import_react50=__toESM(require("react"));var import_react49=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent=__toESM(require("ts-dedent"));var import_react48=__toESM(require("react")),import_core_events3=require("@storybook/core-events"),import_components28=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming27=require("@storybook/theming"),import_icons9=require("@storybook/icons");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_components28.Code,null,children);let language=className&&className.split("-");return import_react48.default.createElement(Source,{language:language&&language[1]||"text",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events3.NAVIGATE_URL,url)}var A=import_components28.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);return!href||target==="_blank"||/^https?:\/\//.test(href)?import_react48.default.createElement(A,{...props}):href.startsWith("#")?import_react48.default.createElement(AnchorInPage,{hash:href},children):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)},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming27.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming27.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_icons9.LinkIcon,null)),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_components28.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react48.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
-+var __create = Object.create;
-+var __defProp = Object.defineProperty;
-+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-+var __getOwnPropNames = Object.getOwnPropertyNames;
-+var __getProtoOf = Object.getPrototypeOf,
-+  __hasOwnProp = Object.prototype.hasOwnProperty;
-+var __esm = (fn, res) =>
-+  function () {
-+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])((fn = 0))), res;
-+  };
-+var __export = (target, all) => {
-+    for (var name in all)
-+      __defProp(target, name, {get: all[name], enumerable: !0});
-+  },
-+  __copyProps = (to, from, except, desc) => {
-+    if ((from && typeof from == 'object') || typeof from == 'function')
-+      for (let key of __getOwnPropNames(from))
-+        !__hasOwnProp.call(to, key) &&
-+          key !== except &&
-+          __defProp(to, key, {
-+            get: () => from[key],
-+            enumerable:
-+              !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
-+          });
-+    return to;
-+  };
-+var __toESM = (mod, isNodeMode, target) => (
-+    (target = mod != null ? __create(__getProtoOf(mod)) : {}),
-+    __copyProps(
-+      isNodeMode || !mod || !mod.__esModule
-+        ? __defProp(target, 'default', {value: mod, enumerable: !0})
-+        : target,
-+      mod
-+    )
-+  ),
-+  __toCommonJS = (mod) =>
-+    __copyProps(__defProp({}, '__esModule', {value: !0}), mod);
-+var getControlId,
-+  getControlSetterButtonId,
-+  init_helpers = __esm({
-+    'src/controls/helpers.ts'() {
-+      (getControlId = (value2) => `control-${value2.replace(/\s+/g, '-')}`),
-+        (getControlSetterButtonId = (value2) =>
-+          `set-${value2.replace(/\s+/g, '-')}`);
-+    },
-+  });
-+var Color_exports = {};
-+__export(Color_exports, {
-+  ColorControl: () => ColorControl,
-+  default: () => Color_default,
-+});
-+var import_react24,
-+  import_react_colorful,
-+  import_color_convert,
-+  import_throttle,
-+  import_theming18,
-+  import_components15,
-+  import_icons5,
-+  Wrapper8,
-+  PickerTooltip,
-+  TooltipContent,
-+  Note,
-+  Swatches,
-+  SwatchColor,
-+  swatchBackground,
-+  Swatch,
-+  Input2,
-+  ToggleIcon,
-+  ColorSpace,
-+  COLOR_SPACES,
-+  COLOR_REGEXP,
-+  RGB_REGEXP,
-+  HSL_REGEXP,
-+  HEX_REGEXP,
-+  SHORTHEX_REGEXP,
-+  ColorPicker,
-+  fallbackColor,
-+  stringToArgs,
-+  parseValue,
-+  getRealValue,
-+  useColorInput,
-+  id,
-+  usePresets,
-+  ColorControl,
-+  Color_default,
-+  init_Color = __esm({
-+    'src/controls/Color.tsx'() {
-+      (import_react24 = __toESM(require('react'))),
-+        (import_react_colorful = require('react-colorful')),
-+        (import_color_convert = __toESM(require('color-convert'))),
-+        (import_throttle = __toESM(require('lodash/throttle.js'))),
-+        (import_theming18 = require('@storybook/theming')),
-+        (import_components15 = require('@storybook/components'));
-+      init_helpers();
-+      (import_icons5 = require('@storybook/icons')),
-+        (Wrapper8 = import_theming18.styled.div({
-+          position: 'relative',
-+          maxWidth: 250,
-+          '&[aria-readonly="true"]': {opacity: 0.5},
-+        })),
-+        (PickerTooltip = (0, import_theming18.styled)(
-+          import_components15.WithTooltip
-+        )({
-+          position: 'absolute',
-+          zIndex: 1,
-+          top: 4,
-+          left: 4,
-+          '[aria-readonly=true] &': {cursor: 'not-allowed'},
-+        })),
-+        (TooltipContent = import_theming18.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 = (0, import_theming18.styled)(import_components15.TooltipNote)(
-+          ({theme}) => ({fontFamily: theme.typography.fonts.base})
-+        )),
-+        (Swatches = import_theming18.styled.div({
-+          display: 'grid',
-+          gridTemplateColumns: 'repeat(9, 16px)',
-+          gap: 6,
-+          padding: 3,
-+          marginTop: 5,
-+          width: 200,
-+        })),
-+        (SwatchColor = import_theming18.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: value2, style, ...props}) => {
-+          let backgroundImage = `linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;
-+          return import_react24.default.createElement(SwatchColor, {
-+            ...props,
-+            style: {...style, backgroundImage},
-+          });
-+        }),
-+        (Input2 = (0, import_theming18.styled)(import_components15.Form.Input)(
-+          ({theme, readOnly}) => ({
-+            width: '100%',
-+            paddingLeft: 30,
-+            paddingRight: 30,
-+            boxSizing: 'border-box',
-+            fontFamily: theme.typography.fonts.base,
-+          })
-+        )),
-+        (ToggleIcon = (0, import_theming18.styled)(import_icons5.MarkupIcon)(
-+          ({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: import_react_colorful.HexColorPicker,
-+          rgb: import_react_colorful.RgbaStringColorPicker,
-+          hsl: import_react_colorful.HslaStringColorPicker,
-+        }),
-+        (fallbackColor = {
-+          hex: 'transparent',
-+          rgb: 'rgba(0, 0, 0, 0)',
-+          hsl: 'hsla(0, 0%, 0%, 0)',
-+        }),
-+        (stringToArgs = (value2) => {
-+          let match = value2?.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 = (value2) => {
-+          if (!value2) return;
-+          let valid = !0;
-+          if (RGB_REGEXP.test(value2)) {
-+            let [r, g, b, a] = stringToArgs(value2),
-+              [h, s, l] = import_color_convert.default.rgb.hsl([r, g, b]) || [
-+                0, 0, 0,
-+              ];
-+            return {
-+              valid,
-+              value: value2,
-+              keyword: import_color_convert.default.rgb.keyword([r, g, b]),
-+              colorSpace: 'rgb',
-+              rgb: value2,
-+              hsl: `hsla(${h}, ${s}%, ${l}%, ${a})`,
-+              hex: `#${import_color_convert.default.rgb.hex([r, g, b]).toLowerCase()}`,
-+            };
-+          }
-+          if (HSL_REGEXP.test(value2)) {
-+            let [h, s, l, a] = stringToArgs(value2),
-+              [r, g, b] = import_color_convert.default.hsl.rgb([h, s, l]) || [
-+                0, 0, 0,
-+              ];
-+            return {
-+              valid,
-+              value: value2,
-+              keyword: import_color_convert.default.hsl.keyword([h, s, l]),
-+              colorSpace: 'hsl',
-+              rgb: `rgba(${r}, ${g}, ${b}, ${a})`,
-+              hsl: value2,
-+              hex: `#${import_color_convert.default.hsl.hex([h, s, l]).toLowerCase()}`,
-+            };
-+          }
-+          let plain = value2.replace('#', ''),
-+            rgb =
-+              import_color_convert.default.keyword.rgb(plain) ||
-+              import_color_convert.default.hex.rgb(plain),
-+            hsl = import_color_convert.default.rgb.hsl(rgb),
-+            mapped = value2;
-+          if (
-+            (/[^#a-f0-9]/i.test(value2)
-+              ? (mapped = plain)
-+              : HEX_REGEXP.test(value2) && (mapped = `#${plain}`),
-+            mapped.startsWith('#'))
-+          )
-+            valid = HEX_REGEXP.test(mapped);
-+          else
-+            try {
-+              import_color_convert.default.keyword.hex(mapped);
-+            } catch {
-+              valid = !1;
-+            }
-+          return {
-+            valid,
-+            value: mapped,
-+            keyword: import_color_convert.default.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 = (value2, color, colorSpace) => {
-+          if (!value2 || !color?.valid) return fallbackColor[colorSpace];
-+          if (colorSpace !== 'hex')
-+            return color?.[colorSpace] || fallbackColor[colorSpace];
-+          if (!color.hex.startsWith('#'))
-+            try {
-+              return `#${import_color_convert.default.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 [value2, setValue] = (0, import_react24.useState)(
-+              initialValue || ''
-+            ),
-+            [color, setColor] = (0, import_react24.useState)(() =>
-+              parseValue(value2)
-+            ),
-+            [colorSpace, setColorSpace] = (0, import_react24.useState)(
-+              color?.colorSpace || 'hex'
-+            );
-+          (0, import_react24.useEffect)(() => {
-+            let nextValue = initialValue || '',
-+              nextColor = parseValue(nextValue);
-+            setValue(nextValue),
-+              setColor(nextColor),
-+              setColorSpace(nextColor?.colorSpace || 'hex');
-+          }, [initialValue]);
-+          let realValue = (0, import_react24.useMemo)(
-+              () => getRealValue(value2, color, colorSpace).toLowerCase(),
-+              [value2, color, colorSpace]
-+            ),
-+            updateValue = (0, import_react24.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 = (0, import_react24.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: value2,
-+            realValue,
-+            updateValue,
-+            color,
-+            colorSpace,
-+            cycleColorSpace,
-+          };
-+        }),
-+        (id = (value2) => value2.replace(/\s*/, '').toLowerCase()),
-+        (usePresets = (presetColors, currentColor, colorSpace) => {
-+          let [selectedColors, setSelectedColors] = (0,
-+          import_react24.useState)(currentColor?.valid ? [currentColor] : []);
-+          (0, import_react24.useEffect)(() => {
-+            currentColor === void 0 && setSelectedColors([]);
-+          }, [currentColor]);
-+          let presets = (0, import_react24.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 = (0, import_react24.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,
-+          argType,
-+        }) => {
-+          let throttledOnChange = (0, import_react24.useCallback)(
-+              (0, import_throttle.default)(onChange, 200),
-+              [onChange]
-+            ),
-+            {
-+              value: value2,
-+              realValue,
-+              updateValue,
-+              color,
-+              colorSpace,
-+              cycleColorSpace,
-+            } = useColorInput(initialValue, throttledOnChange),
-+            {presets, addPreset} = usePresets(presetColors, color, colorSpace),
-+            Picker = ColorPicker[colorSpace],
-+            readonly = !!argType?.table?.readonly;
-+          return import_react24.default.createElement(
-+            Wrapper8,
-+            {'aria-readonly': readonly},
-+            import_react24.default.createElement(
-+              PickerTooltip,
-+              {
-+                startOpen,
-+                trigger: readonly ? [null] : void 0,
-+                closeOnOutsideClick: !0,
-+                onVisibleChange: () => addPreset(color),
-+                tooltip: import_react24.default.createElement(
-+                  TooltipContent,
-+                  null,
-+                  import_react24.default.createElement(Picker, {
-+                    color: realValue === 'transparent' ? '#000000' : realValue,
-+                    onChange: updateValue,
-+                    onFocus,
-+                    onBlur,
-+                  }),
-+                  presets.length > 0 &&
-+                    import_react24.default.createElement(
-+                      Swatches,
-+                      null,
-+                      presets.map((preset, index) =>
-+                        import_react24.default.createElement(
-+                          import_components15.WithTooltip,
-+                          {
-+                            key: `${preset.value}-${index}`,
-+                            hasChrome: !1,
-+                            tooltip: import_react24.default.createElement(
-+                              Note,
-+                              {note: preset.keyword || preset.value}
-+                            ),
-+                          },
-+                          import_react24.default.createElement(Swatch, {
-+                            value: preset[colorSpace],
-+                            active:
-+                              color &&
-+                              id(preset[colorSpace]) === id(color[colorSpace]),
-+                            onClick: () => updateValue(preset.value),
-+                          })
-+                        )
-+                      )
-+                    )
-+                ),
-+              },
-+              import_react24.default.createElement(Swatch, {
-+                value: realValue,
-+                style: {margin: 4},
-+              })
-+            ),
-+            import_react24.default.createElement(Input2, {
-+              id: getControlId(name),
-+              value: value2,
-+              onChange: (e) => updateValue(e.target.value),
-+              onFocus: (e) => e.target.select(),
-+              readOnly: readonly,
-+              placeholder: 'Choose color...',
-+            }),
-+            value2
-+              ? import_react24.default.createElement(ToggleIcon, {
-+                  onClick: cycleColorSpace,
-+                })
-+              : null
-+          );
-+        }),
-+        (Color_default = ColorControl);
-+    },
-+  });
-+var src_exports = {};
-+__export(src_exports, {
-+  AddContext: () => AddContext,
-+  Anchor: () => Anchor,
-+  AnchorMdx: () => AnchorMdx,
-+  ArgTypes: () => ArgTypes,
-+  BooleanControl: () => BooleanControl,
-+  Canvas: () => Canvas,
-+  CodeOrSourceMdx: () => CodeOrSourceMdx,
-+  ColorControl: () => ColorControl2,
-+  ColorItem: () => ColorItem,
-+  ColorPalette: () => ColorPalette,
-+  Controls: () => Controls3,
-+  DateControl: () => DateControl,
-+  Description: () => DescriptionContainer,
-+  DescriptionType: () => DescriptionType,
-+  Docs: () => Docs,
-+  DocsContainer: () => DocsContainer,
-+  DocsContext: () => DocsContext,
-+  DocsPage: () => DocsPage,
-+  DocsStory: () => DocsStory,
-+  ExternalDocs: () => ExternalDocs,
-+  ExternalDocsContainer: () => ExternalDocsContainer,
-+  FilesControl: () => FilesControl,
-+  HeaderMdx: () => HeaderMdx,
-+  HeadersMdx: () => HeadersMdx,
-+  Heading: () => Heading2,
-+  IconGallery: () => IconGallery,
-+  IconItem: () => IconItem,
-+  Markdown: () => Markdown2,
-+  Meta: () => Meta,
-+  NumberControl: () => NumberControl,
-+  ObjectControl: () => ObjectControl,
-+  OptionsControl: () => OptionsControl,
-+  PRIMARY_STORY: () => PRIMARY_STORY,
-+  Primary: () => Primary,
-+  PureArgsTable: () => ArgsTable,
-+  RangeControl: () => RangeControl,
-+  Source: () => Source2,
-+  SourceContainer: () => SourceContainer,
-+  SourceContext: () => SourceContext,
-+  Stories: () => Stories,
-+  Story: () => Story2,
-+  Subheading: () => Subheading,
-+  Subtitle: () => Subtitle2,
-+  TextControl: () => TextControl,
-+  Title: () => Title2,
-+  Typeset: () => Typeset,
-+  UNKNOWN_ARGS_HASH: () => UNKNOWN_ARGS_HASH,
-+  Unstyled: () => Unstyled,
-+  Wrapper: () => Wrapper12,
-+  anchorBlockIdFromId: () => anchorBlockIdFromId,
-+  argsHash: () => argsHash,
-+  assertIsFn: () => assertIsFn,
-+  extractTitle: () => extractTitle,
-+  format: () => format,
-+  formatDate: () => formatDate,
-+  formatTime: () => formatTime,
-+  getStoryId: () => getStoryId2,
-+  getStoryProps: () => getStoryProps,
-+  parse: () => parse2,
-+  parseDate: () => parseDate,
-+  parseTime: () => parseTime,
-+  useOf: () => useOf,
-+  useSourceProps: () => useSourceProps,
-+});
-+module.exports = __toCommonJS(src_exports);
-+var import_react2 = __toESM(require('react')),
-+  import_theming2 = require('@storybook/theming'),
-+  import_components2 = require('@storybook/components');
-+var import_react = __toESM(require('react')),
-+  import_polished = require('polished'),
-+  import_theming = require('@storybook/theming'),
-+  import_components = require('@storybook/components'),
-+  Wrapper = import_theming.styled.div(
-+    import_components.withReset,
-+    ({theme}) => ({
-+      backgroundColor:
-+        theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
-+      borderRadius: theme.appBorderRadius,
-+      border: `1px dashed ${theme.appBorderColor}`,
-+      display: 'flex',
-+      alignItems: 'center',
-+      justifyContent: 'center',
-+      padding: 20,
-+      margin: '25px 0 40px',
-+      color: (0, import_polished.transparentize)(0.3, theme.color.defaultText),
-+      fontSize: theme.typography.size.s2,
-+    })
-+  ),
-+  EmptyBlock = (props) =>
-+    import_react.default.createElement(Wrapper, {
-+      ...props,
-+      className: 'docblock-emptyblock sb-unstyled',
-+    });
-+var StyledSyntaxHighlighter = (0, import_theming2.styled)(
-+  import_components2.SyntaxHighlighter
-+)(({theme}) => ({
-+  fontSize: `${theme.typography.size.s2 - 1}px`,
-+  lineHeight: '19px',
-+  margin: '25px 0 40px',
-+  borderRadius: theme.appBorderRadius,
-+  boxShadow:
-+    theme.base === 'light'
-+      ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+      : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+  'pre.prismjs': {padding: 20, background: 'inherit'},
-+}));
-+var SourceSkeletonWrapper = import_theming2.styled.div(({theme}) => ({
-+    background: theme.background.content,
-+    borderRadius: theme.appBorderRadius,
-+    border: `1px solid ${theme.appBorderColor}`,
-+    boxShadow:
-+      theme.base === 'light'
-+        ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+        : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+    margin: '25px 0 40px',
-+    padding: '20px 20px 20px 22px',
-+  })),
-+  SourceSkeletonPlaceholder = import_theming2.styled.div(({theme}) => ({
-+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-+    background: theme.appBorderColor,
-+    height: 17,
-+    marginTop: 1,
-+    width: '60%',
-+    [`&:first-child${import_theming2.ignoreSsrWarning}`]: {margin: 0},
-+  })),
-+  SourceSkeleton = () =>
-+    import_react2.default.createElement(
-+      SourceSkeletonWrapper,
-+      null,
-+      import_react2.default.createElement(SourceSkeletonPlaceholder, null),
-+      import_react2.default.createElement(SourceSkeletonPlaceholder, {
-+        style: {width: '80%'},
-+      }),
-+      import_react2.default.createElement(SourceSkeletonPlaceholder, {
-+        style: {width: '30%'},
-+      }),
-+      import_react2.default.createElement(SourceSkeletonPlaceholder, {
-+        style: {width: '80%'},
-+      })
-+    ),
-+  Source = ({
-+    isLoading,
-+    error,
-+    language,
-+    code,
-+    dark,
-+    format: format2 = !1,
-+    ...rest
-+  }) => {
-+    let {typography} = (0, import_theming2.useTheme)();
-+    if (isLoading)
-+      return import_react2.default.createElement(SourceSkeleton, null);
-+    if (error)
-+      return import_react2.default.createElement(EmptyBlock, null, error);
-+    let syntaxHighlighter = import_react2.default.createElement(
-+      StyledSyntaxHighlighter,
-+      {
-+        bordered: !0,
-+        copyable: !0,
-+        format: format2,
-+        language,
-+        className: 'docblock-source sb-unstyled',
-+        ...rest,
-+      },
-+      code
-+    );
-+    if (typeof dark > 'u') return syntaxHighlighter;
-+    let overrideTheme = dark
-+      ? import_theming2.themes.dark
-+      : import_theming2.themes.light;
-+    return import_react2.default.createElement(
-+      import_theming2.ThemeProvider,
-+      {
-+        theme: (0, import_theming2.convert)({
-+          ...overrideTheme,
-+          fontCode: typography.fonts.mono,
-+          fontBase: typography.fonts.base,
-+        }),
-+      },
-+      syntaxHighlighter
-+    );
-+  };
-+var import_react3 = __toESM(require('react')),
-+  import_polished2 = require('polished'),
-+  import_components3 = require('@storybook/components'),
-+  import_theming3 = require('@storybook/theming'),
-+  toGlobalSelector = (element) =>
-+    `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,
-+  breakpoint = 600,
-+  Title = import_theming3.styled.h1(
-+    import_components3.withReset,
-+    ({theme}) => ({
-+      color: theme.color.defaultText,
-+      fontSize: theme.typography.size.m3,
-+      fontWeight: theme.typography.weight.bold,
-+      lineHeight: '32px',
-+      [`@media (min-width: ${breakpoint}px)`]: {
-+        fontSize: theme.typography.size.l1,
-+        lineHeight: '36px',
-+        marginBottom: '16px',
-+      },
-+    })
-+  ),
-+  Subtitle = import_theming3.styled.h2(
-+    import_components3.withReset,
-+    ({theme}) => ({
-+      fontWeight: theme.typography.weight.regular,
-+      fontSize: theme.typography.size.s3,
-+      lineHeight: '20px',
-+      borderBottom: 'none',
-+      marginBottom: 15,
-+      [`@media (min-width: ${breakpoint}px)`]: {
-+        fontSize: theme.typography.size.m1,
-+        lineHeight: '28px',
-+        marginBottom: 24,
-+      },
-+      color: (0, import_polished2.transparentize)(
-+        0.25,
-+        theme.color.defaultText
-+      ),
-+    })
-+  ),
-+  DocsContent = import_theming3.styled.div(({theme}) => {
-+    let reset = {
-+        fontFamily: theme.typography.fonts.base,
-+        fontSize: theme.typography.size.s3,
-+        margin: 0,
-+        WebkitFontSmoothing: 'antialiased',
-+        MozOsxFontSmoothing: 'grayscale',
-+        WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-+        WebkitOverflowScrolling: 'touch',
-+      },
-+      headers = {
-+        margin: '20px 0 8px',
-+        padding: 0,
-+        cursor: 'text',
-+        position: 'relative',
-+        color: theme.color.defaultText,
-+        '&:first-of-type': {marginTop: 0, paddingTop: 0},
-+        '&:hover a.anchor': {textDecoration: 'none'},
-+        '& code': {fontSize: 'inherit'},
-+      },
-+      code = {
-+        lineHeight: 1,
-+        margin: '0 2px',
-+        padding: '3px 5px',
-+        whiteSpace: 'nowrap',
-+        borderRadius: 3,
-+        fontSize: theme.typography.size.s2 - 1,
-+        border:
-+          theme.base === 'light'
-+            ? `1px solid ${theme.color.mediumlight}`
-+            : `1px solid ${theme.color.darker}`,
-+        color:
-+          theme.base === 'light'
-+            ? (0, import_polished2.transparentize)(0.1, theme.color.defaultText)
-+            : (0, import_polished2.transparentize)(
-+                0.3,
-+                theme.color.defaultText
-+              ),
-+        backgroundColor:
-+          theme.base === 'light' ? theme.color.lighter : theme.color.border,
-+      };
-+    return {
-+      maxWidth: 1e3,
-+      width: '100%',
-+      [toGlobalSelector('a')]: {
-+        ...reset,
-+        fontSize: 'inherit',
-+        lineHeight: '24px',
-+        color: theme.color.secondary,
-+        textDecoration: 'none',
-+        '&.absent': {color: '#cc0000'},
-+        '&.anchor': {
-+          display: 'block',
-+          paddingLeft: 30,
-+          marginLeft: -30,
-+          cursor: 'pointer',
-+          position: 'absolute',
-+          top: 0,
-+          left: 0,
-+          bottom: 0,
-+        },
-+      },
-+      [toGlobalSelector('blockquote')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        borderLeft: `4px solid ${theme.color.medium}`,
-+        padding: '0 15px',
-+        color: theme.color.dark,
-+        '& > :first-of-type': {marginTop: 0},
-+        '& > :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('div')]: reset,
-+      [toGlobalSelector('dl')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        padding: 0,
-+        '& dt': {
-+          fontSize: '14px',
-+          fontWeight: 'bold',
-+          fontStyle: 'italic',
-+          padding: 0,
-+          margin: '16px 0 4px',
-+        },
-+        '& dt:first-of-type': {padding: 0},
-+        '& dt > :first-of-type': {marginTop: 0},
-+        '& dt > :last-child': {marginBottom: 0},
-+        '& dd': {margin: '0 0 16px', padding: '0 15px'},
-+        '& dd > :first-of-type': {marginTop: 0},
-+        '& dd > :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('h1')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.l1}px`,
-+        fontWeight: theme.typography.weight.bold,
-+      },
-+      [toGlobalSelector('h2')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.m2}px`,
-+        paddingBottom: 4,
-+        borderBottom: `1px solid ${theme.appBorderColor}`,
-+      },
-+      [toGlobalSelector('h3')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.m1}px`,
-+        fontWeight: theme.typography.weight.bold,
-+      },
-+      [toGlobalSelector('h4')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s3}px`,
-+      },
-+      [toGlobalSelector('h5')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s2}px`,
-+      },
-+      [toGlobalSelector('h6')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s2}px`,
-+        color: theme.color.dark,
-+      },
-+      [toGlobalSelector('hr')]: {
-+        border: '0 none',
-+        borderTop: `1px solid ${theme.appBorderColor}`,
-+        height: 4,
-+        padding: 0,
-+      },
-+      [toGlobalSelector('img')]: {maxWidth: '100%'},
-+      [toGlobalSelector('li')]: {
-+        ...reset,
-+        fontSize: theme.typography.size.s2,
-+        color: theme.color.defaultText,
-+        lineHeight: '24px',
-+        '& + li': {marginTop: '.25em'},
-+        '& ul, & ol': {marginTop: '.25em', marginBottom: 0},
-+        '& code': code,
-+      },
-+      [toGlobalSelector('ol')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        paddingLeft: 30,
-+        '& :first-of-type': {marginTop: 0},
-+        '& :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('p')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        fontSize: theme.typography.size.s2,
-+        lineHeight: '24px',
-+        color: theme.color.defaultText,
-+        '& code': code,
-+      },
-+      [toGlobalSelector('pre')]: {
-+        ...reset,
-+        fontFamily: theme.typography.fonts.mono,
-+        WebkitFontSmoothing: 'antialiased',
-+        MozOsxFontSmoothing: 'grayscale',
-+        lineHeight: '18px',
-+        padding: '11px 1rem',
-+        whiteSpace: 'pre-wrap',
-+        color: 'inherit',
-+        borderRadius: 3,
-+        margin: '1rem 0',
-+        '&:not(.prismjs)': {
-+          background: 'transparent',
-+          border: 'none',
-+          borderRadius: 0,
-+          padding: 0,
-+          margin: 0,
-+        },
-+        '& pre, &.prismjs': {
-+          padding: 15,
-+          margin: 0,
-+          whiteSpace: 'pre-wrap',
-+          color: 'inherit',
-+          fontSize: '13px',
-+          lineHeight: '19px',
-+          code: {color: 'inherit', fontSize: 'inherit'},
-+        },
-+        '& code': {whiteSpace: 'pre'},
-+        '& code, & tt': {border: 'none'},
-+      },
-+      [toGlobalSelector('span')]: {
-+        ...reset,
-+        '&.frame': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          '& > span': {
-+            border: `1px solid ${theme.color.medium}`,
-+            display: 'block',
-+            float: 'left',
-+            overflow: 'hidden',
-+            margin: '13px 0 0',
-+            padding: 7,
-+            width: 'auto',
-+          },
-+          '& span img': {display: 'block', float: 'left'},
-+          '& span span': {
-+            clear: 'both',
-+            color: theme.color.darkest,
-+            display: 'block',
-+            padding: '5px 0 0',
-+          },
-+        },
-+        '&.align-center': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          clear: 'both',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px auto 0',
-+            textAlign: 'center',
-+          },
-+          '& span img': {margin: '0 auto', textAlign: 'center'},
-+        },
-+        '&.align-right': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          clear: 'both',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px 0 0',
-+            textAlign: 'right',
-+          },
-+          '& span img': {margin: 0, textAlign: 'right'},
-+        },
-+        '&.float-left': {
-+          display: 'block',
-+          marginRight: 13,
-+          overflow: 'hidden',
-+          float: 'left',
-+          '& span': {margin: '13px 0 0'},
-+        },
-+        '&.float-right': {
-+          display: 'block',
-+          marginLeft: 13,
-+          overflow: 'hidden',
-+          float: 'right',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px auto 0',
-+            textAlign: 'right',
-+          },
-+        },
-+      },
-+      [toGlobalSelector('table')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        fontSize: theme.typography.size.s2,
-+        lineHeight: '24px',
-+        padding: 0,
-+        borderCollapse: 'collapse',
-+        '& tr': {
-+          borderTop: `1px solid ${theme.appBorderColor}`,
-+          backgroundColor: theme.appContentBg,
-+          margin: 0,
-+          padding: 0,
-+        },
-+        '& tr:nth-of-type(2n)': {
-+          backgroundColor:
-+            theme.base === 'dark' ? theme.color.darker : theme.color.lighter,
-+        },
-+        '& tr th': {
-+          fontWeight: 'bold',
-+          color: theme.color.defaultText,
-+          border: `1px solid ${theme.appBorderColor}`,
-+          margin: 0,
-+          padding: '6px 13px',
-+        },
-+        '& tr td': {
-+          border: `1px solid ${theme.appBorderColor}`,
-+          color: theme.color.defaultText,
-+          margin: 0,
-+          padding: '6px 13px',
-+        },
-+        '& tr th :first-of-type, & tr td :first-of-type': {marginTop: 0},
-+        '& tr th :last-child, & tr td :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('ul')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        paddingLeft: 30,
-+        '& :first-of-type': {marginTop: 0},
-+        '& :last-child': {marginBottom: 0},
-+        listStyle: 'disc',
-+      },
-+    };
-+  }),
-+  DocsWrapper = import_theming3.styled.div(({theme}) => ({
-+    background: theme.background.content,
-+    display: 'flex',
-+    justifyContent: 'center',
-+    padding: '4rem 20px',
-+    minHeight: '100vh',
-+    boxSizing: 'border-box',
-+    gap: '3rem',
-+    [`@media (min-width: ${breakpoint}px)`]: {},
-+  })),
-+  DocsPageWrapper = ({children, toc}) =>
-+    import_react3.default.createElement(
-+      DocsWrapper,
-+      {className: 'sbdocs sbdocs-wrapper'},
-+      import_react3.default.createElement(
-+        DocsContent,
-+        {className: 'sbdocs sbdocs-content'},
-+        children
-+      ),
-+      toc
-+    );
-+var import_react8 = __toESM(require('react')),
-+  import_polished3 = require('polished'),
-+  import_theming5 = require('@storybook/theming'),
-+  import_global3 = require('@storybook/global'),
-+  import_components6 = require('@storybook/components');
-+var getBlockBackgroundStyle = (theme) => ({
-+  borderRadius: theme.appBorderRadius,
-+  background: theme.background.content,
-+  boxShadow:
-+    theme.base === 'light'
-+      ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+      : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+  border: `1px solid ${theme.appBorderColor}`,
-+});
-+var import_react4 = __toESM(require('react')),
-+  import_theming4 = require('@storybook/theming'),
-+  import_components4 = require('@storybook/components'),
-+  import_icons = require('@storybook/icons'),
-+  Bar = (0, import_theming4.styled)(import_components4.FlexBar)({
-+    position: 'absolute',
-+    left: 0,
-+    right: 0,
-+    top: 0,
-+    transition: 'transform .2s linear',
-+  }),
-+  Wrapper2 = import_theming4.styled.div({
-+    display: 'flex',
-+    alignItems: 'center',
-+    gap: 4,
-+  }),
-+  IconPlaceholder = import_theming4.styled.div(({theme}) => ({
-+    width: 14,
-+    height: 14,
-+    borderRadius: 2,
-+    margin: '0 7px',
-+    backgroundColor: theme.appBorderColor,
-+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-+  })),
-+  Toolbar = ({isLoading, storyId, baseUrl, zoom, resetZoom, ...rest}) =>
-+    import_react4.default.createElement(
-+      Bar,
-+      {...rest},
-+      import_react4.default.createElement(
-+        Wrapper2,
-+        {key: 'left'},
-+        isLoading
-+          ? [1, 2, 3].map((key) =>
-+              import_react4.default.createElement(IconPlaceholder, {key})
-+            )
-+          : import_react4.default.createElement(
-+              import_react4.default.Fragment,
-+              null,
-+              import_react4.default.createElement(
-+                import_components4.IconButton,
-+                {
-+                  key: 'zoomin',
-+                  onClick: (e) => {
-+                    e.preventDefault(), zoom(0.8);
-+                  },
-+                  title: 'Zoom in',
-+                },
-+                import_react4.default.createElement(import_icons.ZoomIcon, null)
-+              ),
-+              import_react4.default.createElement(
-+                import_components4.IconButton,
-+                {
-+                  key: 'zoomout',
-+                  onClick: (e) => {
-+                    e.preventDefault(), zoom(1.25);
-+                  },
-+                  title: 'Zoom out',
-+                },
-+                import_react4.default.createElement(
-+                  import_icons.ZoomOutIcon,
-+                  null
-+                )
-+              ),
-+              import_react4.default.createElement(
-+                import_components4.IconButton,
-+                {
-+                  key: 'zoomreset',
-+                  onClick: (e) => {
-+                    e.preventDefault(), resetZoom();
-+                  },
-+                  title: 'Reset zoom',
-+                },
-+                import_react4.default.createElement(
-+                  import_icons.ZoomResetIcon,
-+                  null
-+                )
-+              )
-+            )
-+      )
-+    );
-+var import_react5 = require('react'),
-+  ZoomContext = (0, import_react5.createContext)({scale: 1});
-+var import_global2 = require('@storybook/global'),
-+  import_react7 = __toESM(require('react')),
-+  import_components5 = require('@storybook/components');
-+var import_react6 = __toESM(require('react')),
-+  import_global = require('@storybook/global'),
-+  {window: globalWindow} = import_global.global,
-+  IFrame = class extends import_react6.Component {
-+    constructor() {
-+      super(...arguments);
-+      this.iframe = null;
-+    }
-+    componentDidMount() {
-+      let {id: id2} = this.props;
-+      this.iframe = globalWindow.document.getElementById(id2);
-+    }
-+    shouldComponentUpdate(nextProps) {
-+      let {scale} = nextProps;
-+      return (
-+        scale !== this.props.scale &&
-+          this.setIframeBodyStyle({
-+            width: `${scale * 100}%`,
-+            height: `${scale * 100}%`,
-+            transform: `scale(${1 / scale})`,
-+            transformOrigin: 'top left',
-+          }),
-+        !1
-+      );
-+    }
-+    setIframeBodyStyle(style) {
-+      return Object.assign(this.iframe.contentDocument.body.style, style);
-+    }
-+    render() {
-+      let {id: id2, title, src, allowFullScreen, scale, ...rest} = this.props;
-+      return import_react6.default.createElement('iframe', {
-+        id: id2,
-+        title,
-+        src,
-+        ...(allowFullScreen ? {allow: 'fullscreen'} : {}),
-+        loading: 'lazy',
-+        ...rest,
-+      });
-+    }
-+  };
-+var {PREVIEW_URL} = import_global2.global,
-+  BASE_URL = PREVIEW_URL || 'iframe.html',
-+  storyBlockIdFromId = ({story, primary}) =>
-+    `story--${story.id}${primary ? '--primary' : ''}`,
-+  InlineStory = (props) => {
-+    let storyRef = (0, import_react7.useRef)(),
-+      [showLoader, setShowLoader] = (0, import_react7.useState)(!0),
-+      [error, setError] = (0, import_react7.useState)(),
-+      {story, height, autoplay, forceInitialArgs, renderStoryToElement} = props;
-+    return (
-+      (0, import_react7.useEffect)(() => {
-+        if (!(story && storyRef.current)) return () => {};
-+        let element = storyRef.current,
-+          cleanup = renderStoryToElement(
-+            story,
-+            element,
-+            {
-+              showMain: () => {},
-+              showError: ({title, description}) =>
-+                setError(new Error(`${title} - ${description}`)),
-+              showException: (err) => setError(err),
-+            },
-+            {autoplay, forceInitialArgs}
-+          );
-+        return (
-+          setShowLoader(!1),
-+          () => {
-+            Promise.resolve().then(() => cleanup());
-+          }
-+        );
-+      }, [autoplay, renderStoryToElement, story]),
-+      error
-+        ? import_react7.default.createElement(
-+            'pre',
-+            null,
-+            import_react7.default.createElement(
-+              import_components5.ErrorFormatter,
-+              {error}
-+            )
-+          )
-+        : import_react7.default.createElement(
-+            import_react7.default.Fragment,
-+            null,
-+            height
-+              ? import_react7.default.createElement(
-+                  'style',
-+                  null,
-+                  `#${storyBlockIdFromId(props)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`
-+                )
-+              : null,
-+            showLoader &&
-+              import_react7.default.createElement(StorySkeleton, null),
-+            import_react7.default.createElement('div', {
-+              ref: storyRef,
-+              id: `${storyBlockIdFromId(props)}-inner`,
-+              'data-name': story.name,
-+            })
-+          )
-+    );
-+  },
-+  IFrameStory = ({story, height = '500px'}) =>
-+    import_react7.default.createElement(
-+      'div',
-+      {style: {width: '100%', height}},
-+      import_react7.default.createElement(
-+        ZoomContext.Consumer,
-+        null,
-+        ({scale}) =>
-+          import_react7.default.createElement(IFrame, {
-+            key: 'iframe',
-+            id: `iframe--${story.id}`,
-+            title: story.name,
-+            src: (0, import_components5.getStoryHref)(BASE_URL, story.id, {
-+              viewMode: 'story',
-+            }),
-+            allowFullScreen: !0,
-+            scale,
-+            style: {width: '100%', height: '100%', border: '0 none'},
-+          })
-+      )
-+    ),
-+  Story = (props) => {
-+    let {inline} = props;
-+    return import_react7.default.createElement(
-+      'div',
-+      {
-+        id: storyBlockIdFromId(props),
-+        className: 'sb-story sb-unstyled',
-+        'data-story-block': 'true',
-+      },
-+      inline
-+        ? import_react7.default.createElement(InlineStory, {...props})
-+        : import_react7.default.createElement(IFrameStory, {...props})
-+    );
-+  },
-+  StorySkeleton = () =>
-+    import_react7.default.createElement(import_components5.Loader, null);
-+var ChildrenContainer = import_theming5.styled.div(
-+    ({isColumn, columns, layout}) => ({
-+      display: isColumn || !columns ? 'block' : 'flex',
-+      position: 'relative',
-+      flexWrap: 'wrap',
-+      overflow: 'auto',
-+      flexDirection: isColumn ? 'column' : 'row',
-+      '& .innerZoomElementWrapper > *': isColumn
-+        ? {
-+            width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-+            display: 'block',
-+          }
-+        : {
-+            maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-+            display: 'inline-block',
-+          },
-+    }),
-+    ({layout = 'padded'}) =>
-+      layout === 'centered' || layout === 'padded'
-+        ? {
-+            padding: '30px 20px',
-+            '& .innerZoomElementWrapper > *': {
-+              width: 'auto',
-+              border: '10px solid transparent!important',
-+            },
-+          }
-+        : {},
-+    ({layout = 'padded'}) =>
-+      layout === 'centered'
-+        ? {
-+            display: 'flex',
-+            justifyContent: 'center',
-+            justifyItems: 'center',
-+            alignContent: 'center',
-+            alignItems: 'center',
-+          }
-+        : {},
-+    ({columns}) =>
-+      columns && columns > 1
-+        ? {
-+            '.innerZoomElementWrapper > *': {
-+              minWidth: `calc(100% / ${columns} - 20px)`,
-+            },
-+          }
-+        : {}
-+  ),
-+  StyledSource = (0, import_theming5.styled)(Source)(({theme}) => ({
-+    margin: 0,
-+    borderTopLeftRadius: 0,
-+    borderTopRightRadius: 0,
-+    borderBottomLeftRadius: theme.appBorderRadius,
-+    borderBottomRightRadius: theme.appBorderRadius,
-+    border: 'none',
-+    background:
-+      theme.base === 'light'
-+        ? 'rgba(0, 0, 0, 0.85)'
-+        : (0, import_polished3.darken)(0.05, theme.background.content),
-+    color: theme.color.lightest,
-+    button: {
-+      background:
-+        theme.base === 'light'
-+          ? 'rgba(0, 0, 0, 0.85)'
-+          : (0, import_polished3.darken)(0.05, theme.background.content),
-+    },
-+  })),
-+  PreviewContainer = import_theming5.styled.div(
-+    ({theme, withSource, isExpanded}) => ({
-+      position: 'relative',
-+      overflow: 'hidden',
-+      margin: '25px 0 40px',
-+      ...getBlockBackgroundStyle(theme),
-+      borderBottomLeftRadius: withSource && isExpanded && 0,
-+      borderBottomRightRadius: withSource && isExpanded && 0,
-+      borderBottomWidth: isExpanded && 0,
-+      'h3 + &': {marginTop: '16px'},
-+    }),
-+    ({withToolbar}) => withToolbar && {paddingTop: 40}
-+  ),
-+  getSource = (withSource, expanded, setExpanded) => {
-+    switch (!0) {
-+      case !!(withSource && withSource.error):
-+        return {
-+          source: null,
-+          actionItem: {
-+            title: 'No code available',
-+            className: 'docblock-code-toggle docblock-code-toggle--disabled',
-+            disabled: !0,
-+            onClick: () => setExpanded(!1),
-+          },
-+        };
-+      case expanded:
-+        return {
-+          source: import_react8.default.createElement(StyledSource, {
-+            ...withSource,
-+            dark: !0,
-+          }),
-+          actionItem: {
-+            title: 'Hide code',
-+            className: 'docblock-code-toggle docblock-code-toggle--expanded',
-+            onClick: () => setExpanded(!1),
-+          },
-+        };
-+      default:
-+        return {
-+          source: import_react8.default.createElement(StyledSource, {
-+            ...withSource,
-+            dark: !0,
-+          }),
-+          actionItem: {
-+            title: 'Show code',
-+            className: 'docblock-code-toggle',
-+            onClick: () => setExpanded(!0),
-+          },
-+        };
-+    }
-+  };
-+function getStoryId(children) {
-+  if (import_react8.Children.count(children) === 1) {
-+    let elt = children;
-+    if (elt.props) return elt.props.id;
-+  }
-+  return null;
-+}
-+var PositionedToolbar = (0, import_theming5.styled)(Toolbar)({
-+    position: 'absolute',
-+    top: 0,
-+    left: 0,
-+    right: 0,
-+    height: 40,
-+  }),
-+  Relative = import_theming5.styled.div({
-+    overflow: 'hidden',
-+    position: 'relative',
-+  }),
-+  Preview = ({
-+    isLoading,
-+    isColumn,
-+    columns,
-+    children,
-+    withSource,
-+    withToolbar = !1,
-+    isExpanded = !1,
-+    additionalActions,
-+    className,
-+    layout = 'padded',
-+    ...props
-+  }) => {
-+    let [expanded, setExpanded] = (0, import_react8.useState)(isExpanded),
-+      {source, actionItem} = getSource(withSource, expanded, setExpanded),
-+      [scale, setScale] = (0, import_react8.useState)(1),
-+      previewClasses = [className].concat([
-+        'sbdocs',
-+        'sbdocs-preview',
-+        'sb-unstyled',
-+      ]),
-+      defaultActionItems = withSource ? [actionItem] : [],
-+      [additionalActionItems, setAdditionalActionItems] = (0,
-+      import_react8.useState)(additionalActions ? [...additionalActions] : []),
-+      actionItems = [...defaultActionItems, ...additionalActionItems],
-+      {window: globalWindow4} = import_global3.global,
-+      copyToClipboard = (0, import_react8.useCallback)(async (text) => {
-+        let {createCopyToClipboardFunction} = await import(
-+          '@storybook/components'
-+        );
-+        createCopyToClipboardFunction();
-+      }, []),
-+      onCopyCapture = (e) => {
-+        let selection = globalWindow4.getSelection();
-+        (selection && selection.type === 'Range') ||
-+          (e.preventDefault(),
-+          additionalActionItems.filter((item) => item.title === 'Copied')
-+            .length === 0 &&
-+            copyToClipboard(source.props.code).then(() => {
-+              setAdditionalActionItems([
-+                ...additionalActionItems,
-+                {title: 'Copied', onClick: () => {}},
-+              ]),
-+                globalWindow4.setTimeout(
-+                  () =>
-+                    setAdditionalActionItems(
-+                      additionalActionItems.filter(
-+                        (item) => item.title !== 'Copied'
-+                      )
-+                    ),
-+                  1500
-+                );
-+            }));
-+      };
-+    return import_react8.default.createElement(
-+      PreviewContainer,
-+      {withSource, withToolbar, ...props, className: previewClasses.join(' ')},
-+      withToolbar &&
-+        import_react8.default.createElement(PositionedToolbar, {
-+          isLoading,
-+          border: !0,
-+          zoom: (z) => setScale(scale * z),
-+          resetZoom: () => setScale(1),
-+          storyId: getStoryId(children),
-+          baseUrl: './iframe.html',
-+        }),
-+      import_react8.default.createElement(
-+        ZoomContext.Provider,
-+        {value: {scale}},
-+        import_react8.default.createElement(
-+          Relative,
-+          {className: 'docs-story', onCopyCapture: withSource && onCopyCapture},
-+          import_react8.default.createElement(
-+            ChildrenContainer,
-+            {isColumn: isColumn || !Array.isArray(children), columns, layout},
-+            import_react8.default.createElement(
-+              import_components6.Zoom.Element,
-+              {scale},
-+              Array.isArray(children)
-+                ? children.map((child, i) =>
-+                    import_react8.default.createElement('div', {key: i}, child)
-+                  )
-+                : import_react8.default.createElement('div', null, children)
-+            )
-+          ),
-+          import_react8.default.createElement(import_components6.ActionBar, {
-+            actionItems,
-+          })
-+        )
-+      ),
-+      withSource && expanded && source
-+    );
-+  },
-+  StyledPreview = (0, import_theming5.styled)(Preview)(() => ({
-+    '.docs-story': {paddingTop: 32, paddingBottom: 40},
-+  }));
-+var import_react31 = __toESM(require('react')),
-+  import_pickBy = __toESM(require('lodash/pickBy.js')),
-+  import_theming23 = require('@storybook/theming'),
-+  import_polished8 = require('polished'),
-+  import_csf = require('@storybook/csf'),
-+  import_client_logger4 = require('@storybook/client-logger'),
-+  import_components19 = require('@storybook/components'),
-+  import_icons8 = require('@storybook/icons');
-+var import_react27 = __toESM(require('react')),
-+  import_markdown_to_jsx = __toESM(require('markdown-to-jsx')),
-+  import_polished6 = require('polished'),
-+  import_theming19 = require('@storybook/theming'),
-+  import_components17 = require('@storybook/components');
-+var import_react9 = __toESM(require('react')),
-+  import_theming6 = require('@storybook/theming'),
-+  import_components7 = require('@storybook/components'),
-+  Table = import_theming6.styled.table(({theme}) => ({
-+    '&&': {
-+      borderCollapse: 'collapse',
-+      borderSpacing: 0,
-+      border: 'none',
-+      tr: {border: 'none !important', background: 'none'},
-+      'td, th': {padding: 0, border: 'none', width: 'auto!important'},
-+      marginTop: 0,
-+      marginBottom: 0,
-+      'th:first-of-type, td:first-of-type': {paddingLeft: 0},
-+      'th:last-of-type, td:last-of-type': {paddingRight: 0},
-+      td: {
-+        paddingTop: 0,
-+        paddingBottom: 4,
-+        '&:not(:first-of-type)': {paddingLeft: 10, paddingRight: 0},
-+      },
-+      tbody: {boxShadow: 'none', border: 'none'},
-+      code: (0, import_components7.codeCommon)({theme}),
-+      div: {span: {fontWeight: 'bold'}},
-+      '& code': {
-+        margin: 0,
-+        display: 'inline-block',
-+        fontSize: theme.typography.size.s1,
-+      },
-+    },
-+  })),
-+  ArgJsDoc = ({tags}) => {
-+    let params = (tags.params || []).filter((x) => x.description),
-+      hasDisplayableParams = params.length !== 0,
-+      hasDisplayableDeprecated = tags.deprecated != null,
-+      hasDisplayableReturns =
-+        tags.returns != null && tags.returns.description != null;
-+    return !hasDisplayableParams &&
-+      !hasDisplayableReturns &&
-+      !hasDisplayableDeprecated
-+      ? null
-+      : import_react9.default.createElement(
-+          import_react9.default.Fragment,
-+          null,
-+          import_react9.default.createElement(
-+            Table,
-+            null,
-+            import_react9.default.createElement(
-+              'tbody',
-+              null,
-+              hasDisplayableDeprecated &&
-+                import_react9.default.createElement(
-+                  'tr',
-+                  {key: 'deprecated'},
-+                  import_react9.default.createElement(
-+                    'td',
-+                    {colSpan: 2},
-+                    import_react9.default.createElement(
-+                      'strong',
-+                      null,
-+                      'Deprecated'
-+                    ),
-+                    ': ',
-+                    tags.deprecated.toString()
-+                  )
-+                ),
-+              hasDisplayableParams &&
-+                params.map((x) =>
-+                  import_react9.default.createElement(
-+                    'tr',
-+                    {key: x.name},
-+                    import_react9.default.createElement(
-+                      'td',
-+                      null,
-+                      import_react9.default.createElement('code', null, x.name)
-+                    ),
-+                    import_react9.default.createElement(
-+                      'td',
-+                      null,
-+                      x.description
-+                    )
-+                  )
-+                ),
-+              hasDisplayableReturns &&
-+                import_react9.default.createElement(
-+                  'tr',
-+                  {key: 'returns'},
-+                  import_react9.default.createElement(
-+                    'td',
-+                    null,
-+                    import_react9.default.createElement('code', null, 'Returns')
-+                  ),
-+                  import_react9.default.createElement(
-+                    'td',
-+                    null,
-+                    tags.returns.description
-+                  )
-+                )
-+            )
-+          )
-+        );
-+  };
-+var import_react10 = __toESM(require('react')),
-+  import_memoizerific = __toESM(require('memoizerific')),
-+  import_uniq = __toESM(require('lodash/uniq.js')),
-+  import_theming7 = require('@storybook/theming'),
-+  import_components8 = require('@storybook/components'),
-+  import_icons2 = require('@storybook/icons'),
-+  ITEMS_BEFORE_EXPANSION = 8,
-+  Summary = import_theming7.styled.div(({isExpanded}) => ({
-+    display: 'flex',
-+    flexDirection: isExpanded ? 'column' : 'row',
-+    flexWrap: 'wrap',
-+    alignItems: 'flex-start',
-+    marginBottom: '-4px',
-+    minWidth: 100,
-+  })),
-+  Text = import_theming7.styled.span(
-+    import_components8.codeCommon,
-+    ({theme, simple = !1}) => ({
-+      flex: '0 0 auto',
-+      fontFamily: theme.typography.fonts.mono,
-+      fontSize: theme.typography.size.s1,
-+      wordBreak: 'break-word',
-+      whiteSpace: 'normal',
-+      maxWidth: '100%',
-+      margin: 0,
-+      marginRight: '4px',
-+      marginBottom: '4px',
-+      paddingTop: '2px',
-+      paddingBottom: '2px',
-+      lineHeight: '13px',
-+      ...(simple && {
-+        background: 'transparent',
-+        border: '0 none',
-+        paddingLeft: 0,
-+      }),
-+    })
-+  ),
-+  ExpandButton = import_theming7.styled.button(({theme}) => ({
-+    fontFamily: theme.typography.fonts.mono,
-+    color: theme.color.secondary,
-+    marginBottom: '4px',
-+    background: 'none',
-+    border: 'none',
-+  })),
-+  Expandable = import_theming7.styled.div(
-+    import_components8.codeCommon,
-+    ({theme}) => ({
-+      fontFamily: theme.typography.fonts.mono,
-+      color: theme.color.secondary,
-+      fontSize: theme.typography.size.s1,
-+      margin: 0,
-+      whiteSpace: 'nowrap',
-+      display: 'flex',
-+      alignItems: 'center',
-+    })
-+  ),
-+  Detail = import_theming7.styled.div(({theme, width}) => ({
-+    width,
-+    minWidth: 200,
-+    maxWidth: 800,
-+    padding: 15,
-+    fontFamily: theme.typography.fonts.mono,
-+    fontSize: theme.typography.size.s1,
-+    boxSizing: 'content-box',
-+    '& code': {padding: '0 !important'},
-+  })),
-+  ChevronUpIcon = (0, import_theming7.styled)(import_icons2.ChevronSmallUpIcon)(
-+    {marginLeft: 4}
-+  ),
-+  ChevronDownIcon = (0, import_theming7.styled)(
-+    import_icons2.ChevronSmallDownIcon
-+  )({marginLeft: 4}),
-+  EmptyArg = () => import_react10.default.createElement('span', null, '-'),
-+  ArgText = ({text, simple}) =>
-+    import_react10.default.createElement(Text, {simple}, text),
-+  calculateDetailWidth = (0, import_memoizerific.default)(1e3)((detail) => {
-+    let lines = detail.split(/\r?\n/);
-+    return `${Math.max(...lines.map((x) => x.length))}ch`;
-+  }),
-+  getSummaryItems = (summary) => {
-+    if (!summary) return [summary];
-+    let summaryItems = summary.split('|').map((value2) => value2.trim());
-+    return (0, import_uniq.default)(summaryItems);
-+  },
-+  renderSummaryItems = (summaryItems, isExpanded = !0) => {
-+    let items = summaryItems;
-+    return (
-+      isExpanded || (items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION)),
-+      items.map((item) =>
-+        import_react10.default.createElement(ArgText, {
-+          key: item,
-+          text: item === '' ? '""' : item,
-+        })
-+      )
-+    );
-+  },
-+  ArgSummary = ({value: value2, initialExpandedArgs}) => {
-+    let {summary, detail} = value2,
-+      [isOpen, setIsOpen] = (0, import_react10.useState)(!1),
-+      [isExpanded, setIsExpanded] = (0, import_react10.useState)(
-+        initialExpandedArgs || !1
-+      );
-+    if (summary == null) return null;
-+    let summaryAsString =
-+      typeof summary.toString == 'function' ? summary.toString() : summary;
-+    if (detail == null) {
-+      if (/[(){}[\]<>]/.test(summaryAsString))
-+        return import_react10.default.createElement(ArgText, {
-+          text: summaryAsString,
-+        });
-+      let summaryItems = getSummaryItems(summaryAsString),
-+        itemsCount = summaryItems.length;
-+      return itemsCount > ITEMS_BEFORE_EXPANSION
-+        ? import_react10.default.createElement(
-+            Summary,
-+            {isExpanded},
-+            renderSummaryItems(summaryItems, isExpanded),
-+            import_react10.default.createElement(
-+              ExpandButton,
-+              {onClick: () => setIsExpanded(!isExpanded)},
-+              isExpanded
-+                ? 'Show less...'
-+                : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`
-+            )
-+          )
-+        : import_react10.default.createElement(
-+            Summary,
-+            null,
-+            renderSummaryItems(summaryItems)
-+          );
-+    }
-+    return import_react10.default.createElement(
-+      import_components8.WithTooltipPure,
-+      {
-+        closeOnOutsideClick: !0,
-+        placement: 'bottom',
-+        visible: isOpen,
-+        onVisibleChange: (isVisible) => {
-+          setIsOpen(isVisible);
-+        },
-+        tooltip: import_react10.default.createElement(
-+          Detail,
-+          {width: calculateDetailWidth(detail)},
-+          import_react10.default.createElement(
-+            import_components8.SyntaxHighlighter,
-+            {language: 'jsx', format: !1},
-+            detail
-+          )
-+        ),
-+      },
-+      import_react10.default.createElement(
-+        Expandable,
-+        {className: 'sbdocs-expandable'},
-+        import_react10.default.createElement('span', null, summaryAsString),
-+        isOpen
-+          ? import_react10.default.createElement(ChevronUpIcon, null)
-+          : import_react10.default.createElement(ChevronDownIcon, null)
-+      )
-+    );
-+  },
-+  ArgValue = ({value: value2, initialExpandedArgs}) =>
-+    value2 == null
-+      ? import_react10.default.createElement(EmptyArg, null)
-+      : import_react10.default.createElement(ArgSummary, {
-+          value: value2,
-+          initialExpandedArgs,
-+        });
-+var import_react26 = __toESM(require('react')),
-+  import_components16 = require('@storybook/components');
-+var import_react25 = __toESM(require('react'));
-+var import_react11 = __toESM(require('react')),
-+  import_polished4 = require('polished'),
-+  import_theming8 = require('@storybook/theming'),
-+  import_components9 = require('@storybook/components');
-+init_helpers();
-+var Label = import_theming8.styled.label(({theme}) => ({
-+    lineHeight: '18px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    display: 'inline-block',
-+    position: 'relative',
-+    whiteSpace: 'nowrap',
-+    background: theme.boolean.background,
-+    borderRadius: '3em',
-+    padding: 1,
-+    '&[aria-disabled="true"]': {opacity: 0.5, input: {cursor: 'not-allowed'}},
-+    input: {
-+      appearance: 'none',
-+      width: '100%',
-+      height: '100%',
-+      position: 'absolute',
-+      left: 0,
-+      top: 0,
-+      margin: 0,
-+      padding: 0,
-+      border: 'none',
-+      background: 'transparent',
-+      cursor: 'pointer',
-+      borderRadius: '3em',
-+      '&:focus': {
-+        outline: 'none',
-+        boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
-+      },
-+    },
-+    span: {
-+      textAlign: 'center',
-+      fontSize: theme.typography.size.s1,
-+      fontWeight: theme.typography.weight.bold,
-+      lineHeight: '1',
-+      cursor: 'pointer',
-+      display: 'inline-block',
-+      padding: '7px 15px',
-+      transition: 'all 100ms ease-out',
-+      userSelect: 'none',
-+      borderRadius: '3em',
-+      color: (0, import_polished4.transparentize)(0.5, theme.color.defaultText),
-+      background: 'transparent',
-+      '&:hover': {
-+        boxShadow: `${(0, import_polished4.opacify)(0.3, theme.appBorderColor)} 0 0 0 1px inset`,
-+      },
-+      '&:active': {
-+        boxShadow: `${(0, import_polished4.opacify)(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
-+        color: (0, import_polished4.opacify)(1, theme.appBorderColor),
-+      },
-+      '&:first-of-type': {paddingRight: 8},
-+      '&:last-of-type': {paddingLeft: 8},
-+    },
-+    'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':
-+      {
-+        background: theme.boolean.selectedBackground,
-+        boxShadow:
-+          theme.base === 'light'
-+            ? `${(0, import_polished4.opacify)(0.1, theme.appBorderColor)} 0 0 2px`
-+            : `${theme.appBorderColor} 0 0 0 1px`,
-+        color: theme.color.defaultText,
-+        padding: '7px 15px',
-+      },
-+  })),
-+  parse = (value2) => value2 === 'true',
-+  BooleanControl = ({
-+    name,
-+    value: value2,
-+    onChange,
-+    onBlur,
-+    onFocus,
-+    argType,
-+  }) => {
-+    let onSetFalse = (0, import_react11.useCallback)(
-+        () => onChange(!1),
-+        [onChange]
-+      ),
-+      readonly = !!argType?.table?.readonly;
-+    if (value2 === void 0)
-+      return import_react11.default.createElement(
-+        import_components9.Button,
-+        {
-+          variant: 'outline',
-+          size: 'medium',
-+          id: getControlSetterButtonId(name),
-+          onClick: onSetFalse,
-+          disabled: readonly,
-+        },
-+        'Set boolean'
-+      );
-+    let controlId = getControlId(name),
-+      parsedValue = typeof value2 == 'string' ? parse(value2) : value2;
-+    return import_react11.default.createElement(
-+      Label,
-+      {'aria-disabled': readonly, htmlFor: controlId, 'aria-label': name},
-+      import_react11.default.createElement('input', {
-+        id: controlId,
-+        type: 'checkbox',
-+        onChange: (e) => onChange(e.target.checked),
-+        checked: parsedValue,
-+        role: 'switch',
-+        disabled: readonly,
-+        name,
-+        onBlur,
-+        onFocus,
-+      }),
-+      import_react11.default.createElement(
-+        'span',
-+        {'aria-hidden': 'true'},
-+        'False'
-+      ),
-+      import_react11.default.createElement(
-+        'span',
-+        {'aria-hidden': 'true'},
-+        'True'
-+      )
-+    );
-+  };
-+var import_react12 = __toESM(require('react')),
-+  import_theming9 = require('@storybook/theming'),
-+  import_components10 = require('@storybook/components');
-+init_helpers();
-+var parseDate = (value2) => {
-+    let [year, month, day] = value2.split('-'),
-+      result = new Date();
-+    return (
-+      result.setFullYear(
-+        parseInt(year, 10),
-+        parseInt(month, 10) - 1,
-+        parseInt(day, 10)
-+      ),
-+      result
-+    );
-+  },
-+  parseTime = (value2) => {
-+    let [hours, minutes] = value2.split(':'),
-+      result = new Date();
-+    return (
-+      result.setHours(parseInt(hours, 10)),
-+      result.setMinutes(parseInt(minutes, 10)),
-+      result
-+    );
-+  },
-+  formatDate = (value2) => {
-+    let date = new Date(value2),
-+      year = `000${date.getFullYear()}`.slice(-4),
-+      month = `0${date.getMonth() + 1}`.slice(-2),
-+      day = `0${date.getDate()}`.slice(-2);
-+    return `${year}-${month}-${day}`;
-+  },
-+  formatTime = (value2) => {
-+    let date = new Date(value2),
-+      hours = `0${date.getHours()}`.slice(-2),
-+      minutes = `0${date.getMinutes()}`.slice(-2);
-+    return `${hours}:${minutes}`;
-+  },
-+  FormInput = (0, import_theming9.styled)(import_components10.Form.Input)(
-+    ({readOnly}) => ({opacity: readOnly ? 0.5 : 1})
-+  ),
-+  FlexSpaced = import_theming9.styled.div(({theme}) => ({
-+    flex: 1,
-+    display: 'flex',
-+    input: {
-+      marginLeft: 10,
-+      flex: 1,
-+      height: 32,
-+      '&::-webkit-calendar-picker-indicator': {
-+        opacity: 0.5,
-+        height: 12,
-+        filter: theme.base === 'light' ? void 0 : 'invert(1)',
-+      },
-+    },
-+    'input:first-of-type': {marginLeft: 0, flexGrow: 4},
-+    'input:last-of-type': {flexGrow: 3},
-+  })),
-+  DateControl = ({name, value: value2, onChange, onFocus, onBlur, argType}) => {
-+    let [valid, setValid] = (0, import_react12.useState)(!0),
-+      dateRef = (0, import_react12.useRef)(),
-+      timeRef = (0, import_react12.useRef)(),
-+      readonly = !!argType?.table?.readonly;
-+    (0, import_react12.useEffect)(() => {
-+      valid !== !1 &&
-+        (dateRef &&
-+          dateRef.current &&
-+          (dateRef.current.value = formatDate(value2)),
-+        timeRef &&
-+          timeRef.current &&
-+          (timeRef.current.value = formatTime(value2)));
-+    }, [value2]);
-+    let onDateChange = (e) => {
-+        let parsed = parseDate(e.target.value),
-+          result = new Date(value2);
-+        result.setFullYear(
-+          parsed.getFullYear(),
-+          parsed.getMonth(),
-+          parsed.getDate()
-+        );
-+        let time = result.getTime();
-+        time && onChange(time), setValid(!!time);
-+      },
-+      onTimeChange = (e) => {
-+        let parsed = parseTime(e.target.value),
-+          result = new Date(value2);
-+        result.setHours(parsed.getHours()),
-+          result.setMinutes(parsed.getMinutes());
-+        let time = result.getTime();
-+        time && onChange(time), setValid(!!time);
-+      },
-+      controlId = getControlId(name);
-+    return import_react12.default.createElement(
-+      FlexSpaced,
-+      null,
-+      import_react12.default.createElement(FormInput, {
-+        type: 'date',
-+        max: '9999-12-31',
-+        ref: dateRef,
-+        id: `${controlId}-date`,
-+        name: `${controlId}-date`,
-+        readOnly: readonly,
-+        onChange: onDateChange,
-+        onFocus,
-+        onBlur,
-+      }),
-+      import_react12.default.createElement(FormInput, {
-+        type: 'time',
-+        id: `${controlId}-time`,
-+        name: `${controlId}-time`,
-+        ref: timeRef,
-+        onChange: onTimeChange,
-+        readOnly: readonly,
-+        onFocus,
-+        onBlur,
-+      }),
-+      valid
-+        ? null
-+        : import_react12.default.createElement('div', null, 'invalid')
-+    );
-+  };
-+var import_react13 = __toESM(require('react')),
-+  import_theming10 = require('@storybook/theming'),
-+  import_components11 = require('@storybook/components');
-+init_helpers();
-+var Wrapper3 = import_theming10.styled.label({display: 'flex'}),
-+  parse2 = (value2) => {
-+    let result = parseFloat(value2);
-+    return Number.isNaN(result) ? void 0 : result;
-+  },
-+  format = (value2) => (value2 != null ? String(value2) : ''),
-+  FormInput2 = (0, import_theming10.styled)(import_components11.Form.Input)(
-+    ({readOnly}) => ({opacity: readOnly ? 0.5 : 1})
-+  ),
-+  NumberControl = ({
-+    name,
-+    value: value2,
-+    onChange,
-+    min,
-+    max,
-+    step,
-+    onBlur,
-+    onFocus,
-+    argType,
-+  }) => {
-+    let [inputValue, setInputValue] = (0, import_react13.useState)(
-+        typeof value2 == 'number' ? value2 : ''
-+      ),
-+      [forceVisible, setForceVisible] = (0, import_react13.useState)(!1),
-+      [parseError, setParseError] = (0, import_react13.useState)(null),
-+      readonly = !!argType?.table?.readonly,
-+      handleChange = (0, import_react13.useCallback)(
-+        (event) => {
-+          setInputValue(event.target.value);
-+          let result = parseFloat(event.target.value);
-+          Number.isNaN(result)
-+            ? setParseError(
-+                new Error(`'${event.target.value}' is not a number`)
-+              )
-+            : (onChange(result), setParseError(null));
-+        },
-+        [onChange, setParseError]
-+      ),
-+      onForceVisible = (0, import_react13.useCallback)(() => {
-+        setInputValue('0'), onChange(0), setForceVisible(!0);
-+      }, [setForceVisible]),
-+      htmlElRef = (0, import_react13.useRef)(null);
-+    return (
-+      (0, import_react13.useEffect)(() => {
-+        forceVisible && htmlElRef.current && htmlElRef.current.select();
-+      }, [forceVisible]),
-+      (0, import_react13.useEffect)(() => {
-+        inputValue !== (typeof value2 == 'number' ? value2 : '') &&
-+          setInputValue(value2);
-+      }, [value2]),
-+      value2 === void 0
-+        ? import_react13.default.createElement(
-+            import_components11.Button,
-+            {
-+              variant: 'outline',
-+              size: 'medium',
-+              id: getControlSetterButtonId(name),
-+              onClick: onForceVisible,
-+              disabled: readonly,
-+            },
-+            'Set number'
-+          )
-+        : import_react13.default.createElement(
-+            Wrapper3,
-+            null,
-+            import_react13.default.createElement(FormInput2, {
-+              ref: htmlElRef,
-+              id: getControlId(name),
-+              type: 'number',
-+              onChange: handleChange,
-+              size: 'flex',
-+              placeholder: 'Edit number...',
-+              value: inputValue,
-+              valid: parseError ? 'error' : null,
-+              autoFocus: forceVisible,
-+              readOnly: readonly,
-+              name,
-+              min,
-+              max,
-+              step,
-+              onFocus,
-+              onBlur,
-+            })
-+          )
-+    );
-+  };
-+var import_react17 = __toESM(require('react'));
-+var import_react14 = __toESM(require('react')),
-+  import_theming11 = require('@storybook/theming'),
-+  import_client_logger = require('@storybook/client-logger');
-+var selectedKey = (value2, options) => {
-+    let entry =
-+      options && Object.entries(options).find(([_key, val]) => val === value2);
-+    return entry ? entry[0] : void 0;
-+  },
-+  selectedKeys = (value2, options) =>
-+    value2 && options
-+      ? Object.entries(options)
-+          .filter((entry) => value2.includes(entry[1]))
-+          .map((entry) => entry[0])
-+      : [],
-+  selectedValues = (keys, options) =>
-+    keys && options && keys.map((key) => options[key]);
-+init_helpers();
-+var Wrapper4 = import_theming11.styled.div(
-+    ({isInline}) =>
-+      isInline
-+        ? {
-+            display: 'flex',
-+            flexWrap: 'wrap',
-+            alignItems: 'flex-start',
-+            label: {display: 'inline-flex', marginRight: 15},
-+          }
-+        : {label: {display: 'flex'}},
-+    (props) => {
-+      if (props['aria-readonly'] === 'true')
-+        return {input: {cursor: 'not-allowed'}};
-+    }
-+  ),
-+  Text2 = import_theming11.styled.span({
-+    '[aria-readonly=true] &': {opacity: 0.5},
-+  }),
-+  Label2 = import_theming11.styled.label({
-+    lineHeight: '20px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    '&:last-child': {marginBottom: 0},
-+    input: {margin: 0, marginRight: 6},
-+  }),
-+  CheckboxControl = ({
-+    name,
-+    options,
-+    value: value2,
-+    onChange,
-+    isInline,
-+    argType,
-+  }) => {
-+    if (!options)
-+      return (
-+        import_client_logger.logger.warn(`Checkbox with no options: ${name}`),
-+        import_react14.default.createElement(
-+          import_react14.default.Fragment,
-+          null,
-+          '-'
-+        )
-+      );
-+    let initial = selectedKeys(value2, options),
-+      [selected, setSelected] = (0, import_react14.useState)(initial),
-+      readonly = !!argType?.table?.readonly,
-+      handleChange = (e) => {
-+        let option = e.target.value,
-+          updated = [...selected];
-+        updated.includes(option)
-+          ? updated.splice(updated.indexOf(option), 1)
-+          : updated.push(option),
-+          onChange(selectedValues(updated, options)),
-+          setSelected(updated);
-+      };
-+    (0, import_react14.useEffect)(() => {
-+      setSelected(selectedKeys(value2, options));
-+    }, [value2]);
-+    let controlId = getControlId(name);
-+    return import_react14.default.createElement(
-+      Wrapper4,
-+      {'aria-readonly': readonly, isInline},
-+      Object.keys(options).map((key, index) => {
-+        let id2 = `${controlId}-${index}`;
-+        return import_react14.default.createElement(
-+          Label2,
-+          {key: id2, htmlFor: id2},
-+          import_react14.default.createElement('input', {
-+            type: 'checkbox',
-+            disabled: readonly,
-+            id: id2,
-+            name: id2,
-+            value: key,
-+            onChange: handleChange,
-+            checked: selected?.includes(key),
-+          }),
-+          import_react14.default.createElement(Text2, null, key)
-+        );
-+      })
-+    );
-+  };
-+var import_react15 = __toESM(require('react')),
-+  import_theming12 = require('@storybook/theming'),
-+  import_client_logger2 = require('@storybook/client-logger');
-+init_helpers();
-+var Wrapper5 = import_theming12.styled.div(
-+    ({isInline}) =>
-+      isInline
-+        ? {
-+            display: 'flex',
-+            flexWrap: 'wrap',
-+            alignItems: 'flex-start',
-+            label: {display: 'inline-flex', marginRight: 15},
-+          }
-+        : {label: {display: 'flex'}},
-+    (props) => {
-+      if (props['aria-readonly'] === 'true')
-+        return {input: {cursor: 'not-allowed'}};
-+    }
-+  ),
-+  Text3 = import_theming12.styled.span({
-+    '[aria-readonly=true] &': {opacity: 0.5},
-+  }),
-+  Label3 = import_theming12.styled.label({
-+    lineHeight: '20px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    '&:last-child': {marginBottom: 0},
-+    input: {margin: 0, marginRight: 6},
-+  }),
-+  RadioControl = ({
-+    name,
-+    options,
-+    value: value2,
-+    onChange,
-+    isInline,
-+    argType,
-+  }) => {
-+    if (!options)
-+      return (
-+        import_client_logger2.logger.warn(`Radio with no options: ${name}`),
-+        import_react15.default.createElement(
-+          import_react15.default.Fragment,
-+          null,
-+          '-'
-+        )
-+      );
-+    let selection = selectedKey(value2, options),
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return import_react15.default.createElement(
-+      Wrapper5,
-+      {'aria-readonly': readonly, isInline},
-+      Object.keys(options).map((key, index) => {
-+        let id2 = `${controlId}-${index}`;
-+        return import_react15.default.createElement(
-+          Label3,
-+          {key: id2, htmlFor: id2},
-+          import_react15.default.createElement('input', {
-+            type: 'radio',
-+            id: id2,
-+            name: id2,
-+            disabled: readonly,
-+            value: key,
-+            onChange: (e) => onChange(options[e.currentTarget.value]),
-+            checked: key === selection,
-+          }),
-+          import_react15.default.createElement(Text3, null, key)
-+        );
-+      })
-+    );
-+  };
-+var import_react16 = __toESM(require('react')),
-+  import_theming13 = require('@storybook/theming'),
-+  import_client_logger3 = require('@storybook/client-logger');
-+init_helpers();
-+var import_icons3 = require('@storybook/icons'),
-+  styleResets = {
-+    appearance: 'none',
-+    border: '0 none',
-+    boxSizing: 'inherit',
-+    display: ' block',
-+    margin: ' 0',
-+    background: 'transparent',
-+    padding: 0,
-+    fontSize: 'inherit',
-+    position: 'relative',
-+  },
-+  OptionsSelect = import_theming13.styled.select(styleResets, ({theme}) => ({
-+    boxSizing: 'border-box',
-+    position: 'relative',
-+    padding: '6px 10px',
-+    width: '100%',
-+    color: theme.input.color || 'inherit',
-+    background: theme.input.background,
-+    borderRadius: theme.input.borderRadius,
-+    boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-+    fontSize: theme.typography.size.s2 - 1,
-+    lineHeight: '20px',
-+    '&:focus': {
-+      boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-+      outline: 'none',
-+    },
-+    '&[disabled]': {cursor: 'not-allowed', opacity: 0.5},
-+    '::placeholder': {color: theme.textMutedColor},
-+    '&[multiple]': {
-+      overflow: 'auto',
-+      padding: 0,
-+      option: {
-+        display: 'block',
-+        padding: '6px 10px',
-+        marginLeft: 1,
-+        marginRight: 1,
-+      },
-+    },
-+  })),
-+  SelectWrapper = import_theming13.styled.span(({theme}) => ({
-+    display: 'inline-block',
-+    lineHeight: 'normal',
-+    overflow: 'hidden',
-+    position: 'relative',
-+    verticalAlign: 'top',
-+    width: '100%',
-+    svg: {
-+      position: 'absolute',
-+      zIndex: 1,
-+      pointerEvents: 'none',
-+      height: '12px',
-+      marginTop: '-6px',
-+      right: '12px',
-+      top: '50%',
-+      fill: theme.textMutedColor,
-+      path: {fill: theme.textMutedColor},
-+    },
-+  })),
-+  NO_SELECTION = 'Choose option...',
-+  SingleSelect = ({name, value: value2, options, onChange, argType}) => {
-+    let handleChange = (e) => {
-+        onChange(options[e.currentTarget.value]);
-+      },
-+      selection = selectedKey(value2, options) || NO_SELECTION,
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return import_react16.default.createElement(
-+      SelectWrapper,
-+      null,
-+      import_react16.default.createElement(
-+        import_icons3.ChevronSmallDownIcon,
-+        null
-+      ),
-+      import_react16.default.createElement(
-+        OptionsSelect,
-+        {
-+          disabled: readonly,
-+          id: controlId,
-+          value: selection,
-+          onChange: handleChange,
-+        },
-+        import_react16.default.createElement(
-+          'option',
-+          {key: 'no-selection', disabled: !0},
-+          NO_SELECTION
-+        ),
-+        Object.keys(options).map((key) =>
-+          import_react16.default.createElement('option', {key, value: key}, key)
-+        )
-+      )
-+    );
-+  },
-+  MultiSelect = ({name, value: value2, options, onChange, argType}) => {
-+    let handleChange = (e) => {
-+        let selection2 = Array.from(e.currentTarget.options)
-+          .filter((option) => option.selected)
-+          .map((option) => option.value);
-+        onChange(selectedValues(selection2, options));
-+      },
-+      selection = selectedKeys(value2, options),
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return import_react16.default.createElement(
-+      SelectWrapper,
-+      null,
-+      import_react16.default.createElement(
-+        OptionsSelect,
-+        {
-+          disabled: readonly,
-+          id: controlId,
-+          multiple: !0,
-+          value: selection,
-+          onChange: handleChange,
-+        },
-+        Object.keys(options).map((key) =>
-+          import_react16.default.createElement('option', {key, value: key}, key)
-+        )
-+      )
-+    );
-+  },
-+  SelectControl = (props) => {
-+    let {name, options} = props;
-+    return options
-+      ? props.isMulti
-+        ? import_react16.default.createElement(MultiSelect, {...props})
-+        : import_react16.default.createElement(SingleSelect, {...props})
-+      : (import_client_logger3.logger.warn(`Select with no options: ${name}`),
-+        import_react16.default.createElement(
-+          import_react16.default.Fragment,
-+          null,
-+          '-'
-+        ));
-+  };
-+var normalizeOptions = (options, labels) =>
-+    Array.isArray(options)
-+      ? options.reduce(
-+          (acc, item) => ((acc[labels?.[item] || String(item)] = item), acc),
-+          {}
-+        )
-+      : options,
-+  Controls = {
-+    check: CheckboxControl,
-+    'inline-check': CheckboxControl,
-+    radio: RadioControl,
-+    'inline-radio': RadioControl,
-+    select: SelectControl,
-+    'multi-select': SelectControl,
-+  },
-+  OptionsControl = (props) => {
-+    let {type = 'select', labels, argType} = props,
-+      normalized = {
-+        ...props,
-+        argType,
-+        options: argType ? normalizeOptions(argType.options, labels) : {},
-+        isInline: type.includes('inline'),
-+        isMulti: type.includes('multi'),
-+      },
-+      Control = Controls[type];
-+    if (Control)
-+      return import_react17.default.createElement(Control, {...normalized});
-+    throw new Error(`Unknown options type: ${type}`);
-+  };
-+var import_global4 = require('@storybook/global'),
-+  import_cloneDeep = __toESM(require('lodash/cloneDeep.js')),
-+  import_react20 = __toESM(require('react')),
-+  import_theming14 = require('@storybook/theming'),
-+  import_components12 = require('@storybook/components'),
-+  import_icons4 = require('@storybook/icons');
-+var import_react19 = __toESM(require('react'));
-+var import_react18 = __toESM(require('react'));
-+var VALUE = 'value',
-+  KEY = 'key';
-+var ERROR = 'Error',
-+  OBJECT = 'Object',
-+  ARRAY = 'Array',
-+  STRING = 'String',
-+  NUMBER = 'Number',
-+  BOOLEAN = 'Boolean',
-+  DATE = 'Date',
-+  NULL = 'Null',
-+  UNDEFINED = 'Undefined',
-+  FUNCTION = 'Function',
-+  SYMBOL = 'Symbol';
-+var ADD_DELTA_TYPE = 'ADD_DELTA_TYPE',
-+  REMOVE_DELTA_TYPE = 'REMOVE_DELTA_TYPE',
-+  UPDATE_DELTA_TYPE = 'UPDATE_DELTA_TYPE';
-+function getObjectType(obj) {
-+  return obj !== null &&
-+    typeof obj == 'object' &&
-+    !Array.isArray(obj) &&
-+    typeof obj[Symbol.iterator] == 'function'
-+    ? 'Iterable'
-+    : Object.prototype.toString.call(obj).slice(8, -1);
-+}
-+function isComponentWillChange(oldValue, newValue) {
-+  let oldType = getObjectType(oldValue),
-+    newType = getObjectType(newValue);
-+  return (
-+    (oldType === 'Function' || newType === 'Function') && newType !== oldType
-+  );
-+}
-+var JsonAddValue = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {inputRefKey: null, inputRefValue: null}),
-+      (this.refInputValue = this.refInputValue.bind(this)),
-+      (this.refInputKey = this.refInputKey.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this)),
-+      (this.onSubmit = this.onSubmit.bind(this));
-+  }
-+  componentDidMount() {
-+    let {inputRefKey, inputRefValue} = this.state,
-+      {onlyValue} = this.props;
-+    inputRefKey &&
-+      typeof inputRefKey.focus == 'function' &&
-+      inputRefKey.focus(),
-+      onlyValue &&
-+        inputRefValue &&
-+        typeof inputRefValue.focus == 'function' &&
-+        inputRefValue.focus(),
-+      document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.onSubmit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.props.handleCancel()));
-+  }
-+  onSubmit() {
-+    let {handleAdd, onlyValue, onSubmitValueParser, keyPath, deep} = this.props,
-+      {inputRefKey, inputRefValue} = this.state,
-+      result = {};
-+    if (!onlyValue) {
-+      if (!inputRefKey.value) return;
-+      result.key = inputRefKey.value;
-+    }
-+    (result.newValue = onSubmitValueParser(
-+      !1,
-+      keyPath,
-+      deep,
-+      result.key,
-+      inputRefValue.value
-+    )),
-+      handleAdd(result);
-+  }
-+  refInputKey(node) {
-+    this.state.inputRefKey = node;
-+  }
-+  refInputValue(node) {
-+    this.state.inputRefValue = node;
-+  }
-+  render() {
-+    let {
-+        handleCancel,
-+        onlyValue,
-+        addButtonElement,
-+        cancelButtonElement,
-+        inputElementGenerator,
-+        keyPath,
-+        deep,
-+      } = this.props,
-+      addButtonElementLayout = (0, import_react18.cloneElement)(
-+        addButtonElement,
-+        {onClick: this.onSubmit}
-+      ),
-+      cancelButtonElementLayout = (0, import_react18.cloneElement)(
-+        cancelButtonElement,
-+        {onClick: handleCancel}
-+      ),
-+      inputElementValue = inputElementGenerator(VALUE, keyPath, deep),
-+      inputElementValueLayout = (0, import_react18.cloneElement)(
-+        inputElementValue,
-+        {placeholder: 'Value', ref: this.refInputValue}
-+      ),
-+      inputElementKeyLayout = null;
-+    if (!onlyValue) {
-+      let inputElementKey = inputElementGenerator(KEY, keyPath, deep);
-+      inputElementKeyLayout = (0, import_react18.cloneElement)(
-+        inputElementKey,
-+        {placeholder: 'Key', ref: this.refInputKey}
-+      );
-+    }
-+    return import_react18.default.createElement(
-+      'span',
-+      {className: 'rejt-add-value-node'},
-+      inputElementKeyLayout,
-+      inputElementValueLayout,
-+      cancelButtonElementLayout,
-+      addButtonElementLayout
-+    );
-+  }
-+};
-+JsonAddValue.defaultProps = {
-+  onlyValue: !1,
-+  addButtonElement: import_react18.default.createElement('button', null, '+'),
-+  cancelButtonElement: import_react18.default.createElement(
-+    'button',
-+    null,
-+    'c'
-+  ),
-+};
-+var JsonArray = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      data: props.data,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      nextDeep: props.deep + 1,
-+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
-+      addFormVisible: !1,
-+    }),
-+      (this.handleCollapseMode = this.handleCollapseMode.bind(this)),
-+      (this.handleRemoveItem = this.handleRemoveItem.bind(this)),
-+      (this.handleAddMode = this.handleAddMode.bind(this)),
-+      (this.handleAddValueAdd = this.handleAddValueAdd.bind(this)),
-+      (this.handleAddValueCancel = this.handleAddValueCancel.bind(this)),
-+      (this.handleEditValue = this.handleEditValue.bind(this)),
-+      (this.onChildUpdate = this.onChildUpdate.bind(this)),
-+      (this.renderCollapsed = this.renderCollapsed.bind(this)),
-+      (this.renderNotCollapsed = this.renderNotCollapsed.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  onChildUpdate(childKey, childData) {
-+    let {data, keyPath} = this.state;
-+    (data[childKey] = childData), this.setState({data});
-+    let {onUpdate} = this.props,
-+      size = keyPath.length;
-+    onUpdate(keyPath[size - 1], data);
-+  }
-+  handleAddMode() {
-+    this.setState({addFormVisible: !0});
-+  }
-+  handleCollapseMode() {
-+    this.setState((state) => ({collapsed: !state.collapsed}));
-+  }
-+  handleRemoveItem(index) {
-+    return () => {
-+      let {beforeRemoveAction, logger: logger4} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[index];
-+      beforeRemoveAction(index, keyPath, deep, oldValue)
-+        .then(() => {
-+          let deltaUpdateResult = {
-+            keyPath,
-+            deep,
-+            key: index,
-+            oldValue,
-+            type: REMOVE_DELTA_TYPE,
-+          };
-+          data.splice(index, 1), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate(deltaUpdateResult);
-+        })
-+        .catch(logger4.error);
-+    };
-+  }
-+  handleAddValueAdd({newValue}) {
-+    let {data, keyPath, nextDeep: deep} = this.state,
-+      {beforeAddAction, logger: logger4} = this.props;
-+    beforeAddAction(data.length, keyPath, deep, newValue)
-+      .then(() => {
-+        let newData = [...data, newValue];
-+        this.setState({data: newData}), this.handleAddValueCancel();
-+        let {onUpdate, onDeltaUpdate} = this.props;
-+        onUpdate(keyPath[keyPath.length - 1], newData),
-+          onDeltaUpdate({
-+            type: ADD_DELTA_TYPE,
-+            keyPath,
-+            deep,
-+            key: newData.length - 1,
-+            newValue,
-+          });
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleAddValueCancel() {
-+    this.setState({addFormVisible: !1});
-+  }
-+  handleEditValue({key, value: value2}) {
-+    return new Promise((resolve, reject) => {
-+      let {beforeUpdateAction} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeUpdateAction(key, keyPath, deep, oldValue, value2)
-+        .then(() => {
-+          (data[key] = value2), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate({
-+              type: UPDATE_DELTA_TYPE,
-+              keyPath,
-+              deep,
-+              key,
-+              newValue: value2,
-+              oldValue,
-+            }),
-+            resolve(void 0);
-+        })
-+        .catch(reject);
-+    });
-+  }
-+  renderCollapsed() {
-+    let {name, data, keyPath, deep} = this.state,
-+      {handleRemove, readOnly, getStyle, dataType, minusMenuElement} =
-+        this.props,
-+      {minus, collapsed} = getStyle(name, data, keyPath, deep, dataType),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      removeItemButton = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return import_react18.default.createElement(
-+      'span',
-+      {className: 'rejt-collapsed'},
-+      import_react18.default.createElement(
-+        'span',
-+        {
-+          className: 'rejt-collapsed-text',
-+          style: collapsed,
-+          onClick: this.handleCollapseMode,
-+        },
-+        '[...] ',
-+        data.length,
-+        ' ',
-+        data.length === 1 ? 'item' : 'items'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  renderNotCollapsed() {
-+    let {name, data, keyPath, deep, addFormVisible, nextDeep} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        dataType,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      {minus, plus, delimiter, ul, addForm} = getStyle(
-+        name,
-+        data,
-+        keyPath,
-+        deep,
-+        dataType
-+      ),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      addItemButton = (0, import_react18.cloneElement)(plusMenuElement, {
-+        onClick: this.handleAddMode,
-+        className: 'rejt-plus-menu',
-+        style: plus,
-+      }),
-+      removeItemButton = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return import_react18.default.createElement(
-+      'span',
-+      {className: 'rejt-not-collapsed'},
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '['
-+      ),
-+      !addFormVisible && addItemButton,
-+      import_react18.default.createElement(
-+        'ul',
-+        {className: 'rejt-not-collapsed-list', style: ul},
-+        data.map((item, index) =>
-+          import_react18.default.createElement(JsonNode, {
-+            key: index,
-+            name: index.toString(),
-+            data: item,
-+            keyPath,
-+            deep: nextDeep,
-+            isCollapsed,
-+            handleRemove: this.handleRemoveItem(index),
-+            handleUpdateValue: this.handleEditValue,
-+            onUpdate: this.onChildUpdate,
-+            onDeltaUpdate,
-+            readOnly,
-+            getStyle,
-+            addButtonElement,
-+            cancelButtonElement,
-+            editButtonElement,
-+            inputElementGenerator,
-+            textareaElementGenerator,
-+            minusMenuElement,
-+            plusMenuElement,
-+            beforeRemoveAction,
-+            beforeAddAction,
-+            beforeUpdateAction,
-+            logger: logger4,
-+            onSubmitValueParser,
-+          })
-+        )
-+      ),
-+      !isReadOnly &&
-+        addFormVisible &&
-+        import_react18.default.createElement(
-+          'div',
-+          {className: 'rejt-add-form', style: addForm},
-+          import_react18.default.createElement(JsonAddValue, {
-+            handleAdd: this.handleAddValueAdd,
-+            handleCancel: this.handleAddValueCancel,
-+            onlyValue: !0,
-+            addButtonElement,
-+            cancelButtonElement,
-+            inputElementGenerator,
-+            keyPath,
-+            deep,
-+            onSubmitValueParser,
-+          })
-+        ),
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        ']'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  render() {
-+    let {name, collapsed, data, keyPath, deep} = this.state,
-+      {dataType, getStyle} = this.props,
-+      value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed(),
-+      style = getStyle(name, data, keyPath, deep, dataType);
-+    return import_react18.default.createElement(
-+      'div',
-+      {className: 'rejt-array-node'},
-+      import_react18.default.createElement(
-+        'span',
-+        {onClick: this.handleCollapseMode},
-+        import_react18.default.createElement(
-+          'span',
-+          {className: 'rejt-name', style: style.name},
-+          name,
-+          ' :',
-+          ' '
-+        )
-+      ),
-+      value2
-+    );
-+  }
-+};
-+JsonArray.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  minusMenuElement: import_react18.default.createElement('span', null, ' - '),
-+  plusMenuElement: import_react18.default.createElement('span', null, ' + '),
-+};
-+var JsonFunctionValue = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      value: props.value,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      editEnabled: !1,
-+      inputRef: null,
-+    }),
-+      (this.handleEditMode = this.handleEditMode.bind(this)),
-+      (this.refInput = this.refInput.bind(this)),
-+      (this.handleCancelEdit = this.handleCancelEdit.bind(this)),
-+      (this.handleEdit = this.handleEdit.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.value !== state.value ? {value: props.value} : null;
-+  }
-+  componentDidUpdate() {
-+    let {
-+        editEnabled,
-+        inputRef,
-+        name,
-+        value: value2,
-+        keyPath,
-+        deep,
-+      } = this.state,
-+      {readOnly, dataType} = this.props,
-+      readOnlyResult = readOnly(name, value2, keyPath, deep, dataType);
-+    editEnabled &&
-+      !readOnlyResult &&
-+      typeof inputRef.focus == 'function' &&
-+      inputRef.focus();
-+  }
-+  componentDidMount() {
-+    document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.handleEdit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.handleCancelEdit()));
-+  }
-+  handleEdit() {
-+    let {
-+        handleUpdateValue,
-+        originalValue,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        keyPath,
-+      } = this.props,
-+      {inputRef, name, deep} = this.state;
-+    if (!inputRef) return;
-+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value);
-+    handleUpdateValue({value: newValue, key: name})
-+      .then(() => {
-+        isComponentWillChange(originalValue, newValue) ||
-+          this.handleCancelEdit();
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleEditMode() {
-+    this.setState({editEnabled: !0});
-+  }
-+  refInput(node) {
-+    this.state.inputRef = node;
-+  }
-+  handleCancelEdit() {
-+    this.setState({editEnabled: !1});
-+  }
-+  render() {
-+    let {name, value: value2, editEnabled, keyPath, deep} = this.state,
-+      {
-+        handleRemove,
-+        originalValue,
-+        readOnly,
-+        dataType,
-+        getStyle,
-+        editButtonElement,
-+        cancelButtonElement,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        keyPath: comeFromKeyPath,
-+      } = this.props,
-+      style = getStyle(name, originalValue, keyPath, deep, dataType),
-+      result = null,
-+      minusElement = null,
-+      resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
-+    if (editEnabled && !resultOnlyResult) {
-+      let textareaElement = textareaElementGenerator(
-+          VALUE,
-+          comeFromKeyPath,
-+          deep,
-+          name,
-+          originalValue,
-+          dataType
-+        ),
-+        editButtonElementLayout = (0, import_react18.cloneElement)(
-+          editButtonElement,
-+          {onClick: this.handleEdit}
-+        ),
-+        cancelButtonElementLayout = (0, import_react18.cloneElement)(
-+          cancelButtonElement,
-+          {onClick: this.handleCancelEdit}
-+        ),
-+        textareaElementLayout = (0, import_react18.cloneElement)(
-+          textareaElement,
-+          {ref: this.refInput, defaultValue: originalValue}
-+        );
-+      (result = import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-edit-form', style: style.editForm},
-+        textareaElementLayout,
-+        ' ',
-+        cancelButtonElementLayout,
-+        editButtonElementLayout
-+      )),
-+        (minusElement = null);
-+    } else {
-+      result = import_react18.default.createElement(
-+        'span',
-+        {
-+          className: 'rejt-value',
-+          style: style.value,
-+          onClick: resultOnlyResult ? null : this.handleEditMode,
-+        },
-+        value2
-+      );
-+      let minusMenuLayout = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: style.minus,
-+      });
-+      minusElement = resultOnlyResult ? null : minusMenuLayout;
-+    }
-+    return import_react18.default.createElement(
-+      'li',
-+      {className: 'rejt-function-value-node', style: style.li},
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-name', style: style.name},
-+        name,
-+        ' :',
-+        ' '
-+      ),
-+      result,
-+      minusElement
-+    );
-+  }
-+};
-+JsonFunctionValue.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  handleUpdateValue: () => {},
-+  editButtonElement: import_react18.default.createElement('button', null, 'e'),
-+  cancelButtonElement: import_react18.default.createElement(
-+    'button',
-+    null,
-+    'c'
-+  ),
-+  minusMenuElement: import_react18.default.createElement('span', null, ' - '),
-+};
-+var JsonNode = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {
-+        data: props.data,
-+        name: props.name,
-+        keyPath: props.keyPath,
-+        deep: props.deep,
-+      });
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  render() {
-+    let {data, name, keyPath, deep} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        handleUpdateValue,
-+        onUpdate,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      readOnlyTrue = () => !0,
-+      dataType = getObjectType(data);
-+    switch (dataType) {
-+      case ERROR:
-+        return import_react18.default.createElement(JsonObject, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case OBJECT:
-+        return import_react18.default.createElement(JsonObject, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case ARRAY:
-+        return import_react18.default.createElement(JsonArray, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case STRING:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: `"${data}"`,
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case NUMBER:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: data,
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case BOOLEAN:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: data ? 'true' : 'false',
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case DATE:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: data.toISOString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case NULL:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: 'null',
-+          originalValue: 'null',
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case UNDEFINED:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: 'undefined',
-+          originalValue: 'undefined',
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case FUNCTION:
-+        return import_react18.default.createElement(JsonFunctionValue, {
-+          name,
-+          value: data.toString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case SYMBOL:
-+        return import_react18.default.createElement(JsonValue, {
-+          name,
-+          value: data.toString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      default:
-+        return null;
-+    }
-+  }
-+};
-+JsonNode.defaultProps = {keyPath: [], deep: 0};
-+var JsonObject = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = props.deep === -1 ? [] : [...props.keyPath, props.name];
-+    (this.state = {
-+      name: props.name,
-+      data: props.data,
-+      keyPath,
-+      deep: props.deep,
-+      nextDeep: props.deep + 1,
-+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
-+      addFormVisible: !1,
-+    }),
-+      (this.handleCollapseMode = this.handleCollapseMode.bind(this)),
-+      (this.handleRemoveValue = this.handleRemoveValue.bind(this)),
-+      (this.handleAddMode = this.handleAddMode.bind(this)),
-+      (this.handleAddValueAdd = this.handleAddValueAdd.bind(this)),
-+      (this.handleAddValueCancel = this.handleAddValueCancel.bind(this)),
-+      (this.handleEditValue = this.handleEditValue.bind(this)),
-+      (this.onChildUpdate = this.onChildUpdate.bind(this)),
-+      (this.renderCollapsed = this.renderCollapsed.bind(this)),
-+      (this.renderNotCollapsed = this.renderNotCollapsed.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  onChildUpdate(childKey, childData) {
-+    let {data, keyPath} = this.state;
-+    (data[childKey] = childData), this.setState({data});
-+    let {onUpdate} = this.props,
-+      size = keyPath.length;
-+    onUpdate(keyPath[size - 1], data);
-+  }
-+  handleAddMode() {
-+    this.setState({addFormVisible: !0});
-+  }
-+  handleAddValueCancel() {
-+    this.setState({addFormVisible: !1});
-+  }
-+  handleAddValueAdd({key, newValue}) {
-+    let {data, keyPath, nextDeep: deep} = this.state,
-+      {beforeAddAction, logger: logger4} = this.props;
-+    beforeAddAction(key, keyPath, deep, newValue)
-+      .then(() => {
-+        (data[key] = newValue),
-+          this.setState({data}),
-+          this.handleAddValueCancel();
-+        let {onUpdate, onDeltaUpdate} = this.props;
-+        onUpdate(keyPath[keyPath.length - 1], data),
-+          onDeltaUpdate({type: ADD_DELTA_TYPE, keyPath, deep, key, newValue});
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleRemoveValue(key) {
-+    return () => {
-+      let {beforeRemoveAction, logger: logger4} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeRemoveAction(key, keyPath, deep, oldValue)
-+        .then(() => {
-+          let deltaUpdateResult = {
-+            keyPath,
-+            deep,
-+            key,
-+            oldValue,
-+            type: REMOVE_DELTA_TYPE,
-+          };
-+          delete data[key], this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate(deltaUpdateResult);
-+        })
-+        .catch(logger4.error);
-+    };
-+  }
-+  handleCollapseMode() {
-+    this.setState((state) => ({collapsed: !state.collapsed}));
-+  }
-+  handleEditValue({key, value: value2}) {
-+    return new Promise((resolve, reject) => {
-+      let {beforeUpdateAction} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeUpdateAction(key, keyPath, deep, oldValue, value2)
-+        .then(() => {
-+          (data[key] = value2), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate({
-+              type: UPDATE_DELTA_TYPE,
-+              keyPath,
-+              deep,
-+              key,
-+              newValue: value2,
-+              oldValue,
-+            }),
-+            resolve();
-+        })
-+        .catch(reject);
-+    });
-+  }
-+  renderCollapsed() {
-+    let {name, keyPath, deep, data} = this.state,
-+      {handleRemove, readOnly, dataType, getStyle, minusMenuElement} =
-+        this.props,
-+      {minus, collapsed} = getStyle(name, data, keyPath, deep, dataType),
-+      keyList = Object.getOwnPropertyNames(data),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      removeItemButton = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return import_react18.default.createElement(
-+      'span',
-+      {className: 'rejt-collapsed'},
-+      import_react18.default.createElement(
-+        'span',
-+        {
-+          className: 'rejt-collapsed-text',
-+          style: collapsed,
-+          onClick: this.handleCollapseMode,
-+        },
-+        '{...}',
-+        ' ',
-+        keyList.length,
-+        ' ',
-+        keyList.length === 1 ? 'key' : 'keys'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  renderNotCollapsed() {
-+    let {name, data, keyPath, deep, nextDeep, addFormVisible} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        dataType,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      {minus, plus, addForm, ul, delimiter} = getStyle(
-+        name,
-+        data,
-+        keyPath,
-+        deep,
-+        dataType
-+      ),
-+      keyList = Object.getOwnPropertyNames(data),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      addItemButton = (0, import_react18.cloneElement)(plusMenuElement, {
-+        onClick: this.handleAddMode,
-+        className: 'rejt-plus-menu',
-+        style: plus,
-+      }),
-+      removeItemButton = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      }),
-+      list = keyList.map((key) =>
-+        import_react18.default.createElement(JsonNode, {
-+          key,
-+          name: key,
-+          data: data[key],
-+          keyPath,
-+          deep: nextDeep,
-+          isCollapsed,
-+          handleRemove: this.handleRemoveValue(key),
-+          handleUpdateValue: this.handleEditValue,
-+          onUpdate: this.onChildUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        })
-+      );
-+    return import_react18.default.createElement(
-+      'span',
-+      {className: 'rejt-not-collapsed'},
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '{'
-+      ),
-+      !isReadOnly && addItemButton,
-+      import_react18.default.createElement(
-+        'ul',
-+        {className: 'rejt-not-collapsed-list', style: ul},
-+        list
-+      ),
-+      !isReadOnly &&
-+        addFormVisible &&
-+        import_react18.default.createElement(
-+          'div',
-+          {className: 'rejt-add-form', style: addForm},
-+          import_react18.default.createElement(JsonAddValue, {
-+            handleAdd: this.handleAddValueAdd,
-+            handleCancel: this.handleAddValueCancel,
-+            addButtonElement,
-+            cancelButtonElement,
-+            inputElementGenerator,
-+            keyPath,
-+            deep,
-+            onSubmitValueParser,
-+          })
-+        ),
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '}'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  render() {
-+    let {name, collapsed, data, keyPath, deep} = this.state,
-+      {getStyle, dataType} = this.props,
-+      value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed(),
-+      style = getStyle(name, data, keyPath, deep, dataType);
-+    return import_react18.default.createElement(
-+      'div',
-+      {className: 'rejt-object-node'},
-+      import_react18.default.createElement(
-+        'span',
-+        {onClick: this.handleCollapseMode},
-+        import_react18.default.createElement(
-+          'span',
-+          {className: 'rejt-name', style: style.name},
-+          name,
-+          ' :',
-+          ' '
-+        )
-+      ),
-+      value2
-+    );
-+  }
-+};
-+JsonObject.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  minusMenuElement: import_react18.default.createElement('span', null, ' - '),
-+  plusMenuElement: import_react18.default.createElement('span', null, ' + '),
-+};
-+var JsonValue = class extends import_react18.Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      value: props.value,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      editEnabled: !1,
-+      inputRef: null,
-+    }),
-+      (this.handleEditMode = this.handleEditMode.bind(this)),
-+      (this.refInput = this.refInput.bind(this)),
-+      (this.handleCancelEdit = this.handleCancelEdit.bind(this)),
-+      (this.handleEdit = this.handleEdit.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.value !== state.value ? {value: props.value} : null;
-+  }
-+  componentDidUpdate() {
-+    let {
-+        editEnabled,
-+        inputRef,
-+        name,
-+        value: value2,
-+        keyPath,
-+        deep,
-+      } = this.state,
-+      {readOnly, dataType} = this.props,
-+      isReadOnly = readOnly(name, value2, keyPath, deep, dataType);
-+    editEnabled &&
-+      !isReadOnly &&
-+      typeof inputRef.focus == 'function' &&
-+      inputRef.focus();
-+  }
-+  componentDidMount() {
-+    document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.handleEdit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.handleCancelEdit()));
-+  }
-+  handleEdit() {
-+    let {
-+        handleUpdateValue,
-+        originalValue,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        keyPath,
-+      } = this.props,
-+      {inputRef, name, deep} = this.state;
-+    if (!inputRef) return;
-+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value);
-+    handleUpdateValue({value: newValue, key: name})
-+      .then(() => {
-+        isComponentWillChange(originalValue, newValue) ||
-+          this.handleCancelEdit();
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleEditMode() {
-+    this.setState({editEnabled: !0});
-+  }
-+  refInput(node) {
-+    this.state.inputRef = node;
-+  }
-+  handleCancelEdit() {
-+    this.setState({editEnabled: !1});
-+  }
-+  render() {
-+    let {name, value: value2, editEnabled, keyPath, deep} = this.state,
-+      {
-+        handleRemove,
-+        originalValue,
-+        readOnly,
-+        dataType,
-+        getStyle,
-+        editButtonElement,
-+        cancelButtonElement,
-+        inputElementGenerator,
-+        minusMenuElement,
-+        keyPath: comeFromKeyPath,
-+      } = this.props,
-+      style = getStyle(name, originalValue, keyPath, deep, dataType),
-+      isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType),
-+      isEditing = editEnabled && !isReadOnly,
-+      inputElement = inputElementGenerator(
-+        VALUE,
-+        comeFromKeyPath,
-+        deep,
-+        name,
-+        originalValue,
-+        dataType
-+      ),
-+      editButtonElementLayout = (0, import_react18.cloneElement)(
-+        editButtonElement,
-+        {onClick: this.handleEdit}
-+      ),
-+      cancelButtonElementLayout = (0, import_react18.cloneElement)(
-+        cancelButtonElement,
-+        {onClick: this.handleCancelEdit}
-+      ),
-+      inputElementLayout = (0, import_react18.cloneElement)(inputElement, {
-+        ref: this.refInput,
-+        defaultValue: JSON.stringify(originalValue),
-+      }),
-+      minusMenuLayout = (0, import_react18.cloneElement)(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: style.minus,
-+      });
-+    return import_react18.default.createElement(
-+      'li',
-+      {className: 'rejt-value-node', style: style.li},
-+      import_react18.default.createElement(
-+        'span',
-+        {className: 'rejt-name', style: style.name},
-+        name,
-+        ' : '
-+      ),
-+      isEditing
-+        ? import_react18.default.createElement(
-+            'span',
-+            {className: 'rejt-edit-form', style: style.editForm},
-+            inputElementLayout,
-+            ' ',
-+            cancelButtonElementLayout,
-+            editButtonElementLayout
-+          )
-+        : import_react18.default.createElement(
-+            'span',
-+            {
-+              className: 'rejt-value',
-+              style: style.value,
-+              onClick: isReadOnly ? null : this.handleEditMode,
-+            },
-+            String(value2)
-+          ),
-+      !isReadOnly && !isEditing && minusMenuLayout
-+    );
-+  }
-+};
-+JsonValue.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  handleUpdateValue: () => Promise.resolve(),
-+  editButtonElement: import_react18.default.createElement('button', null, 'e'),
-+  cancelButtonElement: import_react18.default.createElement(
-+    'button',
-+    null,
-+    'c'
-+  ),
-+  minusMenuElement: import_react18.default.createElement('span', null, ' - '),
-+};
-+var object = {
-+    minus: {color: 'red'},
-+    plus: {color: 'green'},
-+    collapsed: {color: 'grey'},
-+    delimiter: {},
-+    ul: {padding: '0px', margin: '0 0 0 25px', listStyle: 'none'},
-+    name: {color: '#2287CD'},
-+    addForm: {},
-+  },
-+  array = {
-+    minus: {color: 'red'},
-+    plus: {color: 'green'},
-+    collapsed: {color: 'grey'},
-+    delimiter: {},
-+    ul: {padding: '0px', margin: '0 0 0 25px', listStyle: 'none'},
-+    name: {color: '#2287CD'},
-+    addForm: {},
-+  },
-+  value = {
-+    minus: {color: 'red'},
-+    editForm: {},
-+    value: {color: '#7bba3d'},
-+    li: {minHeight: '22px', lineHeight: '22px', outline: '0px'},
-+    name: {color: '#2287CD'},
-+  };
-+function parse3(string) {
-+  let result = string;
-+  if (result.indexOf('function') === 0) return (0, eval)(`(${result})`);
-+  try {
-+    result = JSON.parse(string);
-+  } catch {}
-+  return result;
-+}
-+var JsonTree = class extends import_react19.Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {data: props.data, rootName: props.rootName}),
-+      (this.onUpdate = this.onUpdate.bind(this)),
-+      (this.removeRoot = this.removeRoot.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data || props.rootName !== state.rootName
-+      ? {data: props.data, rootName: props.rootName}
-+      : null;
-+  }
-+  onUpdate(key, data) {
-+    this.setState({data}), this.props.onFullyUpdate(data);
-+  }
-+  removeRoot() {
-+    this.onUpdate(null, null);
-+  }
-+  render() {
-+    let {data, rootName} = this.state,
-+      {
-+        isCollapsed,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElement,
-+        textareaElement,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        fallback = null,
-+      } = this.props,
-+      dataType = getObjectType(data),
-+      readOnlyFunction = readOnly;
-+    rootName = rootName.slice(rootName.indexOf('-') + 1);
-+    getObjectType(readOnly) === 'Boolean' &&
-+      (readOnlyFunction = () => readOnly);
-+    let inputElementFunction = inputElement;
-+    inputElement &&
-+      getObjectType(inputElement) !== 'Function' &&
-+      (inputElementFunction = () => inputElement);
-+    let textareaElementFunction = textareaElement;
-+    return (
-+      textareaElement &&
-+        getObjectType(textareaElement) !== 'Function' &&
-+        (textareaElementFunction = () => textareaElement),
-+      dataType === 'Object' || dataType === 'Array'
-+        ? import_react19.default.createElement(
-+            'div',
-+            {className: 'rejt-tree'},
-+            import_react19.default.createElement(JsonNode, {
-+              data,
-+              name: rootName,
-+              deep: -1,
-+              isCollapsed,
-+              onUpdate: this.onUpdate,
-+              onDeltaUpdate,
-+              readOnly: readOnlyFunction,
-+              getStyle,
-+              addButtonElement,
-+              cancelButtonElement,
-+              editButtonElement,
-+              inputElementGenerator: inputElementFunction,
-+              textareaElementGenerator: textareaElementFunction,
-+              minusMenuElement,
-+              plusMenuElement,
-+              handleRemove: this.removeRoot,
-+              beforeRemoveAction,
-+              beforeAddAction,
-+              beforeUpdateAction,
-+              logger: logger4,
-+              onSubmitValueParser,
-+            })
-+          )
-+        : fallback
-+    );
-+  }
-+};
-+JsonTree.defaultProps = {
-+  rootName: 'root',
-+  isCollapsed: (keyPath, deep) => deep !== -1,
-+  getStyle: (keyName, data, keyPath, deep, dataType) => {
-+    switch (dataType) {
-+      case 'Object':
-+      case 'Error':
-+        return object;
-+      case 'Array':
-+        return array;
-+      default:
-+        return value;
-+    }
-+  },
-+  readOnly: () => !1,
-+  onFullyUpdate: () => {},
-+  onDeltaUpdate: () => {},
-+  beforeRemoveAction: () => Promise.resolve(),
-+  beforeAddAction: () => Promise.resolve(),
-+  beforeUpdateAction: () => Promise.resolve(),
-+  logger: {error: () => {}},
-+  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) =>
-+    parse3(rawValue),
-+  inputElement: () => import_react19.default.createElement('input', null),
-+  textareaElement: () => import_react19.default.createElement('textarea', null),
-+  fallback: null,
-+};
-+init_helpers();
-+var {window: globalWindow2} = import_global4.global,
-+  Wrapper6 = import_theming14.styled.div(({theme}) => ({
-+    position: 'relative',
-+    display: 'flex',
-+    '&[aria-readonly="true"]': {opacity: 0.5},
-+    '.rejt-tree': {marginLeft: '1rem', fontSize: '13px'},
-+    '.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':
-+      {'& > svg': {opacity: 0, transition: 'opacity 0.2s'}},
-+    '.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':
-+      {'& > svg': {opacity: 1}},
-+    '.rejt-edit-form button': {display: 'none'},
-+    '.rejt-add-form': {marginLeft: 10},
-+    '.rejt-add-value-node': {display: 'inline-flex', alignItems: 'center'},
-+    '.rejt-name': {lineHeight: '22px'},
-+    '.rejt-not-collapsed-delimiter': {lineHeight: '22px'},
-+    '.rejt-plus-menu': {marginLeft: 5},
-+    '.rejt-object-node > span > *, .rejt-array-node > span > *': {
-+      position: 'relative',
-+      zIndex: 2,
-+    },
-+    '.rejt-object-node, .rejt-array-node': {position: 'relative'},
-+    '.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':
-+      {
-+        content: '""',
-+        position: 'absolute',
-+        top: 0,
-+        display: 'block',
-+        width: '100%',
-+        marginLeft: '-1rem',
-+        padding: '0 4px 0 1rem',
-+        height: 22,
-+      },
-+    '.rejt-collapsed::before, .rejt-not-collapsed::before': {
-+      zIndex: 1,
-+      background: 'transparent',
-+      borderRadius: 4,
-+      transition: 'background 0.2s',
-+      pointerEvents: 'none',
-+      opacity: 0.1,
-+    },
-+    '.rejt-object-node:hover, .rejt-array-node:hover': {
-+      '& > .rejt-collapsed::before, & > .rejt-not-collapsed::before': {
-+        background: theme.color.secondary,
-+      },
-+    },
-+    '.rejt-collapsed::after, .rejt-not-collapsed::after': {
-+      content: '""',
-+      position: 'absolute',
-+      display: 'inline-block',
-+      pointerEvents: 'none',
-+      width: 0,
-+      height: 0,
-+    },
-+    '.rejt-collapsed::after': {
-+      left: -8,
-+      top: 8,
-+      borderTop: '3px solid transparent',
-+      borderBottom: '3px solid transparent',
-+      borderLeft: '3px solid rgba(153,153,153,0.6)',
-+    },
-+    '.rejt-not-collapsed::after': {
-+      left: -10,
-+      top: 10,
-+      borderTop: '3px solid rgba(153,153,153,0.6)',
-+      borderLeft: '3px solid transparent',
-+      borderRight: '3px solid transparent',
-+    },
-+    '.rejt-value': {
-+      display: 'inline-block',
-+      border: '1px solid transparent',
-+      borderRadius: 4,
-+      margin: '1px 0',
-+      padding: '0 4px',
-+      cursor: 'text',
-+      color: theme.color.defaultText,
-+    },
-+    '.rejt-value-node:hover > .rejt-value': {
-+      background: theme.color.lighter,
-+      borderColor: theme.appBorderColor,
-+    },
-+  })),
-+  ButtonInline = import_theming14.styled.button(({theme, primary}) => ({
-+    border: 0,
-+    height: 20,
-+    margin: 1,
-+    borderRadius: 4,
-+    background: primary ? theme.color.secondary : 'transparent',
-+    color: primary ? theme.color.lightest : theme.color.dark,
-+    fontWeight: primary ? 'bold' : 'normal',
-+    cursor: 'pointer',
-+    order: primary ? 'initial' : 9,
-+  })),
-+  ActionAddIcon = (0, import_theming14.styled)(import_icons4.AddIcon)(
-+    ({theme, disabled}) => ({
-+      display: 'inline-block',
-+      verticalAlign: 'middle',
-+      width: 15,
-+      height: 15,
-+      padding: 3,
-+      marginLeft: 5,
-+      cursor: disabled ? 'not-allowed' : 'pointer',
-+      color: theme.textMutedColor,
-+      '&:hover': disabled ? {} : {color: theme.color.ancillary},
-+      'svg + &': {marginLeft: 0},
-+    })
-+  ),
-+  ActionSubstractIcon = (0, import_theming14.styled)(
-+    import_icons4.SubtractIcon
-+  )(({theme, disabled}) => ({
-+    display: 'inline-block',
-+    verticalAlign: 'middle',
-+    width: 15,
-+    height: 15,
-+    padding: 3,
-+    marginLeft: 5,
-+    cursor: disabled ? 'not-allowed' : 'pointer',
-+    color: theme.textMutedColor,
-+    '&:hover': disabled ? {} : {color: theme.color.negative},
-+    'svg + &': {marginLeft: 0},
-+  })),
-+  Input = import_theming14.styled.input(({theme, placeholder}) => ({
-+    outline: 0,
-+    margin: placeholder ? 1 : '1px 0',
-+    padding: '3px 4px',
-+    color: theme.color.defaultText,
-+    background: theme.background.app,
-+    border: `1px solid ${theme.appBorderColor}`,
-+    borderRadius: 4,
-+    lineHeight: '14px',
-+    width: placeholder === 'Key' ? 80 : 120,
-+    '&:focus': {border: `1px solid ${theme.color.secondary}`},
-+  })),
-+  RawButton = (0, import_theming14.styled)(import_components12.IconButton)(
-+    ({theme}) => ({
-+      position: 'absolute',
-+      zIndex: 2,
-+      top: 2,
-+      right: 2,
-+      height: 21,
-+      padding: '0 3px',
-+      background: theme.background.bar,
-+      border: `1px solid ${theme.appBorderColor}`,
-+      borderRadius: 3,
-+      color: theme.textMutedColor,
-+      fontSize: '9px',
-+      fontWeight: 'bold',
-+      textDecoration: 'none',
-+      span: {marginLeft: 3, marginTop: 1},
-+    })
-+  ),
-+  RawInput = (0, import_theming14.styled)(import_components12.Form.Textarea)(
-+    ({theme}) => ({
-+      flex: 1,
-+      padding: '7px 6px',
-+      fontFamily: theme.typography.fonts.mono,
-+      fontSize: '12px',
-+      lineHeight: '18px',
-+      '&::placeholder': {
-+        fontFamily: theme.typography.fonts.base,
-+        fontSize: '13px',
-+      },
-+      '&:placeholder-shown': {padding: '7px 10px'},
-+    })
-+  ),
-+  ENTER_EVENT = {
-+    bubbles: !0,
-+    cancelable: !0,
-+    key: 'Enter',
-+    code: 'Enter',
-+    keyCode: 13,
-+  },
-+  dispatchEnterKey = (event) => {
-+    event.currentTarget.dispatchEvent(
-+      new globalWindow2.KeyboardEvent('keydown', ENTER_EVENT)
-+    );
-+  },
-+  selectValue = (event) => {
-+    event.currentTarget.select();
-+  },
-+  getCustomStyleFunction = (theme) => () => ({
-+    name: {color: theme.color.secondary},
-+    collapsed: {color: theme.color.dark},
-+    ul: {listStyle: 'none', margin: '0 0 0 1rem', padding: 0},
-+    li: {outline: 0},
-+  }),
-+  ObjectControl = ({name, value: value2, onChange, argType}) => {
-+    let theme = (0, import_theming14.useTheme)(),
-+      data = (0, import_react20.useMemo)(
-+        () => value2 && (0, import_cloneDeep.default)(value2),
-+        [value2]
-+      ),
-+      hasData = data != null,
-+      [showRaw, setShowRaw] = (0, import_react20.useState)(false),
-+      [parseError, setParseError] = (0, import_react20.useState)(null),
-+      readonly = !!argType?.table?.readonly,
-+      updateRaw = (0, import_react20.useCallback)(
-+        (raw) => {
-+          try {
-+            raw && onChange(JSON.parse(raw)), setParseError(void 0);
-+          } catch (e) {
-+            setParseError(e);
-+          }
-+        },
-+        [onChange]
-+      ),
-+      [forceVisible, setForceVisible] = (0, import_react20.useState)(!1),
-+      onForceVisible = (0, import_react20.useCallback)(() => {
-+        onChange({}), setForceVisible(!0);
-+      }, [setForceVisible]),
-+      htmlElRef = (0, import_react20.useRef)(null);
-+    if (
-+      ((0, import_react20.useEffect)(() => {
-+        forceVisible && htmlElRef.current && htmlElRef.current.select();
-+      }, [forceVisible]),
-+      !hasData)
-+    )
-+      return import_react20.default.createElement(
-+        import_components12.Button,
-+        {
-+          disabled: readonly,
-+          id: getControlSetterButtonId(name),
-+          onClick: onForceVisible,
-+        },
-+        'Set object'
-+      );
-+    let rawJSONForm = import_react20.default.createElement(RawInput, {
-+        ref: htmlElRef,
-+        id: getControlId(name),
-+        name,
-+        defaultValue: value2 === null ? '' : JSON.stringify(value2, null, 2),
-+        onBlur: (event) => updateRaw(event.target.value),
-+        placeholder: 'Edit JSON string...',
-+        autoFocus: forceVisible,
-+        valid: parseError ? 'error' : null,
-+        readOnly: readonly,
-+      }),
-+      isObjectOrArray =
-+        Array.isArray(value2) ||
-+        (typeof value2 == 'object' && value2?.constructor === Object);
-+    return import_react20.default.createElement(
-+      Wrapper6,
-+      {'aria-readonly': readonly},
-+      isObjectOrArray &&
-+        import_react20.default.createElement(
-+          RawButton,
-+          {
-+            onClick: (e) => {
-+              e.preventDefault(), setShowRaw((v) => !v);
-+            },
-+          },
-+          showRaw
-+            ? import_react20.default.createElement(
-+                import_icons4.EyeCloseIcon,
-+                null
-+              )
-+            : import_react20.default.createElement(import_icons4.EyeIcon, null),
-+          import_react20.default.createElement('span', null, 'RAW')
-+        ),
-+      showRaw
-+        ? rawJSONForm
-+        : import_react20.default.createElement(JsonTree, {
-+            readOnly: readonly || !isObjectOrArray,
-+            isCollapsed: isObjectOrArray ? void 0 : () => !0,
-+            data,
-+            rootName: name,
-+            onFullyUpdate: onChange,
-+            getStyle: getCustomStyleFunction(theme),
-+            cancelButtonElement: import_react20.default.createElement(
-+              ButtonInline,
-+              {type: 'button'},
-+              'Cancel'
-+            ),
-+            editButtonElement: import_react20.default.createElement(
-+              ButtonInline,
-+              {type: 'submit'},
-+              'Save'
-+            ),
-+            addButtonElement: import_react20.default.createElement(
-+              ButtonInline,
-+              {type: 'submit', primary: !0},
-+              'Save'
-+            ),
-+            plusMenuElement: import_react20.default.createElement(
-+              ActionAddIcon,
-+              null
-+            ),
-+            minusMenuElement: import_react20.default.createElement(
-+              ActionSubstractIcon,
-+              null
-+            ),
-+            inputElement: (_, __, ___, key) =>
-+              key
-+                ? import_react20.default.createElement(Input, {
-+                    onFocus: selectValue,
-+                    onBlur: dispatchEnterKey,
-+                  })
-+                : import_react20.default.createElement(Input, null),
-+            fallback: rawJSONForm,
-+          })
-+    );
-+  };
-+var import_react21 = __toESM(require('react')),
-+  import_theming15 = require('@storybook/theming'),
-+  import_polished5 = require('polished');
-+init_helpers();
-+var RangeInput = import_theming15.styled.input(
-+    ({theme, min, max, value: value2, disabled}) => ({
-+      '&': {width: '100%', backgroundColor: 'transparent', appearance: 'none'},
-+      '&::-webkit-slider-runnable-track': {
-+        background:
-+          theme.base === 'light'
-+            ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} 100%)`
-+            : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.02, theme.input.background)} 100%)`,
-+        boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-+        borderRadius: 6,
-+        width: '100%',
-+        height: 6,
-+        cursor: disabled ? 'not-allowed' : 'pointer',
-+      },
-+      '&::-webkit-slider-thumb': {
-+        marginTop: '-6px',
-+        width: 16,
-+        height: 16,
-+        border: `1px solid ${(0, import_polished5.rgba)(theme.appBorderColor, 0.2)}`,
-+        borderRadius: '50px',
-+        boxShadow: `0 1px 3px 0px ${(0, import_polished5.rgba)(theme.appBorderColor, 0.2)}`,
-+        cursor: disabled ? 'not-allowed' : 'grab',
-+        appearance: 'none',
-+        background: `${theme.input.background}`,
-+        transition: 'all 150ms ease-out',
-+        '&:hover': {
-+          background: `${(0, import_polished5.darken)(0.05, theme.input.background)}`,
-+          transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-+          transition: 'all 50ms ease-out',
-+        },
-+        '&:active': {
-+          background: `${theme.input.background}`,
-+          transform: 'scale3d(1, 1, 1) translateY(0px)',
-+          cursor: disabled ? 'not-allowed' : 'grab',
-+        },
-+      },
-+      '&:focus': {
-+        outline: 'none',
-+        '&::-webkit-slider-runnable-track': {
-+          borderColor: (0, import_polished5.rgba)(theme.color.secondary, 0.4),
-+        },
-+        '&::-webkit-slider-thumb': {
-+          borderColor: theme.color.secondary,
-+          boxShadow: `0 0px 5px 0px ${theme.color.secondary}`,
-+        },
-+      },
-+      '&::-moz-range-track': {
-+        background:
-+          theme.base === 'light'
-+            ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} 100%)`
-+            : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.02, theme.input.background)} 100%)`,
-+        boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-+        borderRadius: 6,
-+        width: '100%',
-+        height: 6,
-+        cursor: disabled ? 'not-allowed' : 'pointer',
-+        outline: 'none',
-+      },
-+      '&::-moz-range-thumb': {
-+        width: 16,
-+        height: 16,
-+        border: `1px solid ${(0, import_polished5.rgba)(theme.appBorderColor, 0.2)}`,
-+        borderRadius: '50px',
-+        boxShadow: `0 1px 3px 0px ${(0, import_polished5.rgba)(theme.appBorderColor, 0.2)}`,
-+        cursor: disabled ? 'not-allowed' : 'grap',
-+        background: `${theme.input.background}`,
-+        transition: 'all 150ms ease-out',
-+        '&:hover': {
-+          background: `${(0, import_polished5.darken)(0.05, theme.input.background)}`,
-+          transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-+          transition: 'all 50ms ease-out',
-+        },
-+        '&:active': {
-+          background: `${theme.input.background}`,
-+          transform: 'scale3d(1, 1, 1) translateY(0px)',
-+          cursor: 'grabbing',
-+        },
-+      },
-+      '&::-ms-track': {
-+        background:
-+          theme.base === 'light'
-+            ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.darken)(0.02, theme.input.background)} 100%)`
-+            : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${(0, import_polished5.lighten)(0.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, 0.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',
-+    '[aria-readonly=true] &': {opacity: 0.5},
-+  }),
-+  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,
-+  argType,
-+}) => {
-+  let handleChange = (event) => {
-+      onChange(parse2(event.target.value));
-+    },
-+    hasValue = value2 !== void 0,
-+    numberOFDecimalsPlaces = (0, import_react21.useMemo)(
-+      () => getNumberOfDecimalPlaces(step),
-+      [step]
-+    ),
-+    readonly = !!argType?.table?.readonly;
-+  return import_react21.default.createElement(
-+    RangeWrapper,
-+    {'aria-readonly': readonly},
-+    import_react21.default.createElement(RangeLabel, null, min),
-+    import_react21.default.createElement(RangeInput, {
-+      id: getControlId(name),
-+      type: 'range',
-+      disabled: readonly,
-+      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_components13 = require('@storybook/components');
-+init_helpers();
-+var Wrapper7 = 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,
-+    argType,
-+  }) => {
-+    let handleChange = (event) => {
-+        onChange(event.target.value);
-+      },
-+      readonly = !!argType?.table?.readonly,
-+      [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_components13.Button,
-+        {
-+          variant: 'outline',
-+          size: 'medium',
-+          disabled: readonly,
-+          id: getControlSetterButtonId(name),
-+          onClick: onForceVisible,
-+        },
-+        'Set string'
-+      );
-+    let isValid = typeof value2 == 'string';
-+    return import_react22.default.createElement(
-+      Wrapper7,
-+      null,
-+      import_react22.default.createElement(import_components13.Form.Textarea, {
-+        id: getControlId(name),
-+        maxLength,
-+        onChange: handleChange,
-+        disabled: readonly,
-+        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?.length === maxLength},
-+          value2?.length ?? 0,
-+          ' / ',
-+          maxLength
-+        )
-+    );
-+  };
-+var import_react23 = __toESM(require('react')),
-+  import_theming17 = require('@storybook/theming'),
-+  import_components14 = require('@storybook/components');
-+init_helpers();
-+var FileInput = (0, import_theming17.styled)(import_components14.Form.Input)({
-+  padding: 10,
-+});
-+function revokeOldUrls(urls) {
-+  urls.forEach((url) => {
-+    url.startsWith('blob:') && URL.revokeObjectURL(url);
-+  });
-+}
-+var FilesControl = ({
-+  onChange,
-+  name,
-+  accept = 'image/*',
-+  value: value2,
-+  argType,
-+}) => {
-+  let inputElement = (0, import_react23.useRef)(null),
-+    readonly = argType?.control?.readOnly;
-+  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,
-+      disabled: readonly,
-+      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, isHovered}) => {
-+    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) {
-+      let canBeSetup =
-+        control?.disable !== !0 && row?.type?.name !== 'function';
-+      return isHovered && canBeSetup
-+        ? import_react26.default.createElement(
-+            import_components16.Link,
-+            {
-+              href: 'https://storybook.js.org/docs/react/essentials/controls',
-+              target: '_blank',
-+              withArrow: !0,
-+            },
-+            'Setup controls'
-+          )
-+        : 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)(0.1, theme.color.defaultText)
-+        : (0, import_polished6.transparentize)(0.2, theme.color.defaultText),
-+    marginTop: hasDescription ? 4 : 0,
-+  })),
-+  TypeWithJsDoc = import_theming19.styled.div(({theme, hasDescription}) => ({
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished6.transparentize)(0.1, theme.color.defaultText)
-+        : (0, import_polished6.transparentize)(0.2, theme.color.defaultText),
-+    marginTop: hasDescription ? 12 : 0,
-+    marginBottom: 12,
-+  })),
-+  StyledTd = import_theming19.styled.td(({theme, expandable}) => ({
-+    paddingLeft: expandable ? '40px !important' : '20px !important',
-+  })),
-+  toSummary = (value2) =>
-+    value2 && {summary: typeof value2 == 'string' ? value2 : value2.name},
-+  ArgRow = (props) => {
-+    let [isHovered, setIsHovered] = (0, import_react27.useState)(!1),
-+      {row, updateArgs, compact, expandable, initialExpandedArgs} = props,
-+      {name, 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 import_react27.default.createElement(
-+      'tr',
-+      {
-+        onMouseEnter: () => setIsHovered(!0),
-+        onMouseLeave: () => setIsHovered(!1),
-+      },
-+      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,
-+              isHovered,
-+            })
-+          )
-+        : null
-+    );
-+  };
-+var import_react28 = __toESM(require('react')),
-+  import_polished7 = require('polished'),
-+  import_theming20 = require('@storybook/theming'),
-+  import_icons6 = require('@storybook/icons'),
-+  ExpanderIconDown = (0, import_theming20.styled)(
-+    import_icons6.ChevronDownIcon
-+  )(({theme}) => ({
-+    marginRight: 8,
-+    marginLeft: -10,
-+    marginTop: -2,
-+    height: 12,
-+    width: 12,
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished7.transparentize)(0.25, theme.color.defaultText)
-+        : (0, import_polished7.transparentize)(0.3, theme.color.defaultText),
-+    border: 'none',
-+    display: 'inline-block',
-+  })),
-+  ExpanderIconRight = (0, import_theming20.styled)(
-+    import_icons6.ChevronRightIcon
-+  )(({theme}) => ({
-+    marginRight: 8,
-+    marginLeft: -10,
-+    marginTop: -2,
-+    height: 12,
-+    width: 12,
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished7.transparentize)(0.25, theme.color.defaultText)
-+        : (0, import_polished7.transparentize)(0.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)(0.4, theme.color.defaultText)
-+        : (0, import_polished7.transparentize)(0.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)(0.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?.length || 0,
-+      caption =
-+        level === 'subsection'
-+          ? `${itemCount} item${itemCount !== 1 ? 's' : ''}`
-+          : '',
-+      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,
-+            expanded
-+              ? import_react28.default.createElement(ExpanderIconDown, null)
-+              : import_react28.default.createElement(ExpanderIconRight, null),
-+            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 import_theming21 = require('@storybook/theming'),
-+  import_react29 = __toESM(require('react')),
-+  Row = import_theming21.styled.div(({theme}) => ({
-+    display: 'flex',
-+    gap: 16,
-+    borderBottom: `1px solid ${theme.appBorderColor}`,
-+    '&:last-child': {borderBottom: 0},
-+  })),
-+  Column = import_theming21.styled.div(({numColumn}) => ({
-+    display: 'flex',
-+    flexDirection: 'column',
-+    flex: numColumn || 1,
-+    gap: 5,
-+    padding: '12px 20px',
-+  })),
-+  SkeletonText = import_theming21.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 = () =>
-+    import_react29.default.createElement(
-+      import_react29.default.Fragment,
-+      null,
-+      import_react29.default.createElement(
-+        Row,
-+        null,
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          import_react29.default.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      import_react29.default.createElement(
-+        Row,
-+        null,
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          import_react29.default.createElement(SkeletonText, {width: '80%'}),
-+          import_react29.default.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      import_react29.default.createElement(
-+        Row,
-+        null,
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          import_react29.default.createElement(SkeletonText, {width: '80%'}),
-+          import_react29.default.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      import_react29.default.createElement(
-+        Row,
-+        null,
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          import_react29.default.createElement(SkeletonText, {width: '80%'}),
-+          import_react29.default.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        import_react29.default.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          import_react29.default.createElement(SkeletonText, {width: '60%'})
-+        )
-+      )
-+    );
-+var import_react30 = __toESM(require('react')),
-+  import_theming22 = require('@storybook/theming'),
-+  import_components18 = require('@storybook/components'),
-+  import_icons7 = require('@storybook/icons'),
-+  Wrapper9 = import_theming22.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 = import_theming22.styled.div(({theme}) => ({
-+    display: 'flex',
-+    fontSize: theme.typography.size.s2 - 1,
-+    gap: 25,
-+  })),
-+  Divider = import_theming22.styled.div(({theme}) => ({
-+    width: 1,
-+    height: 16,
-+    backgroundColor: theme.appBorderColor,
-+  })),
-+  Empty = ({inAddonPanel}) => {
-+    let [isLoading, setIsLoading] = (0, import_react30.useState)(!0);
-+    return (
-+      (0, import_react30.useEffect)(() => {
-+        let load = setTimeout(() => {
-+          setIsLoading(!1);
-+        }, 100);
-+        return () => clearTimeout(load);
-+      }, []),
-+      isLoading
-+        ? null
-+        : import_react30.default.createElement(
-+            Wrapper9,
-+            {inAddonPanel},
-+            import_react30.default.createElement(
-+              import_components18.EmptyTabContent,
-+              {
-+                title: inAddonPanel
-+                  ? 'Interactive story playground'
-+                  : "Args table with interactive controls couldn't be auto-generated",
-+                description: import_react30.default.createElement(
-+                  import_react30.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: import_react30.default.createElement(
-+                  Links,
-+                  null,
-+                  inAddonPanel &&
-+                    import_react30.default.createElement(
-+                      import_react30.default.Fragment,
-+                      null,
-+                      import_react30.default.createElement(
-+                        import_components18.Link,
-+                        {
-+                          href: 'https://youtu.be/0gOfS6K0x0E',
-+                          target: '_blank',
-+                          withArrow: !0,
-+                        },
-+                        import_react30.default.createElement(
-+                          import_icons7.VideoIcon,
-+                          null
-+                        ),
-+                        ' Watch 5m video'
-+                      ),
-+                      import_react30.default.createElement(Divider, null),
-+                      import_react30.default.createElement(
-+                        import_components18.Link,
-+                        {
-+                          href: 'https://storybook.js.org/docs/essentials/controls',
-+                          target: '_blank',
-+                          withArrow: !0,
-+                        },
-+                        import_react30.default.createElement(
-+                          import_icons7.DocumentIcon,
-+                          null
-+                        ),
-+                        ' Read docs'
-+                      )
-+                    ),
-+                  !inAddonPanel &&
-+                    import_react30.default.createElement(
-+                      import_components18.Link,
-+                      {
-+                        href: 'https://storybook.js.org/docs/essentials/controls',
-+                        target: '_blank',
-+                        withArrow: !0,
-+                      },
-+                      import_react30.default.createElement(
-+                        import_icons7.DocumentIcon,
-+                        null
-+                      ),
-+                      ' Learn how to set that up'
-+                    )
-+                ),
-+              }
-+            )
-+          )
-+    );
-+  };
-+var TableWrapper = import_theming23.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)(
-+                  0.25,
-+                  theme.color.defaultText
-+                )
-+              : (0, import_polished8.transparentize)(
-+                  0.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 = (0, import_theming23.styled)(
-+    import_components19.IconButton
-+  )(({theme}) => ({margin: '-4px -12px -4px 0'})),
-+  ControlHeadingWrapper = import_theming23.styled.span({
-+    display: 'flex',
-+    justifyContent: 'space-between',
-+  });
-+var sortFns = {
-+    alpha: (a, b) => a.name.localeCompare(b.name),
-+    requiredFirst: (a, b) =>
-+      +!!b.type?.required - +!!a.type?.required || a.name.localeCompare(b.name),
-+    none: void 0,
-+  },
-+  groupRows = (rows, sort) => {
-+    let sections = {ungrouped: [], ungroupedSubsections: {}, sections: {}};
-+    if (!rows) return sections;
-+    Object.entries(rows).forEach(([key, row]) => {
-+      let {category, subcategory} = row?.table || {};
-+      if (category) {
-+        let section = sections.sections[category] || {
-+          ungrouped: [],
-+          subsections: {},
-+        };
-+        if (!subcategory) section.ungrouped.push({key, ...row});
-+        else {
-+          let subsection = section.subsections[subcategory] || [];
-+          subsection.push({key, ...row}),
-+            (section.subsections[subcategory] = subsection);
-+        }
-+        sections.sections[category] = section;
-+      } else if (subcategory) {
-+        let subsection = sections.ungroupedSubsections[subcategory] || [];
-+        subsection.push({key, ...row}),
-+          (sections.ungroupedSubsections[subcategory] = subsection);
-+      } else sections.ungrouped.push({key, ...row});
-+    });
-+    let sortFn = sortFns[sort],
-+      sortSubsection = (record) =>
-+        sortFn
-+          ? Object.keys(record).reduce(
-+              (acc, cur) => ({...acc, [cur]: record[cur].sort(sortFn)}),
-+              {}
-+            )
-+          : record;
-+    return {
-+      ungrouped: sections.ungrouped.sort(sortFn),
-+      ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
-+      sections: Object.keys(sections.sections).reduce(
-+        (acc, cur) => ({
-+          ...acc,
-+          [cur]: {
-+            ungrouped: sections.sections[cur].ungrouped.sort(sortFn),
-+            subsections: sortSubsection(sections.sections[cur].subsections),
-+          },
-+        }),
-+        {}
-+      ),
-+    };
-+  },
-+  safeIncludeConditionalArg = (row, args, globals) => {
-+    try {
-+      return (0, import_csf.includeConditionalArg)(row, args, globals);
-+    } catch (err) {
-+      return import_client_logger4.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 import_react31.default.createElement(
-+        EmptyBlock,
-+        null,
-+        error,
-+        '\xA0',
-+        import_react31.default.createElement(
-+          import_components19.Link,
-+          {
-+            href: 'http://storybook.js.org/docs/',
-+            target: '_blank',
-+            withArrow: !0,
-+          },
-+          import_react31.default.createElement(
-+            import_icons8.DocumentIcon,
-+            null
-+          ),
-+          ' Read the docs'
-+        )
-+      );
-+    }
-+    if (isLoading) return import_react31.default.createElement(Skeleton, null);
-+    let {rows, args, globals} = 'rows' in props && props,
-+      groups = groupRows(
-+        (0, import_pickBy.default)(
-+          rows,
-+          (row) =>
-+            !row?.table?.disable &&
-+            safeIncludeConditionalArg(row, args || {}, 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 import_react31.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 import_react31.default.createElement(
-+      import_components19.ResetWrapper,
-+      null,
-+      import_react31.default.createElement(
-+        TableWrapper,
-+        {compact, inAddonPanel, className: 'docblock-argstable sb-unstyled'},
-+        import_react31.default.createElement(
-+          'thead',
-+          {className: 'docblock-argstable-head'},
-+          import_react31.default.createElement(
-+            'tr',
-+            null,
-+            import_react31.default.createElement(
-+              'th',
-+              null,
-+              import_react31.default.createElement('span', null, 'Name')
-+            ),
-+            compact
-+              ? null
-+              : import_react31.default.createElement(
-+                  'th',
-+                  null,
-+                  import_react31.default.createElement(
-+                    'span',
-+                    null,
-+                    'Description'
-+                  )
-+                ),
-+            compact
-+              ? null
-+              : import_react31.default.createElement(
-+                  'th',
-+                  null,
-+                  import_react31.default.createElement('span', null, 'Default')
-+                ),
-+            updateArgs
-+              ? import_react31.default.createElement(
-+                  'th',
-+                  null,
-+                  import_react31.default.createElement(
-+                    ControlHeadingWrapper,
-+                    null,
-+                    'Control',
-+                    ' ',
-+                    !isLoading &&
-+                      resetArgs &&
-+                      import_react31.default.createElement(
-+                        StyledIconButton,
-+                        {onClick: () => resetArgs(), title: 'Reset controls'},
-+                        import_react31.default.createElement(
-+                          import_icons8.UndoIcon,
-+                          {'aria-hidden': !0}
-+                        )
-+                      )
-+                  )
-+                )
-+              : null
-+          )
-+        ),
-+        import_react31.default.createElement(
-+          'tbody',
-+          {className: 'docblock-argstable-body'},
-+          groups.ungrouped.map((row) =>
-+            import_react31.default.createElement(ArgRow, {
-+              key: row.key,
-+              row,
-+              arg: args && args[row.key],
-+              ...common,
-+            })
-+          ),
-+          Object.entries(groups.ungroupedSubsections).map(
-+            ([subcategory, subsection]) =>
-+              import_react31.default.createElement(
-+                SectionRow,
-+                {
-+                  key: subcategory,
-+                  label: subcategory,
-+                  level: 'subsection',
-+                  colSpan,
-+                },
-+                subsection.map((row) =>
-+                  import_react31.default.createElement(ArgRow, {
-+                    key: row.key,
-+                    row,
-+                    arg: args && args[row.key],
-+                    expandable,
-+                    ...common,
-+                  })
-+                )
-+              )
-+          ),
-+          Object.entries(groups.sections).map(([category, section]) =>
-+            import_react31.default.createElement(
-+              SectionRow,
-+              {key: category, label: category, level: 'section', colSpan},
-+              section.ungrouped.map((row) =>
-+                import_react31.default.createElement(ArgRow, {
-+                  key: row.key,
-+                  row,
-+                  arg: args && args[row.key],
-+                  ...common,
-+                })
-+              ),
-+              Object.entries(section.subsections).map(
-+                ([subcategory, subsection]) =>
-+                  import_react31.default.createElement(
-+                    SectionRow,
-+                    {
-+                      key: subcategory,
-+                      label: subcategory,
-+                      level: 'subsection',
-+                      colSpan,
-+                    },
-+                    subsection.map((row) =>
-+                      import_react31.default.createElement(ArgRow, {
-+                        key: row.key,
-+                        row,
-+                        arg: args && args[row.key],
-+                        expandable,
-+                        ...common,
-+                      })
-+                    )
-+                  )
-+              )
-+            )
-+          )
-+        )
-+      )
-+    );
-+  };
-+var import_react32 = __toESM(require('react')),
-+  import_components20 = require('@storybook/components');
-+var TabbedArgsTable = ({tabs, ...props}) => {
-+  let entries = Object.entries(tabs);
-+  return entries.length === 1
-+    ? import_react32.default.createElement(ArgsTable, {
-+        ...entries[0][1],
-+        ...props,
-+      })
-+    : import_react32.default.createElement(
-+        import_components20.TabsState,
-+        null,
-+        entries.map((entry, index) => {
-+          let [label, table] = entry,
-+            id2 = `prop_table_div_${label}`,
-+            Component4 = 'div',
-+            argsTableProps = index === 0 ? props : {sort: props.sort};
-+          return import_react32.default.createElement(
-+            Component4,
-+            {key: id2, id: id2, title: label},
-+            ({active}) =>
-+              active
-+                ? import_react32.default.createElement(ArgsTable, {
-+                    key: `prop_table_${label}`,
-+                    ...table,
-+                    ...argsTableProps,
-+                  })
-+                : null
-+          );
-+        })
-+      );
-+};
-+var import_react33 = __toESM(require('react')),
-+  import_polished9 = require('polished'),
-+  import_theming24 = require('@storybook/theming'),
-+  import_components21 = require('@storybook/components');
-+var Label4 = import_theming24.styled.div(({theme}) => ({
-+    marginRight: 30,
-+    fontSize: `${theme.typography.size.s1}px`,
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished9.transparentize)(0.4, theme.color.defaultText)
-+        : (0, import_polished9.transparentize)(0.6, theme.color.defaultText),
-+  })),
-+  Sample = import_theming24.styled.div({
-+    overflow: 'hidden',
-+    whiteSpace: 'nowrap',
-+    textOverflow: 'ellipsis',
-+  }),
-+  TypeSpecimen = import_theming24.styled.div({
-+    display: 'flex',
-+    flexDirection: 'row',
-+    alignItems: 'baseline',
-+    '&:not(:last-child)': {marginBottom: '1rem'},
-+  }),
-+  Wrapper10 = import_theming24.styled.div(
-+    import_components21.withReset,
-+    ({theme}) => ({
-+      ...getBlockBackgroundStyle(theme),
-+      margin: '25px 0 40px',
-+      padding: '30px 20px',
-+    })
-+  ),
-+  Typeset = ({fontFamily, fontSizes, fontWeight, sampleText, ...props}) =>
-+    import_react33.default.createElement(
-+      Wrapper10,
-+      {...props, className: 'docblock-typeset sb-unstyled'},
-+      fontSizes.map((size) =>
-+        import_react33.default.createElement(
-+          TypeSpecimen,
-+          {key: size},
-+          import_react33.default.createElement(Label4, null, size),
-+          import_react33.default.createElement(
-+            Sample,
-+            {style: {fontFamily, fontSize: size, fontWeight, lineHeight: 1.2}},
-+            sampleText || 'Was he a beast if music could move him so?'
-+          )
-+        )
-+      )
-+    );
-+var import_react34 = __toESM(require('react')),
-+  import_polished10 = require('polished'),
-+  import_theming25 = require('@storybook/theming'),
-+  import_components22 = require('@storybook/components');
-+var ItemTitle = import_theming25.styled.div(({theme}) => ({
-+    fontWeight: theme.typography.weight.bold,
-+    color: theme.color.defaultText,
-+  })),
-+  ItemSubtitle = import_theming25.styled.div(({theme}) => ({
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished10.transparentize)(0.2, theme.color.defaultText)
-+        : (0, import_polished10.transparentize)(0.6, theme.color.defaultText),
-+  })),
-+  ItemDescription = import_theming25.styled.div({
-+    flex: '0 0 30%',
-+    lineHeight: '20px',
-+    marginTop: 5,
-+  }),
-+  SwatchLabel = import_theming25.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)(0.4, theme.color.defaultText)
-+        : (0, import_polished10.transparentize)(0.6, theme.color.defaultText),
-+    '> div': {
-+      display: 'inline-block',
-+      overflow: 'hidden',
-+      maxWidth: '100%',
-+      textOverflow: 'ellipsis',
-+    },
-+    span: {display: 'block', marginTop: 2},
-+  })),
-+  SwatchLabels = import_theming25.styled.div({
-+    display: 'flex',
-+    flexDirection: 'row',
-+  }),
-+  Swatch2 = import_theming25.styled.div(({background}) => ({
-+    position: 'relative',
-+    flex: 1,
-+    '&::before': {
-+      position: 'absolute',
-+      top: 0,
-+      left: 0,
-+      width: '100%',
-+      height: '100%',
-+      background,
-+      content: '""',
-+    },
-+  })),
-+  SwatchColors = import_theming25.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_theming25.styled.div({
-+    display: 'flex',
-+    flexDirection: 'column',
-+    flex: 1,
-+    position: 'relative',
-+    marginBottom: 30,
-+  }),
-+  Swatches2 = import_theming25.styled.div({
-+    flex: 1,
-+    display: 'flex',
-+    flexDirection: 'row',
-+  }),
-+  Item = import_theming25.styled.div({
-+    display: 'flex',
-+    alignItems: 'flex-start',
-+  }),
-+  ListName = import_theming25.styled.div({flex: '0 0 30%'}),
-+  ListSwatches = import_theming25.styled.div({flex: 1}),
-+  ListHeading = import_theming25.styled.div(({theme}) => ({
-+    display: 'flex',
-+    flexDirection: 'row',
-+    alignItems: 'center',
-+    paddingBottom: 20,
-+    fontWeight: theme.typography.weight.bold,
-+    color:
-+      theme.base === 'light'
-+        ? (0, import_polished10.transparentize)(0.4, theme.color.defaultText)
-+        : (0, import_polished10.transparentize)(0.6, theme.color.defaultText),
-+  })),
-+  List = import_theming25.styled.div(({theme}) => ({
-+    fontSize: theme.typography.size.s2,
-+    lineHeight: '20px',
-+    display: 'flex',
-+    flexDirection: 'column',
-+  }));
-+function renderSwatch(color, index) {
-+  return import_react34.default.createElement(Swatch2, {
-+    key: `${color}-${index}`,
-+    title: color,
-+    background: color,
-+  });
-+}
-+function renderSwatchLabel(color, index, colorDescription) {
-+  return import_react34.default.createElement(
-+    SwatchLabel,
-+    {key: `${color}-${index}`, title: color},
-+    import_react34.default.createElement(
-+      'div',
-+      null,
-+      color,
-+      colorDescription &&
-+        import_react34.default.createElement('span', null, colorDescription)
-+    )
-+  );
-+}
-+function renderSwatchSpecimen(colors) {
-+  if (Array.isArray(colors))
-+    return import_react34.default.createElement(
-+      SwatchSpecimen,
-+      null,
-+      import_react34.default.createElement(
-+        SwatchColors,
-+        null,
-+        colors.map((color, index) => renderSwatch(color, index))
-+      ),
-+      import_react34.default.createElement(
-+        SwatchLabels,
-+        null,
-+        colors.map((color, index) => renderSwatchLabel(color, index))
-+      )
-+    );
-+  let swatchElements = [],
-+    labelElements = [];
-+  for (let colorKey in colors) {
-+    let colorValue = colors[colorKey];
-+    swatchElements.push(renderSwatch(colorValue, swatchElements.length)),
-+      labelElements.push(
-+        renderSwatchLabel(colorKey, labelElements.length, colorValue)
-+      );
-+  }
-+  return import_react34.default.createElement(
-+    SwatchSpecimen,
-+    null,
-+    import_react34.default.createElement(SwatchColors, null, swatchElements),
-+    import_react34.default.createElement(SwatchLabels, null, labelElements)
-+  );
-+}
-+var ColorItem = ({title, subtitle, colors}) =>
-+    import_react34.default.createElement(
-+      Item,
-+      null,
-+      import_react34.default.createElement(
-+        ItemDescription,
-+        null,
-+        import_react34.default.createElement(ItemTitle, null, title),
-+        import_react34.default.createElement(ItemSubtitle, null, subtitle)
-+      ),
-+      import_react34.default.createElement(
-+        Swatches2,
-+        null,
-+        renderSwatchSpecimen(colors)
-+      )
-+    ),
-+  ColorPalette = ({children, ...props}) =>
-+    import_react34.default.createElement(
-+      import_components22.ResetWrapper,
-+      null,
-+      import_react34.default.createElement(
-+        List,
-+        {...props, className: 'docblock-colorpalette sb-unstyled'},
-+        import_react34.default.createElement(
-+          ListHeading,
-+          null,
-+          import_react34.default.createElement(ListName, null, 'Name'),
-+          import_react34.default.createElement(ListSwatches, null, 'Swatches')
-+        ),
-+        children
-+      )
-+    );
-+var import_react35 = __toESM(require('react')),
-+  import_theming26 = require('@storybook/theming'),
-+  import_components23 = require('@storybook/components');
-+var ItemLabel = import_theming26.styled.div(({theme}) => ({
-+    fontFamily: theme.typography.fonts.base,
-+    fontSize: theme.typography.size.s2,
-+    color: theme.color.defaultText,
-+    marginLeft: 10,
-+    lineHeight: 1.2,
-+  })),
-+  ItemSpecimen = import_theming26.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_theming26.styled.div({
-+    display: 'inline-flex',
-+    flexDirection: 'row',
-+    alignItems: 'center',
-+    flex: '0 1 calc(20% - 10px)',
-+    minWidth: 120,
-+    margin: '0px 10px 30px 0',
-+  }),
-+  List2 = import_theming26.styled.div({display: 'flex', flexFlow: 'row wrap'}),
-+  IconItem = ({name, children}) =>
-+    import_react35.default.createElement(
-+      Item2,
-+      null,
-+      import_react35.default.createElement(ItemSpecimen, null, children),
-+      import_react35.default.createElement(ItemLabel, null, name)
-+    ),
-+  IconGallery = ({children, ...props}) =>
-+    import_react35.default.createElement(
-+      import_components23.ResetWrapper,
-+      null,
-+      import_react35.default.createElement(
-+        List2,
-+        {...props, className: 'docblock-icongallery sb-unstyled'},
-+        children
-+      )
-+    );
-+var import_react36 = __toESM(require('react')),
-+  anchorBlockIdFromId = (storyId) => `anchor--${storyId}`,
-+  Anchor = ({storyId, children}) =>
-+    import_react36.default.createElement(
-+      'div',
-+      {id: anchorBlockIdFromId(storyId), className: 'sb-anchor'},
-+      children
-+    );
-+var import_preview_api = require('@storybook/preview-api'),
-+  import_react39 = __toESM(require('react'));
-+var import_react38 = require('react');
-+var import_react37 = require('react'),
-+  import_global5 = require('@storybook/global');
-+import_global5.global &&
-+  import_global5.global.__DOCS_CONTEXT__ === void 0 &&
-+  ((import_global5.global.__DOCS_CONTEXT__ = (0, import_react37.createContext)(
-+    null
-+  )),
-+  (import_global5.global.__DOCS_CONTEXT__.displayName = 'DocsContext'));
-+var DocsContext = import_global5.global
-+  ? import_global5.global.__DOCS_CONTEXT__
-+  : (0, import_react37.createContext)(null);
-+var useOf = (moduleExportOrType, validTypes) =>
-+  (0, import_react38.useContext)(DocsContext).resolveOf(
-+    moduleExportOrType,
-+    validTypes
-+  );
-+var titleCase = (str) =>
-+    str
-+      .split('-')
-+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-+      .join(''),
-+  getComponentName = (component) => {
-+    if (component)
-+      return typeof component == 'string'
-+        ? component.includes('-')
-+          ? titleCase(component)
-+          : component
-+        : component.__docgenInfo && component.__docgenInfo.displayName
-+          ? component.__docgenInfo.displayName
-+          : component.name;
-+  };
-+function scrollToElement(element, block = 'start') {
-+  element.scrollIntoView({behavior: 'smooth', block, inline: 'nearest'});
-+}
-+function 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) {
-+  if (resolved.type === 'component') {
-+    let {
-+      component: component2,
-+      projectAnnotations: {parameters: parameters2},
-+    } = resolved;
-+    return {
-+      argTypes: extractComponentArgTypes(component2, parameters2),
-+      parameters: parameters2,
-+      component: component2,
-+    };
-+  }
-+  if (resolved.type === 'meta') {
-+    let {
-+      preparedMeta: {
-+        argTypes: argTypes2,
-+        parameters: parameters2,
-+        component: component2,
-+        subcomponents: subcomponents2,
-+      },
-+    } = resolved;
-+    return {
-+      argTypes: argTypes2,
-+      parameters: parameters2,
-+      component: component2,
-+      subcomponents: subcomponents2,
-+    };
-+  }
-+  let {
-+    story: {argTypes, parameters, component, subcomponents},
-+  } = resolved;
-+  return {argTypes, parameters, component, subcomponents};
-+}
-+var ArgTypes = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let resolved = useOf(of || 'meta'),
-+    {argTypes, parameters, component, subcomponents} =
-+      getArgTypesFromResolved(resolved),
-+    argTypesParameters = parameters.docs?.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
-+    );
-+  if (!(!!subcomponents && Object.keys(subcomponents).length > 0))
-+    return import_react39.default.createElement(ArgsTable, {
-+      rows: filteredArgTypes,
-+      sort,
-+    });
-+  let mainComponentName = getComponentName(component),
-+    subcomponentTabs = Object.fromEntries(
-+      Object.entries(subcomponents).map(([key, comp]) => [
-+        key,
-+        {
-+          rows: (0, import_preview_api.filterArgTypes)(
-+            extractComponentArgTypes(comp, parameters),
-+            include,
-+            exclude
-+          ),
-+          sort,
-+        },
-+      ])
-+    ),
-+    tabs = {
-+      [mainComponentName]: {rows: filteredArgTypes, sort},
-+      ...subcomponentTabs,
-+    };
-+  return import_react39.default.createElement(TabbedArgsTable, {tabs, sort});
-+};
-+var import_react44 = __toESM(require('react'));
-+var import_react40 = __toESM(require('react')),
-+  import_docs_tools = require('@storybook/docs-tools'),
-+  import_telejson = require('telejson');
-+function argsHash(args) {
-+  return (0, import_telejson.stringify)(args, {allowFunction: !1});
-+}
-+var SourceContext = (0, import_react40.createContext)({sources: {}}),
-+  UNKNOWN_ARGS_HASH = '--unknown--',
-+  SourceContainer = ({children, channel}) => {
-+    let [sources, setSources] = (0, import_react40.useState)({});
-+    return (
-+      (0, import_react40.useEffect)(() => {
-+        let handleSnippetRendered = (
-+          idOrEvent,
-+          inputSource = null,
-+          inputFormat = !1
-+        ) => {
-+          let {
-+              id: id2,
-+              args = void 0,
-+              source,
-+              format: format2,
-+            } = typeof idOrEvent == 'string'
-+              ? {id: idOrEvent, source: inputSource, format: inputFormat}
-+              : idOrEvent,
-+            hash = args ? argsHash(args) : UNKNOWN_ARGS_HASH;
-+          setSources((current) => ({
-+            ...current,
-+            [id2]: {...current[id2], [hash]: {code: source, format: format2}},
-+          }));
-+        };
-+        return (
-+          channel.on(import_docs_tools.SNIPPET_RENDERED, handleSnippetRendered),
-+          () =>
-+            channel.off(
-+              import_docs_tools.SNIPPET_RENDERED,
-+              handleSnippetRendered
-+            )
-+        );
-+      }, []),
-+      import_react40.default.createElement(
-+        SourceContext.Provider,
-+        {value: {sources}},
-+        children
-+      )
-+    );
-+  };
-+var import_react41 = __toESM(require('react')),
-+  import_docs_tools2 = require('@storybook/docs-tools');
-+var getStorySource = (storyId, args, sourceContext) => {
-+    let {sources} = sourceContext,
-+      sourceMap = sources?.[storyId];
-+    return (
-+      sourceMap?.[argsHash(args)] ||
-+      sourceMap?.[UNKNOWN_ARGS_HASH] || {code: ''}
-+    );
-+  },
-+  getSnippet = ({snippet, storyContext, typeFromProps, transformFromProps}) => {
-+    let {__isArgsStory: isArgsStory} = storyContext.parameters,
-+      sourceParameters = storyContext.parameters.docs?.source || {},
-+      type =
-+        typeFromProps ||
-+        sourceParameters.type ||
-+        import_docs_tools2.SourceType.AUTO;
-+    if (sourceParameters.code !== void 0) return sourceParameters.code;
-+    let code =
-+      type === import_docs_tools2.SourceType.DYNAMIC ||
-+      (type === import_docs_tools2.SourceType.AUTO && snippet && isArgsStory)
-+        ? snippet
-+        : sourceParameters.originalSource || '';
-+    return (
-+      (transformFromProps ?? sourceParameters.transform)?.(
-+        code,
-+        storyContext
-+      ) || code
-+    );
-+  },
-+  useSourceProps = (props, docsContext, sourceContext) => {
-+    let story,
-+      {of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    if (of) story = docsContext.resolveOf(of, ['story']).story;
-+    else
-+      try {
-+        story = docsContext.storyById();
-+      } catch {}
-+    let sourceParameters = story?.parameters?.docs?.source || {},
-+      {code} = props,
-+      format2 = props.format ?? sourceParameters.format,
-+      language = props.language ?? sourceParameters.language ?? 'jsx',
-+      dark = props.dark ?? sourceParameters.dark ?? !1;
-+    if (!code && !story) return {error: 'Oh no! The source is not available.'};
-+    if (code) return {code, format: format2, language, dark};
-+    let storyContext = docsContext.getStoryContext(story),
-+      argsForSource = props.__forceInitialArgs
-+        ? storyContext.initialArgs
-+        : storyContext.unmappedArgs,
-+      source = getStorySource(story.id, argsForSource, sourceContext);
-+    return (
-+      (format2 = source.format ?? story.parameters.docs?.source?.format ?? !1),
-+      {
-+        code: getSnippet({
-+          snippet: source.code,
-+          storyContext: {...storyContext, args: argsForSource},
-+          typeFromProps: props.type,
-+          transformFromProps: props.transform,
-+        }),
-+        format: format2,
-+        language,
-+        dark,
-+      }
-+    );
-+  },
-+  Source2 = (props) => {
-+    let sourceContext = (0, import_react41.useContext)(SourceContext),
-+      docsContext = (0, import_react41.useContext)(DocsContext),
-+      sourceProps = useSourceProps(props, docsContext, sourceContext);
-+    return import_react41.default.createElement(Source, {...sourceProps});
-+  };
-+var import_react43 = __toESM(require('react'));
-+var import_react42 = require('react');
-+function useStory(storyId, context) {
-+  let stories = useStories([storyId], context);
-+  return stories && stories[0];
-+}
-+function useStories(storyIds, context) {
-+  let [storiesById, setStories] = (0, import_react42.useState)({});
-+  return (
-+    (0, import_react42.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 getStoryId2 = (props, context) => {
-+    let {of, meta} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    return (
-+      meta && context.referenceMeta(meta, !1),
-+      context.resolveOf(of || 'story', ['story']).story.id
-+    );
-+  },
-+  getStoryProps = (props, story, context) => {
-+    let {parameters = {}} = story || {},
-+      {docs = {}} = parameters,
-+      storyParameters = docs.story || {};
-+    if (docs.disable) return null;
-+    if (props.inline ?? storyParameters.inline ?? !1) {
-+      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 ??
-+      '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 Canvas = (props) => {
-+  let docsContext = (0, import_react44.useContext)(DocsContext),
-+    sourceContext = (0, import_react44.useContext)(SourceContext),
-+    {of, source} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let {story} = useOf(of || 'story', ['story']),
-+    sourceProps = useSourceProps(
-+      {...source, ...(of && {of})},
-+      docsContext,
-+      sourceContext
-+    ),
-+    layout =
-+      props.layout ??
-+      story.parameters.layout ??
-+      story.parameters.docs?.canvas?.layout ??
-+      'padded',
-+    withToolbar =
-+      props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? !1,
-+    additionalActions =
-+      props.additionalActions ??
-+      story.parameters.docs?.canvas?.additionalActions,
-+    sourceState =
-+      props.sourceState ??
-+      story.parameters.docs?.canvas?.sourceState ??
-+      'hidden',
-+    className = props.className ?? story.parameters.docs?.canvas?.className;
-+  return 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_api2 = require('@storybook/preview-api');
-+var import_react45 = require('react'),
-+  import_core_events = require('@storybook/core-events'),
-+  useGlobals = (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_events.GLOBALS_UPDATED,
-+            onGlobalsUpdated
-+          ),
-+          () =>
-+            context.channel.off(
-+              import_core_events.GLOBALS_UPDATED,
-+              onGlobalsUpdated
-+            )
-+        );
-+      }, [context.channel]),
-+      [globals]
-+    );
-+  };
-+var import_react46 = require('react'),
-+  import_core_events2 = require('@storybook/core-events'),
-+  useArgs = (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_events2.STORY_ARGS_UPDATED,
-+          onArgsUpdated
-+        ),
-+        () =>
-+          context.channel.off(
-+            import_core_events2.STORY_ARGS_UPDATED,
-+            onArgsUpdated
-+          )
-+      );
-+    }, [storyId, context.channel]);
-+    let updateArgs = (0, import_react46.useCallback)(
-+        (updatedArgs) =>
-+          context.channel.emit(import_core_events2.UPDATE_STORY_ARGS, {
-+            storyId,
-+            updatedArgs,
-+          }),
-+        [storyId, context.channel]
-+      ),
-+      resetArgs = (0, import_react46.useCallback)(
-+        (argNames) =>
-+          context.channel.emit(import_core_events2.RESET_STORY_ARGS, {
-+            storyId,
-+            argNames,
-+          }),
-+        [storyId, context.channel]
-+      );
-+    return story && [args, updateArgs, resetArgs];
-+  };
-+function extractComponentArgTypes2(component, parameters) {
-+  let {extractArgTypes} = parameters.docs || {};
-+  if (!extractArgTypes)
-+    throw new Error(
-+      'Args unsupported. See Args documentation for your framework.'
-+    );
-+  return extractArgTypes(component);
-+}
-+var Controls3 = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let context = (0, import_react47.useContext)(DocsContext),
-+    {story} = context.resolveOf(of || 'story', ['story']),
-+    {parameters, argTypes, component, subcomponents} = story,
-+    controlsParameters = parameters.docs?.controls || {},
-+    include = props.include ?? controlsParameters.include,
-+    exclude = props.exclude ?? controlsParameters.exclude,
-+    sort = props.sort ?? controlsParameters.sort,
-+    [args, updateArgs, resetArgs] = useArgs(story, context),
-+    [globals] = useGlobals(story, context),
-+    filteredArgTypes = (0, import_preview_api2.filterArgTypes)(
-+      argTypes,
-+      include,
-+      exclude
-+    );
-+  if (!(!!subcomponents && Object.keys(subcomponents).length > 0))
-+    return Object.keys(filteredArgTypes).length > 0 ||
-+      Object.keys(args).length > 0
-+      ? import_react47.default.createElement(ArgsTable, {
-+          rows: filteredArgTypes,
-+          sort,
-+          args,
-+          globals,
-+          updateArgs,
-+          resetArgs,
-+        })
-+      : null;
-+  let mainComponentName = getComponentName(component),
-+    subcomponentTabs = Object.fromEntries(
-+      Object.entries(subcomponents).map(([key, comp]) => [
-+        key,
-+        {
-+          rows: (0, import_preview_api2.filterArgTypes)(
-+            extractComponentArgTypes2(comp, parameters),
-+            include,
-+            exclude
-+          ),
-+          sort,
-+        },
-+      ])
-+    ),
-+    tabs = {
-+      [mainComponentName]: {rows: filteredArgTypes, sort},
-+      ...subcomponentTabs,
-+    };
-+  return import_react47.default.createElement(TabbedArgsTable, {
-+    tabs,
-+    sort,
-+    args,
-+    globals,
-+    updateArgs,
-+    resetArgs,
-+  });
-+};
-+var import_react50 = __toESM(require('react'));
-+var import_react49 = __toESM(require('react')),
-+  import_markdown_to_jsx2 = __toESM(require('markdown-to-jsx')),
-+  import_ts_dedent = __toESM(require('ts-dedent'));
-+var import_react48 = __toESM(require('react')),
-+  import_core_events3 = require('@storybook/core-events'),
-+  import_components28 = require('@storybook/components'),
-+  import_global6 = require('@storybook/global'),
-+  import_theming27 = require('@storybook/theming'),
-+  import_icons9 = require('@storybook/icons');
-+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_components28.Code,
-+        null,
-+        children
-+      );
-+    let language = className && className.split('-');
-+    return import_react48.default.createElement(Source, {
-+      language: (language && language[1]) || 'text',
-+      format: !1,
-+      code: children,
-+      ...rest,
-+    });
-+  };
-+function navigate(context, url) {
-+  context.channel.emit(import_core_events3.NAVIGATE_URL, url);
-+}
-+var A = import_components28.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);
-+    return !href || target === '_blank' || /^https?:\/\//.test(href)
-+      ? import_react48.default.createElement(A, {...props})
-+      : href.startsWith('#')
-+        ? import_react48.default.createElement(
-+            AnchorInPage,
-+            {hash: href},
-+            children
-+          )
-+        : 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
-+          );
-+  },
-+  SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-+  OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
-+    (acc, headerType) => ({
-+      ...acc,
-+      [headerType]: (0, import_theming27.styled)(headerType)({
-+        '& svg': {position: 'relative', top: '-0.1em', visibility: 'hidden'},
-+        '&:hover svg': {visibility: 'visible'},
-+      }),
-+    }),
-+    {}
-+  ),
-+  OcticonAnchor = import_theming27.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_icons9.LinkIcon, null)
-+      ),
-+      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_components28.nameSpaceClassNames)(withoutAs, as),
-+    });
-+  },
-+  HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(
-+    (acc, headerType) => ({
-+      ...acc,
-+      [headerType]: (props) =>
-+        import_react48.default.createElement(HeaderMdx, {
-+          as: headerType,
-+          ...props,
-+        }),
-+    }),
-+    {}
-+  );
-+var Markdown2 = (props) => {
-+  if (!props.children) return null;
-+  if (typeof props.children != 'string')
-+    throw new Error(import_ts_dedent.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
-         This is often caused by not wrapping the child in a template string.
-         
-         This is invalid:
-@@ -32,4 +6393,680 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
-           A paragraph
-         \`}
-         </Markdown>
--      `);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},DescriptionContainer=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolvedOf=useOf(of||"meta"),markdown=getDescriptionFromResolvedOf(resolvedOf);return markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react61=__toESM(require("react"));var import_react52=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react51=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper11=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content=import_theming28.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"}})),Heading=import_theming28.styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?import_react51.default.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>((0,import_react51.useEffect)(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".docs-story *, .skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return()=>{clearTimeout(timeout),tocbot.destroy()}},[disable]),import_react51.default.createElement(import_react51.default.Fragment,null,import_react51.default.createElement(Wrapper11,null,disable?null:import_react51.default.createElement(Content,null,import_react51.default.createElement(OptionalTitle,{title:title||null}),import_react51.default.createElement("div",{className:"toc-wrapper"})))));var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc}return(0,import_react52.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_react52.default.createElement(DocsContext.Provider,{value:context},import_react52.default.createElement(SourceContainer,{channel:context.channel},import_react52.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(theme)},import_react52.default.createElement(DocsPageWrapper,{toc:toc?import_react52.default.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var import_react60=__toESM(require("react"));var import_react53=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups?.[groups?.length-1]||title},Title2=props=>{let{children,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let preparedMeta;try{preparedMeta=useOf(of||"meta",["meta"]).preparedMeta}catch(error){if(children&&!error.message.includes("did you forget to use <Meta of={} />?"))throw error}let content=children||extractTitle(preparedMeta?.title);return content?import_react53.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var import_react54=__toESM(require("react")),import_client_logger5=require("@storybook/client-logger");var DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle",Subtitle2=props=>{let{of,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let preparedMeta;try{preparedMeta=useOf(of||"meta",["meta"]).preparedMeta}catch(error){if(children&&!error.message.includes("did you forget to use <Meta of={} />?"))throw error}let{componentSubtitle,docs}=preparedMeta?.parameters||{};componentSubtitle&&(0,import_client_logger5.deprecate)(`Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let content=children||docs?.subtitle||componentSubtitle;return content?import_react54.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var import_react57=__toESM(require("react"));var import_react56=__toESM(require("react"));var import_react55=__toESM(require("react")),import_components33=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react55.default.createElement(import_components33.H3,null,children);let tagID=globalThis.encodeURIComponent(children.toLowerCase());return import_react55.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{let{story}=useOf(of||"story",["story"]),withToolbar=story.parameters.docs?.canvas?.withToolbar??withToolbarProp;return import_react56.default.createElement(Anchor,{storyId:story.id},expanded&&import_react56.default.createElement(import_react56.default.Fragment,null,import_react56.default.createElement(Subheading,null,story.name),import_react56.default.createElement(DescriptionContainer,{of})),import_react56.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{csfFile}=useOf(of||"meta",["meta"]),primaryStory=(0,import_react57.useContext)(DocsContext).componentStoriesFromCSFFile(csfFile)[0];return primaryStory?import_react57.default.createElement(DocsStory,{of:primaryStory.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react59=__toESM(require("react")),import_theming30=require("@storybook/theming");var import_react58=__toESM(require("react")),import_components34=require("@storybook/components");var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react58.default.createElement(import_components34.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react58.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming30.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"}})),Stories=({title="Stories",includePrimary=!0})=>{let{componentStories,projectAnnotations,getStoryContext}=(0,import_react59.useContext)(DocsContext),stories=componentStories(),{stories:{filter}={filter:void 0}}=projectAnnotations.parameters?.docs||{};return filter&&(stories=stories.filter(story=>filter(story,getStoryContext(story)))),stories.some(story=>story.tags?.includes("autodocs"))&&(stories=stories.filter(story=>story.tags?.includes("autodocs"))),includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react59.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react60.default.createElement(import_react60.default.Fragment,null,import_react60.default.createElement(Title2,null),import_react60.default.createElement(Subtitle2,null),import_react60.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react60.default.createElement(DescriptionContainer,{of:"story"}):null,import_react60.default.createElement(Primary,null),import_react60.default.createElement(Controls3,null),isSingleStory?null:import_react60.default.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react61.default.createElement(Container,{context,theme:docsParameter.theme},import_react61.default.createElement(Page,null))}var import_react62=__toESM(require("react")),import_preview_api5=require("@storybook/preview-api");var import_preview_api4=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api3=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api3.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_api4.Preview{constructor(projectAnnotations){super(path=>Promise.resolve(this.moduleExportsByImportPath[path]),()=>(0,import_preview_api4.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations]),new import_channels.Channel({}));this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:5,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.storyStoreValue.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.storyStoreValue,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this))}async getStoryIndexFromServer(){return this.storyIndex}};function usePreview(projectAnnotations){let previewRef=(0,import_react62.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotationsList,children}){let projectAnnotations=(0,import_preview_api5.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...projectAnnotations.parameters?.docs,page:()=>children};return import_react62.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})}var import_react63=__toESM(require("react")),import_theming31=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react63.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react63.default.createElement(import_theming31.ThemeProvider,{theme:(0,import_theming31.ensure)(import_theming31.themes.light)},children)));var import_react64=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react64.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react64.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react65=__toESM(require("react")),Unstyled=props=>import_react65.default.createElement("div",{...props,className:"sb-unstyled"});var import_react66=__toESM(require("react")),Wrapper12=({children})=>import_react66.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);var PRIMARY_STORY="^";0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,Stories,Story,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractTitle,format,formatDate,formatTime,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps});
-+      `);
-+  return import_react49.default.createElement(import_markdown_to_jsx2.default, {
-+    ...props,
-+    options: {
-+      forceBlock: !0,
-+      overrides: {
-+        code: CodeOrSourceMdx,
-+        a: AnchorMdx,
-+        ...HeadersMdx,
-+        ...props?.options?.overrides,
-+      },
-+      ...props?.options,
-+    },
-+  });
-+};
-+var DescriptionType = ((DescriptionType2) => (
-+    (DescriptionType2.INFO = 'info'),
-+    (DescriptionType2.NOTES = 'notes'),
-+    (DescriptionType2.DOCGEN = 'docgen'),
-+    (DescriptionType2.AUTO = 'auto'),
-+    DescriptionType2
-+  ))(DescriptionType || {}),
-+  getDescriptionFromResolvedOf = (resolvedOf) => {
-+    switch (resolvedOf.type) {
-+      case 'story':
-+        return resolvedOf.story.parameters.docs?.description?.story || null;
-+      case 'meta': {
-+        let {parameters, component} = resolvedOf.preparedMeta,
-+          metaDescription = parameters.docs?.description?.component;
-+        return (
-+          metaDescription ||
-+          parameters.docs?.extractComponentDescription?.(component, {
-+            component,
-+            parameters,
-+          }) ||
-+          null
-+        );
-+      }
-+      case 'component': {
-+        let {
-+          component,
-+          projectAnnotations: {parameters},
-+        } = resolvedOf;
-+        return (
-+          parameters.docs?.extractComponentDescription?.(component, {
-+            component,
-+            parameters,
-+          }) || null
-+        );
-+      }
-+      default:
-+        throw new Error(
-+          `Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`
-+        );
-+    }
-+  },
-+  DescriptionContainer = (props) => {
-+    let {of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let resolvedOf = useOf(of || 'meta'),
-+      markdown = getDescriptionFromResolvedOf(resolvedOf);
-+    return markdown
-+      ? import_react50.default.createElement(Markdown2, null, markdown)
-+      : null;
-+  };
-+var import_react61 = __toESM(require('react'));
-+var import_react52 = __toESM(require('react')),
-+  import_global7 = require('@storybook/global'),
-+  import_theming29 = require('@storybook/theming');
-+var import_react51 = __toESM(require('react')),
-+  import_theming28 = require('@storybook/theming'),
-+  tocbot = __toESM(require('tocbot')),
-+  Wrapper11 = import_theming28.styled.div(({theme}) => ({
-+    width: '10rem',
-+    '@media (max-width: 768px)': {display: 'none'},
-+  })),
-+  Content = import_theming28.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',
-+    },
-+  })),
-+  Heading = import_theming28.styled.p(({theme}) => ({
-+    fontWeight: 600,
-+    fontSize: '0.875em',
-+    color: theme.textColor,
-+    textTransform: 'uppercase',
-+    marginBottom: 10,
-+  })),
-+  OptionalTitle = ({title}) =>
-+    title === null
-+      ? null
-+      : typeof title == 'string'
-+        ? import_react51.default.createElement(Heading, null, title)
-+        : title,
-+  TableOfContents = ({
-+    title,
-+    disable,
-+    headingSelector,
-+    contentsSelector,
-+    ignoreSelector,
-+    unsafeTocbotOptions,
-+  }) => (
-+    (0, import_react51.useEffect)(() => {
-+      let configuration = {
-+          tocSelector: '.toc-wrapper',
-+          contentSelector: contentsSelector ?? '.sbdocs-content',
-+          headingSelector: headingSelector ?? 'h3',
-+          ignoreSelector: ignoreSelector ?? '.docs-story *, .skip-toc',
-+          headingsOffset: 40,
-+          scrollSmoothOffset: -40,
-+          orderedList: !1,
-+          onClick: () => !1,
-+          ...unsafeTocbotOptions,
-+        },
-+        timeout = setTimeout(() => tocbot.init(configuration), 100);
-+      return () => {
-+        clearTimeout(timeout), tocbot.destroy();
-+      };
-+    }, [disable]),
-+    import_react51.default.createElement(
-+      import_react51.default.Fragment,
-+      null,
-+      import_react51.default.createElement(
-+        Wrapper11,
-+        null,
-+        disable
-+          ? null
-+          : import_react51.default.createElement(
-+              Content,
-+              null,
-+              import_react51.default.createElement(OptionalTitle, {
-+                title: title || null,
-+              }),
-+              import_react51.default.createElement('div', {
-+                className: 'toc-wrapper',
-+              })
-+            )
-+      )
-+    )
-+  );
-+var {document: document3, window: globalWindow3} = import_global7.global,
-+  DocsContainer = ({context, theme, children}) => {
-+    let toc;
-+    try {
-+      toc = context.resolveOf('meta', ['meta']).preparedMeta.parameters?.docs
-+        ?.toc;
-+    } catch {
-+      toc = context?.projectAnnotations?.parameters?.docs?.toc;
-+    }
-+    return (
-+      (0, import_react52.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_react52.default.createElement(
-+        DocsContext.Provider,
-+        {value: context},
-+        import_react52.default.createElement(
-+          SourceContainer,
-+          {channel: context.channel},
-+          import_react52.default.createElement(
-+            import_theming29.ThemeProvider,
-+            {theme: (0, import_theming29.ensure)(theme)},
-+            import_react52.default.createElement(
-+              DocsPageWrapper,
-+              {
-+                toc: toc
-+                  ? import_react52.default.createElement(TableOfContents, {
-+                      className: 'sbdocs sbdocs-toc--custom',
-+                      ...toc,
-+                    })
-+                  : null,
-+              },
-+              children
-+            )
-+          )
-+        )
-+      )
-+    );
-+  };
-+var import_react60 = __toESM(require('react'));
-+var import_react53 = __toESM(require('react'));
-+var STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/,
-+  extractTitle = (title) => {
-+    let groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
-+    return groups?.[groups?.length - 1] || title;
-+  },
-+  Title2 = (props) => {
-+    let {children, of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let preparedMeta;
-+    try {
-+      preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
-+    } catch (error) {
-+      if (
-+        children &&
-+        !error.message.includes('did you forget to use <Meta of={} />?')
-+      )
-+        throw error;
-+    }
-+    let content = children || extractTitle(preparedMeta?.title);
-+    return content
-+      ? import_react53.default.createElement(
-+          Title,
-+          {className: 'sbdocs-title sb-unstyled'},
-+          content
-+        )
-+      : null;
-+  };
-+var import_react54 = __toESM(require('react')),
-+  import_client_logger5 = require('@storybook/client-logger');
-+var DEPRECATION_MIGRATION_LINK =
-+    'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle',
-+  Subtitle2 = (props) => {
-+    let {of, children} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let preparedMeta;
-+    try {
-+      preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
-+    } catch (error) {
-+      if (
-+        children &&
-+        !error.message.includes('did you forget to use <Meta of={} />?')
-+      )
-+        throw error;
-+    }
-+    let {componentSubtitle, docs} = preparedMeta?.parameters || {};
-+    componentSubtitle &&
-+      (0, import_client_logger5.deprecate)(
-+        `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-+      );
-+    let content = children || docs?.subtitle || componentSubtitle;
-+    return content
-+      ? import_react54.default.createElement(
-+          Subtitle,
-+          {className: 'sbdocs-subtitle sb-unstyled'},
-+          content
-+        )
-+      : null;
-+  };
-+var import_react57 = __toESM(require('react'));
-+var import_react56 = __toESM(require('react'));
-+var import_react55 = __toESM(require('react')),
-+  import_components33 = require('@storybook/components');
-+var Subheading = ({children, disableAnchor}) => {
-+  if (disableAnchor || typeof children != 'string')
-+    return import_react55.default.createElement(
-+      import_components33.H3,
-+      null,
-+      children
-+    );
-+  let tagID = globalThis.encodeURIComponent(children.toLowerCase());
-+  return import_react55.default.createElement(
-+    HeaderMdx,
-+    {as: 'h3', id: tagID},
-+    children
-+  );
-+};
-+var DocsStory = ({
-+  of,
-+  expanded = !0,
-+  withToolbar: withToolbarProp = !1,
-+  __forceInitialArgs = !1,
-+  __primary = !1,
-+}) => {
-+  let {story} = useOf(of || 'story', ['story']),
-+    withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp;
-+  return import_react56.default.createElement(
-+    Anchor,
-+    {storyId: story.id},
-+    expanded &&
-+      import_react56.default.createElement(
-+        import_react56.default.Fragment,
-+        null,
-+        import_react56.default.createElement(Subheading, null, story.name),
-+        import_react56.default.createElement(DescriptionContainer, {of})
-+      ),
-+    import_react56.default.createElement(Canvas, {
-+      of,
-+      withToolbar,
-+      story: {__forceInitialArgs, __primary},
-+      source: {__forceInitialArgs},
-+    })
-+  );
-+};
-+var Primary = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let {csfFile} = useOf(of || 'meta', ['meta']),
-+    primaryStory = (0, import_react57.useContext)(
-+      DocsContext
-+    ).componentStoriesFromCSFFile(csfFile)[0];
-+  return primaryStory
-+    ? import_react57.default.createElement(DocsStory, {
-+        of: primaryStory.moduleExport,
-+        expanded: !1,
-+        __primary: !0,
-+        withToolbar: !0,
-+      })
-+    : null;
-+};
-+var import_react59 = __toESM(require('react')),
-+  import_theming30 = require('@storybook/theming');
-+var import_react58 = __toESM(require('react')),
-+  import_components34 = require('@storybook/components');
-+var Heading2 = ({children, disableAnchor, ...props}) => {
-+  if (disableAnchor || typeof children != 'string')
-+    return import_react58.default.createElement(
-+      import_components34.H2,
-+      null,
-+      children
-+    );
-+  let tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
-+  return import_react58.default.createElement(
-+    HeaderMdx,
-+    {as: 'h2', id: tagID, ...props},
-+    children
-+  );
-+};
-+var StyledHeading = (0, import_theming30.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'},
-+  })),
-+  Stories = ({title = 'Stories', includePrimary = !0}) => {
-+    let {componentStories, projectAnnotations, getStoryContext} = (0,
-+      import_react59.useContext)(DocsContext),
-+      stories = componentStories(),
-+      {stories: {filter} = {filter: void 0}} =
-+        projectAnnotations.parameters?.docs || {};
-+    return (
-+      filter &&
-+        (stories = stories.filter((story) =>
-+          filter(story, getStoryContext(story))
-+        )),
-+      stories.some((story) => story.tags?.includes('autodocs')) &&
-+        (stories = stories.filter((story) => story.tags?.includes('autodocs'))),
-+      includePrimary || (stories = stories.slice(1)),
-+      !stories || stories.length === 0
-+        ? null
-+        : import_react59.default.createElement(
-+            import_react59.default.Fragment,
-+            null,
-+            import_react59.default.createElement(StyledHeading, null, title),
-+            stories.map(
-+              (story) =>
-+                story &&
-+                import_react59.default.createElement(DocsStory, {
-+                  key: story.id,
-+                  of: story.moduleExport,
-+                  expanded: !0,
-+                  __forceInitialArgs: !0,
-+                })
-+            )
-+          )
-+    );
-+  };
-+var DocsPage = () => {
-+  let resolvedOf = useOf('meta', ['meta']),
-+    {stories} = resolvedOf.csfFile,
-+    isSingleStory = Object.keys(stories).length === 1;
-+  return import_react60.default.createElement(
-+    import_react60.default.Fragment,
-+    null,
-+    import_react60.default.createElement(Title2, null),
-+    import_react60.default.createElement(Subtitle2, null),
-+    import_react60.default.createElement(DescriptionContainer, {of: 'meta'}),
-+    isSingleStory
-+      ? import_react60.default.createElement(DescriptionContainer, {
-+          of: 'story',
-+        })
-+      : null,
-+    import_react60.default.createElement(Primary, null),
-+    import_react60.default.createElement(Controls3, null),
-+    isSingleStory ? null : import_react60.default.createElement(Stories, null)
-+  );
-+};
-+function Docs({context, docsParameter}) {
-+  let Container = docsParameter.container || DocsContainer,
-+    Page = docsParameter.page || DocsPage;
-+  return import_react61.default.createElement(
-+    Container,
-+    {context, theme: docsParameter.theme},
-+    import_react61.default.createElement(Page, null)
-+  );
-+}
-+var import_react62 = __toESM(require('react')),
-+  import_preview_api5 = require('@storybook/preview-api');
-+var import_preview_api4 = require('@storybook/preview-api'),
-+  import_channels = require('@storybook/channels');
-+var import_preview_api3 = require('@storybook/preview-api'),
-+  ExternalDocsContext = class extends import_preview_api3.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_api4.Preview {
-+    constructor(projectAnnotations) {
-+      super(
-+        (path) => Promise.resolve(this.moduleExportsByImportPath[path]),
-+        () =>
-+          (0, import_preview_api4.composeConfigs)([
-+            {parameters: {docs: {story: {inline: !0}}}},
-+            this.projectAnnotations,
-+          ]),
-+        new import_channels.Channel({})
-+      );
-+      this.projectAnnotations = projectAnnotations;
-+      this.importPaths = new ConstantMap('./importPath/');
-+      this.titles = new ConstantMap('title-');
-+      this.storyIndex = {v: 5, 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.storyStoreValue.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.storyStoreValue,
-+          this.renderStoryToElement.bind(this),
-+          this.processMetaExports.bind(this)
-+        );
-+    }
-+    async getStoryIndexFromServer() {
-+      return this.storyIndex;
-+    }
-+  };
-+function usePreview(projectAnnotations) {
-+  let previewRef = (0, import_react62.useRef)();
-+  return (
-+    previewRef.current ||
-+      (previewRef.current = new ExternalPreview(projectAnnotations)),
-+    previewRef.current
-+  );
-+}
-+function ExternalDocs({projectAnnotationsList, children}) {
-+  let projectAnnotations = (0, import_preview_api5.composeConfigs)(
-+      projectAnnotationsList
-+    ),
-+    preview2 = usePreview(projectAnnotations),
-+    docsParameter = {
-+      ...projectAnnotations.parameters?.docs,
-+      page: () => children,
-+    };
-+  return import_react62.default.createElement(Docs, {
-+    docsParameter,
-+    context: preview2.docsContext(),
-+  });
-+}
-+var import_react63 = __toESM(require('react')),
-+  import_theming31 = require('@storybook/theming');
-+var preview,
-+  ExternalDocsContainer = ({projectAnnotations, children}) => (
-+    preview || (preview = new ExternalPreview(projectAnnotations)),
-+    import_react63.default.createElement(
-+      DocsContext.Provider,
-+      {value: preview.docsContext()},
-+      import_react63.default.createElement(
-+        import_theming31.ThemeProvider,
-+        {theme: (0, import_theming31.ensure)(import_theming31.themes.light)},
-+        children
-+      )
-+    )
-+  );
-+var import_react64 = __toESM(require('react'));
-+var Meta = ({of}) => {
-+  let context = (0, import_react64.useContext)(DocsContext);
-+  of && context.referenceMeta(of, !0);
-+  try {
-+    let primary = context.storyById();
-+    return import_react64.default.createElement(Anchor, {storyId: primary.id});
-+  } catch {
-+    return null;
-+  }
-+};
-+var import_react65 = __toESM(require('react')),
-+  Unstyled = (props) =>
-+    import_react65.default.createElement('div', {
-+      ...props,
-+      className: 'sb-unstyled',
-+    });
-+var import_react66 = __toESM(require('react')),
-+  Wrapper12 = ({children}) =>
-+    import_react66.default.createElement(
-+      'div',
-+      {style: {fontFamily: 'sans-serif'}},
-+      children
-+    );
-+var PRIMARY_STORY = '^';
-+0 &&
-+  (module.exports = {
-+    AddContext,
-+    Anchor,
-+    AnchorMdx,
-+    ArgTypes,
-+    BooleanControl,
-+    Canvas,
-+    CodeOrSourceMdx,
-+    ColorControl,
-+    ColorItem,
-+    ColorPalette,
-+    Controls,
-+    DateControl,
-+    Description,
-+    DescriptionType,
-+    Docs,
-+    DocsContainer,
-+    DocsContext,
-+    DocsPage,
-+    DocsStory,
-+    ExternalDocs,
-+    ExternalDocsContainer,
-+    FilesControl,
-+    HeaderMdx,
-+    HeadersMdx,
-+    Heading,
-+    IconGallery,
-+    IconItem,
-+    Markdown,
-+    Meta,
-+    NumberControl,
-+    ObjectControl,
-+    OptionsControl,
-+    PRIMARY_STORY,
-+    Primary,
-+    PureArgsTable,
-+    RangeControl,
-+    Source,
-+    SourceContainer,
-+    SourceContext,
-+    Stories,
-+    Story,
-+    Subheading,
-+    Subtitle,
-+    TextControl,
-+    Title,
-+    Typeset,
-+    UNKNOWN_ARGS_HASH,
-+    Unstyled,
-+    Wrapper,
-+    anchorBlockIdFromId,
-+    argsHash,
-+    assertIsFn,
-+    extractTitle,
-+    format,
-+    formatDate,
-+    formatTime,
-+    getStoryId,
-+    getStoryProps,
-+    parse,
-+    parseDate,
-+    parseTime,
-+    useOf,
-+    useSourceProps,
-+  });
-diff --git a/node_modules/@storybook/blocks/dist/index.mjs b/node_modules/@storybook/blocks/dist/index.mjs
-index a626b2d..277d277 100644
---- a/node_modules/@storybook/blocks/dist/index.mjs
-+++ b/node_modules/@storybook/blocks/dist/index.mjs
-@@ -1,44 +1,5508 @@
--import { getControlSetterButtonId, getControlId } from './chunk-GWAJ4KRU.mjs';
--import React17, { createContext, lazy, useState, useCallback, useRef, useEffect, Component, cloneElement, useMemo, Suspense, useContext, Children } from 'react';
--import { styled, ignoreSsrWarning, useTheme, themes, ThemeProvider, convert, ensure } from '@storybook/theming';
--import { withReset, SyntaxHighlighter, FlexBar, codeCommon, Form, IconButton, components, Zoom, ActionBar, Button, Link, ResetWrapper, Code, nameSpaceClassNames, H3, H2, Loader, EmptyTabContent, TabsState, ErrorFormatter, getStoryHref, WithTooltipPure } from '@storybook/components';
--import { transparentize, darken, opacify, lighten, rgba } from 'polished';
--import { global } from '@storybook/global';
--import { ChevronSmallUpIcon, ChevronSmallDownIcon, AddIcon, SubtractIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon, EyeCloseIcon, EyeIcon, DocumentIcon, UndoIcon, VideoIcon, LinkIcon } from '@storybook/icons';
-+import {Channel} from '@storybook/channels';
-+import {deprecate, once, logger} from '@storybook/client-logger';
-+import {
-+  withReset,
-+  SyntaxHighlighter,
-+  FlexBar,
-+  codeCommon,
-+  Form,
-+  IconButton,
-+  components,
-+  Zoom,
-+  ActionBar,
-+  Button,
-+  Link,
-+  ResetWrapper,
-+  Code,
-+  nameSpaceClassNames,
-+  H3,
-+  H2,
-+  Loader,
-+  EmptyTabContent,
-+  TabsState,
-+  ErrorFormatter,
-+  getStoryHref,
-+  WithTooltipPure,
-+} from '@storybook/components';
-+import {
-+  GLOBALS_UPDATED,
-+  STORY_ARGS_UPDATED,
-+  UPDATE_STORY_ARGS,
-+  RESET_STORY_ARGS,
-+  NAVIGATE_URL,
-+} from '@storybook/core-events';
-+import {includeConditionalArg} from '@storybook/csf';
-+import {SNIPPET_RENDERED, SourceType} from '@storybook/docs-tools';
-+import {global} from '@storybook/global';
-+import {
-+  ChevronSmallUpIcon,
-+  ChevronSmallDownIcon,
-+  AddIcon,
-+  SubtractIcon,
-+  ChevronDownIcon as ChevronDownIcon$1,
-+  ChevronRightIcon,
-+  ZoomIcon,
-+  ZoomOutIcon,
-+  ZoomResetIcon,
-+  EyeCloseIcon,
-+  EyeIcon,
-+  DocumentIcon,
-+  UndoIcon,
-+  VideoIcon,
-+  LinkIcon,
-+} from '@storybook/icons';
-+import {
-+  filterArgTypes,
-+  composeConfigs,
-+  Preview as Preview$1,
-+  DocsContext as DocsContext$1,
-+} from '@storybook/preview-api';
-+import {
-+  styled,
-+  ignoreSsrWarning,
-+  useTheme,
-+  themes,
-+  ThemeProvider,
-+  convert,
-+  ensure,
-+} from '@storybook/theming';
-+import cloneDeep from 'lodash/cloneDeep.js';
- import pickBy from 'lodash/pickBy.js';
--import { includeConditionalArg } from '@storybook/csf';
--import { deprecate, once, logger } from '@storybook/client-logger';
-+import uniq from 'lodash/uniq.js';
- import Markdown from 'markdown-to-jsx';
- import memoize from 'memoizerific';
--import uniq from 'lodash/uniq.js';
--import cloneDeep from 'lodash/cloneDeep.js';
--import { filterArgTypes, composeConfigs, Preview as Preview$1, DocsContext as DocsContext$1 } from '@storybook/preview-api';
--import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
--import { stringify } from 'telejson';
--import { GLOBALS_UPDATED, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS, NAVIGATE_URL } from '@storybook/core-events';
--import dedent from 'ts-dedent';
-+import {transparentize, darken, opacify, lighten, rgba} from 'polished';
-+import React17, {
-+  createContext,
-+  lazy,
-+  useState,
-+  useCallback,
-+  useRef,
-+  useEffect,
-+  Component,
-+  cloneElement,
-+  useMemo,
-+  Suspense,
-+  useContext,
-+  Children,
-+} from 'react';
-+import {stringify} from 'telejson';
- import * as tocbot from 'tocbot';
--import { Channel } from '@storybook/channels';
-+import dedent from 'ts-dedent';
-+import {getControlSetterButtonId, getControlId} from './chunk-GWAJ4KRU.mjs';
- 
--var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:transparentize(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React17.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React17.createElement(SourceSkeletonWrapper,null,React17.createElement(SourceSkeletonPlaceholder,null),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2=!1,...rest})=>{let{typography}=useTheme();if(isLoading)return React17.createElement(SourceSkeleton,null);if(error)return React17.createElement(EmptyBlock,null,error);let syntaxHighlighter=React17.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React17.createElement(ThemeProvider,{theme:convert({...overrideTheme,fontCode:typography.fonts.mono,fontBase:typography.fonts.base})},syntaxHighlighter)};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:transparentize(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...headers,fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h2")]:{...reset,...headers,fontSize:`${theme.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${theme.appBorderColor}`},[toGlobalSelector("h3")]:{...reset,...headers,fontSize:`${theme.typography.size.m1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h4")]:{...reset,...headers,fontSize:`${theme.typography.size.s3}px`},[toGlobalSelector("h5")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`},[toGlobalSelector("h6")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},[toGlobalSelector("hr")]:{border:"0 none",borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},[toGlobalSelector("img")]:{maxWidth:"100%"},[toGlobalSelector("li")]:{...reset,fontSize:theme.typography.size.s2,color:theme.color.defaultText,lineHeight:"24px","& + li":{marginTop:".25em"},"& ul, & ol":{marginTop:".25em",marginBottom:0},"& code":code},[toGlobalSelector("ol")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},[toGlobalSelector("p")]:{...reset,margin:"16px 0",fontSize:theme.typography.size.s2,lineHeight:"24px",color:theme.color.defaultText,"& code":code},[toGlobalSelector("pre")]:{...reset,fontFamily:theme.typography.fonts.mono,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",lineHeight:"18px",padding:"11px 1rem",whiteSpace:"pre-wrap",color:"inherit",borderRadius:3,margin:"1rem 0","&:not(.prismjs)":{background:"transparent",border:"none",borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:"pre-wrap",color:"inherit",fontSize:"13px",lineHeight:"19px",code:{color:"inherit",fontSize:"inherit"}},"& code":{whiteSpace:"pre"},"& code, & tt":{border:"none"}},[toGlobalSelector("span")]:{...reset,"&.frame":{display:"block",overflow:"hidden","& > span":{border:`1px solid ${theme.color.medium}`,display:"block",float:"left",overflow:"hidden",margin:"13px 0 0",padding:7,width:"auto"},"& span img":{display:"block",float:"left"},"& span span":{clear:"both",color:theme.color.darkest,display:"block",padding:"5px 0 0"}},"&.align-center":{display:"block",overflow:"hidden",clear:"both","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"center"},"& span img":{margin:"0 auto",textAlign:"center"}},"&.align-right":{display:"block",overflow:"hidden",clear:"both","& > span":{display:"block",overflow:"hidden",margin:"13px 0 0",textAlign:"right"},"& span img":{margin:0,textAlign:"right"}},"&.float-left":{display:"block",marginRight:13,overflow:"hidden",float:"left","& span":{margin:"13px 0 0"}},"&.float-right":{display:"block",marginLeft:13,overflow:"hidden",float:"right","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"right"}}},[toGlobalSelector("table")]:{...reset,margin:"16px 0",fontSize:theme.typography.size.s2,lineHeight:"24px",padding:0,borderCollapse:"collapse","& tr":{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:theme.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:theme.base==="dark"?theme.color.darker:theme.color.lighter},"& tr th":{fontWeight:"bold",color:theme.color.defaultText,border:`1px solid ${theme.appBorderColor}`,margin:0,padding:"6px 13px"},"& tr td":{border:`1px solid ${theme.appBorderColor}`,color:theme.color.defaultText,margin:0,padding:"6px 13px"},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}},[toGlobalSelector("ul")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0},listStyle:"disc"}}}),DocsWrapper=styled.div(({theme})=>({background:theme.background.content,display:"flex",justifyContent:"center",padding:"4rem 20px",minHeight:"100vh",boxSizing:"border-box",gap:"3rem",[`@media (min-width: ${breakpoint}px)`]:{}})),DocsPageWrapper=({children,toc})=>React17.createElement(DocsWrapper,{className:"sbdocs sbdocs-wrapper"},React17.createElement(DocsContent,{className:"sbdocs sbdocs-content"},children),toc);var getBlockBackgroundStyle=theme=>({borderRadius:theme.appBorderRadius,background:theme.background.content,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",border:`1px solid ${theme.appBorderColor}`});var Bar=styled(FlexBar)({position:"absolute",left:0,right:0,top:0,transition:"transform .2s linear"}),Wrapper2=styled.div({display:"flex",alignItems:"center",gap:4}),IconPlaceholder=styled.div(({theme})=>({width:14,height:14,borderRadius:2,margin:"0 7px",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),Toolbar=({isLoading,storyId,baseUrl,zoom,resetZoom,...rest})=>React17.createElement(Bar,{...rest},React17.createElement(Wrapper2,{key:"left"},isLoading?[1,2,3].map(key=>React17.createElement(IconPlaceholder,{key})):React17.createElement(React17.Fragment,null,React17.createElement(IconButton,{key:"zoomin",onClick:e=>{e.preventDefault(),zoom(.8);},title:"Zoom in"},React17.createElement(ZoomIcon,null)),React17.createElement(IconButton,{key:"zoomout",onClick:e=>{e.preventDefault(),zoom(1.25);},title:"Zoom out"},React17.createElement(ZoomOutIcon,null)),React17.createElement(IconButton,{key:"zoomreset",onClick:e=>{e.preventDefault(),resetZoom();},title:"Reset zoom"},React17.createElement(ZoomResetIcon,null)))));var ZoomContext=createContext({scale:1});var{window:globalWindow}=global,IFrame=class extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){let{id}=this.props;this.iframe=globalWindow.document.getElementById(id);}shouldComponentUpdate(nextProps){let{scale}=nextProps;return scale!==this.props.scale&&this.setIframeBodyStyle({width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"}),!1}setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style)}render(){let{id,title,src,allowFullScreen,scale,...rest}=this.props;return React17.createElement("iframe",{id,title,src,...allowFullScreen?{allow:"fullscreen"}:{},loading:"lazy",...rest})}};var{PREVIEW_URL}=global,BASE_URL=PREVIEW_URL||"iframe.html",storyBlockIdFromId=({story,primary})=>`story--${story.id}${primary?"--primary":""}`,InlineStory=props=>{let storyRef=useRef(),[showLoader,setShowLoader]=useState(!0),[error,setError]=useState(),{story,height,autoplay,forceInitialArgs,renderStoryToElement}=props;return useEffect(()=>{if(!(story&&storyRef.current))return ()=>{};let element=storyRef.current,cleanup=renderStoryToElement(story,element,{showMain:()=>{},showError:({title,description})=>setError(new Error(`${title} - ${description}`)),showException:err=>setError(err)},{autoplay,forceInitialArgs});return setShowLoader(!1),()=>{Promise.resolve().then(()=>cleanup());}},[autoplay,renderStoryToElement,story]),error?React17.createElement("pre",null,React17.createElement(ErrorFormatter,{error})):React17.createElement(React17.Fragment,null,height?React17.createElement("style",null,`#${storyBlockIdFromId(props)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`):null,showLoader&&React17.createElement(StorySkeleton,null),React17.createElement("div",{ref:storyRef,id:`${storyBlockIdFromId(props)}-inner`,"data-name":story.name}))},IFrameStory=({story,height="500px"})=>React17.createElement("div",{style:{width:"100%",height}},React17.createElement(ZoomContext.Consumer,null,({scale})=>React17.createElement(IFrame,{key:"iframe",id:`iframe--${story.id}`,title:story.name,src:getStoryHref(BASE_URL,story.id,{viewMode:"story"}),allowFullScreen:!0,scale,style:{width:"100%",height:"100%",border:"0 none"}}))),Story=props=>{let{inline}=props;return React17.createElement("div",{id:storyBlockIdFromId(props),className:"sb-story sb-unstyled","data-story-block":"true"},inline?React17.createElement(InlineStory,{...props}):React17.createElement(IFrameStory,{...props}))},StorySkeleton=()=>React17.createElement(Loader,null);var ChildrenContainer=styled.div(({isColumn,columns,layout})=>({display:isColumn||!columns?"block":"flex",position:"relative",flexWrap:"wrap",overflow:"auto",flexDirection:isColumn?"column":"row","& .innerZoomElementWrapper > *":isColumn?{width:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"block"}:{maxWidth:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"inline-block"}}),({layout="padded"})=>layout==="centered"||layout==="padded"?{padding:"30px 20px","& .innerZoomElementWrapper > *":{width:"auto",border:"10px solid transparent!important"}}:{},({layout="padded"})=>layout==="centered"?{display:"flex",justifyContent:"center",justifyItems:"center",alignContent:"center",alignItems:"center"}:{},({columns})=>columns&&columns>1?{".innerZoomElementWrapper > *":{minWidth:`calc(100% / ${columns} - 20px)`}}:{}),StyledSource=styled(Source)(({theme})=>({margin:0,borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:theme.appBorderRadius,borderBottomRightRadius:theme.appBorderRadius,border:"none",background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":darken(.05,theme.background.content),color:theme.color.lightest,button:{background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":darken(.05,theme.background.content)}})),PreviewContainer=styled.div(({theme,withSource,isExpanded})=>({position:"relative",overflow:"hidden",margin:"25px 0 40px",...getBlockBackgroundStyle(theme),borderBottomLeftRadius:withSource&&isExpanded&&0,borderBottomRightRadius:withSource&&isExpanded&&0,borderBottomWidth:isExpanded&&0,"h3 + &":{marginTop:"16px"}}),({withToolbar})=>withToolbar&&{paddingTop:40}),getSource=(withSource,expanded,setExpanded)=>{switch(!0){case!!(withSource&&withSource.error):return {source:null,actionItem:{title:"No code available",className:"docblock-code-toggle docblock-code-toggle--disabled",disabled:!0,onClick:()=>setExpanded(!1)}};case expanded:return {source:React17.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Hide code",className:"docblock-code-toggle docblock-code-toggle--expanded",onClick:()=>setExpanded(!1)}};default:return {source:React17.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Show code",className:"docblock-code-toggle",onClick:()=>setExpanded(!0)}}}};function getStoryId(children){if(Children.count(children)===1){let elt=children;if(elt.props)return elt.props.id}return null}var PositionedToolbar=styled(Toolbar)({position:"absolute",top:0,left:0,right:0,height:40}),Relative=styled.div({overflow:"hidden",position:"relative"}),Preview=({isLoading,isColumn,columns,children,withSource,withToolbar=!1,isExpanded=!1,additionalActions,className,layout="padded",...props})=>{let[expanded,setExpanded]=useState(isExpanded),{source,actionItem}=getSource(withSource,expanded,setExpanded),[scale,setScale]=useState(1),previewClasses=[className].concat(["sbdocs","sbdocs-preview","sb-unstyled"]),defaultActionItems=withSource?[actionItem]:[],[additionalActionItems,setAdditionalActionItems]=useState(additionalActions?[...additionalActions]:[]),actionItems=[...defaultActionItems,...additionalActionItems],{window:globalWindow4}=global,copyToClipboard=useCallback(async text=>{let{createCopyToClipboardFunction}=await import('@storybook/components');createCopyToClipboardFunction();},[]),onCopyCapture=e=>{let selection=globalWindow4.getSelection();selection&&selection.type==="Range"||(e.preventDefault(),additionalActionItems.filter(item=>item.title==="Copied").length===0&&copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:"Copied",onClick:()=>{}}]),globalWindow4.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=="Copied")),1500);}));};return React17.createElement(PreviewContainer,{withSource,withToolbar,...props,className:previewClasses.join(" ")},withToolbar&&React17.createElement(PositionedToolbar,{isLoading,border:!0,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React17.createElement(ZoomContext.Provider,{value:{scale}},React17.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React17.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns,layout},React17.createElement(Zoom.Element,{scale},Array.isArray(children)?children.map((child,i)=>React17.createElement("div",{key:i},child)):React17.createElement("div",null,children))),React17.createElement(ActionBar,{actionItems}))),withSource&&expanded&&source)};styled(Preview)(()=>({".docs-story":{paddingTop:32,paddingBottom:40}}));var Table=styled.table(({theme})=>({"&&":{borderCollapse:"collapse",borderSpacing:0,border:"none",tr:{border:"none !important",background:"none"},"td, th":{padding:0,border:"none",width:"auto!important"},marginTop:0,marginBottom:0,"th:first-of-type, td:first-of-type":{paddingLeft:0},"th:last-of-type, td:last-of-type":{paddingRight:0},td:{paddingTop:0,paddingBottom:4,"&:not(:first-of-type)":{paddingLeft:10,paddingRight:0}},tbody:{boxShadow:"none",border:"none"},code:codeCommon({theme}),div:{span:{fontWeight:"bold"}},"& code":{margin:0,display:"inline-block",fontSize:theme.typography.size.s1}}})),ArgJsDoc=({tags})=>{let params=(tags.params||[]).filter(x=>x.description),hasDisplayableParams=params.length!==0,hasDisplayableDeprecated=tags.deprecated!=null,hasDisplayableReturns=tags.returns!=null&&tags.returns.description!=null;return !hasDisplayableParams&&!hasDisplayableReturns&&!hasDisplayableDeprecated?null:React17.createElement(React17.Fragment,null,React17.createElement(Table,null,React17.createElement("tbody",null,hasDisplayableDeprecated&&React17.createElement("tr",{key:"deprecated"},React17.createElement("td",{colSpan:2},React17.createElement("strong",null,"Deprecated"),": ",tags.deprecated.toString())),hasDisplayableParams&&params.map(x=>React17.createElement("tr",{key:x.name},React17.createElement("td",null,React17.createElement("code",null,x.name)),React17.createElement("td",null,x.description))),hasDisplayableReturns&&React17.createElement("tr",{key:"returns"},React17.createElement("td",null,React17.createElement("code",null,"Returns")),React17.createElement("td",null,tags.returns.description)))))};var ITEMS_BEFORE_EXPANSION=8,Summary=styled.div(({isExpanded})=>({display:"flex",flexDirection:isExpanded?"column":"row",flexWrap:"wrap",alignItems:"flex-start",marginBottom:"-4px",minWidth:100})),Text=styled.span(codeCommon,({theme,simple=!1})=>({flex:"0 0 auto",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,wordBreak:"break-word",whiteSpace:"normal",maxWidth:"100%",margin:0,marginRight:"4px",marginBottom:"4px",paddingTop:"2px",paddingBottom:"2px",lineHeight:"13px",...simple&&{background:"transparent",border:"0 none",paddingLeft:0}})),ExpandButton=styled.button(({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,marginBottom:"4px",background:"none",border:"none"})),Expandable=styled.div(codeCommon,({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,fontSize:theme.typography.size.s1,margin:0,whiteSpace:"nowrap",display:"flex",alignItems:"center"})),Detail=styled.div(({theme,width})=>({width,minWidth:200,maxWidth:800,padding:15,fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,boxSizing:"content-box","& code":{padding:"0 !important"}})),ChevronUpIcon=styled(ChevronSmallUpIcon)({marginLeft:4}),ChevronDownIcon=styled(ChevronSmallDownIcon)({marginLeft:4}),EmptyArg=()=>React17.createElement("span",null,"-"),ArgText=({text,simple})=>React17.createElement(Text,{simple},text),calculateDetailWidth=memoize(1e3)(detail=>{let lines=detail.split(/\r?\n/);return `${Math.max(...lines.map(x=>x.length))}ch`}),getSummaryItems=summary=>{if(!summary)return [summary];let summaryItems=summary.split("|").map(value2=>value2.trim());return uniq(summaryItems)},renderSummaryItems=(summaryItems,isExpanded=!0)=>{let items=summaryItems;return isExpanded||(items=summaryItems.slice(0,ITEMS_BEFORE_EXPANSION)),items.map(item=>React17.createElement(ArgText,{key:item,text:item===""?'""':item}))},ArgSummary=({value:value2,initialExpandedArgs})=>{let{summary,detail}=value2,[isOpen,setIsOpen]=useState(!1),[isExpanded,setIsExpanded]=useState(initialExpandedArgs||!1);if(summary==null)return null;let summaryAsString=typeof summary.toString=="function"?summary.toString():summary;if(detail==null){if(/[(){}[\]<>]/.test(summaryAsString))return React17.createElement(ArgText,{text:summaryAsString});let summaryItems=getSummaryItems(summaryAsString),itemsCount=summaryItems.length;return itemsCount>ITEMS_BEFORE_EXPANSION?React17.createElement(Summary,{isExpanded},renderSummaryItems(summaryItems,isExpanded),React17.createElement(ExpandButton,{onClick:()=>setIsExpanded(!isExpanded)},isExpanded?"Show less...":`Show ${itemsCount-ITEMS_BEFORE_EXPANSION} more...`)):React17.createElement(Summary,null,renderSummaryItems(summaryItems))}return React17.createElement(WithTooltipPure,{closeOnOutsideClick:!0,placement:"bottom",visible:isOpen,onVisibleChange:isVisible=>{setIsOpen(isVisible);},tooltip:React17.createElement(Detail,{width:calculateDetailWidth(detail)},React17.createElement(SyntaxHighlighter,{language:"jsx",format:!1},detail))},React17.createElement(Expandable,{className:"sbdocs-expandable"},React17.createElement("span",null,summaryAsString),isOpen?React17.createElement(ChevronUpIcon,null):React17.createElement(ChevronDownIcon,null)))},ArgValue=({value:value2,initialExpandedArgs})=>value2==null?React17.createElement(EmptyArg,null):React17.createElement(ArgSummary,{value:value2,initialExpandedArgs});var Label=styled.label(({theme})=>({lineHeight:"18px",alignItems:"center",marginBottom:8,display:"inline-block",position:"relative",whiteSpace:"nowrap",background:theme.boolean.background,borderRadius:"3em",padding:1,'&[aria-disabled="true"]':{opacity:.5,input:{cursor:"not-allowed"}},input:{appearance:"none",width:"100%",height:"100%",position:"absolute",left:0,top:0,margin:0,padding:0,border:"none",background:"transparent",cursor:"pointer",borderRadius:"3em","&:focus":{outline:"none",boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:"center",fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:"1",cursor:"pointer",display:"inline-block",padding:"7px 15px",transition:"all 100ms ease-out",userSelect:"none",borderRadius:"3em",color:transparentize(.5,theme.color.defaultText),background:"transparent","&:hover":{boxShadow:`${opacify(.3,theme.appBorderColor)} 0 0 0 1px inset`},"&:active":{boxShadow:`${opacify(.05,theme.appBorderColor)} 0 0 0 2px inset`,color:opacify(1,theme.appBorderColor)},"&:first-of-type":{paddingRight:8},"&:last-of-type":{paddingLeft:8}},"input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type":{background:theme.boolean.selectedBackground,boxShadow:theme.base==="light"?`${opacify(.1,theme.appBorderColor)} 0 0 2px`:`${theme.appBorderColor} 0 0 0 1px`,color:theme.color.defaultText,padding:"7px 15px"}})),parse=value2=>value2==="true",BooleanControl=({name,value:value2,onChange,onBlur,onFocus,argType})=>{let onSetFalse=useCallback(()=>onChange(!1),[onChange]),readonly=!!argType?.table?.readonly;if(value2===void 0)return React17.createElement(Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onSetFalse,disabled:readonly},"Set boolean");let controlId=getControlId(name),parsedValue=typeof value2=="string"?parse(value2):value2;return React17.createElement(Label,{"aria-disabled":readonly,htmlFor:controlId,"aria-label":name},React17.createElement("input",{id:controlId,type:"checkbox",onChange:e=>onChange(e.target.checked),checked:parsedValue,role:"switch",disabled:readonly,name,onBlur,onFocus}),React17.createElement("span",{"aria-hidden":"true"},"False"),React17.createElement("span",{"aria-hidden":"true"},"True"))};var parseDate=value2=>{let[year,month,day]=value2.split("-"),result=new Date;return result.setFullYear(parseInt(year,10),parseInt(month,10)-1,parseInt(day,10)),result},parseTime=value2=>{let[hours,minutes]=value2.split(":"),result=new Date;return result.setHours(parseInt(hours,10)),result.setMinutes(parseInt(minutes,10)),result},formatDate=value2=>{let date=new Date(value2),year=`000${date.getFullYear()}`.slice(-4),month=`0${date.getMonth()+1}`.slice(-2),day=`0${date.getDate()}`.slice(-2);return `${year}-${month}-${day}`},formatTime=value2=>{let date=new Date(value2),hours=`0${date.getHours()}`.slice(-2),minutes=`0${date.getMinutes()}`.slice(-2);return `${hours}:${minutes}`},FormInput=styled(Form.Input)(({readOnly})=>({opacity:readOnly?.5:1})),FlexSpaced=styled.div(({theme})=>({flex:1,display:"flex",input:{marginLeft:10,flex:1,height:32,"&::-webkit-calendar-picker-indicator":{opacity:.5,height:12,filter:theme.base==="light"?void 0:"invert(1)"}},"input:first-of-type":{marginLeft:0,flexGrow:4},"input:last-of-type":{flexGrow:3}})),DateControl=({name,value:value2,onChange,onFocus,onBlur,argType})=>{let[valid,setValid]=useState(!0),dateRef=useRef(),timeRef=useRef(),readonly=!!argType?.table?.readonly;useEffect(()=>{valid!==!1&&(dateRef&&dateRef.current&&(dateRef.current.value=formatDate(value2)),timeRef&&timeRef.current&&(timeRef.current.value=formatTime(value2)));},[value2]);let onDateChange=e=>{let parsed=parseDate(e.target.value),result=new Date(value2);result.setFullYear(parsed.getFullYear(),parsed.getMonth(),parsed.getDate());let time=result.getTime();time&&onChange(time),setValid(!!time);},onTimeChange=e=>{let parsed=parseTime(e.target.value),result=new Date(value2);result.setHours(parsed.getHours()),result.setMinutes(parsed.getMinutes());let time=result.getTime();time&&onChange(time),setValid(!!time);},controlId=getControlId(name);return React17.createElement(FlexSpaced,null,React17.createElement(FormInput,{type:"date",max:"9999-12-31",ref:dateRef,id:`${controlId}-date`,name:`${controlId}-date`,readOnly:readonly,onChange:onDateChange,onFocus,onBlur}),React17.createElement(FormInput,{type:"time",id:`${controlId}-time`,name:`${controlId}-time`,ref:timeRef,onChange:onTimeChange,readOnly:readonly,onFocus,onBlur}),valid?null:React17.createElement("div",null,"invalid"))};var Wrapper3=styled.label({display:"flex"}),parse2=value2=>{let result=parseFloat(value2);return Number.isNaN(result)?void 0:result},format=value2=>value2!=null?String(value2):"",FormInput2=styled(Form.Input)(({readOnly})=>({opacity:readOnly?.5:1})),NumberControl=({name,value:value2,onChange,min,max,step,onBlur,onFocus,argType})=>{let[inputValue,setInputValue]=useState(typeof value2=="number"?value2:""),[forceVisible,setForceVisible]=useState(!1),[parseError,setParseError]=useState(null),readonly=!!argType?.table?.readonly,handleChange=useCallback(event=>{setInputValue(event.target.value);let result=parseFloat(event.target.value);Number.isNaN(result)?setParseError(new Error(`'${event.target.value}' is not a number`)):(onChange(result),setParseError(null));},[onChange,setParseError]),onForceVisible=useCallback(()=>{setInputValue("0"),onChange(0),setForceVisible(!0);},[setForceVisible]),htmlElRef=useRef(null);return useEffect(()=>{forceVisible&&htmlElRef.current&&htmlElRef.current.select();},[forceVisible]),useEffect(()=>{inputValue!==(typeof value2=="number"?value2:"")&&setInputValue(value2);},[value2]),value2===void 0?React17.createElement(Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onForceVisible,disabled:readonly},"Set number"):React17.createElement(Wrapper3,null,React17.createElement(FormInput2,{ref:htmlElRef,id:getControlId(name),type:"number",onChange:handleChange,size:"flex",placeholder:"Edit number...",value:inputValue,valid:parseError?"error":null,autoFocus:forceVisible,readOnly:readonly,name,min,max,step,onFocus,onBlur}))};var selectedKey=(value2,options)=>{let entry=options&&Object.entries(options).find(([_key,val])=>val===value2);return entry?entry[0]:void 0},selectedKeys=(value2,options)=>value2&&options?Object.entries(options).filter(entry=>value2.includes(entry[1])).map(entry=>entry[0]):[],selectedValues=(keys,options)=>keys&&options&&keys.map(key=>options[key]);var Wrapper4=styled.div(({isInline})=>isInline?{display:"flex",flexWrap:"wrap",alignItems:"flex-start",label:{display:"inline-flex",marginRight:15}}:{label:{display:"flex"}},props=>{if(props["aria-readonly"]==="true")return {input:{cursor:"not-allowed"}}}),Text2=styled.span({"[aria-readonly=true] &":{opacity:.5}}),Label2=styled.label({lineHeight:"20px",alignItems:"center",marginBottom:8,"&:last-child":{marginBottom:0},input:{margin:0,marginRight:6}}),CheckboxControl=({name,options,value:value2,onChange,isInline,argType})=>{if(!options)return logger.warn(`Checkbox with no options: ${name}`),React17.createElement(React17.Fragment,null,"-");let initial=selectedKeys(value2,options),[selected,setSelected]=useState(initial),readonly=!!argType?.table?.readonly,handleChange=e=>{let option=e.target.value,updated=[...selected];updated.includes(option)?updated.splice(updated.indexOf(option),1):updated.push(option),onChange(selectedValues(updated,options)),setSelected(updated);};useEffect(()=>{setSelected(selectedKeys(value2,options));},[value2]);let controlId=getControlId(name);return React17.createElement(Wrapper4,{"aria-readonly":readonly,isInline},Object.keys(options).map((key,index)=>{let id=`${controlId}-${index}`;return React17.createElement(Label2,{key:id,htmlFor:id},React17.createElement("input",{type:"checkbox",disabled:readonly,id,name:id,value:key,onChange:handleChange,checked:selected?.includes(key)}),React17.createElement(Text2,null,key))}))};var Wrapper5=styled.div(({isInline})=>isInline?{display:"flex",flexWrap:"wrap",alignItems:"flex-start",label:{display:"inline-flex",marginRight:15}}:{label:{display:"flex"}},props=>{if(props["aria-readonly"]==="true")return {input:{cursor:"not-allowed"}}}),Text3=styled.span({"[aria-readonly=true] &":{opacity:.5}}),Label3=styled.label({lineHeight:"20px",alignItems:"center",marginBottom:8,"&:last-child":{marginBottom:0},input:{margin:0,marginRight:6}}),RadioControl=({name,options,value:value2,onChange,isInline,argType})=>{if(!options)return logger.warn(`Radio with no options: ${name}`),React17.createElement(React17.Fragment,null,"-");let selection=selectedKey(value2,options),controlId=getControlId(name),readonly=!!argType?.table?.readonly;return React17.createElement(Wrapper5,{"aria-readonly":readonly,isInline},Object.keys(options).map((key,index)=>{let id=`${controlId}-${index}`;return React17.createElement(Label3,{key:id,htmlFor:id},React17.createElement("input",{type:"radio",id,name:id,disabled:readonly,value:key,onChange:e=>onChange(options[e.currentTarget.value]),checked:key===selection}),React17.createElement(Text3,null,key))}))};var styleResets={appearance:"none",border:"0 none",boxSizing:"inherit",display:" block",margin:" 0",background:"transparent",padding:0,fontSize:"inherit",position:"relative"},OptionsSelect=styled.select(styleResets,({theme})=>({boxSizing:"border-box",position:"relative",padding:"6px 10px",width:"100%",color:theme.input.color||"inherit",background:theme.input.background,borderRadius:theme.input.borderRadius,boxShadow:`${theme.input.border} 0 0 0 1px inset`,fontSize:theme.typography.size.s2-1,lineHeight:"20px","&:focus":{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:"none"},"&[disabled]":{cursor:"not-allowed",opacity:.5},"::placeholder":{color:theme.textMutedColor},"&[multiple]":{overflow:"auto",padding:0,option:{display:"block",padding:"6px 10px",marginLeft:1,marginRight:1}}})),SelectWrapper=styled.span(({theme})=>({display:"inline-block",lineHeight:"normal",overflow:"hidden",position:"relative",verticalAlign:"top",width:"100%",svg:{position:"absolute",zIndex:1,pointerEvents:"none",height:"12px",marginTop:"-6px",right:"12px",top:"50%",fill:theme.textMutedColor,path:{fill:theme.textMutedColor}}})),NO_SELECTION="Choose option...",SingleSelect=({name,value:value2,options,onChange,argType})=>{let handleChange=e=>{onChange(options[e.currentTarget.value]);},selection=selectedKey(value2,options)||NO_SELECTION,controlId=getControlId(name),readonly=!!argType?.table?.readonly;return React17.createElement(SelectWrapper,null,React17.createElement(ChevronSmallDownIcon,null),React17.createElement(OptionsSelect,{disabled:readonly,id:controlId,value:selection,onChange:handleChange},React17.createElement("option",{key:"no-selection",disabled:!0},NO_SELECTION),Object.keys(options).map(key=>React17.createElement("option",{key,value:key},key))))},MultiSelect=({name,value:value2,options,onChange,argType})=>{let handleChange=e=>{let selection2=Array.from(e.currentTarget.options).filter(option=>option.selected).map(option=>option.value);onChange(selectedValues(selection2,options));},selection=selectedKeys(value2,options),controlId=getControlId(name),readonly=!!argType?.table?.readonly;return React17.createElement(SelectWrapper,null,React17.createElement(OptionsSelect,{disabled:readonly,id:controlId,multiple:!0,value:selection,onChange:handleChange},Object.keys(options).map(key=>React17.createElement("option",{key,value:key},key))))},SelectControl=props=>{let{name,options}=props;return options?props.isMulti?React17.createElement(MultiSelect,{...props}):React17.createElement(SingleSelect,{...props}):(logger.warn(`Select with no options: ${name}`),React17.createElement(React17.Fragment,null,"-"))};var normalizeOptions=(options,labels)=>Array.isArray(options)?options.reduce((acc,item)=>(acc[labels?.[item]||String(item)]=item,acc),{}):options,Controls={check:CheckboxControl,"inline-check":CheckboxControl,radio:RadioControl,"inline-radio":RadioControl,select:SelectControl,"multi-select":SelectControl},OptionsControl=props=>{let{type="select",labels,argType}=props,normalized={...props,argType,options:argType?normalizeOptions(argType.options,labels):{},isInline:type.includes("inline"),isMulti:type.includes("multi")},Control=Controls[type];if(Control)return React17.createElement(Control,{...normalized});throw new Error(`Unknown options type: ${type}`)};var VALUE="value",KEY="key";var ERROR="Error",OBJECT="Object",ARRAY="Array",STRING="String",NUMBER="Number",BOOLEAN="Boolean",DATE="Date",NULL="Null",UNDEFINED="Undefined",FUNCTION="Function",SYMBOL="Symbol";var ADD_DELTA_TYPE="ADD_DELTA_TYPE",REMOVE_DELTA_TYPE="REMOVE_DELTA_TYPE",UPDATE_DELTA_TYPE="UPDATE_DELTA_TYPE";function getObjectType(obj){return obj!==null&&typeof obj=="object"&&!Array.isArray(obj)&&typeof obj[Symbol.iterator]=="function"?"Iterable":Object.prototype.toString.call(obj).slice(8,-1)}function isComponentWillChange(oldValue,newValue){let oldType=getObjectType(oldValue),newType=getObjectType(newValue);return (oldType==="Function"||newType==="Function")&&newType!==oldType}var JsonAddValue=class extends Component{constructor(props){super(props),this.state={inputRefKey:null,inputRefValue:null},this.refInputValue=this.refInputValue.bind(this),this.refInputKey=this.refInputKey.bind(this),this.onKeydown=this.onKeydown.bind(this),this.onSubmit=this.onSubmit.bind(this);}componentDidMount(){let{inputRefKey,inputRefValue}=this.state,{onlyValue}=this.props;inputRefKey&&typeof inputRefKey.focus=="function"&&inputRefKey.focus(),onlyValue&&inputRefValue&&typeof inputRefValue.focus=="function"&&inputRefValue.focus(),document.addEventListener("keydown",this.onKeydown);}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown);}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.onSubmit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.props.handleCancel()));}onSubmit(){let{handleAdd,onlyValue,onSubmitValueParser,keyPath,deep}=this.props,{inputRefKey,inputRefValue}=this.state,result={};if(!onlyValue){if(!inputRefKey.value)return;result.key=inputRefKey.value;}result.newValue=onSubmitValueParser(!1,keyPath,deep,result.key,inputRefValue.value),handleAdd(result);}refInputKey(node){this.state.inputRefKey=node;}refInputValue(node){this.state.inputRefValue=node;}render(){let{handleCancel,onlyValue,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep}=this.props,addButtonElementLayout=cloneElement(addButtonElement,{onClick:this.onSubmit}),cancelButtonElementLayout=cloneElement(cancelButtonElement,{onClick:handleCancel}),inputElementValue=inputElementGenerator(VALUE,keyPath,deep),inputElementValueLayout=cloneElement(inputElementValue,{placeholder:"Value",ref:this.refInputValue}),inputElementKeyLayout=null;if(!onlyValue){let inputElementKey=inputElementGenerator(KEY,keyPath,deep);inputElementKeyLayout=cloneElement(inputElementKey,{placeholder:"Key",ref:this.refInputKey});}return React17.createElement("span",{className:"rejt-add-value-node"},inputElementKeyLayout,inputElementValueLayout,cancelButtonElementLayout,addButtonElementLayout)}};JsonAddValue.defaultProps={onlyValue:!1,addButtonElement:React17.createElement("button",null,"+"),cancelButtonElement:React17.createElement("button",null,"c")};var JsonArray=class extends Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={data:props.data,name:props.name,keyPath,deep:props.deep,nextDeep:props.deep+1,collapsed:props.isCollapsed(keyPath,props.deep,props.data),addFormVisible:!1},this.handleCollapseMode=this.handleCollapseMode.bind(this),this.handleRemoveItem=this.handleRemoveItem.bind(this),this.handleAddMode=this.handleAddMode.bind(this),this.handleAddValueAdd=this.handleAddValueAdd.bind(this),this.handleAddValueCancel=this.handleAddValueCancel.bind(this),this.handleEditValue=this.handleEditValue.bind(this),this.onChildUpdate=this.onChildUpdate.bind(this),this.renderCollapsed=this.renderCollapsed.bind(this),this.renderNotCollapsed=this.renderNotCollapsed.bind(this);}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}onChildUpdate(childKey,childData){let{data,keyPath}=this.state;data[childKey]=childData,this.setState({data});let{onUpdate}=this.props,size=keyPath.length;onUpdate(keyPath[size-1],data);}handleAddMode(){this.setState({addFormVisible:!0});}handleCollapseMode(){this.setState(state=>({collapsed:!state.collapsed}));}handleRemoveItem(index){return ()=>{let{beforeRemoveAction,logger:logger4}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[index];beforeRemoveAction(index,keyPath,deep,oldValue).then(()=>{let deltaUpdateResult={keyPath,deep,key:index,oldValue,type:REMOVE_DELTA_TYPE};data.splice(index,1),this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate(deltaUpdateResult);}).catch(logger4.error);}}handleAddValueAdd({newValue}){let{data,keyPath,nextDeep:deep}=this.state,{beforeAddAction,logger:logger4}=this.props;beforeAddAction(data.length,keyPath,deep,newValue).then(()=>{let newData=[...data,newValue];this.setState({data:newData}),this.handleAddValueCancel();let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],newData),onDeltaUpdate({type:ADD_DELTA_TYPE,keyPath,deep,key:newData.length-1,newValue});}).catch(logger4.error);}handleAddValueCancel(){this.setState({addFormVisible:!1});}handleEditValue({key,value:value2}){return new Promise((resolve,reject)=>{let{beforeUpdateAction}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeUpdateAction(key,keyPath,deep,oldValue,value2).then(()=>{data[key]=value2,this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:UPDATE_DELTA_TYPE,keyPath,deep,key,newValue:value2,oldValue}),resolve(void 0);}).catch(reject);})}renderCollapsed(){let{name,data,keyPath,deep}=this.state,{handleRemove,readOnly,getStyle,dataType,minusMenuElement}=this.props,{minus,collapsed}=getStyle(name,data,keyPath,deep,dataType),isReadOnly=readOnly(name,data,keyPath,deep,dataType),removeItemButton=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return React17.createElement("span",{className:"rejt-collapsed"},React17.createElement("span",{className:"rejt-collapsed-text",style:collapsed,onClick:this.handleCollapseMode},"[...] ",data.length," ",data.length===1?"item":"items"),!isReadOnly&&removeItemButton)}renderNotCollapsed(){let{name,data,keyPath,deep,addFormVisible,nextDeep}=this.state,{isCollapsed,handleRemove,onDeltaUpdate,readOnly,getStyle,dataType,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,{minus,plus,delimiter,ul,addForm}=getStyle(name,data,keyPath,deep,dataType),isReadOnly=readOnly(name,data,keyPath,deep,dataType),addItemButton=cloneElement(plusMenuElement,{onClick:this.handleAddMode,className:"rejt-plus-menu",style:plus}),removeItemButton=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return React17.createElement("span",{className:"rejt-not-collapsed"},React17.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"["),!addFormVisible&&addItemButton,React17.createElement("ul",{className:"rejt-not-collapsed-list",style:ul},data.map((item,index)=>React17.createElement(JsonNode,{key:index,name:index.toString(),data:item,keyPath,deep:nextDeep,isCollapsed,handleRemove:this.handleRemoveItem(index),handleUpdateValue:this.handleEditValue,onUpdate:this.onChildUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}))),!isReadOnly&&addFormVisible&&React17.createElement("div",{className:"rejt-add-form",style:addForm},React17.createElement(JsonAddValue,{handleAdd:this.handleAddValueAdd,handleCancel:this.handleAddValueCancel,onlyValue:!0,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep,onSubmitValueParser})),React17.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"]"),!isReadOnly&&removeItemButton)}render(){let{name,collapsed,data,keyPath,deep}=this.state,{dataType,getStyle}=this.props,value2=collapsed?this.renderCollapsed():this.renderNotCollapsed(),style=getStyle(name,data,keyPath,deep,dataType);return React17.createElement("div",{className:"rejt-array-node"},React17.createElement("span",{onClick:this.handleCollapseMode},React17.createElement("span",{className:"rejt-name",style:style.name},name," :"," ")),value2)}};JsonArray.defaultProps={keyPath:[],deep:0,minusMenuElement:React17.createElement("span",null," - "),plusMenuElement:React17.createElement("span",null," + ")};var JsonFunctionValue=class extends Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={value:props.value,name:props.name,keyPath,deep:props.deep,editEnabled:!1,inputRef:null},this.handleEditMode=this.handleEditMode.bind(this),this.refInput=this.refInput.bind(this),this.handleCancelEdit=this.handleCancelEdit.bind(this),this.handleEdit=this.handleEdit.bind(this),this.onKeydown=this.onKeydown.bind(this);}static getDerivedStateFromProps(props,state){return props.value!==state.value?{value:props.value}:null}componentDidUpdate(){let{editEnabled,inputRef,name,value:value2,keyPath,deep}=this.state,{readOnly,dataType}=this.props,readOnlyResult=readOnly(name,value2,keyPath,deep,dataType);editEnabled&&!readOnlyResult&&typeof inputRef.focus=="function"&&inputRef.focus();}componentDidMount(){document.addEventListener("keydown",this.onKeydown);}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown);}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.handleEdit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.handleCancelEdit()));}handleEdit(){let{handleUpdateValue,originalValue,logger:logger4,onSubmitValueParser,keyPath}=this.props,{inputRef,name,deep}=this.state;if(!inputRef)return;let newValue=onSubmitValueParser(!0,keyPath,deep,name,inputRef.value);handleUpdateValue({value:newValue,key:name}).then(()=>{isComponentWillChange(originalValue,newValue)||this.handleCancelEdit();}).catch(logger4.error);}handleEditMode(){this.setState({editEnabled:!0});}refInput(node){this.state.inputRef=node;}handleCancelEdit(){this.setState({editEnabled:!1});}render(){let{name,value:value2,editEnabled,keyPath,deep}=this.state,{handleRemove,originalValue,readOnly,dataType,getStyle,editButtonElement,cancelButtonElement,textareaElementGenerator,minusMenuElement,keyPath:comeFromKeyPath}=this.props,style=getStyle(name,originalValue,keyPath,deep,dataType),result=null,minusElement=null,resultOnlyResult=readOnly(name,originalValue,keyPath,deep,dataType);if(editEnabled&&!resultOnlyResult){let textareaElement=textareaElementGenerator(VALUE,comeFromKeyPath,deep,name,originalValue,dataType),editButtonElementLayout=cloneElement(editButtonElement,{onClick:this.handleEdit}),cancelButtonElementLayout=cloneElement(cancelButtonElement,{onClick:this.handleCancelEdit}),textareaElementLayout=cloneElement(textareaElement,{ref:this.refInput,defaultValue:originalValue});result=React17.createElement("span",{className:"rejt-edit-form",style:style.editForm},textareaElementLayout," ",cancelButtonElementLayout,editButtonElementLayout),minusElement=null;}else {result=React17.createElement("span",{className:"rejt-value",style:style.value,onClick:resultOnlyResult?null:this.handleEditMode},value2);let minusMenuLayout=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:style.minus});minusElement=resultOnlyResult?null:minusMenuLayout;}return React17.createElement("li",{className:"rejt-function-value-node",style:style.li},React17.createElement("span",{className:"rejt-name",style:style.name},name," :"," "),result,minusElement)}};JsonFunctionValue.defaultProps={keyPath:[],deep:0,handleUpdateValue:()=>{},editButtonElement:React17.createElement("button",null,"e"),cancelButtonElement:React17.createElement("button",null,"c"),minusMenuElement:React17.createElement("span",null," - ")};var JsonNode=class extends Component{constructor(props){super(props),this.state={data:props.data,name:props.name,keyPath:props.keyPath,deep:props.deep};}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}render(){let{data,name,keyPath,deep}=this.state,{isCollapsed,handleRemove,handleUpdateValue,onUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,readOnlyTrue=()=>!0,dataType=getObjectType(data);switch(dataType){case ERROR:return React17.createElement(JsonObject,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly:readOnlyTrue,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case OBJECT:return React17.createElement(JsonObject,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case ARRAY:return React17.createElement(JsonArray,{data,name,isCollapsed,keyPath,deep,handleRemove,onUpdate,onDeltaUpdate,readOnly,dataType,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser});case STRING:return React17.createElement(JsonValue,{name,value:`"${data}"`,originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case NUMBER:return React17.createElement(JsonValue,{name,value:data,originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case BOOLEAN:return React17.createElement(JsonValue,{name,value:data?"true":"false",originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case DATE:return React17.createElement(JsonValue,{name,value:data.toISOString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly:readOnlyTrue,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case NULL:return React17.createElement(JsonValue,{name,value:"null",originalValue:"null",keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case UNDEFINED:return React17.createElement(JsonValue,{name,value:"undefined",originalValue:"undefined",keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case FUNCTION:return React17.createElement(JsonFunctionValue,{name,value:data.toString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly,dataType,getStyle,cancelButtonElement,editButtonElement,textareaElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});case SYMBOL:return React17.createElement(JsonValue,{name,value:data.toString(),originalValue:data,keyPath,deep,handleRemove,handleUpdateValue,readOnly:readOnlyTrue,dataType,getStyle,cancelButtonElement,editButtonElement,inputElementGenerator,minusMenuElement,logger:logger4,onSubmitValueParser});default:return null}}};JsonNode.defaultProps={keyPath:[],deep:0};var JsonObject=class extends Component{constructor(props){super(props);let keyPath=props.deep===-1?[]:[...props.keyPath,props.name];this.state={name:props.name,data:props.data,keyPath,deep:props.deep,nextDeep:props.deep+1,collapsed:props.isCollapsed(keyPath,props.deep,props.data),addFormVisible:!1},this.handleCollapseMode=this.handleCollapseMode.bind(this),this.handleRemoveValue=this.handleRemoveValue.bind(this),this.handleAddMode=this.handleAddMode.bind(this),this.handleAddValueAdd=this.handleAddValueAdd.bind(this),this.handleAddValueCancel=this.handleAddValueCancel.bind(this),this.handleEditValue=this.handleEditValue.bind(this),this.onChildUpdate=this.onChildUpdate.bind(this),this.renderCollapsed=this.renderCollapsed.bind(this),this.renderNotCollapsed=this.renderNotCollapsed.bind(this);}static getDerivedStateFromProps(props,state){return props.data!==state.data?{data:props.data}:null}onChildUpdate(childKey,childData){let{data,keyPath}=this.state;data[childKey]=childData,this.setState({data});let{onUpdate}=this.props,size=keyPath.length;onUpdate(keyPath[size-1],data);}handleAddMode(){this.setState({addFormVisible:!0});}handleAddValueCancel(){this.setState({addFormVisible:!1});}handleAddValueAdd({key,newValue}){let{data,keyPath,nextDeep:deep}=this.state,{beforeAddAction,logger:logger4}=this.props;beforeAddAction(key,keyPath,deep,newValue).then(()=>{data[key]=newValue,this.setState({data}),this.handleAddValueCancel();let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:ADD_DELTA_TYPE,keyPath,deep,key,newValue});}).catch(logger4.error);}handleRemoveValue(key){return ()=>{let{beforeRemoveAction,logger:logger4}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeRemoveAction(key,keyPath,deep,oldValue).then(()=>{let deltaUpdateResult={keyPath,deep,key,oldValue,type:REMOVE_DELTA_TYPE};delete data[key],this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate(deltaUpdateResult);}).catch(logger4.error);}}handleCollapseMode(){this.setState(state=>({collapsed:!state.collapsed}));}handleEditValue({key,value:value2}){return new Promise((resolve,reject)=>{let{beforeUpdateAction}=this.props,{data,keyPath,nextDeep:deep}=this.state,oldValue=data[key];beforeUpdateAction(key,keyPath,deep,oldValue,value2).then(()=>{data[key]=value2,this.setState({data});let{onUpdate,onDeltaUpdate}=this.props;onUpdate(keyPath[keyPath.length-1],data),onDeltaUpdate({type:UPDATE_DELTA_TYPE,keyPath,deep,key,newValue:value2,oldValue}),resolve();}).catch(reject);})}renderCollapsed(){let{name,keyPath,deep,data}=this.state,{handleRemove,readOnly,dataType,getStyle,minusMenuElement}=this.props,{minus,collapsed}=getStyle(name,data,keyPath,deep,dataType),keyList=Object.getOwnPropertyNames(data),isReadOnly=readOnly(name,data,keyPath,deep,dataType),removeItemButton=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus});return React17.createElement("span",{className:"rejt-collapsed"},React17.createElement("span",{className:"rejt-collapsed-text",style:collapsed,onClick:this.handleCollapseMode},"{...}"," ",keyList.length," ",keyList.length===1?"key":"keys"),!isReadOnly&&removeItemButton)}renderNotCollapsed(){let{name,data,keyPath,deep,nextDeep,addFormVisible}=this.state,{isCollapsed,handleRemove,onDeltaUpdate,readOnly,getStyle,dataType,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}=this.props,{minus,plus,addForm,ul,delimiter}=getStyle(name,data,keyPath,deep,dataType),keyList=Object.getOwnPropertyNames(data),isReadOnly=readOnly(name,data,keyPath,deep,dataType),addItemButton=cloneElement(plusMenuElement,{onClick:this.handleAddMode,className:"rejt-plus-menu",style:plus}),removeItemButton=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:minus}),list=keyList.map(key=>React17.createElement(JsonNode,{key,name:key,data:data[key],keyPath,deep:nextDeep,isCollapsed,handleRemove:this.handleRemoveValue(key),handleUpdateValue:this.handleEditValue,onUpdate:this.onChildUpdate,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator,textareaElementGenerator,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser}));return React17.createElement("span",{className:"rejt-not-collapsed"},React17.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"{"),!isReadOnly&&addItemButton,React17.createElement("ul",{className:"rejt-not-collapsed-list",style:ul},list),!isReadOnly&&addFormVisible&&React17.createElement("div",{className:"rejt-add-form",style:addForm},React17.createElement(JsonAddValue,{handleAdd:this.handleAddValueAdd,handleCancel:this.handleAddValueCancel,addButtonElement,cancelButtonElement,inputElementGenerator,keyPath,deep,onSubmitValueParser})),React17.createElement("span",{className:"rejt-not-collapsed-delimiter",style:delimiter},"}"),!isReadOnly&&removeItemButton)}render(){let{name,collapsed,data,keyPath,deep}=this.state,{getStyle,dataType}=this.props,value2=collapsed?this.renderCollapsed():this.renderNotCollapsed(),style=getStyle(name,data,keyPath,deep,dataType);return React17.createElement("div",{className:"rejt-object-node"},React17.createElement("span",{onClick:this.handleCollapseMode},React17.createElement("span",{className:"rejt-name",style:style.name},name," :"," ")),value2)}};JsonObject.defaultProps={keyPath:[],deep:0,minusMenuElement:React17.createElement("span",null," - "),plusMenuElement:React17.createElement("span",null," + ")};var JsonValue=class extends Component{constructor(props){super(props);let keyPath=[...props.keyPath,props.name];this.state={value:props.value,name:props.name,keyPath,deep:props.deep,editEnabled:!1,inputRef:null},this.handleEditMode=this.handleEditMode.bind(this),this.refInput=this.refInput.bind(this),this.handleCancelEdit=this.handleCancelEdit.bind(this),this.handleEdit=this.handleEdit.bind(this),this.onKeydown=this.onKeydown.bind(this);}static getDerivedStateFromProps(props,state){return props.value!==state.value?{value:props.value}:null}componentDidUpdate(){let{editEnabled,inputRef,name,value:value2,keyPath,deep}=this.state,{readOnly,dataType}=this.props,isReadOnly=readOnly(name,value2,keyPath,deep,dataType);editEnabled&&!isReadOnly&&typeof inputRef.focus=="function"&&inputRef.focus();}componentDidMount(){document.addEventListener("keydown",this.onKeydown);}componentWillUnmount(){document.removeEventListener("keydown",this.onKeydown);}onKeydown(event){event.altKey||event.ctrlKey||event.metaKey||event.shiftKey||event.repeat||((event.code==="Enter"||event.key==="Enter")&&(event.preventDefault(),this.handleEdit()),(event.code==="Escape"||event.key==="Escape")&&(event.preventDefault(),this.handleCancelEdit()));}handleEdit(){let{handleUpdateValue,originalValue,logger:logger4,onSubmitValueParser,keyPath}=this.props,{inputRef,name,deep}=this.state;if(!inputRef)return;let newValue=onSubmitValueParser(!0,keyPath,deep,name,inputRef.value);handleUpdateValue({value:newValue,key:name}).then(()=>{isComponentWillChange(originalValue,newValue)||this.handleCancelEdit();}).catch(logger4.error);}handleEditMode(){this.setState({editEnabled:!0});}refInput(node){this.state.inputRef=node;}handleCancelEdit(){this.setState({editEnabled:!1});}render(){let{name,value:value2,editEnabled,keyPath,deep}=this.state,{handleRemove,originalValue,readOnly,dataType,getStyle,editButtonElement,cancelButtonElement,inputElementGenerator,minusMenuElement,keyPath:comeFromKeyPath}=this.props,style=getStyle(name,originalValue,keyPath,deep,dataType),isReadOnly=readOnly(name,originalValue,keyPath,deep,dataType),isEditing=editEnabled&&!isReadOnly,inputElement=inputElementGenerator(VALUE,comeFromKeyPath,deep,name,originalValue,dataType),editButtonElementLayout=cloneElement(editButtonElement,{onClick:this.handleEdit}),cancelButtonElementLayout=cloneElement(cancelButtonElement,{onClick:this.handleCancelEdit}),inputElementLayout=cloneElement(inputElement,{ref:this.refInput,defaultValue:JSON.stringify(originalValue)}),minusMenuLayout=cloneElement(minusMenuElement,{onClick:handleRemove,className:"rejt-minus-menu",style:style.minus});return React17.createElement("li",{className:"rejt-value-node",style:style.li},React17.createElement("span",{className:"rejt-name",style:style.name},name," : "),isEditing?React17.createElement("span",{className:"rejt-edit-form",style:style.editForm},inputElementLayout," ",cancelButtonElementLayout,editButtonElementLayout):React17.createElement("span",{className:"rejt-value",style:style.value,onClick:isReadOnly?null:this.handleEditMode},String(value2)),!isReadOnly&&!isEditing&&minusMenuLayout)}};JsonValue.defaultProps={keyPath:[],deep:0,handleUpdateValue:()=>Promise.resolve(),editButtonElement:React17.createElement("button",null,"e"),cancelButtonElement:React17.createElement("button",null,"c"),minusMenuElement:React17.createElement("span",null," - ")};var object={minus:{color:"red"},plus:{color:"green"},collapsed:{color:"grey"},delimiter:{},ul:{padding:"0px",margin:"0 0 0 25px",listStyle:"none"},name:{color:"#2287CD"},addForm:{}},array={minus:{color:"red"},plus:{color:"green"},collapsed:{color:"grey"},delimiter:{},ul:{padding:"0px",margin:"0 0 0 25px",listStyle:"none"},name:{color:"#2287CD"},addForm:{}},value={minus:{color:"red"},editForm:{},value:{color:"#7bba3d"},li:{minHeight:"22px",lineHeight:"22px",outline:"0px"},name:{color:"#2287CD"}};function parse3(string){let result=string;if(result.indexOf("function")===0)return (0, eval)(`(${result})`);try{result=JSON.parse(string);}catch{}return result}var JsonTree=class extends Component{constructor(props){super(props),this.state={data:props.data,rootName:props.rootName},this.onUpdate=this.onUpdate.bind(this),this.removeRoot=this.removeRoot.bind(this);}static getDerivedStateFromProps(props,state){return props.data!==state.data||props.rootName!==state.rootName?{data:props.data,rootName:props.rootName}:null}onUpdate(key,data){this.setState({data}),this.props.onFullyUpdate(data);}removeRoot(){this.onUpdate(null,null);}render(){let{data,rootName}=this.state,{isCollapsed,onDeltaUpdate,readOnly,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElement,textareaElement,minusMenuElement,plusMenuElement,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser,fallback=null}=this.props,dataType=getObjectType(data),readOnlyFunction=readOnly;getObjectType(readOnly)==="Boolean"&&(readOnlyFunction=()=>readOnly);let inputElementFunction=inputElement;inputElement&&getObjectType(inputElement)!=="Function"&&(inputElementFunction=()=>inputElement);let textareaElementFunction=textareaElement;return textareaElement&&getObjectType(textareaElement)!=="Function"&&(textareaElementFunction=()=>textareaElement),dataType==="Object"||dataType==="Array"?React17.createElement("div",{className:"rejt-tree"},React17.createElement(JsonNode,{data,name:rootName,deep:-1,isCollapsed,onUpdate:this.onUpdate,onDeltaUpdate,readOnly:readOnlyFunction,getStyle,addButtonElement,cancelButtonElement,editButtonElement,inputElementGenerator:inputElementFunction,textareaElementGenerator:textareaElementFunction,minusMenuElement,plusMenuElement,handleRemove:this.removeRoot,beforeRemoveAction,beforeAddAction,beforeUpdateAction,logger:logger4,onSubmitValueParser})):fallback}};JsonTree.defaultProps={rootName:"root",isCollapsed:(keyPath,deep)=>deep!==-1,getStyle:(keyName,data,keyPath,deep,dataType)=>{switch(dataType){case"Object":case"Error":return object;case"Array":return array;default:return value}},readOnly:()=>!1,onFullyUpdate:()=>{},onDeltaUpdate:()=>{},beforeRemoveAction:()=>Promise.resolve(),beforeAddAction:()=>Promise.resolve(),beforeUpdateAction:()=>Promise.resolve(),logger:{error:()=>{}},onSubmitValueParser:(isEditMode,keyPath,deep,name,rawValue)=>parse3(rawValue),inputElement:()=>React17.createElement("input",null),textareaElement:()=>React17.createElement("textarea",null),fallback:null};var {window:globalWindow2}=global,Wrapper6=styled.div(({theme})=>({position:"relative",display:"flex",'&[aria-readonly="true"]':{opacity:.5},".rejt-tree":{marginLeft:"1rem",fontSize:"13px"},".rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed":{"& > svg":{opacity:0,transition:"opacity 0.2s"}},".rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed":{"& > svg":{opacity:1}},".rejt-edit-form button":{display:"none"},".rejt-add-form":{marginLeft:10},".rejt-add-value-node":{display:"inline-flex",alignItems:"center"},".rejt-name":{lineHeight:"22px"},".rejt-not-collapsed-delimiter":{lineHeight:"22px"},".rejt-plus-menu":{marginLeft:5},".rejt-object-node > span > *, .rejt-array-node > span > *":{position:"relative",zIndex:2},".rejt-object-node, .rejt-array-node":{position:"relative"},".rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before":{content:'""',position:"absolute",top:0,display:"block",width:"100%",marginLeft:"-1rem",padding:"0 4px 0 1rem",height:22},".rejt-collapsed::before, .rejt-not-collapsed::before":{zIndex:1,background:"transparent",borderRadius:4,transition:"background 0.2s",pointerEvents:"none",opacity:.1},".rejt-object-node:hover, .rejt-array-node:hover":{"& > .rejt-collapsed::before, & > .rejt-not-collapsed::before":{background:theme.color.secondary}},".rejt-collapsed::after, .rejt-not-collapsed::after":{content:'""',position:"absolute",display:"inline-block",pointerEvents:"none",width:0,height:0},".rejt-collapsed::after":{left:-8,top:8,borderTop:"3px solid transparent",borderBottom:"3px solid transparent",borderLeft:"3px solid rgba(153,153,153,0.6)"},".rejt-not-collapsed::after":{left:-10,top:10,borderTop:"3px solid rgba(153,153,153,0.6)",borderLeft:"3px solid transparent",borderRight:"3px solid transparent"},".rejt-value":{display:"inline-block",border:"1px solid transparent",borderRadius:4,margin:"1px 0",padding:"0 4px",cursor:"text",color:theme.color.defaultText},".rejt-value-node:hover > .rejt-value":{background:theme.color.lighter,borderColor:theme.appBorderColor}})),ButtonInline=styled.button(({theme,primary})=>({border:0,height:20,margin:1,borderRadius:4,background:primary?theme.color.secondary:"transparent",color:primary?theme.color.lightest:theme.color.dark,fontWeight:primary?"bold":"normal",cursor:"pointer",order:primary?"initial":9})),ActionAddIcon=styled(AddIcon)(({theme,disabled})=>({display:"inline-block",verticalAlign:"middle",width:15,height:15,padding:3,marginLeft:5,cursor:disabled?"not-allowed":"pointer",color:theme.textMutedColor,"&:hover":disabled?{}:{color:theme.color.ancillary},"svg + &":{marginLeft:0}})),ActionSubstractIcon=styled(SubtractIcon)(({theme,disabled})=>({display:"inline-block",verticalAlign:"middle",width:15,height:15,padding:3,marginLeft:5,cursor:disabled?"not-allowed":"pointer",color:theme.textMutedColor,"&:hover":disabled?{}:{color:theme.color.negative},"svg + &":{marginLeft:0}})),Input=styled.input(({theme,placeholder})=>({outline:0,margin:placeholder?1:"1px 0",padding:"3px 4px",color:theme.color.defaultText,background:theme.background.app,border:`1px solid ${theme.appBorderColor}`,borderRadius:4,lineHeight:"14px",width:placeholder==="Key"?80:120,"&:focus":{border:`1px solid ${theme.color.secondary}`}})),RawButton=styled(IconButton)(({theme})=>({position:"absolute",zIndex:2,top:2,right:2,height:21,padding:"0 3px",background:theme.background.bar,border:`1px solid ${theme.appBorderColor}`,borderRadius:3,color:theme.textMutedColor,fontSize:"9px",fontWeight:"bold",textDecoration:"none",span:{marginLeft:3,marginTop:1}})),RawInput=styled(Form.Textarea)(({theme})=>({flex:1,padding:"7px 6px",fontFamily:theme.typography.fonts.mono,fontSize:"12px",lineHeight:"18px","&::placeholder":{fontFamily:theme.typography.fonts.base,fontSize:"13px"},"&:placeholder-shown":{padding:"7px 10px"}})),ENTER_EVENT={bubbles:!0,cancelable:!0,key:"Enter",code:"Enter",keyCode:13},dispatchEnterKey=event=>{event.currentTarget.dispatchEvent(new globalWindow2.KeyboardEvent("keydown",ENTER_EVENT));},selectValue=event=>{event.currentTarget.select();},getCustomStyleFunction=theme=>()=>({name:{color:theme.color.secondary},collapsed:{color:theme.color.dark},ul:{listStyle:"none",margin:"0 0 0 1rem",padding:0},li:{outline:0}}),ObjectControl=({name,value:value2,onChange,argType})=>{let theme=useTheme(),data=useMemo(()=>value2&&cloneDeep(value2),[value2]),hasData=data!=null,[showRaw,setShowRaw]=useState(!hasData),[parseError,setParseError]=useState(null),readonly=!!argType?.table?.readonly,updateRaw=useCallback(raw=>{try{raw&&onChange(JSON.parse(raw)),setParseError(void 0);}catch(e){setParseError(e);}},[onChange]),[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange({}),setForceVisible(!0);},[setForceVisible]),htmlElRef=useRef(null);if(useEffect(()=>{forceVisible&&htmlElRef.current&&htmlElRef.current.select();},[forceVisible]),!hasData)return React17.createElement(Button,{disabled:readonly,id:getControlSetterButtonId(name),onClick:onForceVisible},"Set object");let rawJSONForm=React17.createElement(RawInput,{ref:htmlElRef,id:getControlId(name),name,defaultValue:value2===null?"":JSON.stringify(value2,null,2),onBlur:event=>updateRaw(event.target.value),placeholder:"Edit JSON string...",autoFocus:forceVisible,valid:parseError?"error":null,readOnly:readonly}),isObjectOrArray=Array.isArray(value2)||typeof value2=="object"&&value2?.constructor===Object;return React17.createElement(Wrapper6,{"aria-readonly":readonly},isObjectOrArray&&React17.createElement(RawButton,{onClick:e=>{e.preventDefault(),setShowRaw(v=>!v);}},showRaw?React17.createElement(EyeCloseIcon,null):React17.createElement(EyeIcon,null),React17.createElement("span",null,"RAW")),showRaw?rawJSONForm:React17.createElement(JsonTree,{readOnly:readonly||!isObjectOrArray,isCollapsed:isObjectOrArray?void 0:()=>!0,data,rootName:name,onFullyUpdate:onChange,getStyle:getCustomStyleFunction(theme),cancelButtonElement:React17.createElement(ButtonInline,{type:"button"},"Cancel"),editButtonElement:React17.createElement(ButtonInline,{type:"submit"},"Save"),addButtonElement:React17.createElement(ButtonInline,{type:"submit",primary:!0},"Save"),plusMenuElement:React17.createElement(ActionAddIcon,null),minusMenuElement:React17.createElement(ActionSubstractIcon,null),inputElement:(_,__,___,key)=>key?React17.createElement(Input,{onFocus:selectValue,onBlur:dispatchEnterKey}):React17.createElement(Input,null),fallback:rawJSONForm}))};var RangeInput=styled.input(({theme,min,max,value:value2,disabled})=>({"&":{width:"100%",backgroundColor:"transparent",appearance:"none"},"&::-webkit-slider-runnable-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:disabled?"not-allowed":"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:disabled?"not-allowed":"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:disabled?"not-allowed":"grab"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:rgba(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:disabled?"not-allowed":"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:disabled?"not-allowed":"grap",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right, 
--            ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%, 
--            ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums","[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,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus,argType})=>{let handleChange=event=>{onChange(parse2(event.target.value));},hasValue=value2!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]),readonly=!!argType?.table?.readonly;return React17.createElement(RangeWrapper,{"aria-readonly":readonly},React17.createElement(RangeLabel,null,min),React17.createElement(RangeInput,{id:getControlId(name),type:"range",disabled:readonly,onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React17.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"," / ",max))};var Wrapper7=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength,argType})=>{let handleChange=event=>{onChange(event.target.value);},readonly=!!argType?.table?.readonly,[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value2===void 0)return React17.createElement(Button,{variant:"outline",size:"medium",disabled:readonly,id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React17.createElement(Wrapper7,null,React17.createElement(Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,disabled:readonly,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&React17.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name,accept="image/*",value:value2,argType})=>{let inputElement=useRef(null),readonly=argType?.control?.readOnly;function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2);}return useEffect(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null);},[value2,name]),React17.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,disabled:readonly,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=lazy(()=>import('./Color-PRSJMWNM.mjs')),ColorControl=props=>React17.createElement(Suspense,{fallback:React17.createElement("div",null)},React17.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>React17.createElement(React17.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key,control}=row,[isFocused,setFocused]=useState(!1),[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{isFocused||setBoxedValue({value:arg});},[isFocused,arg]);let onChange=useCallback(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable){let canBeSetup=control?.disable!==!0&&row?.type?.name!=="function";return isHovered&&canBeSetup?React17.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):React17.createElement(NoControl,null)}let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled.span({fontWeight:"bold"}),Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled.div(({theme})=>({"&&":{p:{margin:"0 0 10px 0"},a:{color:theme.color.secondary}},code:{...codeCommon({theme}),fontSize:12,fontFamily:theme.typography.fonts.mono},"& code":{margin:0,display:"inline-block"},"& pre > code":{whiteSpace:"pre-wrap"}})),Type=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?4:0})),TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12})),StyledTd=styled.td(({theme,expandable})=>({paddingLeft:expandable?"40px !important":"20px !important"})),toSummary=value2=>value2&&{summary:typeof value2=="string"?value2:value2.name},ArgRow=props=>{let[isHovered,setIsHovered]=useState(!1),{row,updateArgs,compact,expandable,initialExpandedArgs}=props,{name,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.createElement("tr",{onMouseEnter:()=>setIsHovered(!0),onMouseLeave:()=>setIsHovered(!1)},React17.createElement(StyledTd,{expandable},React17.createElement(Name,null,name),required?React17.createElement(Required,{title:"Required"},"*"):null),compact?null:React17.createElement("td",null,hasDescription&&React17.createElement(Description,null,React17.createElement(Markdown,null,description)),table.jsDocTags!=null?React17.createElement(React17.Fragment,null,React17.createElement(TypeWithJsDoc,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs})),React17.createElement(ArgJsDoc,{tags:table.jsDocTags})):React17.createElement(Type,{hasDescription},React17.createElement(ArgValue,{value:type,initialExpandedArgs}))),compact?null:React17.createElement("td",null,React17.createElement(ArgValue,{value:defaultValue,initialExpandedArgs})),updateArgs?React17.createElement("td",null,React17.createElement(ArgControl,{...props,isHovered})):null)};var ExpanderIconDown=styled(ChevronDownIcon$1)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.3,theme.color.defaultText),border:"none",display:"inline-block"})),ExpanderIconRight=styled(ChevronRightIcon)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.3,theme.color.defaultText),border:"none",display:"inline-block"})),FlexWrapper=styled.span(({theme})=>({display:"flex",lineHeight:"20px",alignItems:"center"})),Section=styled.td(({theme})=>({position:"relative",letterSpacing:"0.35em",textTransform:"uppercase",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s1-1,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),background:`${theme.background.app} !important`,"& ~ td":{background:`${theme.background.app} !important`}})),Subsection=styled.td(({theme})=>({position:"relative",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.app})),StyledTd2=styled.td(()=>({position:"relative"})),StyledTr=styled.tr(({theme})=>({"&:hover > td":{backgroundColor:`${lighten(.005,theme.background.app)} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:"row-resize"}})),ClickIntercept=styled.button(()=>({background:"none",border:"none",padding:"0",font:"inherit",position:"absolute",top:0,bottom:0,left:0,right:0,height:"100%",width:"100%",color:"transparent",cursor:"row-resize !important"})),SectionRow=({level="section",label,children,initialExpanded=!0,colSpan=3})=>{let[expanded,setExpanded]=useState(initialExpanded),Level=level==="subsection"?Subsection:Section,itemCount=children?.length||0,caption=level==="subsection"?`${itemCount} item${itemCount!==1?"s":""}`:"",helperText=`${expanded?"Hide":"Show"} ${level==="subsection"?itemCount:label} item${itemCount!==1?"s":""}`;return React17.createElement(React17.Fragment,null,React17.createElement(StyledTr,{title:helperText},React17.createElement(Level,{colSpan:1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:0},helperText),React17.createElement(FlexWrapper,null,expanded?React17.createElement(ExpanderIconDown,null):React17.createElement(ExpanderIconRight,null),label)),React17.createElement(StyledTd2,{colSpan:colSpan-1},React17.createElement(ClickIntercept,{onClick:e=>setExpanded(!expanded),tabIndex:-1,style:{outline:"none"}},helperText),expanded?null:caption)),expanded?children:null)};var 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.createElement(React17.Fragment,null,React17.createElement(Row,null,React17.createElement(Column,{numColumn:columnWidth[0]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[1]},React17.createElement(SkeletonText,{width:"30%"})),React17.createElement(Column,{numColumn:columnWidth[2]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[3]},React17.createElement(SkeletonText,{width:"60%"}))),React17.createElement(Row,null,React17.createElement(Column,{numColumn:columnWidth[0]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[1]},React17.createElement(SkeletonText,{width:"80%"}),React17.createElement(SkeletonText,{width:"30%"})),React17.createElement(Column,{numColumn:columnWidth[2]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[3]},React17.createElement(SkeletonText,{width:"60%"}))),React17.createElement(Row,null,React17.createElement(Column,{numColumn:columnWidth[0]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[1]},React17.createElement(SkeletonText,{width:"80%"}),React17.createElement(SkeletonText,{width:"30%"})),React17.createElement(Column,{numColumn:columnWidth[2]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[3]},React17.createElement(SkeletonText,{width:"60%"}))),React17.createElement(Row,null,React17.createElement(Column,{numColumn:columnWidth[0]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[1]},React17.createElement(SkeletonText,{width:"80%"}),React17.createElement(SkeletonText,{width:"30%"})),React17.createElement(Column,{numColumn:columnWidth[2]},React17.createElement(SkeletonText,{width:"60%"})),React17.createElement(Column,{numColumn:columnWidth[3]},React17.createElement(SkeletonText,{width:"60%"}))));var 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.createElement(Wrapper8,{inAddonPanel},React17.createElement(EmptyTabContent,{title:inAddonPanel?"Interactive story playground":"Args table with interactive controls couldn't be auto-generated",description:React17.createElement(React17.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.createElement(Links,null,inAddonPanel&&React17.createElement(React17.Fragment,null,React17.createElement(Link,{href:"https://youtu.be/0gOfS6K0x0E",target:"_blank",withArrow:!0},React17.createElement(VideoIcon,null)," Watch 5m video"),React17.createElement(Divider,null),React17.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17.createElement(DocumentIcon,null)," Read docs")),!inAddonPanel&&React17.createElement(Link,{href:"https://storybook.js.org/docs/essentials/controls",target:"_blank",withArrow:!0},React17.createElement(DocumentIcon,null)," Learn how to set that up"))}))};var TableWrapper=styled.table(({theme,compact,inAddonPanel})=>({"&&":{borderSpacing:0,color:theme.color.defaultText,"td, th":{padding:0,border:"none",verticalAlign:"top",textOverflow:"ellipsis"},fontSize:theme.typography.size.s2-1,lineHeight:"20px",textAlign:"left",width:"100%",marginTop:inAddonPanel?0:25,marginBottom:inAddonPanel?0:40,"thead th:first-of-type, td:first-of-type":{width:"25%"},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...compact?null:{width:"35%"}},"td:nth-of-type(3)":{...compact?null:{width:"15%"}},"th:last-of-type, td:last-of-type":{paddingRight:20,...compact?null:{width:"25%"}},th:{color:theme.base==="light"?transparentize(.25,theme.color.defaultText):transparentize(.45,theme.color.defaultText),paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:"10px",paddingBottom:"10px","&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginLeft:inAddonPanel?0:1,marginRight:inAddonPanel?0:1,tbody:{...inAddonPanel?null:{filter:theme.base==="light"?"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))":"drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))"},"> tr > *":{background:theme.background.content,borderTop:`1px solid ${theme.appBorderColor}`},...inAddonPanel?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${theme.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${theme.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${theme.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${theme.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:theme.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:theme.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:theme.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:theme.appBorderRadius}}}}})),StyledIconButton=styled(IconButton)(({theme})=>({margin:"-4px -12px -4px 0"})),ControlHeadingWrapper=styled.span({display:"flex",justifyContent:"space-between"});var sortFns={alpha:(a,b)=>a.name.localeCompare(b.name),requiredFirst:(a,b)=>+!!b.type?.required-+!!a.type?.required||a.name.localeCompare(b.name),none:void 0},groupRows=(rows,sort)=>{let sections={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!rows)return sections;Object.entries(rows).forEach(([key,row])=>{let{category,subcategory}=row?.table||{};if(category){let section=sections.sections[category]||{ungrouped:[],subsections:{}};if(!subcategory)section.ungrouped.push({key,...row});else {let subsection=section.subsections[subcategory]||[];subsection.push({key,...row}),section.subsections[subcategory]=subsection;}sections.sections[category]=section;}else if(subcategory){let subsection=sections.ungroupedSubsections[subcategory]||[];subsection.push({key,...row}),sections.ungroupedSubsections[subcategory]=subsection;}else sections.ungrouped.push({key,...row});});let sortFn=sortFns[sort],sortSubsection=record=>sortFn?Object.keys(record).reduce((acc,cur)=>({...acc,[cur]:record[cur].sort(sortFn)}),{}):record;return {ungrouped:sections.ungrouped.sort(sortFn),ungroupedSubsections:sortSubsection(sections.ungroupedSubsections),sections:Object.keys(sections.sections).reduce((acc,cur)=>({...acc,[cur]:{ungrouped:sections.sections[cur].ungrouped.sort(sortFn),subsections:sortSubsection(sections.sections[cur].subsections)}}),{})}},safeIncludeConditionalArg=(row,args,globals)=>{try{return includeConditionalArg(row,args,globals)}catch(err){return once.warn(err.message),!1}},ArgsTable=props=>{let{updateArgs,resetArgs,compact,inAddonPanel,initialExpandedArgs,sort="none",isLoading}=props;if("error"in props){let{error}=props;return React17.createElement(EmptyBlock,null,error,"\xA0",React17.createElement(Link,{href:"http://storybook.js.org/docs/",target:"_blank",withArrow:!0},React17.createElement(DocumentIcon,null)," Read the docs"))}if(isLoading)return React17.createElement(Skeleton,null);let{rows,args,globals}="rows"in props&&props,groups=groupRows(pickBy(rows,row=>!row?.table?.disable&&safeIncludeConditionalArg(row,args||{},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.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.createElement(ResetWrapper,null,React17.createElement(TableWrapper,{compact,inAddonPanel,className:"docblock-argstable sb-unstyled"},React17.createElement("thead",{className:"docblock-argstable-head"},React17.createElement("tr",null,React17.createElement("th",null,React17.createElement("span",null,"Name")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Description")),compact?null:React17.createElement("th",null,React17.createElement("span",null,"Default")),updateArgs?React17.createElement("th",null,React17.createElement(ControlHeadingWrapper,null,"Control"," ",!isLoading&&resetArgs&&React17.createElement(StyledIconButton,{onClick:()=>resetArgs(),title:"Reset controls"},React17.createElement(UndoIcon,{"aria-hidden":!0})))):null)),React17.createElement("tbody",{className:"docblock-argstable-body"},groups.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(groups.ungroupedSubsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))),Object.entries(groups.sections).map(([category,section])=>React17.createElement(SectionRow,{key:category,label:category,level:"section",colSpan},section.ungrouped.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],...common})),Object.entries(section.subsections).map(([subcategory,subsection])=>React17.createElement(SectionRow,{key:subcategory,label:subcategory,level:"subsection",colSpan},subsection.map(row=>React17.createElement(ArgRow,{key:row.key,row,arg:args&&args[row.key],expandable,...common})))))))))};var TabbedArgsTable=({tabs,...props})=>{let entries=Object.entries(tabs);return entries.length===1?React17.createElement(ArgsTable,{...entries[0][1],...props}):React17.createElement(TabsState,null,entries.map((entry,index)=>{let[label,table]=entry,id=`prop_table_div_${label}`,Component4="div",argsTableProps=index===0?props:{sort:props.sort};return React17.createElement(Component4,{key:id,id,title:label},({active})=>active?React17.createElement(ArgsTable,{key:`prop_table_${label}`,...table,...argsTableProps}):null)}))};var Label4=styled.div(({theme})=>({marginRight:30,fontSize:`${theme.typography.size.s1}px`,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),Sample=styled.div({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}),TypeSpecimen=styled.div({display:"flex",flexDirection:"row",alignItems:"baseline","&:not(:last-child)":{marginBottom:"1rem"}}),Wrapper9=styled.div(withReset,({theme})=>({...getBlockBackgroundStyle(theme),margin:"25px 0 40px",padding:"30px 20px"})),Typeset=({fontFamily,fontSizes,fontWeight,sampleText,...props})=>React17.createElement(Wrapper9,{...props,className:"docblock-typeset sb-unstyled"},fontSizes.map(size=>React17.createElement(TypeSpecimen,{key:size},React17.createElement(Label4,null,size),React17.createElement(Sample,{style:{fontFamily,fontSize:size,fontWeight,lineHeight:1.2}},sampleText||"Was he a beast if music could move him so?"))));var ItemTitle=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,color:theme.color.defaultText})),ItemSubtitle=styled.div(({theme})=>({color:theme.base==="light"?transparentize(.2,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),ItemDescription=styled.div({flex:"0 0 30%",lineHeight:"20px",marginTop:5}),SwatchLabel=styled.div(({theme})=>({flex:1,textAlign:"center",fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,lineHeight:1,overflow:"hidden",color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText),"> div":{display:"inline-block",overflow:"hidden",maxWidth:"100%",textOverflow:"ellipsis"},span:{display:"block",marginTop:2}})),SwatchLabels=styled.div({display:"flex",flexDirection:"row"}),Swatch=styled.div(({background})=>({position:"relative",flex:1,"&::before":{position:"absolute",top:0,left:0,width:"100%",height:"100%",background,content:'""'}})),SwatchColors=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),display:"flex",flexDirection:"row",height:50,marginBottom:5,overflow:"hidden",backgroundColor:"white",backgroundImage:"repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",backgroundClip:"padding-box"})),SwatchSpecimen=styled.div({display:"flex",flexDirection:"column",flex:1,position:"relative",marginBottom:30}),Swatches=styled.div({flex:1,display:"flex",flexDirection:"row"}),Item=styled.div({display:"flex",alignItems:"flex-start"}),ListName=styled.div({flex:"0 0 30%"}),ListSwatches=styled.div({flex:1}),ListHeading=styled.div(({theme})=>({display:"flex",flexDirection:"row",alignItems:"center",paddingBottom:20,fontWeight:theme.typography.weight.bold,color:theme.base==="light"?transparentize(.4,theme.color.defaultText):transparentize(.6,theme.color.defaultText)})),List=styled.div(({theme})=>({fontSize:theme.typography.size.s2,lineHeight:"20px",display:"flex",flexDirection:"column"}));function renderSwatch(color,index){return React17.createElement(Swatch,{key:`${color}-${index}`,title:color,background:color})}function renderSwatchLabel(color,index,colorDescription){return React17.createElement(SwatchLabel,{key:`${color}-${index}`,title:color},React17.createElement("div",null,color,colorDescription&&React17.createElement("span",null,colorDescription)))}function renderSwatchSpecimen(colors){if(Array.isArray(colors))return React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,colors.map((color,index)=>renderSwatch(color,index))),React17.createElement(SwatchLabels,null,colors.map((color,index)=>renderSwatchLabel(color,index))));let swatchElements=[],labelElements=[];for(let colorKey in colors){let colorValue=colors[colorKey];swatchElements.push(renderSwatch(colorValue,swatchElements.length)),labelElements.push(renderSwatchLabel(colorKey,labelElements.length,colorValue));}return React17.createElement(SwatchSpecimen,null,React17.createElement(SwatchColors,null,swatchElements),React17.createElement(SwatchLabels,null,labelElements))}var ColorItem=({title,subtitle,colors})=>React17.createElement(Item,null,React17.createElement(ItemDescription,null,React17.createElement(ItemTitle,null,title),React17.createElement(ItemSubtitle,null,subtitle)),React17.createElement(Swatches,null,renderSwatchSpecimen(colors))),ColorPalette=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List,{...props,className:"docblock-colorpalette sb-unstyled"},React17.createElement(ListHeading,null,React17.createElement(ListName,null,"Name"),React17.createElement(ListSwatches,null,"Swatches")),children));var ItemLabel=styled.div(({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,color:theme.color.defaultText,marginLeft:10,lineHeight:1.2})),ItemSpecimen=styled.div(({theme})=>({...getBlockBackgroundStyle(theme),overflow:"hidden",height:40,width:40,display:"flex",alignItems:"center",justifyContent:"center",flex:"none","> img, > svg":{width:20,height:20}})),Item2=styled.div({display:"inline-flex",flexDirection:"row",alignItems:"center",flex:"0 1 calc(20% - 10px)",minWidth:120,margin:"0px 10px 30px 0"}),List2=styled.div({display:"flex",flexFlow:"row wrap"}),IconItem=({name,children})=>React17.createElement(Item2,null,React17.createElement(ItemSpecimen,null,children),React17.createElement(ItemLabel,null,name)),IconGallery=({children,...props})=>React17.createElement(ResetWrapper,null,React17.createElement(List2,{...props,className:"docblock-icongallery sb-unstyled"},children));var anchorBlockIdFromId=storyId=>`anchor--${storyId}`,Anchor=({storyId,children})=>React17.createElement("div",{id:anchorBlockIdFromId(storyId),className:"sb-anchor"},children);global&&global.__DOCS_CONTEXT__===void 0&&(global.__DOCS_CONTEXT__=createContext(null),global.__DOCS_CONTEXT__.displayName="DocsContext");var DocsContext=global?global.__DOCS_CONTEXT__:createContext(null);var useOf=(moduleExportOrType,validTypes)=>useContext(DocsContext).resolveOf(moduleExportOrType,validTypes);var titleCase=str=>str.split("-").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join(""),getComponentName=component=>{if(component)return typeof component=="string"?component.includes("-")?titleCase(component):component:component.__docgenInfo&&component.__docgenInfo.displayName?component.__docgenInfo.displayName:component.name};function scrollToElement(element,block="start"){element.scrollIntoView({behavior:"smooth",block,inline:"nearest"});}function 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){if(resolved.type==="component"){let{component:component2,projectAnnotations:{parameters:parameters2}}=resolved;return {argTypes:extractComponentArgTypes(component2,parameters2),parameters:parameters2,component:component2}}if(resolved.type==="meta"){let{preparedMeta:{argTypes:argTypes2,parameters:parameters2,component:component2,subcomponents:subcomponents2}}=resolved;return {argTypes:argTypes2,parameters:parameters2,component:component2,subcomponents:subcomponents2}}let{story:{argTypes,parameters,component,subcomponents}}=resolved;return {argTypes,parameters,component,subcomponents}}var ArgTypes=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolved=useOf(of||"meta"),{argTypes,parameters,component,subcomponents}=getArgTypesFromResolved(resolved),argTypesParameters=parameters.docs?.argTypes||{},include=props.include??argTypesParameters.include,exclude=props.exclude??argTypesParameters.exclude,sort=props.sort??argTypesParameters.sort,filteredArgTypes=filterArgTypes(argTypes,include,exclude);if(!(!!subcomponents&&Object.keys(subcomponents).length>0))return React17.createElement(ArgsTable,{rows:filteredArgTypes,sort});let mainComponentName=getComponentName(component),subcomponentTabs=Object.fromEntries(Object.entries(subcomponents).map(([key,comp])=>[key,{rows:filterArgTypes(extractComponentArgTypes(comp,parameters),include,exclude),sort}])),tabs={[mainComponentName]:{rows:filteredArgTypes,sort},...subcomponentTabs};return React17.createElement(TabbedArgsTable,{tabs,sort})};function argsHash(args){return stringify(args,{allowFunction:!1})}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id]:{...current[id],[hash]:{code:source,format:format2}}}));};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return (transformFromProps??sourceParameters.transform)?.(code,storyContext)||code},useSourceProps=(props,docsContext,sourceContext)=>{let story,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)story=docsContext.resolveOf(of,["story"]).story;else try{story=docsContext.storyById();}catch{}let sourceParameters=story?.parameters?.docs?.source||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;if(!code&&!story)return {error:"Oh no! The source is not available."};if(code)return {code,format:format2,language,dark};let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return format2=source.format??story.parameters.docs?.source?.format??!1,{code:getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform}),format:format2,language,dark}},Source2=props=>{let sourceContext=useContext(SourceContext),docsContext=useContext(DocsContext),sourceProps=useSourceProps(props,docsContext,sourceContext);return React17.createElement(Source,{...sourceProps})};function useStory(storyId,context){let stories=useStories([storyId],context);return stories&&stories[0]}function useStories(storyIds,context){let[storiesById,setStories]=useState({});return useEffect(()=>{Promise.all(storyIds.map(async storyId=>{let story=await context.loadStory(storyId);setStories(current=>current[storyId]===story?current:{...current,[storyId]:story});}));}),storyIds.map(storyId=>{if(storiesById[storyId])return storiesById[storyId];try{return context.storyById(storyId)}catch{return null}})}var getStoryId2=(props,context)=>{let{of,meta}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");return meta&&context.referenceMeta(meta,!1),context.resolveOf(of||"story",["story"]).story.id},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;if(props.inline??storyParameters.inline??!1){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??"100px";return {story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=useContext(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return React17.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?React17.createElement(Story,{...storyProps}):null};var Canvas=props=>{let docsContext=useContext(DocsContext),sourceContext=useContext(SourceContext),{of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{story}=useOf(of||"story",["story"]),sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext),layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var useArgs=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};function extractComponentArgTypes2(component,parameters){let{extractArgTypes}=parameters.docs||{};if(!extractArgTypes)throw new Error("Args unsupported. See Args documentation for your framework.");return extractArgTypes(component)}var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes,component,subcomponents}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs(story,context),[globals]=useGlobals(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);if(!(!!subcomponents&&Object.keys(subcomponents).length>0))return Object.keys(filteredArgTypes).length>0||Object.keys(args).length>0?React17.createElement(ArgsTable,{rows:filteredArgTypes,sort,args,globals,updateArgs,resetArgs}):null;let mainComponentName=getComponentName(component),subcomponentTabs=Object.fromEntries(Object.entries(subcomponents).map(([key,comp])=>[key,{rows:filterArgTypes(extractComponentArgTypes2(comp,parameters),include,exclude),sort}])),tabs={[mainComponentName]:{rows:filteredArgTypes,sort},...subcomponentTabs};return React17.createElement(TabbedArgsTable,{tabs,sort,args,globals,updateArgs,resetArgs})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"text",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);return !href||target==="_blank"||/^https?:\/\//.test(href)?React17.createElement(A,{...props}):href.startsWith("#")?React17.createElement(AnchorInPage,{hash:href},children):React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17.createElement(LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
-+var Wrapper = styled.div(withReset, ({theme}) => ({
-+    backgroundColor:
-+      theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
-+    borderRadius: theme.appBorderRadius,
-+    border: `1px dashed ${theme.appBorderColor}`,
-+    display: 'flex',
-+    alignItems: 'center',
-+    justifyContent: 'center',
-+    padding: 20,
-+    margin: '25px 0 40px',
-+    color: transparentize(0.3, theme.color.defaultText),
-+    fontSize: theme.typography.size.s2,
-+  })),
-+  EmptyBlock = (props) =>
-+    React17.createElement(Wrapper, {
-+      ...props,
-+      className: 'docblock-emptyblock sb-unstyled',
-+    });
-+var StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({theme}) => ({
-+  fontSize: `${theme.typography.size.s2 - 1}px`,
-+  lineHeight: '19px',
-+  margin: '25px 0 40px',
-+  borderRadius: theme.appBorderRadius,
-+  boxShadow:
-+    theme.base === 'light'
-+      ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+      : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+  'pre.prismjs': {padding: 20, background: 'inherit'},
-+}));
-+var SourceSkeletonWrapper = styled.div(({theme}) => ({
-+    background: theme.background.content,
-+    borderRadius: theme.appBorderRadius,
-+    border: `1px solid ${theme.appBorderColor}`,
-+    boxShadow:
-+      theme.base === 'light'
-+        ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+        : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+    margin: '25px 0 40px',
-+    padding: '20px 20px 20px 22px',
-+  })),
-+  SourceSkeletonPlaceholder = styled.div(({theme}) => ({
-+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-+    background: theme.appBorderColor,
-+    height: 17,
-+    marginTop: 1,
-+    width: '60%',
-+    [`&:first-child${ignoreSsrWarning}`]: {margin: 0},
-+  })),
-+  SourceSkeleton = () =>
-+    React17.createElement(
-+      SourceSkeletonWrapper,
-+      null,
-+      React17.createElement(SourceSkeletonPlaceholder, null),
-+      React17.createElement(SourceSkeletonPlaceholder, {style: {width: '80%'}}),
-+      React17.createElement(SourceSkeletonPlaceholder, {style: {width: '30%'}}),
-+      React17.createElement(SourceSkeletonPlaceholder, {style: {width: '80%'}})
-+    ),
-+  Source = ({
-+    isLoading,
-+    error,
-+    language,
-+    code,
-+    dark,
-+    format: format2 = !1,
-+    ...rest
-+  }) => {
-+    let {typography} = useTheme();
-+    if (isLoading) return React17.createElement(SourceSkeleton, null);
-+    if (error) return React17.createElement(EmptyBlock, null, error);
-+    let syntaxHighlighter = React17.createElement(
-+      StyledSyntaxHighlighter,
-+      {
-+        bordered: !0,
-+        copyable: !0,
-+        format: format2,
-+        language,
-+        className: 'docblock-source sb-unstyled',
-+        ...rest,
-+      },
-+      code
-+    );
-+    if (typeof dark > 'u') return syntaxHighlighter;
-+    let overrideTheme = dark ? themes.dark : themes.light;
-+    return React17.createElement(
-+      ThemeProvider,
-+      {
-+        theme: convert({
-+          ...overrideTheme,
-+          fontCode: typography.fonts.mono,
-+          fontBase: typography.fonts.base,
-+        }),
-+      },
-+      syntaxHighlighter
-+    );
-+  };
-+var toGlobalSelector = (element) =>
-+    `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,
-+  breakpoint = 600,
-+  Title = styled.h1(withReset, ({theme}) => ({
-+    color: theme.color.defaultText,
-+    fontSize: theme.typography.size.m3,
-+    fontWeight: theme.typography.weight.bold,
-+    lineHeight: '32px',
-+    [`@media (min-width: ${breakpoint}px)`]: {
-+      fontSize: theme.typography.size.l1,
-+      lineHeight: '36px',
-+      marginBottom: '16px',
-+    },
-+  })),
-+  Subtitle = styled.h2(withReset, ({theme}) => ({
-+    fontWeight: theme.typography.weight.regular,
-+    fontSize: theme.typography.size.s3,
-+    lineHeight: '20px',
-+    borderBottom: 'none',
-+    marginBottom: 15,
-+    [`@media (min-width: ${breakpoint}px)`]: {
-+      fontSize: theme.typography.size.m1,
-+      lineHeight: '28px',
-+      marginBottom: 24,
-+    },
-+    color: transparentize(0.25, theme.color.defaultText),
-+  })),
-+  DocsContent = styled.div(({theme}) => {
-+    let reset = {
-+        fontFamily: theme.typography.fonts.base,
-+        fontSize: theme.typography.size.s3,
-+        margin: 0,
-+        WebkitFontSmoothing: 'antialiased',
-+        MozOsxFontSmoothing: 'grayscale',
-+        WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-+        WebkitOverflowScrolling: 'touch',
-+      },
-+      headers = {
-+        margin: '20px 0 8px',
-+        padding: 0,
-+        cursor: 'text',
-+        position: 'relative',
-+        color: theme.color.defaultText,
-+        '&:first-of-type': {marginTop: 0, paddingTop: 0},
-+        '&:hover a.anchor': {textDecoration: 'none'},
-+        '& code': {fontSize: 'inherit'},
-+      },
-+      code = {
-+        lineHeight: 1,
-+        margin: '0 2px',
-+        padding: '3px 5px',
-+        whiteSpace: 'nowrap',
-+        borderRadius: 3,
-+        fontSize: theme.typography.size.s2 - 1,
-+        border:
-+          theme.base === 'light'
-+            ? `1px solid ${theme.color.mediumlight}`
-+            : `1px solid ${theme.color.darker}`,
-+        color:
-+          theme.base === 'light'
-+            ? transparentize(0.1, theme.color.defaultText)
-+            : transparentize(0.3, theme.color.defaultText),
-+        backgroundColor:
-+          theme.base === 'light' ? theme.color.lighter : theme.color.border,
-+      };
-+    return {
-+      maxWidth: 1e3,
-+      width: '100%',
-+      [toGlobalSelector('a')]: {
-+        ...reset,
-+        fontSize: 'inherit',
-+        lineHeight: '24px',
-+        color: theme.color.secondary,
-+        textDecoration: 'none',
-+        '&.absent': {color: '#cc0000'},
-+        '&.anchor': {
-+          display: 'block',
-+          paddingLeft: 30,
-+          marginLeft: -30,
-+          cursor: 'pointer',
-+          position: 'absolute',
-+          top: 0,
-+          left: 0,
-+          bottom: 0,
-+        },
-+      },
-+      [toGlobalSelector('blockquote')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        borderLeft: `4px solid ${theme.color.medium}`,
-+        padding: '0 15px',
-+        color: theme.color.dark,
-+        '& > :first-of-type': {marginTop: 0},
-+        '& > :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('div')]: reset,
-+      [toGlobalSelector('dl')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        padding: 0,
-+        '& dt': {
-+          fontSize: '14px',
-+          fontWeight: 'bold',
-+          fontStyle: 'italic',
-+          padding: 0,
-+          margin: '16px 0 4px',
-+        },
-+        '& dt:first-of-type': {padding: 0},
-+        '& dt > :first-of-type': {marginTop: 0},
-+        '& dt > :last-child': {marginBottom: 0},
-+        '& dd': {margin: '0 0 16px', padding: '0 15px'},
-+        '& dd > :first-of-type': {marginTop: 0},
-+        '& dd > :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('h1')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.l1}px`,
-+        fontWeight: theme.typography.weight.bold,
-+      },
-+      [toGlobalSelector('h2')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.m2}px`,
-+        paddingBottom: 4,
-+        borderBottom: `1px solid ${theme.appBorderColor}`,
-+      },
-+      [toGlobalSelector('h3')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.m1}px`,
-+        fontWeight: theme.typography.weight.bold,
-+      },
-+      [toGlobalSelector('h4')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s3}px`,
-+      },
-+      [toGlobalSelector('h5')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s2}px`,
-+      },
-+      [toGlobalSelector('h6')]: {
-+        ...reset,
-+        ...headers,
-+        fontSize: `${theme.typography.size.s2}px`,
-+        color: theme.color.dark,
-+      },
-+      [toGlobalSelector('hr')]: {
-+        border: '0 none',
-+        borderTop: `1px solid ${theme.appBorderColor}`,
-+        height: 4,
-+        padding: 0,
-+      },
-+      [toGlobalSelector('img')]: {maxWidth: '100%'},
-+      [toGlobalSelector('li')]: {
-+        ...reset,
-+        fontSize: theme.typography.size.s2,
-+        color: theme.color.defaultText,
-+        lineHeight: '24px',
-+        '& + li': {marginTop: '.25em'},
-+        '& ul, & ol': {marginTop: '.25em', marginBottom: 0},
-+        '& code': code,
-+      },
-+      [toGlobalSelector('ol')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        paddingLeft: 30,
-+        '& :first-of-type': {marginTop: 0},
-+        '& :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('p')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        fontSize: theme.typography.size.s2,
-+        lineHeight: '24px',
-+        color: theme.color.defaultText,
-+        '& code': code,
-+      },
-+      [toGlobalSelector('pre')]: {
-+        ...reset,
-+        fontFamily: theme.typography.fonts.mono,
-+        WebkitFontSmoothing: 'antialiased',
-+        MozOsxFontSmoothing: 'grayscale',
-+        lineHeight: '18px',
-+        padding: '11px 1rem',
-+        whiteSpace: 'pre-wrap',
-+        color: 'inherit',
-+        borderRadius: 3,
-+        margin: '1rem 0',
-+        '&:not(.prismjs)': {
-+          background: 'transparent',
-+          border: 'none',
-+          borderRadius: 0,
-+          padding: 0,
-+          margin: 0,
-+        },
-+        '& pre, &.prismjs': {
-+          padding: 15,
-+          margin: 0,
-+          whiteSpace: 'pre-wrap',
-+          color: 'inherit',
-+          fontSize: '13px',
-+          lineHeight: '19px',
-+          code: {color: 'inherit', fontSize: 'inherit'},
-+        },
-+        '& code': {whiteSpace: 'pre'},
-+        '& code, & tt': {border: 'none'},
-+      },
-+      [toGlobalSelector('span')]: {
-+        ...reset,
-+        '&.frame': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          '& > span': {
-+            border: `1px solid ${theme.color.medium}`,
-+            display: 'block',
-+            float: 'left',
-+            overflow: 'hidden',
-+            margin: '13px 0 0',
-+            padding: 7,
-+            width: 'auto',
-+          },
-+          '& span img': {display: 'block', float: 'left'},
-+          '& span span': {
-+            clear: 'both',
-+            color: theme.color.darkest,
-+            display: 'block',
-+            padding: '5px 0 0',
-+          },
-+        },
-+        '&.align-center': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          clear: 'both',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px auto 0',
-+            textAlign: 'center',
-+          },
-+          '& span img': {margin: '0 auto', textAlign: 'center'},
-+        },
-+        '&.align-right': {
-+          display: 'block',
-+          overflow: 'hidden',
-+          clear: 'both',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px 0 0',
-+            textAlign: 'right',
-+          },
-+          '& span img': {margin: 0, textAlign: 'right'},
-+        },
-+        '&.float-left': {
-+          display: 'block',
-+          marginRight: 13,
-+          overflow: 'hidden',
-+          float: 'left',
-+          '& span': {margin: '13px 0 0'},
-+        },
-+        '&.float-right': {
-+          display: 'block',
-+          marginLeft: 13,
-+          overflow: 'hidden',
-+          float: 'right',
-+          '& > span': {
-+            display: 'block',
-+            overflow: 'hidden',
-+            margin: '13px auto 0',
-+            textAlign: 'right',
-+          },
-+        },
-+      },
-+      [toGlobalSelector('table')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        fontSize: theme.typography.size.s2,
-+        lineHeight: '24px',
-+        padding: 0,
-+        borderCollapse: 'collapse',
-+        '& tr': {
-+          borderTop: `1px solid ${theme.appBorderColor}`,
-+          backgroundColor: theme.appContentBg,
-+          margin: 0,
-+          padding: 0,
-+        },
-+        '& tr:nth-of-type(2n)': {
-+          backgroundColor:
-+            theme.base === 'dark' ? theme.color.darker : theme.color.lighter,
-+        },
-+        '& tr th': {
-+          fontWeight: 'bold',
-+          color: theme.color.defaultText,
-+          border: `1px solid ${theme.appBorderColor}`,
-+          margin: 0,
-+          padding: '6px 13px',
-+        },
-+        '& tr td': {
-+          border: `1px solid ${theme.appBorderColor}`,
-+          color: theme.color.defaultText,
-+          margin: 0,
-+          padding: '6px 13px',
-+        },
-+        '& tr th :first-of-type, & tr td :first-of-type': {marginTop: 0},
-+        '& tr th :last-child, & tr td :last-child': {marginBottom: 0},
-+      },
-+      [toGlobalSelector('ul')]: {
-+        ...reset,
-+        margin: '16px 0',
-+        paddingLeft: 30,
-+        '& :first-of-type': {marginTop: 0},
-+        '& :last-child': {marginBottom: 0},
-+        listStyle: 'disc',
-+      },
-+    };
-+  }),
-+  DocsWrapper = styled.div(({theme}) => ({
-+    background: theme.background.content,
-+    display: 'flex',
-+    justifyContent: 'center',
-+    padding: '4rem 20px',
-+    minHeight: '100vh',
-+    boxSizing: 'border-box',
-+    gap: '3rem',
-+    [`@media (min-width: ${breakpoint}px)`]: {},
-+  })),
-+  DocsPageWrapper = ({children, toc}) =>
-+    React17.createElement(
-+      DocsWrapper,
-+      {className: 'sbdocs sbdocs-wrapper'},
-+      React17.createElement(
-+        DocsContent,
-+        {className: 'sbdocs sbdocs-content'},
-+        children
-+      ),
-+      toc
-+    );
-+var getBlockBackgroundStyle = (theme) => ({
-+  borderRadius: theme.appBorderRadius,
-+  background: theme.background.content,
-+  boxShadow:
-+    theme.base === 'light'
-+      ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-+      : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-+  border: `1px solid ${theme.appBorderColor}`,
-+});
-+var Bar = styled(FlexBar)({
-+    position: 'absolute',
-+    left: 0,
-+    right: 0,
-+    top: 0,
-+    transition: 'transform .2s linear',
-+  }),
-+  Wrapper2 = styled.div({display: 'flex', alignItems: 'center', gap: 4}),
-+  IconPlaceholder = styled.div(({theme}) => ({
-+    width: 14,
-+    height: 14,
-+    borderRadius: 2,
-+    margin: '0 7px',
-+    backgroundColor: theme.appBorderColor,
-+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-+  })),
-+  Toolbar = ({isLoading, storyId, baseUrl, zoom, resetZoom, ...rest}) =>
-+    React17.createElement(
-+      Bar,
-+      {...rest},
-+      React17.createElement(
-+        Wrapper2,
-+        {key: 'left'},
-+        isLoading
-+          ? [1, 2, 3].map((key) =>
-+              React17.createElement(IconPlaceholder, {key})
-+            )
-+          : React17.createElement(
-+              React17.Fragment,
-+              null,
-+              React17.createElement(
-+                IconButton,
-+                {
-+                  key: 'zoomin',
-+                  onClick: (e) => {
-+                    e.preventDefault(), zoom(0.8);
-+                  },
-+                  title: 'Zoom in',
-+                },
-+                React17.createElement(ZoomIcon, null)
-+              ),
-+              React17.createElement(
-+                IconButton,
-+                {
-+                  key: 'zoomout',
-+                  onClick: (e) => {
-+                    e.preventDefault(), zoom(1.25);
-+                  },
-+                  title: 'Zoom out',
-+                },
-+                React17.createElement(ZoomOutIcon, null)
-+              ),
-+              React17.createElement(
-+                IconButton,
-+                {
-+                  key: 'zoomreset',
-+                  onClick: (e) => {
-+                    e.preventDefault(), resetZoom();
-+                  },
-+                  title: 'Reset zoom',
-+                },
-+                React17.createElement(ZoomResetIcon, null)
-+              )
-+            )
-+      )
-+    );
-+var ZoomContext = createContext({scale: 1});
-+var {window: globalWindow} = global,
-+  IFrame = class extends Component {
-+    constructor() {
-+      super(...arguments);
-+      this.iframe = null;
-+    }
-+    componentDidMount() {
-+      let {id} = this.props;
-+      this.iframe = globalWindow.document.getElementById(id);
-+    }
-+    shouldComponentUpdate(nextProps) {
-+      let {scale} = nextProps;
-+      return (
-+        scale !== this.props.scale &&
-+          this.setIframeBodyStyle({
-+            width: `${scale * 100}%`,
-+            height: `${scale * 100}%`,
-+            transform: `scale(${1 / scale})`,
-+            transformOrigin: 'top left',
-+          }),
-+        !1
-+      );
-+    }
-+    setIframeBodyStyle(style) {
-+      return Object.assign(this.iframe.contentDocument.body.style, style);
-+    }
-+    render() {
-+      let {id, title, src, allowFullScreen, scale, ...rest} = this.props;
-+      return React17.createElement('iframe', {
-+        id,
-+        title,
-+        src,
-+        ...(allowFullScreen ? {allow: 'fullscreen'} : {}),
-+        loading: 'lazy',
-+        ...rest,
-+      });
-+    }
-+  };
-+var {PREVIEW_URL} = global,
-+  BASE_URL = PREVIEW_URL || 'iframe.html',
-+  storyBlockIdFromId = ({story, primary}) =>
-+    `story--${story.id}${primary ? '--primary' : ''}`,
-+  InlineStory = (props) => {
-+    let storyRef = useRef(),
-+      [showLoader, setShowLoader] = useState(!0),
-+      [error, setError] = useState(),
-+      {story, height, autoplay, forceInitialArgs, renderStoryToElement} = props;
-+    return (
-+      useEffect(() => {
-+        if (!(story && storyRef.current)) return () => {};
-+        let element = storyRef.current,
-+          cleanup = renderStoryToElement(
-+            story,
-+            element,
-+            {
-+              showMain: () => {},
-+              showError: ({title, description}) =>
-+                setError(new Error(`${title} - ${description}`)),
-+              showException: (err) => setError(err),
-+            },
-+            {autoplay, forceInitialArgs}
-+          );
-+        return (
-+          setShowLoader(!1),
-+          () => {
-+            Promise.resolve().then(() => cleanup());
-+          }
-+        );
-+      }, [autoplay, renderStoryToElement, story]),
-+      error
-+        ? React17.createElement(
-+            'pre',
-+            null,
-+            React17.createElement(ErrorFormatter, {error})
-+          )
-+        : React17.createElement(
-+            React17.Fragment,
-+            null,
-+            height
-+              ? React17.createElement(
-+                  'style',
-+                  null,
-+                  `#${storyBlockIdFromId(props)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`
-+                )
-+              : null,
-+            showLoader && React17.createElement(StorySkeleton, null),
-+            React17.createElement('div', {
-+              ref: storyRef,
-+              id: `${storyBlockIdFromId(props)}-inner`,
-+              'data-name': story.name,
-+            })
-+          )
-+    );
-+  },
-+  IFrameStory = ({story, height = '500px'}) =>
-+    React17.createElement(
-+      'div',
-+      {style: {width: '100%', height}},
-+      React17.createElement(ZoomContext.Consumer, null, ({scale}) =>
-+        React17.createElement(IFrame, {
-+          key: 'iframe',
-+          id: `iframe--${story.id}`,
-+          title: story.name,
-+          src: getStoryHref(BASE_URL, story.id, {viewMode: 'story'}),
-+          allowFullScreen: !0,
-+          scale,
-+          style: {width: '100%', height: '100%', border: '0 none'},
-+        })
-+      )
-+    ),
-+  Story = (props) => {
-+    let {inline} = props;
-+    return React17.createElement(
-+      'div',
-+      {
-+        id: storyBlockIdFromId(props),
-+        className: 'sb-story sb-unstyled',
-+        'data-story-block': 'true',
-+      },
-+      inline
-+        ? React17.createElement(InlineStory, {...props})
-+        : React17.createElement(IFrameStory, {...props})
-+    );
-+  },
-+  StorySkeleton = () => React17.createElement(Loader, null);
-+var ChildrenContainer = styled.div(
-+    ({isColumn, columns, layout}) => ({
-+      display: isColumn || !columns ? 'block' : 'flex',
-+      position: 'relative',
-+      flexWrap: 'wrap',
-+      overflow: 'auto',
-+      flexDirection: isColumn ? 'column' : 'row',
-+      '& .innerZoomElementWrapper > *': isColumn
-+        ? {
-+            width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-+            display: 'block',
-+          }
-+        : {
-+            maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-+            display: 'inline-block',
-+          },
-+    }),
-+    ({layout = 'padded'}) =>
-+      layout === 'centered' || layout === 'padded'
-+        ? {
-+            padding: '30px 20px',
-+            '& .innerZoomElementWrapper > *': {
-+              width: 'auto',
-+              border: '10px solid transparent!important',
-+            },
-+          }
-+        : {},
-+    ({layout = 'padded'}) =>
-+      layout === 'centered'
-+        ? {
-+            display: 'flex',
-+            justifyContent: 'center',
-+            justifyItems: 'center',
-+            alignContent: 'center',
-+            alignItems: 'center',
-+          }
-+        : {},
-+    ({columns}) =>
-+      columns && columns > 1
-+        ? {
-+            '.innerZoomElementWrapper > *': {
-+              minWidth: `calc(100% / ${columns} - 20px)`,
-+            },
-+          }
-+        : {}
-+  ),
-+  StyledSource = styled(Source)(({theme}) => ({
-+    margin: 0,
-+    borderTopLeftRadius: 0,
-+    borderTopRightRadius: 0,
-+    borderBottomLeftRadius: theme.appBorderRadius,
-+    borderBottomRightRadius: theme.appBorderRadius,
-+    border: 'none',
-+    background:
-+      theme.base === 'light'
-+        ? 'rgba(0, 0, 0, 0.85)'
-+        : darken(0.05, theme.background.content),
-+    color: theme.color.lightest,
-+    button: {
-+      background:
-+        theme.base === 'light'
-+          ? 'rgba(0, 0, 0, 0.85)'
-+          : darken(0.05, theme.background.content),
-+    },
-+  })),
-+  PreviewContainer = styled.div(
-+    ({theme, withSource, isExpanded}) => ({
-+      position: 'relative',
-+      overflow: 'hidden',
-+      margin: '25px 0 40px',
-+      ...getBlockBackgroundStyle(theme),
-+      borderBottomLeftRadius: withSource && isExpanded && 0,
-+      borderBottomRightRadius: withSource && isExpanded && 0,
-+      borderBottomWidth: isExpanded && 0,
-+      'h3 + &': {marginTop: '16px'},
-+    }),
-+    ({withToolbar}) => withToolbar && {paddingTop: 40}
-+  ),
-+  getSource = (withSource, expanded, setExpanded) => {
-+    switch (!0) {
-+      case !!(withSource && withSource.error):
-+        return {
-+          source: null,
-+          actionItem: {
-+            title: 'No code available',
-+            className: 'docblock-code-toggle docblock-code-toggle--disabled',
-+            disabled: !0,
-+            onClick: () => setExpanded(!1),
-+          },
-+        };
-+      case expanded:
-+        return {
-+          source: React17.createElement(StyledSource, {
-+            ...withSource,
-+            dark: !0,
-+          }),
-+          actionItem: {
-+            title: 'Hide code',
-+            className: 'docblock-code-toggle docblock-code-toggle--expanded',
-+            onClick: () => setExpanded(!1),
-+          },
-+        };
-+      default:
-+        return {
-+          source: React17.createElement(StyledSource, {
-+            ...withSource,
-+            dark: !0,
-+          }),
-+          actionItem: {
-+            title: 'Show code',
-+            className: 'docblock-code-toggle',
-+            onClick: () => setExpanded(!0),
-+          },
-+        };
-+    }
-+  };
-+function getStoryId(children) {
-+  if (Children.count(children) === 1) {
-+    let elt = children;
-+    if (elt.props) return elt.props.id;
-+  }
-+  return null;
-+}
-+var PositionedToolbar = styled(Toolbar)({
-+    position: 'absolute',
-+    top: 0,
-+    left: 0,
-+    right: 0,
-+    height: 40,
-+  }),
-+  Relative = styled.div({overflow: 'hidden', position: 'relative'}),
-+  Preview = ({
-+    isLoading,
-+    isColumn,
-+    columns,
-+    children,
-+    withSource,
-+    withToolbar = !1,
-+    isExpanded = !1,
-+    additionalActions,
-+    className,
-+    layout = 'padded',
-+    ...props
-+  }) => {
-+    let [expanded, setExpanded] = useState(isExpanded),
-+      {source, actionItem} = getSource(withSource, expanded, setExpanded),
-+      [scale, setScale] = useState(1),
-+      previewClasses = [className].concat([
-+        'sbdocs',
-+        'sbdocs-preview',
-+        'sb-unstyled',
-+      ]),
-+      defaultActionItems = withSource ? [actionItem] : [],
-+      [additionalActionItems, setAdditionalActionItems] = useState(
-+        additionalActions ? [...additionalActions] : []
-+      ),
-+      actionItems = [...defaultActionItems, ...additionalActionItems],
-+      {window: globalWindow4} = global,
-+      copyToClipboard = useCallback(async (text) => {
-+        let {createCopyToClipboardFunction} = await import(
-+          '@storybook/components'
-+        );
-+        createCopyToClipboardFunction();
-+      }, []),
-+      onCopyCapture = (e) => {
-+        let selection = globalWindow4.getSelection();
-+        (selection && selection.type === 'Range') ||
-+          (e.preventDefault(),
-+          additionalActionItems.filter((item) => item.title === 'Copied')
-+            .length === 0 &&
-+            copyToClipboard(source.props.code).then(() => {
-+              setAdditionalActionItems([
-+                ...additionalActionItems,
-+                {title: 'Copied', onClick: () => {}},
-+              ]),
-+                globalWindow4.setTimeout(
-+                  () =>
-+                    setAdditionalActionItems(
-+                      additionalActionItems.filter(
-+                        (item) => item.title !== 'Copied'
-+                      )
-+                    ),
-+                  1500
-+                );
-+            }));
-+      };
-+    return React17.createElement(
-+      PreviewContainer,
-+      {withSource, withToolbar, ...props, className: previewClasses.join(' ')},
-+      withToolbar &&
-+        React17.createElement(PositionedToolbar, {
-+          isLoading,
-+          border: !0,
-+          zoom: (z) => setScale(scale * z),
-+          resetZoom: () => setScale(1),
-+          storyId: getStoryId(children),
-+          baseUrl: './iframe.html',
-+        }),
-+      React17.createElement(
-+        ZoomContext.Provider,
-+        {value: {scale}},
-+        React17.createElement(
-+          Relative,
-+          {className: 'docs-story', onCopyCapture: withSource && onCopyCapture},
-+          React17.createElement(
-+            ChildrenContainer,
-+            {isColumn: isColumn || !Array.isArray(children), columns, layout},
-+            React17.createElement(
-+              Zoom.Element,
-+              {scale},
-+              Array.isArray(children)
-+                ? children.map((child, i) =>
-+                    React17.createElement('div', {key: i}, child)
-+                  )
-+                : React17.createElement('div', null, children)
-+            )
-+          ),
-+          React17.createElement(ActionBar, {actionItems})
-+        )
-+      ),
-+      withSource && expanded && source
-+    );
-+  };
-+styled(Preview)(() => ({'.docs-story': {paddingTop: 32, paddingBottom: 40}}));
-+var Table = styled.table(({theme}) => ({
-+    '&&': {
-+      borderCollapse: 'collapse',
-+      borderSpacing: 0,
-+      border: 'none',
-+      tr: {border: 'none !important', background: 'none'},
-+      'td, th': {padding: 0, border: 'none', width: 'auto!important'},
-+      marginTop: 0,
-+      marginBottom: 0,
-+      'th:first-of-type, td:first-of-type': {paddingLeft: 0},
-+      'th:last-of-type, td:last-of-type': {paddingRight: 0},
-+      td: {
-+        paddingTop: 0,
-+        paddingBottom: 4,
-+        '&:not(:first-of-type)': {paddingLeft: 10, paddingRight: 0},
-+      },
-+      tbody: {boxShadow: 'none', border: 'none'},
-+      code: codeCommon({theme}),
-+      div: {span: {fontWeight: 'bold'}},
-+      '& code': {
-+        margin: 0,
-+        display: 'inline-block',
-+        fontSize: theme.typography.size.s1,
-+      },
-+    },
-+  })),
-+  ArgJsDoc = ({tags}) => {
-+    let params = (tags.params || []).filter((x) => x.description),
-+      hasDisplayableParams = params.length !== 0,
-+      hasDisplayableDeprecated = tags.deprecated != null,
-+      hasDisplayableReturns =
-+        tags.returns != null && tags.returns.description != null;
-+    return !hasDisplayableParams &&
-+      !hasDisplayableReturns &&
-+      !hasDisplayableDeprecated
-+      ? null
-+      : React17.createElement(
-+          React17.Fragment,
-+          null,
-+          React17.createElement(
-+            Table,
-+            null,
-+            React17.createElement(
-+              'tbody',
-+              null,
-+              hasDisplayableDeprecated &&
-+                React17.createElement(
-+                  'tr',
-+                  {key: 'deprecated'},
-+                  React17.createElement(
-+                    'td',
-+                    {colSpan: 2},
-+                    React17.createElement('strong', null, 'Deprecated'),
-+                    ': ',
-+                    tags.deprecated.toString()
-+                  )
-+                ),
-+              hasDisplayableParams &&
-+                params.map((x) =>
-+                  React17.createElement(
-+                    'tr',
-+                    {key: x.name},
-+                    React17.createElement(
-+                      'td',
-+                      null,
-+                      React17.createElement('code', null, x.name)
-+                    ),
-+                    React17.createElement('td', null, x.description)
-+                  )
-+                ),
-+              hasDisplayableReturns &&
-+                React17.createElement(
-+                  'tr',
-+                  {key: 'returns'},
-+                  React17.createElement(
-+                    'td',
-+                    null,
-+                    React17.createElement('code', null, 'Returns')
-+                  ),
-+                  React17.createElement('td', null, tags.returns.description)
-+                )
-+            )
-+          )
-+        );
-+  };
-+var ITEMS_BEFORE_EXPANSION = 8,
-+  Summary = styled.div(({isExpanded}) => ({
-+    display: 'flex',
-+    flexDirection: isExpanded ? 'column' : 'row',
-+    flexWrap: 'wrap',
-+    alignItems: 'flex-start',
-+    marginBottom: '-4px',
-+    minWidth: 100,
-+  })),
-+  Text = styled.span(codeCommon, ({theme, simple = !1}) => ({
-+    flex: '0 0 auto',
-+    fontFamily: theme.typography.fonts.mono,
-+    fontSize: theme.typography.size.s1,
-+    wordBreak: 'break-word',
-+    whiteSpace: 'normal',
-+    maxWidth: '100%',
-+    margin: 0,
-+    marginRight: '4px',
-+    marginBottom: '4px',
-+    paddingTop: '2px',
-+    paddingBottom: '2px',
-+    lineHeight: '13px',
-+    ...(simple && {
-+      background: 'transparent',
-+      border: '0 none',
-+      paddingLeft: 0,
-+    }),
-+  })),
-+  ExpandButton = styled.button(({theme}) => ({
-+    fontFamily: theme.typography.fonts.mono,
-+    color: theme.color.secondary,
-+    marginBottom: '4px',
-+    background: 'none',
-+    border: 'none',
-+  })),
-+  Expandable = styled.div(codeCommon, ({theme}) => ({
-+    fontFamily: theme.typography.fonts.mono,
-+    color: theme.color.secondary,
-+    fontSize: theme.typography.size.s1,
-+    margin: 0,
-+    whiteSpace: 'nowrap',
-+    display: 'flex',
-+    alignItems: 'center',
-+  })),
-+  Detail = styled.div(({theme, width}) => ({
-+    width,
-+    minWidth: 200,
-+    maxWidth: 800,
-+    padding: 15,
-+    fontFamily: theme.typography.fonts.mono,
-+    fontSize: theme.typography.size.s1,
-+    boxSizing: 'content-box',
-+    '& code': {padding: '0 !important'},
-+  })),
-+  ChevronUpIcon = styled(ChevronSmallUpIcon)({marginLeft: 4}),
-+  ChevronDownIcon = styled(ChevronSmallDownIcon)({marginLeft: 4}),
-+  EmptyArg = () => React17.createElement('span', null, '-'),
-+  ArgText = ({text, simple}) => React17.createElement(Text, {simple}, text),
-+  calculateDetailWidth = memoize(1e3)((detail) => {
-+    let lines = detail.split(/\r?\n/);
-+    return `${Math.max(...lines.map((x) => x.length))}ch`;
-+  }),
-+  getSummaryItems = (summary) => {
-+    if (!summary) return [summary];
-+    let summaryItems = summary.split('|').map((value2) => value2.trim());
-+    return uniq(summaryItems);
-+  },
-+  renderSummaryItems = (summaryItems, isExpanded = !0) => {
-+    let items = summaryItems;
-+    return (
-+      isExpanded || (items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION)),
-+      items.map((item) =>
-+        React17.createElement(ArgText, {
-+          key: item,
-+          text: item === '' ? '""' : item,
-+        })
-+      )
-+    );
-+  },
-+  ArgSummary = ({value: value2, initialExpandedArgs}) => {
-+    let {summary, detail} = value2,
-+      [isOpen, setIsOpen] = useState(!1),
-+      [isExpanded, setIsExpanded] = useState(initialExpandedArgs || !1);
-+    if (summary == null) return null;
-+    let summaryAsString =
-+      typeof summary.toString == 'function' ? summary.toString() : summary;
-+    if (detail == null) {
-+      if (/[(){}[\]<>]/.test(summaryAsString))
-+        return React17.createElement(ArgText, {text: summaryAsString});
-+      let summaryItems = getSummaryItems(summaryAsString),
-+        itemsCount = summaryItems.length;
-+      return itemsCount > ITEMS_BEFORE_EXPANSION
-+        ? React17.createElement(
-+            Summary,
-+            {isExpanded},
-+            renderSummaryItems(summaryItems, isExpanded),
-+            React17.createElement(
-+              ExpandButton,
-+              {onClick: () => setIsExpanded(!isExpanded)},
-+              isExpanded
-+                ? 'Show less...'
-+                : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`
-+            )
-+          )
-+        : React17.createElement(
-+            Summary,
-+            null,
-+            renderSummaryItems(summaryItems)
-+          );
-+    }
-+    return React17.createElement(
-+      WithTooltipPure,
-+      {
-+        closeOnOutsideClick: !0,
-+        placement: 'bottom',
-+        visible: isOpen,
-+        onVisibleChange: (isVisible) => {
-+          setIsOpen(isVisible);
-+        },
-+        tooltip: React17.createElement(
-+          Detail,
-+          {width: calculateDetailWidth(detail)},
-+          React17.createElement(
-+            SyntaxHighlighter,
-+            {language: 'jsx', format: !1},
-+            detail
-+          )
-+        ),
-+      },
-+      React17.createElement(
-+        Expandable,
-+        {className: 'sbdocs-expandable'},
-+        React17.createElement('span', null, summaryAsString),
-+        isOpen
-+          ? React17.createElement(ChevronUpIcon, null)
-+          : React17.createElement(ChevronDownIcon, null)
-+      )
-+    );
-+  },
-+  ArgValue = ({value: value2, initialExpandedArgs}) =>
-+    value2 == null
-+      ? React17.createElement(EmptyArg, null)
-+      : React17.createElement(ArgSummary, {value: value2, initialExpandedArgs});
-+var Label = styled.label(({theme}) => ({
-+    lineHeight: '18px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    display: 'inline-block',
-+    position: 'relative',
-+    whiteSpace: 'nowrap',
-+    background: theme.boolean.background,
-+    borderRadius: '3em',
-+    padding: 1,
-+    '&[aria-disabled="true"]': {opacity: 0.5, input: {cursor: 'not-allowed'}},
-+    input: {
-+      appearance: 'none',
-+      width: '100%',
-+      height: '100%',
-+      position: 'absolute',
-+      left: 0,
-+      top: 0,
-+      margin: 0,
-+      padding: 0,
-+      border: 'none',
-+      background: 'transparent',
-+      cursor: 'pointer',
-+      borderRadius: '3em',
-+      '&:focus': {
-+        outline: 'none',
-+        boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
-+      },
-+    },
-+    span: {
-+      textAlign: 'center',
-+      fontSize: theme.typography.size.s1,
-+      fontWeight: theme.typography.weight.bold,
-+      lineHeight: '1',
-+      cursor: 'pointer',
-+      display: 'inline-block',
-+      padding: '7px 15px',
-+      transition: 'all 100ms ease-out',
-+      userSelect: 'none',
-+      borderRadius: '3em',
-+      color: transparentize(0.5, theme.color.defaultText),
-+      background: 'transparent',
-+      '&:hover': {
-+        boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`,
-+      },
-+      '&:active': {
-+        boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
-+        color: opacify(1, theme.appBorderColor),
-+      },
-+      '&:first-of-type': {paddingRight: 8},
-+      '&:last-of-type': {paddingLeft: 8},
-+    },
-+    'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':
-+      {
-+        background: theme.boolean.selectedBackground,
-+        boxShadow:
-+          theme.base === 'light'
-+            ? `${opacify(0.1, theme.appBorderColor)} 0 0 2px`
-+            : `${theme.appBorderColor} 0 0 0 1px`,
-+        color: theme.color.defaultText,
-+        padding: '7px 15px',
-+      },
-+  })),
-+  parse = (value2) => value2 === 'true',
-+  BooleanControl = ({
-+    name,
-+    value: value2,
-+    onChange,
-+    onBlur,
-+    onFocus,
-+    argType,
-+  }) => {
-+    let onSetFalse = useCallback(() => onChange(!1), [onChange]),
-+      readonly = !!argType?.table?.readonly;
-+    if (value2 === void 0)
-+      return React17.createElement(
-+        Button,
-+        {
-+          variant: 'outline',
-+          size: 'medium',
-+          id: getControlSetterButtonId(name),
-+          onClick: onSetFalse,
-+          disabled: readonly,
-+        },
-+        'Set boolean'
-+      );
-+    let controlId = getControlId(name),
-+      parsedValue = typeof value2 == 'string' ? parse(value2) : value2;
-+    return React17.createElement(
-+      Label,
-+      {'aria-disabled': readonly, htmlFor: controlId, 'aria-label': name},
-+      React17.createElement('input', {
-+        id: controlId,
-+        type: 'checkbox',
-+        onChange: (e) => onChange(e.target.checked),
-+        checked: parsedValue,
-+        role: 'switch',
-+        disabled: readonly,
-+        name,
-+        onBlur,
-+        onFocus,
-+      }),
-+      React17.createElement('span', {'aria-hidden': 'true'}, 'False'),
-+      React17.createElement('span', {'aria-hidden': 'true'}, 'True')
-+    );
-+  };
-+var parseDate = (value2) => {
-+    let [year, month, day] = value2.split('-'),
-+      result = new Date();
-+    return (
-+      result.setFullYear(
-+        parseInt(year, 10),
-+        parseInt(month, 10) - 1,
-+        parseInt(day, 10)
-+      ),
-+      result
-+    );
-+  },
-+  parseTime = (value2) => {
-+    let [hours, minutes] = value2.split(':'),
-+      result = new Date();
-+    return (
-+      result.setHours(parseInt(hours, 10)),
-+      result.setMinutes(parseInt(minutes, 10)),
-+      result
-+    );
-+  },
-+  formatDate = (value2) => {
-+    let date = new Date(value2),
-+      year = `000${date.getFullYear()}`.slice(-4),
-+      month = `0${date.getMonth() + 1}`.slice(-2),
-+      day = `0${date.getDate()}`.slice(-2);
-+    return `${year}-${month}-${day}`;
-+  },
-+  formatTime = (value2) => {
-+    let date = new Date(value2),
-+      hours = `0${date.getHours()}`.slice(-2),
-+      minutes = `0${date.getMinutes()}`.slice(-2);
-+    return `${hours}:${minutes}`;
-+  },
-+  FormInput = styled(Form.Input)(({readOnly}) => ({
-+    opacity: readOnly ? 0.5 : 1,
-+  })),
-+  FlexSpaced = styled.div(({theme}) => ({
-+    flex: 1,
-+    display: 'flex',
-+    input: {
-+      marginLeft: 10,
-+      flex: 1,
-+      height: 32,
-+      '&::-webkit-calendar-picker-indicator': {
-+        opacity: 0.5,
-+        height: 12,
-+        filter: theme.base === 'light' ? void 0 : 'invert(1)',
-+      },
-+    },
-+    'input:first-of-type': {marginLeft: 0, flexGrow: 4},
-+    'input:last-of-type': {flexGrow: 3},
-+  })),
-+  DateControl = ({name, value: value2, onChange, onFocus, onBlur, argType}) => {
-+    let [valid, setValid] = useState(!0),
-+      dateRef = useRef(),
-+      timeRef = useRef(),
-+      readonly = !!argType?.table?.readonly;
-+    useEffect(() => {
-+      valid !== !1 &&
-+        (dateRef &&
-+          dateRef.current &&
-+          (dateRef.current.value = formatDate(value2)),
-+        timeRef &&
-+          timeRef.current &&
-+          (timeRef.current.value = formatTime(value2)));
-+    }, [value2]);
-+    let onDateChange = (e) => {
-+        let parsed = parseDate(e.target.value),
-+          result = new Date(value2);
-+        result.setFullYear(
-+          parsed.getFullYear(),
-+          parsed.getMonth(),
-+          parsed.getDate()
-+        );
-+        let time = result.getTime();
-+        time && onChange(time), setValid(!!time);
-+      },
-+      onTimeChange = (e) => {
-+        let parsed = parseTime(e.target.value),
-+          result = new Date(value2);
-+        result.setHours(parsed.getHours()),
-+          result.setMinutes(parsed.getMinutes());
-+        let time = result.getTime();
-+        time && onChange(time), setValid(!!time);
-+      },
-+      controlId = getControlId(name);
-+    return React17.createElement(
-+      FlexSpaced,
-+      null,
-+      React17.createElement(FormInput, {
-+        type: 'date',
-+        max: '9999-12-31',
-+        ref: dateRef,
-+        id: `${controlId}-date`,
-+        name: `${controlId}-date`,
-+        readOnly: readonly,
-+        onChange: onDateChange,
-+        onFocus,
-+        onBlur,
-+      }),
-+      React17.createElement(FormInput, {
-+        type: 'time',
-+        id: `${controlId}-time`,
-+        name: `${controlId}-time`,
-+        ref: timeRef,
-+        onChange: onTimeChange,
-+        readOnly: readonly,
-+        onFocus,
-+        onBlur,
-+      }),
-+      valid ? null : React17.createElement('div', null, 'invalid')
-+    );
-+  };
-+var Wrapper3 = styled.label({display: 'flex'}),
-+  parse2 = (value2) => {
-+    let result = parseFloat(value2);
-+    return Number.isNaN(result) ? void 0 : result;
-+  },
-+  format = (value2) => (value2 != null ? String(value2) : ''),
-+  FormInput2 = styled(Form.Input)(({readOnly}) => ({
-+    opacity: readOnly ? 0.5 : 1,
-+  })),
-+  NumberControl = ({
-+    name,
-+    value: value2,
-+    onChange,
-+    min,
-+    max,
-+    step,
-+    onBlur,
-+    onFocus,
-+    argType,
-+  }) => {
-+    let [inputValue, setInputValue] = useState(
-+        typeof value2 == 'number' ? value2 : ''
-+      ),
-+      [forceVisible, setForceVisible] = useState(!1),
-+      [parseError, setParseError] = useState(null),
-+      readonly = !!argType?.table?.readonly,
-+      handleChange = useCallback(
-+        (event) => {
-+          setInputValue(event.target.value);
-+          let result = parseFloat(event.target.value);
-+          Number.isNaN(result)
-+            ? setParseError(
-+                new Error(`'${event.target.value}' is not a number`)
-+              )
-+            : (onChange(result), setParseError(null));
-+        },
-+        [onChange, setParseError]
-+      ),
-+      onForceVisible = useCallback(() => {
-+        setInputValue('0'), onChange(0), setForceVisible(!0);
-+      }, [setForceVisible]),
-+      htmlElRef = useRef(null);
-+    return (
-+      useEffect(() => {
-+        forceVisible && htmlElRef.current && htmlElRef.current.select();
-+      }, [forceVisible]),
-+      useEffect(() => {
-+        inputValue !== (typeof value2 == 'number' ? value2 : '') &&
-+          setInputValue(value2);
-+      }, [value2]),
-+      value2 === void 0
-+        ? React17.createElement(
-+            Button,
-+            {
-+              variant: 'outline',
-+              size: 'medium',
-+              id: getControlSetterButtonId(name),
-+              onClick: onForceVisible,
-+              disabled: readonly,
-+            },
-+            'Set number'
-+          )
-+        : React17.createElement(
-+            Wrapper3,
-+            null,
-+            React17.createElement(FormInput2, {
-+              ref: htmlElRef,
-+              id: getControlId(name),
-+              type: 'number',
-+              onChange: handleChange,
-+              size: 'flex',
-+              placeholder: 'Edit number...',
-+              value: inputValue,
-+              valid: parseError ? 'error' : null,
-+              autoFocus: forceVisible,
-+              readOnly: readonly,
-+              name,
-+              min,
-+              max,
-+              step,
-+              onFocus,
-+              onBlur,
-+            })
-+          )
-+    );
-+  };
-+var selectedKey = (value2, options) => {
-+    let entry =
-+      options && Object.entries(options).find(([_key, val]) => val === value2);
-+    return entry ? entry[0] : void 0;
-+  },
-+  selectedKeys = (value2, options) =>
-+    value2 && options
-+      ? Object.entries(options)
-+          .filter((entry) => value2.includes(entry[1]))
-+          .map((entry) => entry[0])
-+      : [],
-+  selectedValues = (keys, options) =>
-+    keys && options && keys.map((key) => options[key]);
-+var Wrapper4 = styled.div(
-+    ({isInline}) =>
-+      isInline
-+        ? {
-+            display: 'flex',
-+            flexWrap: 'wrap',
-+            alignItems: 'flex-start',
-+            label: {display: 'inline-flex', marginRight: 15},
-+          }
-+        : {label: {display: 'flex'}},
-+    (props) => {
-+      if (props['aria-readonly'] === 'true')
-+        return {input: {cursor: 'not-allowed'}};
-+    }
-+  ),
-+  Text2 = styled.span({'[aria-readonly=true] &': {opacity: 0.5}}),
-+  Label2 = styled.label({
-+    lineHeight: '20px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    '&:last-child': {marginBottom: 0},
-+    input: {margin: 0, marginRight: 6},
-+  }),
-+  CheckboxControl = ({
-+    name,
-+    options,
-+    value: value2,
-+    onChange,
-+    isInline,
-+    argType,
-+  }) => {
-+    if (!options)
-+      return (
-+        logger.warn(`Checkbox with no options: ${name}`),
-+        React17.createElement(React17.Fragment, null, '-')
-+      );
-+    let initial = selectedKeys(value2, options),
-+      [selected, setSelected] = useState(initial),
-+      readonly = !!argType?.table?.readonly,
-+      handleChange = (e) => {
-+        let option = e.target.value,
-+          updated = [...selected];
-+        updated.includes(option)
-+          ? updated.splice(updated.indexOf(option), 1)
-+          : updated.push(option),
-+          onChange(selectedValues(updated, options)),
-+          setSelected(updated);
-+      };
-+    useEffect(() => {
-+      setSelected(selectedKeys(value2, options));
-+    }, [value2]);
-+    let controlId = getControlId(name);
-+    return React17.createElement(
-+      Wrapper4,
-+      {'aria-readonly': readonly, isInline},
-+      Object.keys(options).map((key, index) => {
-+        let id = `${controlId}-${index}`;
-+        return React17.createElement(
-+          Label2,
-+          {key: id, htmlFor: id},
-+          React17.createElement('input', {
-+            type: 'checkbox',
-+            disabled: readonly,
-+            id,
-+            name: id,
-+            value: key,
-+            onChange: handleChange,
-+            checked: selected?.includes(key),
-+          }),
-+          React17.createElement(Text2, null, key)
-+        );
-+      })
-+    );
-+  };
-+var Wrapper5 = styled.div(
-+    ({isInline}) =>
-+      isInline
-+        ? {
-+            display: 'flex',
-+            flexWrap: 'wrap',
-+            alignItems: 'flex-start',
-+            label: {display: 'inline-flex', marginRight: 15},
-+          }
-+        : {label: {display: 'flex'}},
-+    (props) => {
-+      if (props['aria-readonly'] === 'true')
-+        return {input: {cursor: 'not-allowed'}};
-+    }
-+  ),
-+  Text3 = styled.span({'[aria-readonly=true] &': {opacity: 0.5}}),
-+  Label3 = styled.label({
-+    lineHeight: '20px',
-+    alignItems: 'center',
-+    marginBottom: 8,
-+    '&:last-child': {marginBottom: 0},
-+    input: {margin: 0, marginRight: 6},
-+  }),
-+  RadioControl = ({
-+    name,
-+    options,
-+    value: value2,
-+    onChange,
-+    isInline,
-+    argType,
-+  }) => {
-+    if (!options)
-+      return (
-+        logger.warn(`Radio with no options: ${name}`),
-+        React17.createElement(React17.Fragment, null, '-')
-+      );
-+    let selection = selectedKey(value2, options),
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return React17.createElement(
-+      Wrapper5,
-+      {'aria-readonly': readonly, isInline},
-+      Object.keys(options).map((key, index) => {
-+        let id = `${controlId}-${index}`;
-+        return React17.createElement(
-+          Label3,
-+          {key: id, htmlFor: id},
-+          React17.createElement('input', {
-+            type: 'radio',
-+            id,
-+            name: id,
-+            disabled: readonly,
-+            value: key,
-+            onChange: (e) => onChange(options[e.currentTarget.value]),
-+            checked: key === selection,
-+          }),
-+          React17.createElement(Text3, null, key)
-+        );
-+      })
-+    );
-+  };
-+var styleResets = {
-+    appearance: 'none',
-+    border: '0 none',
-+    boxSizing: 'inherit',
-+    display: ' block',
-+    margin: ' 0',
-+    background: 'transparent',
-+    padding: 0,
-+    fontSize: 'inherit',
-+    position: 'relative',
-+  },
-+  OptionsSelect = styled.select(styleResets, ({theme}) => ({
-+    boxSizing: 'border-box',
-+    position: 'relative',
-+    padding: '6px 10px',
-+    width: '100%',
-+    color: theme.input.color || 'inherit',
-+    background: theme.input.background,
-+    borderRadius: theme.input.borderRadius,
-+    boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-+    fontSize: theme.typography.size.s2 - 1,
-+    lineHeight: '20px',
-+    '&:focus': {
-+      boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-+      outline: 'none',
-+    },
-+    '&[disabled]': {cursor: 'not-allowed', opacity: 0.5},
-+    '::placeholder': {color: theme.textMutedColor},
-+    '&[multiple]': {
-+      overflow: 'auto',
-+      padding: 0,
-+      option: {
-+        display: 'block',
-+        padding: '6px 10px',
-+        marginLeft: 1,
-+        marginRight: 1,
-+      },
-+    },
-+  })),
-+  SelectWrapper = styled.span(({theme}) => ({
-+    display: 'inline-block',
-+    lineHeight: 'normal',
-+    overflow: 'hidden',
-+    position: 'relative',
-+    verticalAlign: 'top',
-+    width: '100%',
-+    svg: {
-+      position: 'absolute',
-+      zIndex: 1,
-+      pointerEvents: 'none',
-+      height: '12px',
-+      marginTop: '-6px',
-+      right: '12px',
-+      top: '50%',
-+      fill: theme.textMutedColor,
-+      path: {fill: theme.textMutedColor},
-+    },
-+  })),
-+  NO_SELECTION = 'Choose option...',
-+  SingleSelect = ({name, value: value2, options, onChange, argType}) => {
-+    let handleChange = (e) => {
-+        onChange(options[e.currentTarget.value]);
-+      },
-+      selection = selectedKey(value2, options) || NO_SELECTION,
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return React17.createElement(
-+      SelectWrapper,
-+      null,
-+      React17.createElement(ChevronSmallDownIcon, null),
-+      React17.createElement(
-+        OptionsSelect,
-+        {
-+          disabled: readonly,
-+          id: controlId,
-+          value: selection,
-+          onChange: handleChange,
-+        },
-+        React17.createElement(
-+          'option',
-+          {key: 'no-selection', disabled: !0},
-+          NO_SELECTION
-+        ),
-+        Object.keys(options).map((key) =>
-+          React17.createElement('option', {key, value: key}, key)
-+        )
-+      )
-+    );
-+  },
-+  MultiSelect = ({name, value: value2, options, onChange, argType}) => {
-+    let handleChange = (e) => {
-+        let selection2 = Array.from(e.currentTarget.options)
-+          .filter((option) => option.selected)
-+          .map((option) => option.value);
-+        onChange(selectedValues(selection2, options));
-+      },
-+      selection = selectedKeys(value2, options),
-+      controlId = getControlId(name),
-+      readonly = !!argType?.table?.readonly;
-+    return React17.createElement(
-+      SelectWrapper,
-+      null,
-+      React17.createElement(
-+        OptionsSelect,
-+        {
-+          disabled: readonly,
-+          id: controlId,
-+          multiple: !0,
-+          value: selection,
-+          onChange: handleChange,
-+        },
-+        Object.keys(options).map((key) =>
-+          React17.createElement('option', {key, value: key}, key)
-+        )
-+      )
-+    );
-+  },
-+  SelectControl = (props) => {
-+    let {name, options} = props;
-+    return options
-+      ? props.isMulti
-+        ? React17.createElement(MultiSelect, {...props})
-+        : React17.createElement(SingleSelect, {...props})
-+      : (logger.warn(`Select with no options: ${name}`),
-+        React17.createElement(React17.Fragment, null, '-'));
-+  };
-+var normalizeOptions = (options, labels) =>
-+    Array.isArray(options)
-+      ? options.reduce(
-+          (acc, item) => ((acc[labels?.[item] || String(item)] = item), acc),
-+          {}
-+        )
-+      : options,
-+  Controls = {
-+    check: CheckboxControl,
-+    'inline-check': CheckboxControl,
-+    radio: RadioControl,
-+    'inline-radio': RadioControl,
-+    select: SelectControl,
-+    'multi-select': SelectControl,
-+  },
-+  OptionsControl = (props) => {
-+    let {type = 'select', labels, argType} = props,
-+      normalized = {
-+        ...props,
-+        argType,
-+        options: argType ? normalizeOptions(argType.options, labels) : {},
-+        isInline: type.includes('inline'),
-+        isMulti: type.includes('multi'),
-+      },
-+      Control = Controls[type];
-+    if (Control) return React17.createElement(Control, {...normalized});
-+    throw new Error(`Unknown options type: ${type}`);
-+  };
-+var VALUE = 'value',
-+  KEY = 'key';
-+var ERROR = 'Error',
-+  OBJECT = 'Object',
-+  ARRAY = 'Array',
-+  STRING = 'String',
-+  NUMBER = 'Number',
-+  BOOLEAN = 'Boolean',
-+  DATE = 'Date',
-+  NULL = 'Null',
-+  UNDEFINED = 'Undefined',
-+  FUNCTION = 'Function',
-+  SYMBOL = 'Symbol';
-+var ADD_DELTA_TYPE = 'ADD_DELTA_TYPE',
-+  REMOVE_DELTA_TYPE = 'REMOVE_DELTA_TYPE',
-+  UPDATE_DELTA_TYPE = 'UPDATE_DELTA_TYPE';
-+function getObjectType(obj) {
-+  return obj !== null &&
-+    typeof obj == 'object' &&
-+    !Array.isArray(obj) &&
-+    typeof obj[Symbol.iterator] == 'function'
-+    ? 'Iterable'
-+    : Object.prototype.toString.call(obj).slice(8, -1);
-+}
-+function isComponentWillChange(oldValue, newValue) {
-+  let oldType = getObjectType(oldValue),
-+    newType = getObjectType(newValue);
-+  return (
-+    (oldType === 'Function' || newType === 'Function') && newType !== oldType
-+  );
-+}
-+var JsonAddValue = class extends Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {inputRefKey: null, inputRefValue: null}),
-+      (this.refInputValue = this.refInputValue.bind(this)),
-+      (this.refInputKey = this.refInputKey.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this)),
-+      (this.onSubmit = this.onSubmit.bind(this));
-+  }
-+  componentDidMount() {
-+    let {inputRefKey, inputRefValue} = this.state,
-+      {onlyValue} = this.props;
-+    inputRefKey &&
-+      typeof inputRefKey.focus == 'function' &&
-+      inputRefKey.focus(),
-+      onlyValue &&
-+        inputRefValue &&
-+        typeof inputRefValue.focus == 'function' &&
-+        inputRefValue.focus(),
-+      document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.onSubmit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.props.handleCancel()));
-+  }
-+  onSubmit() {
-+    let {handleAdd, onlyValue, onSubmitValueParser, keyPath, deep} = this.props,
-+      {inputRefKey, inputRefValue} = this.state,
-+      result = {};
-+    if (!onlyValue) {
-+      if (!inputRefKey.value) return;
-+      result.key = inputRefKey.value;
-+    }
-+    (result.newValue = onSubmitValueParser(
-+      !1,
-+      keyPath,
-+      deep,
-+      result.key,
-+      inputRefValue.value
-+    )),
-+      handleAdd(result);
-+  }
-+  refInputKey(node) {
-+    this.state.inputRefKey = node;
-+  }
-+  refInputValue(node) {
-+    this.state.inputRefValue = node;
-+  }
-+  render() {
-+    let {
-+        handleCancel,
-+        onlyValue,
-+        addButtonElement,
-+        cancelButtonElement,
-+        inputElementGenerator,
-+        keyPath,
-+        deep,
-+      } = this.props,
-+      addButtonElementLayout = cloneElement(addButtonElement, {
-+        onClick: this.onSubmit,
-+      }),
-+      cancelButtonElementLayout = cloneElement(cancelButtonElement, {
-+        onClick: handleCancel,
-+      }),
-+      inputElementValue = inputElementGenerator(VALUE, keyPath, deep),
-+      inputElementValueLayout = cloneElement(inputElementValue, {
-+        placeholder: 'Value',
-+        ref: this.refInputValue,
-+      }),
-+      inputElementKeyLayout = null;
-+    if (!onlyValue) {
-+      let inputElementKey = inputElementGenerator(KEY, keyPath, deep);
-+      inputElementKeyLayout = cloneElement(inputElementKey, {
-+        placeholder: 'Key',
-+        ref: this.refInputKey,
-+      });
-+    }
-+    return React17.createElement(
-+      'span',
-+      {className: 'rejt-add-value-node'},
-+      inputElementKeyLayout,
-+      inputElementValueLayout,
-+      cancelButtonElementLayout,
-+      addButtonElementLayout
-+    );
-+  }
-+};
-+JsonAddValue.defaultProps = {
-+  onlyValue: !1,
-+  addButtonElement: React17.createElement('button', null, '+'),
-+  cancelButtonElement: React17.createElement('button', null, 'c'),
-+};
-+var JsonArray = class extends Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      data: props.data,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      nextDeep: props.deep + 1,
-+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
-+      addFormVisible: !1,
-+    }),
-+      (this.handleCollapseMode = this.handleCollapseMode.bind(this)),
-+      (this.handleRemoveItem = this.handleRemoveItem.bind(this)),
-+      (this.handleAddMode = this.handleAddMode.bind(this)),
-+      (this.handleAddValueAdd = this.handleAddValueAdd.bind(this)),
-+      (this.handleAddValueCancel = this.handleAddValueCancel.bind(this)),
-+      (this.handleEditValue = this.handleEditValue.bind(this)),
-+      (this.onChildUpdate = this.onChildUpdate.bind(this)),
-+      (this.renderCollapsed = this.renderCollapsed.bind(this)),
-+      (this.renderNotCollapsed = this.renderNotCollapsed.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  onChildUpdate(childKey, childData) {
-+    let {data, keyPath} = this.state;
-+    (data[childKey] = childData), this.setState({data});
-+    let {onUpdate} = this.props,
-+      size = keyPath.length;
-+    onUpdate(keyPath[size - 1], data);
-+  }
-+  handleAddMode() {
-+    this.setState({addFormVisible: !0});
-+  }
-+  handleCollapseMode() {
-+    this.setState((state) => ({collapsed: !state.collapsed}));
-+  }
-+  handleRemoveItem(index) {
-+    return () => {
-+      let {beforeRemoveAction, logger: logger4} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[index];
-+      beforeRemoveAction(index, keyPath, deep, oldValue)
-+        .then(() => {
-+          let deltaUpdateResult = {
-+            keyPath,
-+            deep,
-+            key: index,
-+            oldValue,
-+            type: REMOVE_DELTA_TYPE,
-+          };
-+          data.splice(index, 1), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate(deltaUpdateResult);
-+        })
-+        .catch(logger4.error);
-+    };
-+  }
-+  handleAddValueAdd({newValue}) {
-+    let {data, keyPath, nextDeep: deep} = this.state,
-+      {beforeAddAction, logger: logger4} = this.props;
-+    beforeAddAction(data.length, keyPath, deep, newValue)
-+      .then(() => {
-+        let newData = [...data, newValue];
-+        this.setState({data: newData}), this.handleAddValueCancel();
-+        let {onUpdate, onDeltaUpdate} = this.props;
-+        onUpdate(keyPath[keyPath.length - 1], newData),
-+          onDeltaUpdate({
-+            type: ADD_DELTA_TYPE,
-+            keyPath,
-+            deep,
-+            key: newData.length - 1,
-+            newValue,
-+          });
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleAddValueCancel() {
-+    this.setState({addFormVisible: !1});
-+  }
-+  handleEditValue({key, value: value2}) {
-+    return new Promise((resolve, reject) => {
-+      let {beforeUpdateAction} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeUpdateAction(key, keyPath, deep, oldValue, value2)
-+        .then(() => {
-+          (data[key] = value2), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate({
-+              type: UPDATE_DELTA_TYPE,
-+              keyPath,
-+              deep,
-+              key,
-+              newValue: value2,
-+              oldValue,
-+            }),
-+            resolve(void 0);
-+        })
-+        .catch(reject);
-+    });
-+  }
-+  renderCollapsed() {
-+    let {name, data, keyPath, deep} = this.state,
-+      {handleRemove, readOnly, getStyle, dataType, minusMenuElement} =
-+        this.props,
-+      {minus, collapsed} = getStyle(name, data, keyPath, deep, dataType),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      removeItemButton = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return React17.createElement(
-+      'span',
-+      {className: 'rejt-collapsed'},
-+      React17.createElement(
-+        'span',
-+        {
-+          className: 'rejt-collapsed-text',
-+          style: collapsed,
-+          onClick: this.handleCollapseMode,
-+        },
-+        '[...] ',
-+        data.length,
-+        ' ',
-+        data.length === 1 ? 'item' : 'items'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  renderNotCollapsed() {
-+    let {name, data, keyPath, deep, addFormVisible, nextDeep} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        dataType,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      {minus, plus, delimiter, ul, addForm} = getStyle(
-+        name,
-+        data,
-+        keyPath,
-+        deep,
-+        dataType
-+      ),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      addItemButton = cloneElement(plusMenuElement, {
-+        onClick: this.handleAddMode,
-+        className: 'rejt-plus-menu',
-+        style: plus,
-+      }),
-+      removeItemButton = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return React17.createElement(
-+      'span',
-+      {className: 'rejt-not-collapsed'},
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '['
-+      ),
-+      !addFormVisible && addItemButton,
-+      React17.createElement(
-+        'ul',
-+        {className: 'rejt-not-collapsed-list', style: ul},
-+        data.map((item, index) =>
-+          React17.createElement(JsonNode, {
-+            key: index,
-+            name: index.toString(),
-+            data: item,
-+            keyPath,
-+            deep: nextDeep,
-+            isCollapsed,
-+            handleRemove: this.handleRemoveItem(index),
-+            handleUpdateValue: this.handleEditValue,
-+            onUpdate: this.onChildUpdate,
-+            onDeltaUpdate,
-+            readOnly,
-+            getStyle,
-+            addButtonElement,
-+            cancelButtonElement,
-+            editButtonElement,
-+            inputElementGenerator,
-+            textareaElementGenerator,
-+            minusMenuElement,
-+            plusMenuElement,
-+            beforeRemoveAction,
-+            beforeAddAction,
-+            beforeUpdateAction,
-+            logger: logger4,
-+            onSubmitValueParser,
-+          })
-+        )
-+      ),
-+      !isReadOnly &&
-+        addFormVisible &&
-+        React17.createElement(
-+          'div',
-+          {className: 'rejt-add-form', style: addForm},
-+          React17.createElement(JsonAddValue, {
-+            handleAdd: this.handleAddValueAdd,
-+            handleCancel: this.handleAddValueCancel,
-+            onlyValue: !0,
-+            addButtonElement,
-+            cancelButtonElement,
-+            inputElementGenerator,
-+            keyPath,
-+            deep,
-+            onSubmitValueParser,
-+          })
-+        ),
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        ']'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  render() {
-+    let {name, collapsed, data, keyPath, deep} = this.state,
-+      {dataType, getStyle} = this.props,
-+      value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed(),
-+      style = getStyle(name, data, keyPath, deep, dataType);
-+    return React17.createElement(
-+      'div',
-+      {className: 'rejt-array-node'},
-+      React17.createElement(
-+        'span',
-+        {onClick: this.handleCollapseMode},
-+        React17.createElement(
-+          'span',
-+          {className: 'rejt-name', style: style.name},
-+          name,
-+          ' :',
-+          ' '
-+        )
-+      ),
-+      value2
-+    );
-+  }
-+};
-+JsonArray.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  minusMenuElement: React17.createElement('span', null, ' - '),
-+  plusMenuElement: React17.createElement('span', null, ' + '),
-+};
-+var JsonFunctionValue = class extends Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      value: props.value,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      editEnabled: !1,
-+      inputRef: null,
-+    }),
-+      (this.handleEditMode = this.handleEditMode.bind(this)),
-+      (this.refInput = this.refInput.bind(this)),
-+      (this.handleCancelEdit = this.handleCancelEdit.bind(this)),
-+      (this.handleEdit = this.handleEdit.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.value !== state.value ? {value: props.value} : null;
-+  }
-+  componentDidUpdate() {
-+    let {
-+        editEnabled,
-+        inputRef,
-+        name,
-+        value: value2,
-+        keyPath,
-+        deep,
-+      } = this.state,
-+      {readOnly, dataType} = this.props,
-+      readOnlyResult = readOnly(name, value2, keyPath, deep, dataType);
-+    editEnabled &&
-+      !readOnlyResult &&
-+      typeof inputRef.focus == 'function' &&
-+      inputRef.focus();
-+  }
-+  componentDidMount() {
-+    document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.handleEdit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.handleCancelEdit()));
-+  }
-+  handleEdit() {
-+    let {
-+        handleUpdateValue,
-+        originalValue,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        keyPath,
-+      } = this.props,
-+      {inputRef, name, deep} = this.state;
-+    if (!inputRef) return;
-+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value);
-+    handleUpdateValue({value: newValue, key: name})
-+      .then(() => {
-+        isComponentWillChange(originalValue, newValue) ||
-+          this.handleCancelEdit();
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleEditMode() {
-+    this.setState({editEnabled: !0});
-+  }
-+  refInput(node) {
-+    this.state.inputRef = node;
-+  }
-+  handleCancelEdit() {
-+    this.setState({editEnabled: !1});
-+  }
-+  render() {
-+    let {name, value: value2, editEnabled, keyPath, deep} = this.state,
-+      {
-+        handleRemove,
-+        originalValue,
-+        readOnly,
-+        dataType,
-+        getStyle,
-+        editButtonElement,
-+        cancelButtonElement,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        keyPath: comeFromKeyPath,
-+      } = this.props,
-+      style = getStyle(name, originalValue, keyPath, deep, dataType),
-+      result = null,
-+      minusElement = null,
-+      resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
-+    if (editEnabled && !resultOnlyResult) {
-+      let textareaElement = textareaElementGenerator(
-+          VALUE,
-+          comeFromKeyPath,
-+          deep,
-+          name,
-+          originalValue,
-+          dataType
-+        ),
-+        editButtonElementLayout = cloneElement(editButtonElement, {
-+          onClick: this.handleEdit,
-+        }),
-+        cancelButtonElementLayout = cloneElement(cancelButtonElement, {
-+          onClick: this.handleCancelEdit,
-+        }),
-+        textareaElementLayout = cloneElement(textareaElement, {
-+          ref: this.refInput,
-+          defaultValue: originalValue,
-+        });
-+      (result = React17.createElement(
-+        'span',
-+        {className: 'rejt-edit-form', style: style.editForm},
-+        textareaElementLayout,
-+        ' ',
-+        cancelButtonElementLayout,
-+        editButtonElementLayout
-+      )),
-+        (minusElement = null);
-+    } else {
-+      result = React17.createElement(
-+        'span',
-+        {
-+          className: 'rejt-value',
-+          style: style.value,
-+          onClick: resultOnlyResult ? null : this.handleEditMode,
-+        },
-+        value2
-+      );
-+      let minusMenuLayout = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: style.minus,
-+      });
-+      minusElement = resultOnlyResult ? null : minusMenuLayout;
-+    }
-+    return React17.createElement(
-+      'li',
-+      {className: 'rejt-function-value-node', style: style.li},
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-name', style: style.name},
-+        name,
-+        ' :',
-+        ' '
-+      ),
-+      result,
-+      minusElement
-+    );
-+  }
-+};
-+JsonFunctionValue.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  handleUpdateValue: () => {},
-+  editButtonElement: React17.createElement('button', null, 'e'),
-+  cancelButtonElement: React17.createElement('button', null, 'c'),
-+  minusMenuElement: React17.createElement('span', null, ' - '),
-+};
-+var JsonNode = class extends Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {
-+        data: props.data,
-+        name: props.name,
-+        keyPath: props.keyPath,
-+        deep: props.deep,
-+      });
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  render() {
-+    let {data, name, keyPath, deep} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        handleUpdateValue,
-+        onUpdate,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      readOnlyTrue = () => !0,
-+      dataType = getObjectType(data);
-+    switch (dataType) {
-+      case ERROR:
-+        return React17.createElement(JsonObject, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case OBJECT:
-+        return React17.createElement(JsonObject, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case ARRAY:
-+        return React17.createElement(JsonArray, {
-+          data,
-+          name,
-+          isCollapsed,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          onUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case STRING:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: `"${data}"`,
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case NUMBER:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: data,
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case BOOLEAN:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: data ? 'true' : 'false',
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case DATE:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: data.toISOString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case NULL:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: 'null',
-+          originalValue: 'null',
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case UNDEFINED:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: 'undefined',
-+          originalValue: 'undefined',
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case FUNCTION:
-+        return React17.createElement(JsonFunctionValue, {
-+          name,
-+          value: data.toString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      case SYMBOL:
-+        return React17.createElement(JsonValue, {
-+          name,
-+          value: data.toString(),
-+          originalValue: data,
-+          keyPath,
-+          deep,
-+          handleRemove,
-+          handleUpdateValue,
-+          readOnly: readOnlyTrue,
-+          dataType,
-+          getStyle,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          minusMenuElement,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        });
-+      default:
-+        return null;
-+    }
-+  }
-+};
-+JsonNode.defaultProps = {keyPath: [], deep: 0};
-+var JsonObject = class extends Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = props.deep === -1 ? [] : [...props.keyPath, props.name];
-+    (this.state = {
-+      name: props.name,
-+      data: props.data,
-+      keyPath,
-+      deep: props.deep,
-+      nextDeep: props.deep + 1,
-+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
-+      addFormVisible: !1,
-+    }),
-+      (this.handleCollapseMode = this.handleCollapseMode.bind(this)),
-+      (this.handleRemoveValue = this.handleRemoveValue.bind(this)),
-+      (this.handleAddMode = this.handleAddMode.bind(this)),
-+      (this.handleAddValueAdd = this.handleAddValueAdd.bind(this)),
-+      (this.handleAddValueCancel = this.handleAddValueCancel.bind(this)),
-+      (this.handleEditValue = this.handleEditValue.bind(this)),
-+      (this.onChildUpdate = this.onChildUpdate.bind(this)),
-+      (this.renderCollapsed = this.renderCollapsed.bind(this)),
-+      (this.renderNotCollapsed = this.renderNotCollapsed.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data ? {data: props.data} : null;
-+  }
-+  onChildUpdate(childKey, childData) {
-+    let {data, keyPath} = this.state;
-+    (data[childKey] = childData), this.setState({data});
-+    let {onUpdate} = this.props,
-+      size = keyPath.length;
-+    onUpdate(keyPath[size - 1], data);
-+  }
-+  handleAddMode() {
-+    this.setState({addFormVisible: !0});
-+  }
-+  handleAddValueCancel() {
-+    this.setState({addFormVisible: !1});
-+  }
-+  handleAddValueAdd({key, newValue}) {
-+    let {data, keyPath, nextDeep: deep} = this.state,
-+      {beforeAddAction, logger: logger4} = this.props;
-+    beforeAddAction(key, keyPath, deep, newValue)
-+      .then(() => {
-+        (data[key] = newValue),
-+          this.setState({data}),
-+          this.handleAddValueCancel();
-+        let {onUpdate, onDeltaUpdate} = this.props;
-+        onUpdate(keyPath[keyPath.length - 1], data),
-+          onDeltaUpdate({type: ADD_DELTA_TYPE, keyPath, deep, key, newValue});
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleRemoveValue(key) {
-+    return () => {
-+      let {beforeRemoveAction, logger: logger4} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeRemoveAction(key, keyPath, deep, oldValue)
-+        .then(() => {
-+          let deltaUpdateResult = {
-+            keyPath,
-+            deep,
-+            key,
-+            oldValue,
-+            type: REMOVE_DELTA_TYPE,
-+          };
-+          delete data[key], this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate(deltaUpdateResult);
-+        })
-+        .catch(logger4.error);
-+    };
-+  }
-+  handleCollapseMode() {
-+    this.setState((state) => ({collapsed: !state.collapsed}));
-+  }
-+  handleEditValue({key, value: value2}) {
-+    return new Promise((resolve, reject) => {
-+      let {beforeUpdateAction} = this.props,
-+        {data, keyPath, nextDeep: deep} = this.state,
-+        oldValue = data[key];
-+      beforeUpdateAction(key, keyPath, deep, oldValue, value2)
-+        .then(() => {
-+          (data[key] = value2), this.setState({data});
-+          let {onUpdate, onDeltaUpdate} = this.props;
-+          onUpdate(keyPath[keyPath.length - 1], data),
-+            onDeltaUpdate({
-+              type: UPDATE_DELTA_TYPE,
-+              keyPath,
-+              deep,
-+              key,
-+              newValue: value2,
-+              oldValue,
-+            }),
-+            resolve();
-+        })
-+        .catch(reject);
-+    });
-+  }
-+  renderCollapsed() {
-+    let {name, keyPath, deep, data} = this.state,
-+      {handleRemove, readOnly, dataType, getStyle, minusMenuElement} =
-+        this.props,
-+      {minus, collapsed} = getStyle(name, data, keyPath, deep, dataType),
-+      keyList = Object.getOwnPropertyNames(data),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      removeItemButton = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      });
-+    return React17.createElement(
-+      'span',
-+      {className: 'rejt-collapsed'},
-+      React17.createElement(
-+        'span',
-+        {
-+          className: 'rejt-collapsed-text',
-+          style: collapsed,
-+          onClick: this.handleCollapseMode,
-+        },
-+        '{...}',
-+        ' ',
-+        keyList.length,
-+        ' ',
-+        keyList.length === 1 ? 'key' : 'keys'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  renderNotCollapsed() {
-+    let {name, data, keyPath, deep, nextDeep, addFormVisible} = this.state,
-+      {
-+        isCollapsed,
-+        handleRemove,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        dataType,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElementGenerator,
-+        textareaElementGenerator,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+      } = this.props,
-+      {minus, plus, addForm, ul, delimiter} = getStyle(
-+        name,
-+        data,
-+        keyPath,
-+        deep,
-+        dataType
-+      ),
-+      keyList = Object.getOwnPropertyNames(data),
-+      isReadOnly = readOnly(name, data, keyPath, deep, dataType),
-+      addItemButton = cloneElement(plusMenuElement, {
-+        onClick: this.handleAddMode,
-+        className: 'rejt-plus-menu',
-+        style: plus,
-+      }),
-+      removeItemButton = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: minus,
-+      }),
-+      list = keyList.map((key) =>
-+        React17.createElement(JsonNode, {
-+          key,
-+          name: key,
-+          data: data[key],
-+          keyPath,
-+          deep: nextDeep,
-+          isCollapsed,
-+          handleRemove: this.handleRemoveValue(key),
-+          handleUpdateValue: this.handleEditValue,
-+          onUpdate: this.onChildUpdate,
-+          onDeltaUpdate,
-+          readOnly,
-+          getStyle,
-+          addButtonElement,
-+          cancelButtonElement,
-+          editButtonElement,
-+          inputElementGenerator,
-+          textareaElementGenerator,
-+          minusMenuElement,
-+          plusMenuElement,
-+          beforeRemoveAction,
-+          beforeAddAction,
-+          beforeUpdateAction,
-+          logger: logger4,
-+          onSubmitValueParser,
-+        })
-+      );
-+    return React17.createElement(
-+      'span',
-+      {className: 'rejt-not-collapsed'},
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '{'
-+      ),
-+      !isReadOnly && addItemButton,
-+      React17.createElement(
-+        'ul',
-+        {className: 'rejt-not-collapsed-list', style: ul},
-+        list
-+      ),
-+      !isReadOnly &&
-+        addFormVisible &&
-+        React17.createElement(
-+          'div',
-+          {className: 'rejt-add-form', style: addForm},
-+          React17.createElement(JsonAddValue, {
-+            handleAdd: this.handleAddValueAdd,
-+            handleCancel: this.handleAddValueCancel,
-+            addButtonElement,
-+            cancelButtonElement,
-+            inputElementGenerator,
-+            keyPath,
-+            deep,
-+            onSubmitValueParser,
-+          })
-+        ),
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-not-collapsed-delimiter', style: delimiter},
-+        '}'
-+      ),
-+      !isReadOnly && removeItemButton
-+    );
-+  }
-+  render() {
-+    let {name, collapsed, data, keyPath, deep} = this.state,
-+      {getStyle, dataType} = this.props,
-+      value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed(),
-+      style = getStyle(name, data, keyPath, deep, dataType);
-+    return React17.createElement(
-+      'div',
-+      {className: 'rejt-object-node'},
-+      React17.createElement(
-+        'span',
-+        {onClick: this.handleCollapseMode},
-+        React17.createElement(
-+          'span',
-+          {className: 'rejt-name', style: style.name},
-+          name,
-+          ' :',
-+          ' '
-+        )
-+      ),
-+      value2
-+    );
-+  }
-+};
-+JsonObject.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  minusMenuElement: React17.createElement('span', null, ' - '),
-+  plusMenuElement: React17.createElement('span', null, ' + '),
-+};
-+var JsonValue = class extends Component {
-+  constructor(props) {
-+    super(props);
-+    let keyPath = [...props.keyPath, props.name];
-+    (this.state = {
-+      value: props.value,
-+      name: props.name,
-+      keyPath,
-+      deep: props.deep,
-+      editEnabled: !1,
-+      inputRef: null,
-+    }),
-+      (this.handleEditMode = this.handleEditMode.bind(this)),
-+      (this.refInput = this.refInput.bind(this)),
-+      (this.handleCancelEdit = this.handleCancelEdit.bind(this)),
-+      (this.handleEdit = this.handleEdit.bind(this)),
-+      (this.onKeydown = this.onKeydown.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.value !== state.value ? {value: props.value} : null;
-+  }
-+  componentDidUpdate() {
-+    let {
-+        editEnabled,
-+        inputRef,
-+        name,
-+        value: value2,
-+        keyPath,
-+        deep,
-+      } = this.state,
-+      {readOnly, dataType} = this.props,
-+      isReadOnly = readOnly(name, value2, keyPath, deep, dataType);
-+    editEnabled &&
-+      !isReadOnly &&
-+      typeof inputRef.focus == 'function' &&
-+      inputRef.focus();
-+  }
-+  componentDidMount() {
-+    document.addEventListener('keydown', this.onKeydown);
-+  }
-+  componentWillUnmount() {
-+    document.removeEventListener('keydown', this.onKeydown);
-+  }
-+  onKeydown(event) {
-+    event.altKey ||
-+      event.ctrlKey ||
-+      event.metaKey ||
-+      event.shiftKey ||
-+      event.repeat ||
-+      ((event.code === 'Enter' || event.key === 'Enter') &&
-+        (event.preventDefault(), this.handleEdit()),
-+      (event.code === 'Escape' || event.key === 'Escape') &&
-+        (event.preventDefault(), this.handleCancelEdit()));
-+  }
-+  handleEdit() {
-+    let {
-+        handleUpdateValue,
-+        originalValue,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        keyPath,
-+      } = this.props,
-+      {inputRef, name, deep} = this.state;
-+    if (!inputRef) return;
-+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value);
-+    handleUpdateValue({value: newValue, key: name})
-+      .then(() => {
-+        isComponentWillChange(originalValue, newValue) ||
-+          this.handleCancelEdit();
-+      })
-+      .catch(logger4.error);
-+  }
-+  handleEditMode() {
-+    this.setState({editEnabled: !0});
-+  }
-+  refInput(node) {
-+    this.state.inputRef = node;
-+  }
-+  handleCancelEdit() {
-+    this.setState({editEnabled: !1});
-+  }
-+  render() {
-+    let {name, value: value2, editEnabled, keyPath, deep} = this.state,
-+      {
-+        handleRemove,
-+        originalValue,
-+        readOnly,
-+        dataType,
-+        getStyle,
-+        editButtonElement,
-+        cancelButtonElement,
-+        inputElementGenerator,
-+        minusMenuElement,
-+        keyPath: comeFromKeyPath,
-+      } = this.props,
-+      style = getStyle(name, originalValue, keyPath, deep, dataType),
-+      isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType),
-+      isEditing = editEnabled && !isReadOnly,
-+      inputElement = inputElementGenerator(
-+        VALUE,
-+        comeFromKeyPath,
-+        deep,
-+        name,
-+        originalValue,
-+        dataType
-+      ),
-+      editButtonElementLayout = cloneElement(editButtonElement, {
-+        onClick: this.handleEdit,
-+      }),
-+      cancelButtonElementLayout = cloneElement(cancelButtonElement, {
-+        onClick: this.handleCancelEdit,
-+      }),
-+      inputElementLayout = cloneElement(inputElement, {
-+        ref: this.refInput,
-+        defaultValue: JSON.stringify(originalValue),
-+      }),
-+      minusMenuLayout = cloneElement(minusMenuElement, {
-+        onClick: handleRemove,
-+        className: 'rejt-minus-menu',
-+        style: style.minus,
-+      });
-+    return React17.createElement(
-+      'li',
-+      {className: 'rejt-value-node', style: style.li},
-+      React17.createElement(
-+        'span',
-+        {className: 'rejt-name', style: style.name},
-+        name,
-+        ' : '
-+      ),
-+      isEditing
-+        ? React17.createElement(
-+            'span',
-+            {className: 'rejt-edit-form', style: style.editForm},
-+            inputElementLayout,
-+            ' ',
-+            cancelButtonElementLayout,
-+            editButtonElementLayout
-+          )
-+        : React17.createElement(
-+            'span',
-+            {
-+              className: 'rejt-value',
-+              style: style.value,
-+              onClick: isReadOnly ? null : this.handleEditMode,
-+            },
-+            String(value2)
-+          ),
-+      !isReadOnly && !isEditing && minusMenuLayout
-+    );
-+  }
-+};
-+JsonValue.defaultProps = {
-+  keyPath: [],
-+  deep: 0,
-+  handleUpdateValue: () => Promise.resolve(),
-+  editButtonElement: React17.createElement('button', null, 'e'),
-+  cancelButtonElement: React17.createElement('button', null, 'c'),
-+  minusMenuElement: React17.createElement('span', null, ' - '),
-+};
-+var object = {
-+    minus: {color: 'red'},
-+    plus: {color: 'green'},
-+    collapsed: {color: 'grey'},
-+    delimiter: {},
-+    ul: {padding: '0px', margin: '0 0 0 25px', listStyle: 'none'},
-+    name: {color: '#2287CD'},
-+    addForm: {},
-+  },
-+  array = {
-+    minus: {color: 'red'},
-+    plus: {color: 'green'},
-+    collapsed: {color: 'grey'},
-+    delimiter: {},
-+    ul: {padding: '0px', margin: '0 0 0 25px', listStyle: 'none'},
-+    name: {color: '#2287CD'},
-+    addForm: {},
-+  },
-+  value = {
-+    minus: {color: 'red'},
-+    editForm: {},
-+    value: {color: '#7bba3d'},
-+    li: {minHeight: '22px', lineHeight: '22px', outline: '0px'},
-+    name: {color: '#2287CD'},
-+  };
-+function parse3(string) {
-+  let result = string;
-+  if (result.indexOf('function') === 0) return (0, eval)(`(${result})`);
-+  try {
-+    result = JSON.parse(string);
-+  } catch {}
-+  return result;
-+}
-+var JsonTree = class extends Component {
-+  constructor(props) {
-+    super(props),
-+      (this.state = {data: props.data, rootName: props.rootName}),
-+      (this.onUpdate = this.onUpdate.bind(this)),
-+      (this.removeRoot = this.removeRoot.bind(this));
-+  }
-+  static getDerivedStateFromProps(props, state) {
-+    return props.data !== state.data || props.rootName !== state.rootName
-+      ? {data: props.data, rootName: props.rootName}
-+      : null;
-+  }
-+  onUpdate(key, data) {
-+    this.setState({data}), this.props.onFullyUpdate(data);
-+  }
-+  removeRoot() {
-+    this.onUpdate(null, null);
-+  }
-+  render() {
-+    let {data, rootName} = this.state,
-+      {
-+        isCollapsed,
-+        onDeltaUpdate,
-+        readOnly,
-+        getStyle,
-+        addButtonElement,
-+        cancelButtonElement,
-+        editButtonElement,
-+        inputElement,
-+        textareaElement,
-+        minusMenuElement,
-+        plusMenuElement,
-+        beforeRemoveAction,
-+        beforeAddAction,
-+        beforeUpdateAction,
-+        logger: logger4,
-+        onSubmitValueParser,
-+        fallback = null,
-+      } = this.props,
-+      dataType = getObjectType(data),
-+      readOnlyFunction = readOnly;
-+    rootName = rootName.slice(rootName.indexOf('-') + 1);
-+    getObjectType(readOnly) === 'Boolean' &&
-+      (readOnlyFunction = () => readOnly);
-+    let inputElementFunction = inputElement;
-+    inputElement &&
-+      getObjectType(inputElement) !== 'Function' &&
-+      (inputElementFunction = () => inputElement);
-+    let textareaElementFunction = textareaElement;
-+    return (
-+      textareaElement &&
-+        getObjectType(textareaElement) !== 'Function' &&
-+        (textareaElementFunction = () => textareaElement),
-+      dataType === 'Object' || dataType === 'Array'
-+        ? React17.createElement(
-+            'div',
-+            {className: 'rejt-tree'},
-+            React17.createElement(JsonNode, {
-+              data,
-+              name: rootName,
-+              deep: -1,
-+              isCollapsed,
-+              onUpdate: this.onUpdate,
-+              onDeltaUpdate,
-+              readOnly: readOnlyFunction,
-+              getStyle,
-+              addButtonElement,
-+              cancelButtonElement,
-+              editButtonElement,
-+              inputElementGenerator: inputElementFunction,
-+              textareaElementGenerator: textareaElementFunction,
-+              minusMenuElement,
-+              plusMenuElement,
-+              handleRemove: this.removeRoot,
-+              beforeRemoveAction,
-+              beforeAddAction,
-+              beforeUpdateAction,
-+              logger: logger4,
-+              onSubmitValueParser,
-+            })
-+          )
-+        : fallback
-+    );
-+  }
-+};
-+JsonTree.defaultProps = {
-+  rootName: 'root',
-+  isCollapsed: (keyPath, deep) => deep !== -1,
-+  getStyle: (keyName, data, keyPath, deep, dataType) => {
-+    switch (dataType) {
-+      case 'Object':
-+      case 'Error':
-+        return object;
-+      case 'Array':
-+        return array;
-+      default:
-+        return value;
-+    }
-+  },
-+  readOnly: () => !1,
-+  onFullyUpdate: () => {},
-+  onDeltaUpdate: () => {},
-+  beforeRemoveAction: () => Promise.resolve(),
-+  beforeAddAction: () => Promise.resolve(),
-+  beforeUpdateAction: () => Promise.resolve(),
-+  logger: {error: () => {}},
-+  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) =>
-+    parse3(rawValue),
-+  inputElement: () => React17.createElement('input', null),
-+  textareaElement: () => React17.createElement('textarea', null),
-+  fallback: null,
-+};
-+var {window: globalWindow2} = global,
-+  Wrapper6 = styled.div(({theme}) => ({
-+    position: 'relative',
-+    display: 'flex',
-+    '&[aria-readonly="true"]': {opacity: 0.5},
-+    '.rejt-tree': {marginLeft: '1rem', fontSize: '13px'},
-+    '.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':
-+      {'& > svg': {opacity: 0, transition: 'opacity 0.2s'}},
-+    '.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':
-+      {'& > svg': {opacity: 1}},
-+    '.rejt-edit-form button': {display: 'none'},
-+    '.rejt-add-form': {marginLeft: 10},
-+    '.rejt-add-value-node': {display: 'inline-flex', alignItems: 'center'},
-+    '.rejt-name': {lineHeight: '22px'},
-+    '.rejt-not-collapsed-delimiter': {lineHeight: '22px'},
-+    '.rejt-plus-menu': {marginLeft: 5},
-+    '.rejt-object-node > span > *, .rejt-array-node > span > *': {
-+      position: 'relative',
-+      zIndex: 2,
-+    },
-+    '.rejt-object-node, .rejt-array-node': {position: 'relative'},
-+    '.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':
-+      {
-+        content: '""',
-+        position: 'absolute',
-+        top: 0,
-+        display: 'block',
-+        width: '100%',
-+        marginLeft: '-1rem',
-+        padding: '0 4px 0 1rem',
-+        height: 22,
-+      },
-+    '.rejt-collapsed::before, .rejt-not-collapsed::before': {
-+      zIndex: 1,
-+      background: 'transparent',
-+      borderRadius: 4,
-+      transition: 'background 0.2s',
-+      pointerEvents: 'none',
-+      opacity: 0.1,
-+    },
-+    '.rejt-object-node:hover, .rejt-array-node:hover': {
-+      '& > .rejt-collapsed::before, & > .rejt-not-collapsed::before': {
-+        background: theme.color.secondary,
-+      },
-+    },
-+    '.rejt-collapsed::after, .rejt-not-collapsed::after': {
-+      content: '""',
-+      position: 'absolute',
-+      display: 'inline-block',
-+      pointerEvents: 'none',
-+      width: 0,
-+      height: 0,
-+    },
-+    '.rejt-collapsed::after': {
-+      left: -8,
-+      top: 8,
-+      borderTop: '3px solid transparent',
-+      borderBottom: '3px solid transparent',
-+      borderLeft: '3px solid rgba(153,153,153,0.6)',
-+    },
-+    '.rejt-not-collapsed::after': {
-+      left: -10,
-+      top: 10,
-+      borderTop: '3px solid rgba(153,153,153,0.6)',
-+      borderLeft: '3px solid transparent',
-+      borderRight: '3px solid transparent',
-+    },
-+    '.rejt-value': {
-+      display: 'inline-block',
-+      border: '1px solid transparent',
-+      borderRadius: 4,
-+      margin: '1px 0',
-+      padding: '0 4px',
-+      cursor: 'text',
-+      color: theme.color.defaultText,
-+    },
-+    '.rejt-value-node:hover > .rejt-value': {
-+      background: theme.color.lighter,
-+      borderColor: theme.appBorderColor,
-+    },
-+  })),
-+  ButtonInline = styled.button(({theme, primary}) => ({
-+    border: 0,
-+    height: 20,
-+    margin: 1,
-+    borderRadius: 4,
-+    background: primary ? theme.color.secondary : 'transparent',
-+    color: primary ? theme.color.lightest : theme.color.dark,
-+    fontWeight: primary ? 'bold' : 'normal',
-+    cursor: 'pointer',
-+    order: primary ? 'initial' : 9,
-+  })),
-+  ActionAddIcon = styled(AddIcon)(({theme, disabled}) => ({
-+    display: 'inline-block',
-+    verticalAlign: 'middle',
-+    width: 15,
-+    height: 15,
-+    padding: 3,
-+    marginLeft: 5,
-+    cursor: disabled ? 'not-allowed' : 'pointer',
-+    color: theme.textMutedColor,
-+    '&:hover': disabled ? {} : {color: theme.color.ancillary},
-+    'svg + &': {marginLeft: 0},
-+  })),
-+  ActionSubstractIcon = styled(SubtractIcon)(({theme, disabled}) => ({
-+    display: 'inline-block',
-+    verticalAlign: 'middle',
-+    width: 15,
-+    height: 15,
-+    padding: 3,
-+    marginLeft: 5,
-+    cursor: disabled ? 'not-allowed' : 'pointer',
-+    color: theme.textMutedColor,
-+    '&:hover': disabled ? {} : {color: theme.color.negative},
-+    'svg + &': {marginLeft: 0},
-+  })),
-+  Input = styled.input(({theme, placeholder}) => ({
-+    outline: 0,
-+    margin: placeholder ? 1 : '1px 0',
-+    padding: '3px 4px',
-+    color: theme.color.defaultText,
-+    background: theme.background.app,
-+    border: `1px solid ${theme.appBorderColor}`,
-+    borderRadius: 4,
-+    lineHeight: '14px',
-+    width: placeholder === 'Key' ? 80 : 120,
-+    '&:focus': {border: `1px solid ${theme.color.secondary}`},
-+  })),
-+  RawButton = styled(IconButton)(({theme}) => ({
-+    position: 'absolute',
-+    zIndex: 2,
-+    top: 2,
-+    right: 2,
-+    height: 21,
-+    padding: '0 3px',
-+    background: theme.background.bar,
-+    border: `1px solid ${theme.appBorderColor}`,
-+    borderRadius: 3,
-+    color: theme.textMutedColor,
-+    fontSize: '9px',
-+    fontWeight: 'bold',
-+    textDecoration: 'none',
-+    span: {marginLeft: 3, marginTop: 1},
-+  })),
-+  RawInput = styled(Form.Textarea)(({theme}) => ({
-+    flex: 1,
-+    padding: '7px 6px',
-+    fontFamily: theme.typography.fonts.mono,
-+    fontSize: '12px',
-+    lineHeight: '18px',
-+    '&::placeholder': {
-+      fontFamily: theme.typography.fonts.base,
-+      fontSize: '13px',
-+    },
-+    '&:placeholder-shown': {padding: '7px 10px'},
-+  })),
-+  ENTER_EVENT = {
-+    bubbles: !0,
-+    cancelable: !0,
-+    key: 'Enter',
-+    code: 'Enter',
-+    keyCode: 13,
-+  },
-+  dispatchEnterKey = (event) => {
-+    event.currentTarget.dispatchEvent(
-+      new globalWindow2.KeyboardEvent('keydown', ENTER_EVENT)
-+    );
-+  },
-+  selectValue = (event) => {
-+    event.currentTarget.select();
-+  },
-+  getCustomStyleFunction = (theme) => () => ({
-+    name: {color: theme.color.secondary},
-+    collapsed: {color: theme.color.dark},
-+    ul: {listStyle: 'none', margin: '0 0 0 1rem', padding: 0},
-+    li: {outline: 0},
-+  }),
-+  ObjectControl = ({name, value: value2, onChange, argType}) => {
-+    let theme = useTheme(),
-+      data = useMemo(() => value2 && cloneDeep(value2), [value2]),
-+      hasData = data != null,
-+      [showRaw, setShowRaw] = useState(false),
-+      [parseError, setParseError] = useState(null),
-+      readonly = !!argType?.table?.readonly,
-+      updateRaw = useCallback(
-+        (raw) => {
-+          try {
-+            raw && onChange(JSON.parse(raw)), setParseError(void 0);
-+          } catch (e) {
-+            setParseError(e);
-+          }
-+        },
-+        [onChange]
-+      ),
-+      [forceVisible, setForceVisible] = useState(!1),
-+      onForceVisible = useCallback(() => {
-+        onChange({}), setForceVisible(!0);
-+      }, [setForceVisible]),
-+      htmlElRef = useRef(null);
-+    if (
-+      (useEffect(() => {
-+        forceVisible && htmlElRef.current && htmlElRef.current.select();
-+      }, [forceVisible]),
-+      !hasData)
-+    )
-+      return React17.createElement(
-+        Button,
-+        {
-+          disabled: readonly,
-+          id: getControlSetterButtonId(name),
-+          onClick: onForceVisible,
-+        },
-+        'Set object'
-+      );
-+    let rawJSONForm = React17.createElement(RawInput, {
-+        ref: htmlElRef,
-+        id: getControlId(name),
-+        name,
-+        defaultValue: value2 === null ? '' : JSON.stringify(value2, null, 2),
-+        onBlur: (event) => updateRaw(event.target.value),
-+        placeholder: 'Edit JSON string...',
-+        autoFocus: forceVisible,
-+        valid: parseError ? 'error' : null,
-+        readOnly: readonly,
-+      }),
-+      isObjectOrArray =
-+        Array.isArray(value2) ||
-+        (typeof value2 == 'object' && value2?.constructor === Object);
-+    return React17.createElement(
-+      Wrapper6,
-+      {'aria-readonly': readonly},
-+      isObjectOrArray &&
-+        React17.createElement(
-+          RawButton,
-+          {
-+            onClick: (e) => {
-+              e.preventDefault(), setShowRaw((v) => !v);
-+            },
-+          },
-+          showRaw
-+            ? React17.createElement(EyeCloseIcon, null)
-+            : React17.createElement(EyeIcon, null),
-+          React17.createElement('span', null, 'RAW')
-+        ),
-+      showRaw
-+        ? rawJSONForm
-+        : React17.createElement(JsonTree, {
-+            readOnly: readonly || !isObjectOrArray,
-+            isCollapsed: isObjectOrArray ? void 0 : () => !0,
-+            data,
-+            rootName: name,
-+            onFullyUpdate: onChange,
-+            getStyle: getCustomStyleFunction(theme),
-+            cancelButtonElement: React17.createElement(
-+              ButtonInline,
-+              {type: 'button'},
-+              'Cancel'
-+            ),
-+            editButtonElement: React17.createElement(
-+              ButtonInline,
-+              {type: 'submit'},
-+              'Save'
-+            ),
-+            addButtonElement: React17.createElement(
-+              ButtonInline,
-+              {type: 'submit', primary: !0},
-+              'Save'
-+            ),
-+            plusMenuElement: React17.createElement(ActionAddIcon, null),
-+            minusMenuElement: React17.createElement(ActionSubstractIcon, null),
-+            inputElement: (_, __, ___, key) =>
-+              key
-+                ? React17.createElement(Input, {
-+                    onFocus: selectValue,
-+                    onBlur: dispatchEnterKey,
-+                  })
-+                : React17.createElement(Input, null),
-+            fallback: rawJSONForm,
-+          })
-+    );
-+  };
-+var RangeInput = styled.input(({theme, min, max, value: value2, disabled}) => ({
-+    '&': {width: '100%', backgroundColor: 'transparent', appearance: 'none'},
-+    '&::-webkit-slider-runnable-track': {
-+      background:
-+        theme.base === 'light'
-+          ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} 100%)`
-+          : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.02, theme.input.background)} 100%)`,
-+      boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-+      borderRadius: 6,
-+      width: '100%',
-+      height: 6,
-+      cursor: disabled ? 'not-allowed' : 'pointer',
-+    },
-+    '&::-webkit-slider-thumb': {
-+      marginTop: '-6px',
-+      width: 16,
-+      height: 16,
-+      border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
-+      borderRadius: '50px',
-+      boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
-+      cursor: disabled ? 'not-allowed' : 'grab',
-+      appearance: 'none',
-+      background: `${theme.input.background}`,
-+      transition: 'all 150ms ease-out',
-+      '&:hover': {
-+        background: `${darken(0.05, theme.input.background)}`,
-+        transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-+        transition: 'all 50ms ease-out',
-+      },
-+      '&:active': {
-+        background: `${theme.input.background}`,
-+        transform: 'scale3d(1, 1, 1) translateY(0px)',
-+        cursor: disabled ? 'not-allowed' : 'grab',
-+      },
-+    },
-+    '&:focus': {
-+      outline: 'none',
-+      '&::-webkit-slider-runnable-track': {
-+        borderColor: rgba(theme.color.secondary, 0.4),
-+      },
-+      '&::-webkit-slider-thumb': {
-+        borderColor: theme.color.secondary,
-+        boxShadow: `0 0px 5px 0px ${theme.color.secondary}`,
-+      },
-+    },
-+    '&::-moz-range-track': {
-+      background:
-+        theme.base === 'light'
-+          ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} 100%)`
-+          : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.02, theme.input.background)} 100%)`,
-+      boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-+      borderRadius: 6,
-+      width: '100%',
-+      height: 6,
-+      cursor: disabled ? 'not-allowed' : 'pointer',
-+      outline: 'none',
-+    },
-+    '&::-moz-range-thumb': {
-+      width: 16,
-+      height: 16,
-+      border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
-+      borderRadius: '50px',
-+      boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
-+      cursor: disabled ? 'not-allowed' : 'grap',
-+      background: `${theme.input.background}`,
-+      transition: 'all 150ms ease-out',
-+      '&:hover': {
-+        background: `${darken(0.05, theme.input.background)}`,
-+        transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-+        transition: 'all 50ms ease-out',
-+      },
-+      '&:active': {
-+        background: `${theme.input.background}`,
-+        transform: 'scale3d(1, 1, 1) translateY(0px)',
-+        cursor: 'grabbing',
-+      },
-+    },
-+    '&::-ms-track': {
-+      background:
-+        theme.base === 'light'
-+          ? `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${darken(0.02, theme.input.background)} 100%)`
-+          : `linear-gradient(to right, 
-+            ${theme.color.green} 0%, ${theme.color.green} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.02, theme.input.background)} ${((value2 - min) / (max - min)) * 100}%, 
-+            ${lighten(0.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, 0.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: 0.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,
-+  value: value2,
-+  onChange,
-+  min = 0,
-+  max = 100,
-+  step = 1,
-+  onBlur,
-+  onFocus,
-+  argType,
-+}) => {
-+  let handleChange = (event) => {
-+      onChange(parse2(event.target.value));
-+    },
-+    hasValue = value2 !== void 0,
-+    numberOFDecimalsPlaces = useMemo(
-+      () => getNumberOfDecimalPlaces(step),
-+      [step]
-+    ),
-+    readonly = !!argType?.table?.readonly;
-+  return React17.createElement(
-+    RangeWrapper,
-+    {'aria-readonly': readonly},
-+    React17.createElement(RangeLabel, null, min),
-+    React17.createElement(RangeInput, {
-+      id: getControlId(name),
-+      type: 'range',
-+      disabled: readonly,
-+      onChange: handleChange,
-+      name,
-+      value: value2,
-+      min,
-+      max,
-+      step,
-+      onFocus,
-+      onBlur,
-+    }),
-+    React17.createElement(
-+      RangeCurrentAndMaxLabel,
-+      {numberOFDecimalsPlaces, max},
-+      hasValue ? value2.toFixed(numberOFDecimalsPlaces) : '--',
-+      ' / ',
-+      max
-+    )
-+  );
-+};
-+var Wrapper7 = styled.label({display: 'flex'}),
-+  MaxLength = styled.div(({isMaxed}) => ({
-+    marginLeft: '0.75rem',
-+    paddingTop: '0.35rem',
-+    color: isMaxed ? 'red' : void 0,
-+  })),
-+  TextControl = ({
-+    name,
-+    value: value2,
-+    onChange,
-+    onFocus,
-+    onBlur,
-+    maxLength,
-+    argType,
-+  }) => {
-+    let handleChange = (event) => {
-+        onChange(event.target.value);
-+      },
-+      readonly = !!argType?.table?.readonly,
-+      [forceVisible, setForceVisible] = useState(!1),
-+      onForceVisible = useCallback(() => {
-+        onChange(''), setForceVisible(!0);
-+      }, [setForceVisible]);
-+    if (value2 === void 0)
-+      return React17.createElement(
-+        Button,
-+        {
-+          variant: 'outline',
-+          size: 'medium',
-+          disabled: readonly,
-+          id: getControlSetterButtonId(name),
-+          onClick: onForceVisible,
-+        },
-+        'Set string'
-+      );
-+    let isValid = typeof value2 == 'string';
-+    return React17.createElement(
-+      Wrapper7,
-+      null,
-+      React17.createElement(Form.Textarea, {
-+        id: getControlId(name),
-+        maxLength,
-+        onChange: handleChange,
-+        disabled: readonly,
-+        size: 'flex',
-+        placeholder: 'Edit string...',
-+        autoFocus: forceVisible,
-+        valid: isValid ? null : 'error',
-+        name,
-+        value: isValid ? value2 : '',
-+        onFocus,
-+        onBlur,
-+      }),
-+      maxLength &&
-+        React17.createElement(
-+          MaxLength,
-+          {isMaxed: value2?.length === maxLength},
-+          value2?.length ?? 0,
-+          ' / ',
-+          maxLength
-+        )
-+    );
-+  };
-+var FileInput = styled(Form.Input)({padding: 10});
-+function revokeOldUrls(urls) {
-+  urls.forEach((url) => {
-+    url.startsWith('blob:') && URL.revokeObjectURL(url);
-+  });
-+}
-+var FilesControl = ({
-+  onChange,
-+  name,
-+  accept = 'image/*',
-+  value: value2,
-+  argType,
-+}) => {
-+  let inputElement = useRef(null),
-+    readonly = argType?.control?.readOnly;
-+  function handleFileChange(e) {
-+    if (!e.target.files) return;
-+    let fileUrls = Array.from(e.target.files).map((file) =>
-+      URL.createObjectURL(file)
-+    );
-+    onChange(fileUrls), revokeOldUrls(value2);
-+  }
-+  return (
-+    useEffect(() => {
-+      value2 == null &&
-+        inputElement.current &&
-+        (inputElement.current.value = null);
-+    }, [value2, name]),
-+    React17.createElement(FileInput, {
-+      ref: inputElement,
-+      id: getControlId(name),
-+      type: 'file',
-+      name,
-+      multiple: !0,
-+      disabled: readonly,
-+      onChange: handleFileChange,
-+      accept,
-+      size: 'flex',
-+    })
-+  );
-+};
-+var LazyColorControl = lazy(() => import('./Color-PRSJMWNM.mjs')),
-+  ColorControl = (props) =>
-+    React17.createElement(
-+      Suspense,
-+      {fallback: React17.createElement('div', null)},
-+      React17.createElement(LazyColorControl, {...props})
-+    );
-+var Controls2 = {
-+    array: ObjectControl,
-+    object: ObjectControl,
-+    boolean: BooleanControl,
-+    color: ColorControl,
-+    date: DateControl,
-+    number: NumberControl,
-+    check: OptionsControl,
-+    'inline-check': OptionsControl,
-+    radio: OptionsControl,
-+    'inline-radio': OptionsControl,
-+    select: OptionsControl,
-+    'multi-select': OptionsControl,
-+    range: RangeControl,
-+    text: TextControl,
-+    file: FilesControl,
-+  },
-+  NoControl = () => React17.createElement(React17.Fragment, null, '-'),
-+  ArgControl = ({row, arg, updateArgs, isHovered}) => {
-+    let {key, control} = row,
-+      [isFocused, setFocused] = useState(!1),
-+      [boxedValue, setBoxedValue] = useState({value: arg});
-+    useEffect(() => {
-+      isFocused || setBoxedValue({value: arg});
-+    }, [isFocused, arg]);
-+    let onChange = useCallback(
-+        (argVal) => (
-+          setBoxedValue({value: argVal}), updateArgs({[key]: argVal}), argVal
-+        ),
-+        [updateArgs, key]
-+      ),
-+      onBlur = useCallback(() => setFocused(!1), []),
-+      onFocus = useCallback(() => setFocused(!0), []);
-+    if (!control || control.disable) {
-+      let canBeSetup =
-+        control?.disable !== !0 && row?.type?.name !== 'function';
-+      return isHovered && canBeSetup
-+        ? React17.createElement(
-+            Link,
-+            {
-+              href: 'https://storybook.js.org/docs/react/essentials/controls',
-+              target: '_blank',
-+              withArrow: !0,
-+            },
-+            'Setup controls'
-+          )
-+        : React17.createElement(NoControl, null);
-+    }
-+    let props = {
-+        name: key,
-+        argType: row,
-+        value: boxedValue.value,
-+        onChange,
-+        onBlur,
-+        onFocus,
-+      },
-+      Control = Controls2[control.type] || NoControl;
-+    return React17.createElement(Control, {
-+      ...props,
-+      ...control,
-+      controlType: control.type,
-+    });
-+  };
-+var Name = styled.span({fontWeight: 'bold'}),
-+  Required = styled.span(({theme}) => ({
-+    color: theme.color.negative,
-+    fontFamily: theme.typography.fonts.mono,
-+    cursor: 'help',
-+  })),
-+  Description = styled.div(({theme}) => ({
-+    '&&': {p: {margin: '0 0 10px 0'}, a: {color: theme.color.secondary}},
-+    code: {
-+      ...codeCommon({theme}),
-+      fontSize: 12,
-+      fontFamily: theme.typography.fonts.mono,
-+    },
-+    '& code': {margin: 0, display: 'inline-block'},
-+    '& pre > code': {whiteSpace: 'pre-wrap'},
-+  })),
-+  Type = styled.div(({theme, hasDescription}) => ({
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.1, theme.color.defaultText)
-+        : transparentize(0.2, theme.color.defaultText),
-+    marginTop: hasDescription ? 4 : 0,
-+  })),
-+  TypeWithJsDoc = styled.div(({theme, hasDescription}) => ({
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.1, theme.color.defaultText)
-+        : transparentize(0.2, theme.color.defaultText),
-+    marginTop: hasDescription ? 12 : 0,
-+    marginBottom: 12,
-+  })),
-+  StyledTd = styled.td(({theme, expandable}) => ({
-+    paddingLeft: expandable ? '40px !important' : '20px !important',
-+  })),
-+  toSummary = (value2) =>
-+    value2 && {summary: typeof value2 == 'string' ? value2 : value2.name},
-+  ArgRow = (props) => {
-+    let [isHovered, setIsHovered] = useState(!1),
-+      {row, updateArgs, compact, expandable, initialExpandedArgs} = props,
-+      {name, 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.createElement(
-+      'tr',
-+      {
-+        onMouseEnter: () => setIsHovered(!0),
-+        onMouseLeave: () => setIsHovered(!1),
-+      },
-+      React17.createElement(
-+        StyledTd,
-+        {expandable},
-+        React17.createElement(Name, null, name),
-+        required
-+          ? React17.createElement(Required, {title: 'Required'}, '*')
-+          : null
-+      ),
-+      compact
-+        ? null
-+        : React17.createElement(
-+            'td',
-+            null,
-+            hasDescription &&
-+              React17.createElement(
-+                Description,
-+                null,
-+                React17.createElement(Markdown, null, description)
-+              ),
-+            table.jsDocTags != null
-+              ? React17.createElement(
-+                  React17.Fragment,
-+                  null,
-+                  React17.createElement(
-+                    TypeWithJsDoc,
-+                    {hasDescription},
-+                    React17.createElement(ArgValue, {
-+                      value: type,
-+                      initialExpandedArgs,
-+                    })
-+                  ),
-+                  React17.createElement(ArgJsDoc, {tags: table.jsDocTags})
-+                )
-+              : React17.createElement(
-+                  Type,
-+                  {hasDescription},
-+                  React17.createElement(ArgValue, {
-+                    value: type,
-+                    initialExpandedArgs,
-+                  })
-+                )
-+          ),
-+      compact
-+        ? null
-+        : React17.createElement(
-+            'td',
-+            null,
-+            React17.createElement(ArgValue, {
-+              value: defaultValue,
-+              initialExpandedArgs,
-+            })
-+          ),
-+      updateArgs
-+        ? React17.createElement(
-+            'td',
-+            null,
-+            React17.createElement(ArgControl, {...props, isHovered})
-+          )
-+        : null
-+    );
-+  };
-+var ExpanderIconDown = styled(ChevronDownIcon$1)(({theme}) => ({
-+    marginRight: 8,
-+    marginLeft: -10,
-+    marginTop: -2,
-+    height: 12,
-+    width: 12,
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.25, theme.color.defaultText)
-+        : transparentize(0.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'
-+        ? transparentize(0.25, theme.color.defaultText)
-+        : transparentize(0.3, theme.color.defaultText),
-+    border: 'none',
-+    display: 'inline-block',
-+  })),
-+  FlexWrapper = styled.span(({theme}) => ({
-+    display: 'flex',
-+    lineHeight: '20px',
-+    alignItems: 'center',
-+  })),
-+  Section = styled.td(({theme}) => ({
-+    position: 'relative',
-+    letterSpacing: '0.35em',
-+    textTransform: 'uppercase',
-+    fontWeight: theme.typography.weight.bold,
-+    fontSize: theme.typography.size.s1 - 1,
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.4, theme.color.defaultText)
-+        : transparentize(0.6, theme.color.defaultText),
-+    background: `${theme.background.app} !important`,
-+    '& ~ td': {background: `${theme.background.app} !important`},
-+  })),
-+  Subsection = styled.td(({theme}) => ({
-+    position: 'relative',
-+    fontWeight: theme.typography.weight.bold,
-+    fontSize: theme.typography.size.s2 - 1,
-+    background: theme.background.app,
-+  })),
-+  StyledTd2 = styled.td(() => ({position: 'relative'})),
-+  StyledTr = styled.tr(({theme}) => ({
-+    '&:hover > td': {
-+      backgroundColor: `${lighten(0.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.createElement(
-+      React17.Fragment,
-+      null,
-+      React17.createElement(
-+        StyledTr,
-+        {title: helperText},
-+        React17.createElement(
-+          Level,
-+          {colSpan: 1},
-+          React17.createElement(
-+            ClickIntercept,
-+            {onClick: (e) => setExpanded(!expanded), tabIndex: 0},
-+            helperText
-+          ),
-+          React17.createElement(
-+            FlexWrapper,
-+            null,
-+            expanded
-+              ? React17.createElement(ExpanderIconDown, null)
-+              : React17.createElement(ExpanderIconRight, null),
-+            label
-+          )
-+        ),
-+        React17.createElement(
-+          StyledTd2,
-+          {colSpan: colSpan - 1},
-+          React17.createElement(
-+            ClickIntercept,
-+            {
-+              onClick: (e) => setExpanded(!expanded),
-+              tabIndex: -1,
-+              style: {outline: 'none'},
-+            },
-+            helperText
-+          ),
-+          expanded ? null : caption
-+        )
-+      ),
-+      expanded ? children : null
-+    );
-+  };
-+var 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.createElement(
-+      React17.Fragment,
-+      null,
-+      React17.createElement(
-+        Row,
-+        null,
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          React17.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      React17.createElement(
-+        Row,
-+        null,
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          React17.createElement(SkeletonText, {width: '80%'}),
-+          React17.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      React17.createElement(
-+        Row,
-+        null,
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          React17.createElement(SkeletonText, {width: '80%'}),
-+          React17.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        )
-+      ),
-+      React17.createElement(
-+        Row,
-+        null,
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[0]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[1]},
-+          React17.createElement(SkeletonText, {width: '80%'}),
-+          React17.createElement(SkeletonText, {width: '30%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[2]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        ),
-+        React17.createElement(
-+          Column,
-+          {numColumn: columnWidth[3]},
-+          React17.createElement(SkeletonText, {width: '60%'})
-+        )
-+      )
-+    );
-+var 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.createElement(
-+            Wrapper8,
-+            {inAddonPanel},
-+            React17.createElement(EmptyTabContent, {
-+              title: inAddonPanel
-+                ? 'Interactive story playground'
-+                : "Args table with interactive controls couldn't be auto-generated",
-+              description: React17.createElement(
-+                React17.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.createElement(
-+                Links,
-+                null,
-+                inAddonPanel &&
-+                  React17.createElement(
-+                    React17.Fragment,
-+                    null,
-+                    React17.createElement(
-+                      Link,
-+                      {
-+                        href: 'https://youtu.be/0gOfS6K0x0E',
-+                        target: '_blank',
-+                        withArrow: !0,
-+                      },
-+                      React17.createElement(VideoIcon, null),
-+                      ' Watch 5m video'
-+                    ),
-+                    React17.createElement(Divider, null),
-+                    React17.createElement(
-+                      Link,
-+                      {
-+                        href: 'https://storybook.js.org/docs/essentials/controls',
-+                        target: '_blank',
-+                        withArrow: !0,
-+                      },
-+                      React17.createElement(DocumentIcon, null),
-+                      ' Read docs'
-+                    )
-+                  ),
-+                !inAddonPanel &&
-+                  React17.createElement(
-+                    Link,
-+                    {
-+                      href: 'https://storybook.js.org/docs/essentials/controls',
-+                      target: '_blank',
-+                      withArrow: !0,
-+                    },
-+                    React17.createElement(DocumentIcon, null),
-+                    ' Learn how to set that up'
-+                  )
-+              ),
-+            })
-+          )
-+    );
-+  };
-+var TableWrapper = styled.table(({theme, compact, inAddonPanel}) => ({
-+    '&&': {
-+      borderSpacing: 0,
-+      color: theme.color.defaultText,
-+      'td, th': {
-+        padding: 0,
-+        border: 'none',
-+        verticalAlign: 'top',
-+        textOverflow: 'ellipsis',
-+      },
-+      fontSize: theme.typography.size.s2 - 1,
-+      lineHeight: '20px',
-+      textAlign: 'left',
-+      width: '100%',
-+      marginTop: inAddonPanel ? 0 : 25,
-+      marginBottom: inAddonPanel ? 0 : 40,
-+      'thead th:first-of-type, td:first-of-type': {width: '25%'},
-+      'th:first-of-type, td:first-of-type': {paddingLeft: 20},
-+      'th:nth-of-type(2), td:nth-of-type(2)': {
-+        ...(compact ? null : {width: '35%'}),
-+      },
-+      'td:nth-of-type(3)': {...(compact ? null : {width: '15%'})},
-+      'th:last-of-type, td:last-of-type': {
-+        paddingRight: 20,
-+        ...(compact ? null : {width: '25%'}),
-+      },
-+      th: {
-+        color:
-+          theme.base === 'light'
-+            ? transparentize(0.25, theme.color.defaultText)
-+            : transparentize(0.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',
-+  });
-+var sortFns = {
-+    alpha: (a, b) => a.name.localeCompare(b.name),
-+    requiredFirst: (a, b) =>
-+      +!!b.type?.required - +!!a.type?.required || a.name.localeCompare(b.name),
-+    none: void 0,
-+  },
-+  groupRows = (rows, sort) => {
-+    let sections = {ungrouped: [], ungroupedSubsections: {}, sections: {}};
-+    if (!rows) return sections;
-+    Object.entries(rows).forEach(([key, row]) => {
-+      let {category, subcategory} = row?.table || {};
-+      if (category) {
-+        let section = sections.sections[category] || {
-+          ungrouped: [],
-+          subsections: {},
-+        };
-+        if (!subcategory) section.ungrouped.push({key, ...row});
-+        else {
-+          let subsection = section.subsections[subcategory] || [];
-+          subsection.push({key, ...row}),
-+            (section.subsections[subcategory] = subsection);
-+        }
-+        sections.sections[category] = section;
-+      } else if (subcategory) {
-+        let subsection = sections.ungroupedSubsections[subcategory] || [];
-+        subsection.push({key, ...row}),
-+          (sections.ungroupedSubsections[subcategory] = subsection);
-+      } else sections.ungrouped.push({key, ...row});
-+    });
-+    let sortFn = sortFns[sort],
-+      sortSubsection = (record) =>
-+        sortFn
-+          ? Object.keys(record).reduce(
-+              (acc, cur) => ({...acc, [cur]: record[cur].sort(sortFn)}),
-+              {}
-+            )
-+          : record;
-+    return {
-+      ungrouped: sections.ungrouped.sort(sortFn),
-+      ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
-+      sections: Object.keys(sections.sections).reduce(
-+        (acc, cur) => ({
-+          ...acc,
-+          [cur]: {
-+            ungrouped: sections.sections[cur].ungrouped.sort(sortFn),
-+            subsections: sortSubsection(sections.sections[cur].subsections),
-+          },
-+        }),
-+        {}
-+      ),
-+    };
-+  },
-+  safeIncludeConditionalArg = (row, args, globals) => {
-+    try {
-+      return includeConditionalArg(row, args, globals);
-+    } catch (err) {
-+      return once.warn(err.message), !1;
-+    }
-+  },
-+  ArgsTable = (props) => {
-+    let {
-+      updateArgs,
-+      resetArgs,
-+      compact,
-+      inAddonPanel,
-+      initialExpandedArgs,
-+      sort = 'none',
-+      isLoading,
-+    } = props;
-+    if ('error' in props) {
-+      let {error} = props;
-+      return React17.createElement(
-+        EmptyBlock,
-+        null,
-+        error,
-+        '\xA0',
-+        React17.createElement(
-+          Link,
-+          {
-+            href: 'http://storybook.js.org/docs/',
-+            target: '_blank',
-+            withArrow: !0,
-+          },
-+          React17.createElement(DocumentIcon, null),
-+          ' Read the docs'
-+        )
-+      );
-+    }
-+    if (isLoading) return React17.createElement(Skeleton, null);
-+    let {rows, args, globals} = 'rows' in props && props,
-+      groups = groupRows(
-+        pickBy(
-+          rows,
-+          (row) =>
-+            !row?.table?.disable &&
-+            safeIncludeConditionalArg(row, args || {}, 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.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.createElement(
-+      ResetWrapper,
-+      null,
-+      React17.createElement(
-+        TableWrapper,
-+        {compact, inAddonPanel, className: 'docblock-argstable sb-unstyled'},
-+        React17.createElement(
-+          'thead',
-+          {className: 'docblock-argstable-head'},
-+          React17.createElement(
-+            'tr',
-+            null,
-+            React17.createElement(
-+              'th',
-+              null,
-+              React17.createElement('span', null, 'Name')
-+            ),
-+            compact
-+              ? null
-+              : React17.createElement(
-+                  'th',
-+                  null,
-+                  React17.createElement('span', null, 'Description')
-+                ),
-+            compact
-+              ? null
-+              : React17.createElement(
-+                  'th',
-+                  null,
-+                  React17.createElement('span', null, 'Default')
-+                ),
-+            updateArgs
-+              ? React17.createElement(
-+                  'th',
-+                  null,
-+                  React17.createElement(
-+                    ControlHeadingWrapper,
-+                    null,
-+                    'Control',
-+                    ' ',
-+                    !isLoading &&
-+                      resetArgs &&
-+                      React17.createElement(
-+                        StyledIconButton,
-+                        {onClick: () => resetArgs(), title: 'Reset controls'},
-+                        React17.createElement(UndoIcon, {'aria-hidden': !0})
-+                      )
-+                  )
-+                )
-+              : null
-+          )
-+        ),
-+        React17.createElement(
-+          'tbody',
-+          {className: 'docblock-argstable-body'},
-+          groups.ungrouped.map((row) =>
-+            React17.createElement(ArgRow, {
-+              key: row.key,
-+              row,
-+              arg: args && args[row.key],
-+              ...common,
-+            })
-+          ),
-+          Object.entries(groups.ungroupedSubsections).map(
-+            ([subcategory, subsection]) =>
-+              React17.createElement(
-+                SectionRow,
-+                {
-+                  key: subcategory,
-+                  label: subcategory,
-+                  level: 'subsection',
-+                  colSpan,
-+                },
-+                subsection.map((row) =>
-+                  React17.createElement(ArgRow, {
-+                    key: row.key,
-+                    row,
-+                    arg: args && args[row.key],
-+                    expandable,
-+                    ...common,
-+                  })
-+                )
-+              )
-+          ),
-+          Object.entries(groups.sections).map(([category, section]) =>
-+            React17.createElement(
-+              SectionRow,
-+              {key: category, label: category, level: 'section', colSpan},
-+              section.ungrouped.map((row) =>
-+                React17.createElement(ArgRow, {
-+                  key: row.key,
-+                  row,
-+                  arg: args && args[row.key],
-+                  ...common,
-+                })
-+              ),
-+              Object.entries(section.subsections).map(
-+                ([subcategory, subsection]) =>
-+                  React17.createElement(
-+                    SectionRow,
-+                    {
-+                      key: subcategory,
-+                      label: subcategory,
-+                      level: 'subsection',
-+                      colSpan,
-+                    },
-+                    subsection.map((row) =>
-+                      React17.createElement(ArgRow, {
-+                        key: row.key,
-+                        row,
-+                        arg: args && args[row.key],
-+                        expandable,
-+                        ...common,
-+                      })
-+                    )
-+                  )
-+              )
-+            )
-+          )
-+        )
-+      )
-+    );
-+  };
-+var TabbedArgsTable = ({tabs, ...props}) => {
-+  let entries = Object.entries(tabs);
-+  return entries.length === 1
-+    ? React17.createElement(ArgsTable, {...entries[0][1], ...props})
-+    : React17.createElement(
-+        TabsState,
-+        null,
-+        entries.map((entry, index) => {
-+          let [label, table] = entry,
-+            id = `prop_table_div_${label}`,
-+            Component4 = 'div',
-+            argsTableProps = index === 0 ? props : {sort: props.sort};
-+          return React17.createElement(
-+            Component4,
-+            {key: id, id, title: label},
-+            ({active}) =>
-+              active
-+                ? React17.createElement(ArgsTable, {
-+                    key: `prop_table_${label}`,
-+                    ...table,
-+                    ...argsTableProps,
-+                  })
-+                : null
-+          );
-+        })
-+      );
-+};
-+var Label4 = styled.div(({theme}) => ({
-+    marginRight: 30,
-+    fontSize: `${theme.typography.size.s1}px`,
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.4, theme.color.defaultText)
-+        : transparentize(0.6, theme.color.defaultText),
-+  })),
-+  Sample = styled.div({
-+    overflow: 'hidden',
-+    whiteSpace: 'nowrap',
-+    textOverflow: 'ellipsis',
-+  }),
-+  TypeSpecimen = styled.div({
-+    display: 'flex',
-+    flexDirection: 'row',
-+    alignItems: 'baseline',
-+    '&:not(:last-child)': {marginBottom: '1rem'},
-+  }),
-+  Wrapper9 = styled.div(withReset, ({theme}) => ({
-+    ...getBlockBackgroundStyle(theme),
-+    margin: '25px 0 40px',
-+    padding: '30px 20px',
-+  })),
-+  Typeset = ({fontFamily, fontSizes, fontWeight, sampleText, ...props}) =>
-+    React17.createElement(
-+      Wrapper9,
-+      {...props, className: 'docblock-typeset sb-unstyled'},
-+      fontSizes.map((size) =>
-+        React17.createElement(
-+          TypeSpecimen,
-+          {key: size},
-+          React17.createElement(Label4, null, size),
-+          React17.createElement(
-+            Sample,
-+            {style: {fontFamily, fontSize: size, fontWeight, lineHeight: 1.2}},
-+            sampleText || 'Was he a beast if music could move him so?'
-+          )
-+        )
-+      )
-+    );
-+var ItemTitle = styled.div(({theme}) => ({
-+    fontWeight: theme.typography.weight.bold,
-+    color: theme.color.defaultText,
-+  })),
-+  ItemSubtitle = styled.div(({theme}) => ({
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.2, theme.color.defaultText)
-+        : transparentize(0.6, theme.color.defaultText),
-+  })),
-+  ItemDescription = styled.div({
-+    flex: '0 0 30%',
-+    lineHeight: '20px',
-+    marginTop: 5,
-+  }),
-+  SwatchLabel = styled.div(({theme}) => ({
-+    flex: 1,
-+    textAlign: 'center',
-+    fontFamily: theme.typography.fonts.mono,
-+    fontSize: theme.typography.size.s1,
-+    lineHeight: 1,
-+    overflow: 'hidden',
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.4, theme.color.defaultText)
-+        : transparentize(0.6, theme.color.defaultText),
-+    '> div': {
-+      display: 'inline-block',
-+      overflow: 'hidden',
-+      maxWidth: '100%',
-+      textOverflow: 'ellipsis',
-+    },
-+    span: {display: 'block', marginTop: 2},
-+  })),
-+  SwatchLabels = styled.div({display: 'flex', flexDirection: 'row'}),
-+  Swatch = styled.div(({background}) => ({
-+    position: 'relative',
-+    flex: 1,
-+    '&::before': {
-+      position: 'absolute',
-+      top: 0,
-+      left: 0,
-+      width: '100%',
-+      height: '100%',
-+      background,
-+      content: '""',
-+    },
-+  })),
-+  SwatchColors = styled.div(({theme}) => ({
-+    ...getBlockBackgroundStyle(theme),
-+    display: 'flex',
-+    flexDirection: 'row',
-+    height: 50,
-+    marginBottom: 5,
-+    overflow: 'hidden',
-+    backgroundColor: 'white',
-+    backgroundImage:
-+      'repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)',
-+    backgroundClip: 'padding-box',
-+  })),
-+  SwatchSpecimen = styled.div({
-+    display: 'flex',
-+    flexDirection: 'column',
-+    flex: 1,
-+    position: 'relative',
-+    marginBottom: 30,
-+  }),
-+  Swatches = styled.div({flex: 1, display: 'flex', flexDirection: 'row'}),
-+  Item = styled.div({display: 'flex', alignItems: 'flex-start'}),
-+  ListName = styled.div({flex: '0 0 30%'}),
-+  ListSwatches = styled.div({flex: 1}),
-+  ListHeading = styled.div(({theme}) => ({
-+    display: 'flex',
-+    flexDirection: 'row',
-+    alignItems: 'center',
-+    paddingBottom: 20,
-+    fontWeight: theme.typography.weight.bold,
-+    color:
-+      theme.base === 'light'
-+        ? transparentize(0.4, theme.color.defaultText)
-+        : transparentize(0.6, theme.color.defaultText),
-+  })),
-+  List = styled.div(({theme}) => ({
-+    fontSize: theme.typography.size.s2,
-+    lineHeight: '20px',
-+    display: 'flex',
-+    flexDirection: 'column',
-+  }));
-+function renderSwatch(color, index) {
-+  return React17.createElement(Swatch, {
-+    key: `${color}-${index}`,
-+    title: color,
-+    background: color,
-+  });
-+}
-+function renderSwatchLabel(color, index, colorDescription) {
-+  return React17.createElement(
-+    SwatchLabel,
-+    {key: `${color}-${index}`, title: color},
-+    React17.createElement(
-+      'div',
-+      null,
-+      color,
-+      colorDescription && React17.createElement('span', null, colorDescription)
-+    )
-+  );
-+}
-+function renderSwatchSpecimen(colors) {
-+  if (Array.isArray(colors))
-+    return React17.createElement(
-+      SwatchSpecimen,
-+      null,
-+      React17.createElement(
-+        SwatchColors,
-+        null,
-+        colors.map((color, index) => renderSwatch(color, index))
-+      ),
-+      React17.createElement(
-+        SwatchLabels,
-+        null,
-+        colors.map((color, index) => renderSwatchLabel(color, index))
-+      )
-+    );
-+  let swatchElements = [],
-+    labelElements = [];
-+  for (let colorKey in colors) {
-+    let colorValue = colors[colorKey];
-+    swatchElements.push(renderSwatch(colorValue, swatchElements.length)),
-+      labelElements.push(
-+        renderSwatchLabel(colorKey, labelElements.length, colorValue)
-+      );
-+  }
-+  return React17.createElement(
-+    SwatchSpecimen,
-+    null,
-+    React17.createElement(SwatchColors, null, swatchElements),
-+    React17.createElement(SwatchLabels, null, labelElements)
-+  );
-+}
-+var ColorItem = ({title, subtitle, colors}) =>
-+    React17.createElement(
-+      Item,
-+      null,
-+      React17.createElement(
-+        ItemDescription,
-+        null,
-+        React17.createElement(ItemTitle, null, title),
-+        React17.createElement(ItemSubtitle, null, subtitle)
-+      ),
-+      React17.createElement(Swatches, null, renderSwatchSpecimen(colors))
-+    ),
-+  ColorPalette = ({children, ...props}) =>
-+    React17.createElement(
-+      ResetWrapper,
-+      null,
-+      React17.createElement(
-+        List,
-+        {...props, className: 'docblock-colorpalette sb-unstyled'},
-+        React17.createElement(
-+          ListHeading,
-+          null,
-+          React17.createElement(ListName, null, 'Name'),
-+          React17.createElement(ListSwatches, null, 'Swatches')
-+        ),
-+        children
-+      )
-+    );
-+var ItemLabel = styled.div(({theme}) => ({
-+    fontFamily: theme.typography.fonts.base,
-+    fontSize: theme.typography.size.s2,
-+    color: theme.color.defaultText,
-+    marginLeft: 10,
-+    lineHeight: 1.2,
-+  })),
-+  ItemSpecimen = styled.div(({theme}) => ({
-+    ...getBlockBackgroundStyle(theme),
-+    overflow: 'hidden',
-+    height: 40,
-+    width: 40,
-+    display: 'flex',
-+    alignItems: 'center',
-+    justifyContent: 'center',
-+    flex: 'none',
-+    '> img, > svg': {width: 20, height: 20},
-+  })),
-+  Item2 = styled.div({
-+    display: 'inline-flex',
-+    flexDirection: 'row',
-+    alignItems: 'center',
-+    flex: '0 1 calc(20% - 10px)',
-+    minWidth: 120,
-+    margin: '0px 10px 30px 0',
-+  }),
-+  List2 = styled.div({display: 'flex', flexFlow: 'row wrap'}),
-+  IconItem = ({name, children}) =>
-+    React17.createElement(
-+      Item2,
-+      null,
-+      React17.createElement(ItemSpecimen, null, children),
-+      React17.createElement(ItemLabel, null, name)
-+    ),
-+  IconGallery = ({children, ...props}) =>
-+    React17.createElement(
-+      ResetWrapper,
-+      null,
-+      React17.createElement(
-+        List2,
-+        {...props, className: 'docblock-icongallery sb-unstyled'},
-+        children
-+      )
-+    );
-+var anchorBlockIdFromId = (storyId) => `anchor--${storyId}`,
-+  Anchor = ({storyId, children}) =>
-+    React17.createElement(
-+      'div',
-+      {id: anchorBlockIdFromId(storyId), className: 'sb-anchor'},
-+      children
-+    );
-+global &&
-+  global.__DOCS_CONTEXT__ === void 0 &&
-+  ((global.__DOCS_CONTEXT__ = createContext(null)),
-+  (global.__DOCS_CONTEXT__.displayName = 'DocsContext'));
-+var DocsContext = global ? global.__DOCS_CONTEXT__ : createContext(null);
-+var useOf = (moduleExportOrType, validTypes) =>
-+  useContext(DocsContext).resolveOf(moduleExportOrType, validTypes);
-+var titleCase = (str) =>
-+    str
-+      .split('-')
-+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-+      .join(''),
-+  getComponentName = (component) => {
-+    if (component)
-+      return typeof component == 'string'
-+        ? component.includes('-')
-+          ? titleCase(component)
-+          : component
-+        : component.__docgenInfo && component.__docgenInfo.displayName
-+          ? component.__docgenInfo.displayName
-+          : component.name;
-+  };
-+function scrollToElement(element, block = 'start') {
-+  element.scrollIntoView({behavior: 'smooth', block, inline: 'nearest'});
-+}
-+function 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) {
-+  if (resolved.type === 'component') {
-+    let {
-+      component: component2,
-+      projectAnnotations: {parameters: parameters2},
-+    } = resolved;
-+    return {
-+      argTypes: extractComponentArgTypes(component2, parameters2),
-+      parameters: parameters2,
-+      component: component2,
-+    };
-+  }
-+  if (resolved.type === 'meta') {
-+    let {
-+      preparedMeta: {
-+        argTypes: argTypes2,
-+        parameters: parameters2,
-+        component: component2,
-+        subcomponents: subcomponents2,
-+      },
-+    } = resolved;
-+    return {
-+      argTypes: argTypes2,
-+      parameters: parameters2,
-+      component: component2,
-+      subcomponents: subcomponents2,
-+    };
-+  }
-+  let {
-+    story: {argTypes, parameters, component, subcomponents},
-+  } = resolved;
-+  return {argTypes, parameters, component, subcomponents};
-+}
-+var ArgTypes = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let resolved = useOf(of || 'meta'),
-+    {argTypes, parameters, component, subcomponents} =
-+      getArgTypesFromResolved(resolved),
-+    argTypesParameters = parameters.docs?.argTypes || {},
-+    include = props.include ?? argTypesParameters.include,
-+    exclude = props.exclude ?? argTypesParameters.exclude,
-+    sort = props.sort ?? argTypesParameters.sort,
-+    filteredArgTypes = filterArgTypes(argTypes, include, exclude);
-+  if (!(!!subcomponents && Object.keys(subcomponents).length > 0))
-+    return React17.createElement(ArgsTable, {rows: filteredArgTypes, sort});
-+  let mainComponentName = getComponentName(component),
-+    subcomponentTabs = Object.fromEntries(
-+      Object.entries(subcomponents).map(([key, comp]) => [
-+        key,
-+        {
-+          rows: filterArgTypes(
-+            extractComponentArgTypes(comp, parameters),
-+            include,
-+            exclude
-+          ),
-+          sort,
-+        },
-+      ])
-+    ),
-+    tabs = {
-+      [mainComponentName]: {rows: filteredArgTypes, sort},
-+      ...subcomponentTabs,
-+    };
-+  return React17.createElement(TabbedArgsTable, {tabs, sort});
-+};
-+function argsHash(args) {
-+  return stringify(args, {allowFunction: !1});
-+}
-+var SourceContext = createContext({sources: {}}),
-+  UNKNOWN_ARGS_HASH = '--unknown--',
-+  SourceContainer = ({children, channel}) => {
-+    let [sources, setSources] = useState({});
-+    return (
-+      useEffect(() => {
-+        let handleSnippetRendered = (
-+          idOrEvent,
-+          inputSource = null,
-+          inputFormat = !1
-+        ) => {
-+          let {
-+              id,
-+              args = void 0,
-+              source,
-+              format: format2,
-+            } = typeof idOrEvent == 'string'
-+              ? {id: idOrEvent, source: inputSource, format: inputFormat}
-+              : idOrEvent,
-+            hash = args ? argsHash(args) : UNKNOWN_ARGS_HASH;
-+          setSources((current) => ({
-+            ...current,
-+            [id]: {...current[id], [hash]: {code: source, format: format2}},
-+          }));
-+        };
-+        return (
-+          channel.on(SNIPPET_RENDERED, handleSnippetRendered),
-+          () => channel.off(SNIPPET_RENDERED, handleSnippetRendered)
-+        );
-+      }, []),
-+      React17.createElement(
-+        SourceContext.Provider,
-+        {value: {sources}},
-+        children
-+      )
-+    );
-+  };
-+var getStorySource = (storyId, args, sourceContext) => {
-+    let {sources} = sourceContext,
-+      sourceMap = sources?.[storyId];
-+    return (
-+      sourceMap?.[argsHash(args)] ||
-+      sourceMap?.[UNKNOWN_ARGS_HASH] || {code: ''}
-+    );
-+  },
-+  getSnippet = ({snippet, storyContext, typeFromProps, transformFromProps}) => {
-+    let {__isArgsStory: isArgsStory} = storyContext.parameters,
-+      sourceParameters = storyContext.parameters.docs?.source || {},
-+      type = typeFromProps || sourceParameters.type || SourceType.AUTO;
-+    if (sourceParameters.code !== void 0) return sourceParameters.code;
-+    let code =
-+      type === SourceType.DYNAMIC ||
-+      (type === SourceType.AUTO && snippet && isArgsStory)
-+        ? snippet
-+        : sourceParameters.originalSource || '';
-+    return (
-+      (transformFromProps ?? sourceParameters.transform)?.(
-+        code,
-+        storyContext
-+      ) || code
-+    );
-+  },
-+  useSourceProps = (props, docsContext, sourceContext) => {
-+    let story,
-+      {of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    if (of) story = docsContext.resolveOf(of, ['story']).story;
-+    else
-+      try {
-+        story = docsContext.storyById();
-+      } catch {}
-+    let sourceParameters = story?.parameters?.docs?.source || {},
-+      {code} = props,
-+      format2 = props.format ?? sourceParameters.format,
-+      language = props.language ?? sourceParameters.language ?? 'jsx',
-+      dark = props.dark ?? sourceParameters.dark ?? !1;
-+    if (!code && !story) return {error: 'Oh no! The source is not available.'};
-+    if (code) return {code, format: format2, language, dark};
-+    let storyContext = docsContext.getStoryContext(story),
-+      argsForSource = props.__forceInitialArgs
-+        ? storyContext.initialArgs
-+        : storyContext.unmappedArgs,
-+      source = getStorySource(story.id, argsForSource, sourceContext);
-+    return (
-+      (format2 = source.format ?? story.parameters.docs?.source?.format ?? !1),
-+      {
-+        code: getSnippet({
-+          snippet: source.code,
-+          storyContext: {...storyContext, args: argsForSource},
-+          typeFromProps: props.type,
-+          transformFromProps: props.transform,
-+        }),
-+        format: format2,
-+        language,
-+        dark,
-+      }
-+    );
-+  },
-+  Source2 = (props) => {
-+    let sourceContext = useContext(SourceContext),
-+      docsContext = useContext(DocsContext),
-+      sourceProps = useSourceProps(props, docsContext, sourceContext);
-+    return React17.createElement(Source, {...sourceProps});
-+  };
-+function useStory(storyId, context) {
-+  let stories = useStories([storyId], context);
-+  return stories && stories[0];
-+}
-+function useStories(storyIds, context) {
-+  let [storiesById, setStories] = useState({});
-+  return (
-+    useEffect(() => {
-+      Promise.all(
-+        storyIds.map(async (storyId) => {
-+          let story = await context.loadStory(storyId);
-+          setStories((current) =>
-+            current[storyId] === story
-+              ? current
-+              : {...current, [storyId]: story}
-+          );
-+        })
-+      );
-+    }),
-+    storyIds.map((storyId) => {
-+      if (storiesById[storyId]) return storiesById[storyId];
-+      try {
-+        return context.storyById(storyId);
-+      } catch {
-+        return null;
-+      }
-+    })
-+  );
-+}
-+var getStoryId2 = (props, context) => {
-+    let {of, meta} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    return (
-+      meta && context.referenceMeta(meta, !1),
-+      context.resolveOf(of || 'story', ['story']).story.id
-+    );
-+  },
-+  getStoryProps = (props, story, context) => {
-+    let {parameters = {}} = story || {},
-+      {docs = {}} = parameters,
-+      storyParameters = docs.story || {};
-+    if (docs.disable) return null;
-+    if (props.inline ?? storyParameters.inline ?? !1) {
-+      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 ??
-+      '100px';
-+    return {story, inline: !1, height, primary: !!props.__primary};
-+  },
-+  Story2 = (props = {__forceInitialArgs: !1, __primary: !1}) => {
-+    let context = useContext(DocsContext),
-+      storyId = getStoryId2(props, context),
-+      story = useStory(storyId, context);
-+    if (!story) return React17.createElement(StorySkeleton, null);
-+    let storyProps = getStoryProps(props, story, context);
-+    return storyProps ? React17.createElement(Story, {...storyProps}) : null;
-+  };
-+var Canvas = (props) => {
-+  let docsContext = useContext(DocsContext),
-+    sourceContext = useContext(SourceContext),
-+    {of, source} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let {story} = useOf(of || 'story', ['story']),
-+    sourceProps = useSourceProps(
-+      {...source, ...(of && {of})},
-+      docsContext,
-+      sourceContext
-+    ),
-+    layout =
-+      props.layout ??
-+      story.parameters.layout ??
-+      story.parameters.docs?.canvas?.layout ??
-+      'padded',
-+    withToolbar =
-+      props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? !1,
-+    additionalActions =
-+      props.additionalActions ??
-+      story.parameters.docs?.canvas?.additionalActions,
-+    sourceState =
-+      props.sourceState ??
-+      story.parameters.docs?.canvas?.sourceState ??
-+      'hidden',
-+    className = props.className ?? story.parameters.docs?.canvas?.className;
-+  return React17.createElement(
-+    Preview,
-+    {
-+      withSource: sourceState === 'none' ? void 0 : sourceProps,
-+      isExpanded: sourceState === 'shown',
-+      withToolbar,
-+      additionalActions,
-+      className,
-+      layout,
-+    },
-+    React17.createElement(Story2, {
-+      of: of || story.moduleExport,
-+      meta: props.meta,
-+      ...props.story,
-+    })
-+  );
-+};
-+var useGlobals = (story, context) => {
-+  let storyContext = context.getStoryContext(story),
-+    [globals, setGlobals] = useState(storyContext.globals);
-+  return (
-+    useEffect(() => {
-+      let onGlobalsUpdated = (changed) => {
-+        setGlobals(changed.globals);
-+      };
-+      return (
-+        context.channel.on(GLOBALS_UPDATED, onGlobalsUpdated),
-+        () => context.channel.off(GLOBALS_UPDATED, onGlobalsUpdated)
-+      );
-+    }, [context.channel]),
-+    [globals]
-+  );
-+};
-+var useArgs = (story, context) => {
-+    let result = useArgsIfDefined(story, context);
-+    if (!result) throw new Error('No result when story was defined');
-+    return result;
-+  },
-+  useArgsIfDefined = (story, context) => {
-+    let storyContext = story ? context.getStoryContext(story) : {args: {}},
-+      {id: storyId} = story || {id: 'none'},
-+      [args, setArgs] = useState(storyContext.args);
-+    useEffect(() => {
-+      let onArgsUpdated = (changed) => {
-+        changed.storyId === storyId && setArgs(changed.args);
-+      };
-+      return (
-+        context.channel.on(STORY_ARGS_UPDATED, onArgsUpdated),
-+        () => context.channel.off(STORY_ARGS_UPDATED, onArgsUpdated)
-+      );
-+    }, [storyId, context.channel]);
-+    let updateArgs = useCallback(
-+        (updatedArgs) =>
-+          context.channel.emit(UPDATE_STORY_ARGS, {storyId, updatedArgs}),
-+        [storyId, context.channel]
-+      ),
-+      resetArgs = useCallback(
-+        (argNames) =>
-+          context.channel.emit(RESET_STORY_ARGS, {storyId, argNames}),
-+        [storyId, context.channel]
-+      );
-+    return story && [args, updateArgs, resetArgs];
-+  };
-+function extractComponentArgTypes2(component, parameters) {
-+  let {extractArgTypes} = parameters.docs || {};
-+  if (!extractArgTypes)
-+    throw new Error(
-+      'Args unsupported. See Args documentation for your framework.'
-+    );
-+  return extractArgTypes(component);
-+}
-+var Controls3 = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let context = useContext(DocsContext),
-+    {story} = context.resolveOf(of || 'story', ['story']),
-+    {parameters, argTypes, component, subcomponents} = story,
-+    controlsParameters = parameters.docs?.controls || {},
-+    include = props.include ?? controlsParameters.include,
-+    exclude = props.exclude ?? controlsParameters.exclude,
-+    sort = props.sort ?? controlsParameters.sort,
-+    [args, updateArgs, resetArgs] = useArgs(story, context),
-+    [globals] = useGlobals(story, context),
-+    filteredArgTypes = filterArgTypes(argTypes, include, exclude);
-+  if (!(!!subcomponents && Object.keys(subcomponents).length > 0))
-+    return Object.keys(filteredArgTypes).length > 0 ||
-+      Object.keys(args).length > 0
-+      ? React17.createElement(ArgsTable, {
-+          rows: filteredArgTypes,
-+          sort,
-+          args,
-+          globals,
-+          updateArgs,
-+          resetArgs,
-+        })
-+      : null;
-+  let mainComponentName = getComponentName(component),
-+    subcomponentTabs = Object.fromEntries(
-+      Object.entries(subcomponents).map(([key, comp]) => [
-+        key,
-+        {
-+          rows: filterArgTypes(
-+            extractComponentArgTypes2(comp, parameters),
-+            include,
-+            exclude
-+          ),
-+          sort,
-+        },
-+      ])
-+    ),
-+    tabs = {
-+      [mainComponentName]: {rows: filteredArgTypes, sort},
-+      ...subcomponentTabs,
-+    };
-+  return React17.createElement(TabbedArgsTable, {
-+    tabs,
-+    sort,
-+    args,
-+    globals,
-+    updateArgs,
-+    resetArgs,
-+  });
-+};
-+var {document: document2} = global,
-+  assertIsFn = (val) => {
-+    if (typeof val != 'function')
-+      throw new Error(`Expected story function, got: ${val}`);
-+    return val;
-+  },
-+  AddContext = (props) => {
-+    let {children, ...rest} = props,
-+      parentContext = React17.useContext(DocsContext);
-+    return React17.createElement(
-+      DocsContext.Provider,
-+      {value: {...parentContext, ...rest}},
-+      children
-+    );
-+  },
-+  CodeOrSourceMdx = ({className, children, ...rest}) => {
-+    if (
-+      typeof className != 'string' &&
-+      (typeof children != 'string' || !children.match(/[\n\r]/g))
-+    )
-+      return React17.createElement(Code, null, children);
-+    let language = className && className.split('-');
-+    return React17.createElement(Source, {
-+      language: (language && language[1]) || 'text',
-+      format: !1,
-+      code: children,
-+      ...rest,
-+    });
-+  };
-+function navigate(context, url) {
-+  context.channel.emit(NAVIGATE_URL, url);
-+}
-+var A = components.a,
-+  AnchorInPage = ({hash, children}) => {
-+    let context = useContext(DocsContext);
-+    return React17.createElement(
-+      A,
-+      {
-+        href: hash,
-+        target: '_self',
-+        onClick: (event) => {
-+          let id = hash.substring(1);
-+          document2.getElementById(id) && navigate(context, hash);
-+        },
-+      },
-+      children
-+    );
-+  },
-+  AnchorMdx = (props) => {
-+    let {href, target, children, ...rest} = props,
-+      context = useContext(DocsContext);
-+    return !href || target === '_blank' || /^https?:\/\//.test(href)
-+      ? React17.createElement(A, {...props})
-+      : href.startsWith('#')
-+        ? React17.createElement(AnchorInPage, {hash: href}, children)
-+        : React17.createElement(
-+            A,
-+            {
-+              href,
-+              onClick: (event) => {
-+                event.button === 0 &&
-+                  !event.altKey &&
-+                  !event.ctrlKey &&
-+                  !event.metaKey &&
-+                  !event.shiftKey &&
-+                  (event.preventDefault(),
-+                  navigate(context, event.currentTarget.getAttribute('href')));
-+              },
-+              target,
-+              ...rest,
-+            },
-+            children
-+          );
-+  },
-+  SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-+  OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
-+    (acc, headerType) => ({
-+      ...acc,
-+      [headerType]: styled(headerType)({
-+        '& svg': {position: 'relative', top: '-0.1em', visibility: 'hidden'},
-+        '&:hover svg': {visibility: 'visible'},
-+      }),
-+    }),
-+    {}
-+  ),
-+  OcticonAnchor = styled.a(() => ({
-+    float: 'left',
-+    lineHeight: 'inherit',
-+    paddingRight: '10px',
-+    marginLeft: '-24px',
-+    color: 'inherit',
-+  })),
-+  HeaderWithOcticonAnchor = ({as, id, children, ...rest}) => {
-+    let context = useContext(DocsContext),
-+      OcticonHeader = OcticonHeaders[as],
-+      hash = `#${id}`;
-+    return React17.createElement(
-+      OcticonHeader,
-+      {id, ...rest},
-+      React17.createElement(
-+        OcticonAnchor,
-+        {
-+          'aria-hidden': 'true',
-+          href: hash,
-+          tabIndex: -1,
-+          target: '_self',
-+          onClick: (event) => {
-+            document2.getElementById(id) && navigate(context, hash);
-+          },
-+        },
-+        React17.createElement(LinkIcon, null)
-+      ),
-+      children
-+    );
-+  },
-+  HeaderMdx = (props) => {
-+    let {as, id, children, ...rest} = props;
-+    if (id)
-+      return React17.createElement(
-+        HeaderWithOcticonAnchor,
-+        {as, id, ...rest},
-+        children
-+      );
-+    let Component4 = as,
-+      {as: omittedAs, ...withoutAs} = props;
-+    return React17.createElement(Component4, {
-+      ...nameSpaceClassNames(withoutAs, as),
-+    });
-+  },
-+  HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(
-+    (acc, headerType) => ({
-+      ...acc,
-+      [headerType]: (props) =>
-+        React17.createElement(HeaderMdx, {as: headerType, ...props}),
-+    }),
-+    {}
-+  );
-+var Markdown2 = (props) => {
-+  if (!props.children) return null;
-+  if (typeof props.children != 'string')
-+    throw new Error(dedent`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
-         This is often caused by not wrapping the child in a template string.
-         
-         This is invalid:
-@@ -54,6 +5518,620 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
-           A paragraph
-         \`}
-         </Markdown>
--      `);return React17.createElement(Markdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},DescriptionContainer=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolvedOf=useOf(of||"meta"),markdown=getDescriptionFromResolvedOf(resolvedOf);return markdown?React17.createElement(Markdown2,null,markdown):null};var Wrapper10=styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content=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"}})),Heading=styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?React17.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>(useEffect(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".docs-story *, .skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return ()=>{clearTimeout(timeout),tocbot.destroy();}},[disable]),React17.createElement(React17.Fragment,null,React17.createElement(Wrapper10,null,disable?null:React17.createElement(Content,null,React17.createElement(OptionalTitle,{title:title||null}),React17.createElement("div",{className:"toc-wrapper"})))));var {document:document3,window:globalWindow3}=global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc;}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc;}return 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{}}),React17.createElement(DocsContext.Provider,{value:context},React17.createElement(SourceContainer,{channel:context.channel},React17.createElement(ThemeProvider,{theme:ensure(theme)},React17.createElement(DocsPageWrapper,{toc:toc?React17.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups?.[groups?.length-1]||title},Title2=props=>{let{children,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let preparedMeta;try{preparedMeta=useOf(of||"meta",["meta"]).preparedMeta;}catch(error){if(children&&!error.message.includes("did you forget to use <Meta of={} />?"))throw error}let content=children||extractTitle(preparedMeta?.title);return content?React17.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle",Subtitle2=props=>{let{of,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let preparedMeta;try{preparedMeta=useOf(of||"meta",["meta"]).preparedMeta;}catch(error){if(children&&!error.message.includes("did you forget to use <Meta of={} />?"))throw error}let{componentSubtitle,docs}=preparedMeta?.parameters||{};componentSubtitle&&deprecate(`Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let content=children||docs?.subtitle||componentSubtitle;return content?React17.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H3,null,children);let tagID=globalThis.encodeURIComponent(children.toLowerCase());return React17.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{let{story}=useOf(of||"story",["story"]),withToolbar=story.parameters.docs?.canvas?.withToolbar??withToolbarProp;return React17.createElement(Anchor,{storyId:story.id},expanded&&React17.createElement(React17.Fragment,null,React17.createElement(Subheading,null,story.name),React17.createElement(DescriptionContainer,{of})),React17.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{csfFile}=useOf(of||"meta",["meta"]),primaryStory=useContext(DocsContext).componentStoriesFromCSFFile(csfFile)[0];return primaryStory?React17.createElement(DocsStory,{of:primaryStory.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=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"}})),Stories=({title="Stories",includePrimary=!0})=>{let{componentStories,projectAnnotations,getStoryContext}=useContext(DocsContext),stories=componentStories(),{stories:{filter}={filter:void 0}}=projectAnnotations.parameters?.docs||{};return filter&&(stories=stories.filter(story=>filter(story,getStoryContext(story)))),stories.some(story=>story.tags?.includes("autodocs"))&&(stories=stories.filter(story=>story.tags?.includes("autodocs"))),includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:React17.createElement(React17.Fragment,null,React17.createElement(StyledHeading,null,title),stories.map(story=>story&&React17.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return React17.createElement(React17.Fragment,null,React17.createElement(Title2,null),React17.createElement(Subtitle2,null),React17.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?React17.createElement(DescriptionContainer,{of:"story"}):null,React17.createElement(Primary,null),React17.createElement(Controls3,null),isSingleStory?null:React17.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return React17.createElement(Container,{context,theme:docsParameter.theme},React17.createElement(Page,null))}var ExternalDocsContext=class extends DocsContext$1{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 Preview$1{constructor(projectAnnotations){super(path=>Promise.resolve(this.moduleExportsByImportPath[path]),()=>composeConfigs([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations]),new Channel({}));this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:5,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.storyStoreValue.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id,name})=>{this.storyIndex.entries[id]={id,importPath,title,name,type:"story"};}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStoreValue,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));}async getStoryIndexFromServer(){return this.storyIndex}};function usePreview(projectAnnotations){let previewRef=useRef();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotationsList,children}){let projectAnnotations=composeConfigs(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...projectAnnotations.parameters?.docs,page:()=>children};return React17.createElement(Docs,{docsParameter,context:preview2.docsContext()})}var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),React17.createElement(DocsContext.Provider,{value:preview.docsContext()},React17.createElement(ThemeProvider,{theme:ensure(themes.light)},children)));var Meta=({of})=>{let context=useContext(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return React17.createElement(Anchor,{storyId:primary.id})}catch{return null}};var Unstyled=props=>React17.createElement("div",{...props,className:"sb-unstyled"});var Wrapper11=({children})=>React17.createElement("div",{style:{fontFamily:"sans-serif"}},children);var PRIMARY_STORY="^";
-+      `);
-+  return React17.createElement(Markdown, {
-+    ...props,
-+    options: {
-+      forceBlock: !0,
-+      overrides: {
-+        code: CodeOrSourceMdx,
-+        a: AnchorMdx,
-+        ...HeadersMdx,
-+        ...props?.options?.overrides,
-+      },
-+      ...props?.options,
-+    },
-+  });
-+};
-+var DescriptionType = ((DescriptionType2) => (
-+    (DescriptionType2.INFO = 'info'),
-+    (DescriptionType2.NOTES = 'notes'),
-+    (DescriptionType2.DOCGEN = 'docgen'),
-+    (DescriptionType2.AUTO = 'auto'),
-+    DescriptionType2
-+  ))(DescriptionType || {}),
-+  getDescriptionFromResolvedOf = (resolvedOf) => {
-+    switch (resolvedOf.type) {
-+      case 'story':
-+        return resolvedOf.story.parameters.docs?.description?.story || null;
-+      case 'meta': {
-+        let {parameters, component} = resolvedOf.preparedMeta,
-+          metaDescription = parameters.docs?.description?.component;
-+        return (
-+          metaDescription ||
-+          parameters.docs?.extractComponentDescription?.(component, {
-+            component,
-+            parameters,
-+          }) ||
-+          null
-+        );
-+      }
-+      case 'component': {
-+        let {
-+          component,
-+          projectAnnotations: {parameters},
-+        } = resolvedOf;
-+        return (
-+          parameters.docs?.extractComponentDescription?.(component, {
-+            component,
-+            parameters,
-+          }) || null
-+        );
-+      }
-+      default:
-+        throw new Error(
-+          `Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`
-+        );
-+    }
-+  },
-+  DescriptionContainer = (props) => {
-+    let {of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let resolvedOf = useOf(of || 'meta'),
-+      markdown = getDescriptionFromResolvedOf(resolvedOf);
-+    return markdown ? React17.createElement(Markdown2, null, markdown) : null;
-+  };
-+var Wrapper10 = styled.div(({theme}) => ({
-+    width: '10rem',
-+    '@media (max-width: 768px)': {display: 'none'},
-+  })),
-+  Content = 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',
-+    },
-+  })),
-+  Heading = styled.p(({theme}) => ({
-+    fontWeight: 600,
-+    fontSize: '0.875em',
-+    color: theme.textColor,
-+    textTransform: 'uppercase',
-+    marginBottom: 10,
-+  })),
-+  OptionalTitle = ({title}) =>
-+    title === null
-+      ? null
-+      : typeof title == 'string'
-+        ? React17.createElement(Heading, null, title)
-+        : title,
-+  TableOfContents = ({
-+    title,
-+    disable,
-+    headingSelector,
-+    contentsSelector,
-+    ignoreSelector,
-+    unsafeTocbotOptions,
-+  }) => (
-+    useEffect(() => {
-+      let configuration = {
-+          tocSelector: '.toc-wrapper',
-+          contentSelector: contentsSelector ?? '.sbdocs-content',
-+          headingSelector: headingSelector ?? 'h3',
-+          ignoreSelector: ignoreSelector ?? '.docs-story *, .skip-toc',
-+          headingsOffset: 40,
-+          scrollSmoothOffset: -40,
-+          orderedList: !1,
-+          onClick: () => !1,
-+          ...unsafeTocbotOptions,
-+        },
-+        timeout = setTimeout(() => tocbot.init(configuration), 100);
-+      return () => {
-+        clearTimeout(timeout), tocbot.destroy();
-+      };
-+    }, [disable]),
-+    React17.createElement(
-+      React17.Fragment,
-+      null,
-+      React17.createElement(
-+        Wrapper10,
-+        null,
-+        disable
-+          ? null
-+          : React17.createElement(
-+              Content,
-+              null,
-+              React17.createElement(OptionalTitle, {title: title || null}),
-+              React17.createElement('div', {className: 'toc-wrapper'})
-+            )
-+      )
-+    )
-+  );
-+var {document: document3, window: globalWindow3} = global,
-+  DocsContainer = ({context, theme, children}) => {
-+    let toc;
-+    try {
-+      toc = context.resolveOf('meta', ['meta']).preparedMeta.parameters?.docs
-+        ?.toc;
-+    } catch {
-+      toc = context?.projectAnnotations?.parameters?.docs?.toc;
-+    }
-+    return (
-+      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 {}
-+      }),
-+      React17.createElement(
-+        DocsContext.Provider,
-+        {value: context},
-+        React17.createElement(
-+          SourceContainer,
-+          {channel: context.channel},
-+          React17.createElement(
-+            ThemeProvider,
-+            {theme: ensure(theme)},
-+            React17.createElement(
-+              DocsPageWrapper,
-+              {
-+                toc: toc
-+                  ? React17.createElement(TableOfContents, {
-+                      className: 'sbdocs sbdocs-toc--custom',
-+                      ...toc,
-+                    })
-+                  : null,
-+              },
-+              children
-+            )
-+          )
-+        )
-+      )
-+    );
-+  };
-+var STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/,
-+  extractTitle = (title) => {
-+    let groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
-+    return groups?.[groups?.length - 1] || title;
-+  },
-+  Title2 = (props) => {
-+    let {children, of} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let preparedMeta;
-+    try {
-+      preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
-+    } catch (error) {
-+      if (
-+        children &&
-+        !error.message.includes('did you forget to use <Meta of={} />?')
-+      )
-+        throw error;
-+    }
-+    let content = children || extractTitle(preparedMeta?.title);
-+    return content
-+      ? React17.createElement(
-+          Title,
-+          {className: 'sbdocs-title sb-unstyled'},
-+          content
-+        )
-+      : null;
-+  };
-+var DEPRECATION_MIGRATION_LINK =
-+    'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle',
-+  Subtitle2 = (props) => {
-+    let {of, children} = props;
-+    if ('of' in props && of === void 0)
-+      throw new Error(
-+        'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+      );
-+    let preparedMeta;
-+    try {
-+      preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
-+    } catch (error) {
-+      if (
-+        children &&
-+        !error.message.includes('did you forget to use <Meta of={} />?')
-+      )
-+        throw error;
-+    }
-+    let {componentSubtitle, docs} = preparedMeta?.parameters || {};
-+    componentSubtitle &&
-+      deprecate(
-+        `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-+      );
-+    let content = children || docs?.subtitle || componentSubtitle;
-+    return content
-+      ? React17.createElement(
-+          Subtitle,
-+          {className: 'sbdocs-subtitle sb-unstyled'},
-+          content
-+        )
-+      : null;
-+  };
-+var Subheading = ({children, disableAnchor}) => {
-+  if (disableAnchor || typeof children != 'string')
-+    return React17.createElement(H3, null, children);
-+  let tagID = globalThis.encodeURIComponent(children.toLowerCase());
-+  return React17.createElement(HeaderMdx, {as: 'h3', id: tagID}, children);
-+};
-+var DocsStory = ({
-+  of,
-+  expanded = !0,
-+  withToolbar: withToolbarProp = !1,
-+  __forceInitialArgs = !1,
-+  __primary = !1,
-+}) => {
-+  let {story} = useOf(of || 'story', ['story']),
-+    withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp;
-+  return React17.createElement(
-+    Anchor,
-+    {storyId: story.id},
-+    expanded &&
-+      React17.createElement(
-+        React17.Fragment,
-+        null,
-+        React17.createElement(Subheading, null, story.name),
-+        React17.createElement(DescriptionContainer, {of})
-+      ),
-+    React17.createElement(Canvas, {
-+      of,
-+      withToolbar,
-+      story: {__forceInitialArgs, __primary},
-+      source: {__forceInitialArgs},
-+    })
-+  );
-+};
-+var Primary = (props) => {
-+  let {of} = props;
-+  if ('of' in props && of === void 0)
-+    throw new Error(
-+      'Unexpected `of={undefined}`, did you mistype a CSF file reference?'
-+    );
-+  let {csfFile} = useOf(of || 'meta', ['meta']),
-+    primaryStory =
-+      useContext(DocsContext).componentStoriesFromCSFFile(csfFile)[0];
-+  return primaryStory
-+    ? React17.createElement(DocsStory, {
-+        of: primaryStory.moduleExport,
-+        expanded: !1,
-+        __primary: !0,
-+        withToolbar: !0,
-+      })
-+    : null;
-+};
-+var Heading2 = ({children, disableAnchor, ...props}) => {
-+  if (disableAnchor || typeof children != 'string')
-+    return React17.createElement(H2, null, children);
-+  let tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
-+  return React17.createElement(
-+    HeaderMdx,
-+    {as: 'h2', id: tagID, ...props},
-+    children
-+  );
-+};
-+var StyledHeading = 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'},
-+  })),
-+  Stories = ({title = 'Stories', includePrimary = !0}) => {
-+    let {componentStories, projectAnnotations, getStoryContext} =
-+        useContext(DocsContext),
-+      stories = componentStories(),
-+      {stories: {filter} = {filter: void 0}} =
-+        projectAnnotations.parameters?.docs || {};
-+    return (
-+      filter &&
-+        (stories = stories.filter((story) =>
-+          filter(story, getStoryContext(story))
-+        )),
-+      stories.some((story) => story.tags?.includes('autodocs')) &&
-+        (stories = stories.filter((story) => story.tags?.includes('autodocs'))),
-+      includePrimary || (stories = stories.slice(1)),
-+      !stories || stories.length === 0
-+        ? null
-+        : React17.createElement(
-+            React17.Fragment,
-+            null,
-+            React17.createElement(StyledHeading, null, title),
-+            stories.map(
-+              (story) =>
-+                story &&
-+                React17.createElement(DocsStory, {
-+                  key: story.id,
-+                  of: story.moduleExport,
-+                  expanded: !0,
-+                  __forceInitialArgs: !0,
-+                })
-+            )
-+          )
-+    );
-+  };
-+var DocsPage = () => {
-+  let resolvedOf = useOf('meta', ['meta']),
-+    {stories} = resolvedOf.csfFile,
-+    isSingleStory = Object.keys(stories).length === 1;
-+  return React17.createElement(
-+    React17.Fragment,
-+    null,
-+    React17.createElement(Title2, null),
-+    React17.createElement(Subtitle2, null),
-+    React17.createElement(DescriptionContainer, {of: 'meta'}),
-+    isSingleStory
-+      ? React17.createElement(DescriptionContainer, {of: 'story'})
-+      : null,
-+    React17.createElement(Primary, null),
-+    React17.createElement(Controls3, null),
-+    isSingleStory ? null : React17.createElement(Stories, null)
-+  );
-+};
-+function Docs({context, docsParameter}) {
-+  let Container = docsParameter.container || DocsContainer,
-+    Page = docsParameter.page || DocsPage;
-+  return React17.createElement(
-+    Container,
-+    {context, theme: docsParameter.theme},
-+    React17.createElement(Page, null)
-+  );
-+}
-+var ExternalDocsContext = class extends DocsContext$1 {
-+  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 Preview$1 {
-+    constructor(projectAnnotations) {
-+      super(
-+        (path) => Promise.resolve(this.moduleExportsByImportPath[path]),
-+        () =>
-+          composeConfigs([
-+            {parameters: {docs: {story: {inline: !0}}}},
-+            this.projectAnnotations,
-+          ]),
-+        new Channel({})
-+      );
-+      this.projectAnnotations = projectAnnotations;
-+      this.importPaths = new ConstantMap('./importPath/');
-+      this.titles = new ConstantMap('title-');
-+      this.storyIndex = {v: 5, 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.storyStoreValue.processCSFFileWithCache(
-+            metaExports,
-+            importPath,
-+            title
-+          );
-+        return (
-+          Object.values(csfFile.stories).forEach(({id, name}) => {
-+            this.storyIndex.entries[id] = {
-+              id,
-+              importPath,
-+              title,
-+              name,
-+              type: 'story',
-+            };
-+          }),
-+          this.onStoriesChanged({storyIndex: this.storyIndex}),
-+          csfFile
-+        );
-+      };
-+      this.docsContext = () =>
-+        new ExternalDocsContext(
-+          this.channel,
-+          this.storyStoreValue,
-+          this.renderStoryToElement.bind(this),
-+          this.processMetaExports.bind(this)
-+        );
-+    }
-+    async getStoryIndexFromServer() {
-+      return this.storyIndex;
-+    }
-+  };
-+function usePreview(projectAnnotations) {
-+  let previewRef = useRef();
-+  return (
-+    previewRef.current ||
-+      (previewRef.current = new ExternalPreview(projectAnnotations)),
-+    previewRef.current
-+  );
-+}
-+function ExternalDocs({projectAnnotationsList, children}) {
-+  let projectAnnotations = composeConfigs(projectAnnotationsList),
-+    preview2 = usePreview(projectAnnotations),
-+    docsParameter = {
-+      ...projectAnnotations.parameters?.docs,
-+      page: () => children,
-+    };
-+  return React17.createElement(Docs, {
-+    docsParameter,
-+    context: preview2.docsContext(),
-+  });
-+}
-+var preview,
-+  ExternalDocsContainer = ({projectAnnotations, children}) => (
-+    preview || (preview = new ExternalPreview(projectAnnotations)),
-+    React17.createElement(
-+      DocsContext.Provider,
-+      {value: preview.docsContext()},
-+      React17.createElement(
-+        ThemeProvider,
-+        {theme: ensure(themes.light)},
-+        children
-+      )
-+    )
-+  );
-+var Meta = ({of}) => {
-+  let context = useContext(DocsContext);
-+  of && context.referenceMeta(of, !0);
-+  try {
-+    let primary = context.storyById();
-+    return React17.createElement(Anchor, {storyId: primary.id});
-+  } catch {
-+    return null;
-+  }
-+};
-+var Unstyled = (props) =>
-+  React17.createElement('div', {...props, className: 'sb-unstyled'});
-+var Wrapper11 = ({children}) =>
-+  React17.createElement('div', {style: {fontFamily: 'sans-serif'}}, children);
-+var PRIMARY_STORY = '^';
- 
--export { AddContext, Anchor, AnchorMdx, ArgTypes, BooleanControl, Canvas, CodeOrSourceMdx, ColorControl, ColorItem, ColorPalette, Controls3 as Controls, DateControl, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContext, DocsPage, DocsStory, ExternalDocs, ExternalDocsContainer, FilesControl, HeaderMdx, HeadersMdx, Heading2 as Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, NumberControl, ObjectControl, OptionsControl, PRIMARY_STORY, Primary, ArgsTable as PureArgsTable, RangeControl, Source2 as Source, SourceContainer, SourceContext, Stories, Story2 as Story, Subheading, Subtitle2 as Subtitle, TextControl, Title2 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper11 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps };
-+export {
-+  AddContext,
-+  Anchor,
-+  AnchorMdx,
-+  ArgTypes,
-+  BooleanControl,
-+  Canvas,
-+  CodeOrSourceMdx,
-+  ColorControl,
-+  ColorItem,
-+  ColorPalette,
-+  Controls3 as Controls,
-+  DateControl,
-+  DescriptionContainer as Description,
-+  DescriptionType,
-+  Docs,
-+  DocsContainer,
-+  DocsContext,
-+  DocsPage,
-+  DocsStory,
-+  ExternalDocs,
-+  ExternalDocsContainer,
-+  FilesControl,
-+  HeaderMdx,
-+  HeadersMdx,
-+  Heading2 as Heading,
-+  IconGallery,
-+  IconItem,
-+  Markdown2 as Markdown,
-+  Meta,
-+  NumberControl,
-+  ObjectControl,
-+  OptionsControl,
-+  PRIMARY_STORY,
-+  Primary,
-+  ArgsTable as PureArgsTable,
-+  RangeControl,
-+  Source2 as Source,
-+  SourceContainer,
-+  SourceContext,
-+  Stories,
-+  Story2 as Story,
-+  Subheading,
-+  Subtitle2 as Subtitle,
-+  TextControl,
-+  Title2 as Title,
-+  Typeset,
-+  UNKNOWN_ARGS_HASH,
-+  Unstyled,
-+  Wrapper11 as Wrapper,
-+  anchorBlockIdFromId,
-+  argsHash,
-+  assertIsFn,
-+  extractTitle,
-+  format,
-+  formatDate,
-+  formatTime,
-+  getStoryId2 as getStoryId,
-+  getStoryProps,
-+  parse2 as parse,
-+  parseDate,
-+  parseTime,
-+  useOf,
-+  useSourceProps,
-+};
diff --git a/patches/@storybook+web-components+8.1.11.patch b/patches/@storybook+web-components+8.1.11.patch
deleted file mode 100644
index 1e8ac4e58d..0000000000
--- a/patches/@storybook+web-components+8.1.11.patch
+++ /dev/null
@@ -1,465 +0,0 @@
-diff --git a/node_modules/@storybook/web-components/dist/entry-preview-docs.js b/node_modules/@storybook/web-components/dist/entry-preview-docs.js
-index efb322f..bc32a07 100644
---- a/node_modules/@storybook/web-components/dist/entry-preview-docs.js
-+++ b/node_modules/@storybook/web-components/dist/entry-preview-docs.js
-@@ -1,2 +1,263 @@
--"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_tiny_invariant=__toESM(require("tiny-invariant")),import_client_logger=require("@storybook/client-logger");var import_global3=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_global2=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
--    See the readme of addon-docs for web components for more details.`)}function getCustomElements(){return import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global3.global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));function mapItem(item,category){let type;switch(category){case"attributes":case"properties":type={name:item.type?.text||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{(0,import_tiny_invariant.default)(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var import_lit=require("lit"),import_preview_api=require("@storybook/preview-api"),import_docs_tools=require("@storybook/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args:unmappedArgs})}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?(0,import_lit.render)(renderedForSource.cloneNode(!0),container):(0,import_lit.render)(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"")}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});
-+'use strict';
-+var __create = Object.create;
-+var __defProp = Object.defineProperty;
-+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-+var __getOwnPropNames = Object.getOwnPropertyNames;
-+var __getProtoOf = Object.getPrototypeOf,
-+  __hasOwnProp = Object.prototype.hasOwnProperty;
-+var __export = (target, all) => {
-+    for (var name in all)
-+      __defProp(target, name, {get: all[name], enumerable: !0});
-+  },
-+  __copyProps = (to, from, except, desc) => {
-+    if ((from && typeof from == 'object') || typeof from == 'function')
-+      for (let key of __getOwnPropNames(from))
-+        !__hasOwnProp.call(to, key) &&
-+          key !== except &&
-+          __defProp(to, key, {
-+            get: () => from[key],
-+            enumerable:
-+              !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
-+          });
-+    return to;
-+  };
-+var __toESM = (mod, isNodeMode, target) => (
-+    (target = mod != null ? __create(__getProtoOf(mod)) : {}),
-+    __copyProps(
-+      isNodeMode || !mod || !mod.__esModule
-+        ? __defProp(target, 'default', {value: mod, enumerable: !0})
-+        : target,
-+      mod
-+    )
-+  ),
-+  __toCommonJS = (mod) =>
-+    __copyProps(__defProp({}, '__esModule', {value: !0}), mod);
-+var entry_preview_docs_exports = {};
-+__export(entry_preview_docs_exports, {
-+  argTypesEnhancers: () => argTypesEnhancers,
-+  decorators: () => decorators,
-+  parameters: () => parameters,
-+});
-+module.exports = __toCommonJS(entry_preview_docs_exports);
-+var import_docs_tools2 = require('@storybook/docs-tools');
-+var import_tiny_invariant = __toESM(require('tiny-invariant')),
-+  import_client_logger = require('@storybook/client-logger');
-+var import_global3 = require('@storybook/global');
-+var import_global = require('@storybook/global'),
-+  {window: globalWindow} = import_global.global;
-+globalWindow.STORYBOOK_ENV = 'web-components';
-+var import_global2 = require('@storybook/global');
-+function isValidComponent(tagName) {
-+  if (!tagName) return !1;
-+  if (typeof tagName == 'string') return !0;
-+  throw new Error(
-+    'Provided component needs to be a string. e.g. component: "my-element"'
-+  );
-+}
-+function isValidMetaData(customElements) {
-+  if (!customElements) return !1;
-+  if (
-+    (customElements.tags && Array.isArray(customElements.tags)) ||
-+    (customElements.modules && Array.isArray(customElements.modules))
-+  )
-+    return !0;
-+  throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-+    See the readme of addon-docs for web components for more details.`);
-+}
-+function getCustomElements() {
-+  return (
-+    import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__ ||
-+    import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__
-+  );
-+}
-+var {window: window2, EventSource} = import_global3.global;
-+typeof module < 'u' &&
-+  module?.hot?.decline &&
-+  (module.hot.decline(),
-+  new EventSource('__webpack_hmr').addEventListener(
-+    'message',
-+    function (event) {
-+      try {
-+        let {action} = JSON.parse(event.data);
-+        action === 'built' && window2.location.reload();
-+      } catch {}
-+    }
-+  ));
-+function mapItem(item, category) {
-+  let type;
-+  switch (category) {
-+    case 'attributes':
-+    case 'properties':
-+      type = {name: item.type?.text || item.type};
-+      break;
-+    case 'slots':
-+      type = {name: 'string'};
-+      break;
-+    default:
-+      type = {name: 'void'};
-+      break;
-+  }
-+  return {
-+    name: item.name,
-+    required: !1,
-+    description: item.description,
-+    type,
-+    table: {
-+      category,
-+      type: {summary: item.type?.text || item.type},
-+      defaultValue: {
-+        summary: item.default !== void 0 ? item.default : item.defaultValue,
-+      },
-+    },
-+  };
-+}
-+function mapEvent(item) {
-+  let name = item.name
-+    .replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) =>
-+      chr ? chr.toUpperCase() : ''
-+    )
-+    .replace(/^([A-Z])/, (match) => match.toLowerCase());
-+  return (
-+    (name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`),
-+    [
-+      {name, action: {name: item.name}, table: {disable: !0}},
-+      mapItem(item, 'events'),
-+    ]
-+  );
-+}
-+function mapData(data, category) {
-+  return (
-+    data &&
-+    data
-+      .filter((item) => item && item.name)
-+      .reduce((acc, item) => {
-+        if (item.kind === 'method') return acc;
-+        switch (category) {
-+          case 'events':
-+            mapEvent(item).forEach((argType) => {
-+              (0, import_tiny_invariant.default)(
-+                argType.name,
-+                `${argType} should have a name property.`
-+              ),
-+                (acc[argType.name] = argType);
-+            });
-+            break;
-+          default:
-+            acc[
-+              `${category === 'css shadow parts' ? 'cssParts' : category}-${item.name}`
-+            ] = mapItem(item, category);
-+            break;
-+        }
-+        return acc;
-+      }, {})
-+  );
-+}
-+var getMetaDataExperimental = (tagName, customElements) => {
-+    if (!isValidComponent(tagName) || !isValidMetaData(customElements))
-+      return null;
-+    let metaData = customElements.tags.find(
-+      (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
-+    );
-+    return (
-+      metaData ||
-+        import_client_logger.logger.warn(
-+          `Component not found in custom-elements.json: ${tagName}`
-+        ),
-+      metaData
-+    );
-+  },
-+  getMetaDataV1 = (tagName, customElements) => {
-+    if (!isValidComponent(tagName) || !isValidMetaData(customElements))
-+      return null;
-+    let metadata;
-+    return (
-+      customElements?.modules?.forEach((_module) => {
-+        _module?.declarations?.forEach((declaration) => {
-+          declaration.tagName === tagName && (metadata = declaration);
-+        });
-+      }),
-+      metadata ||
-+        import_client_logger.logger.warn(
-+          `Component not found in custom-elements.json: ${tagName}`
-+        ),
-+      metadata
-+    );
-+  },
-+  getMetaData = (tagName, manifest) =>
-+    manifest?.version === 'experimental'
-+      ? getMetaDataExperimental(tagName, manifest)
-+      : getMetaDataV1(tagName, manifest),
-+  extractArgTypesFromElements = (tagName, customElements) => {
-+    let metaData = getMetaData(tagName, customElements);
-+    return (
-+      metaData && {
-+        ...mapData(metaData.members ?? [], 'properties'),
-+        ...mapData(metaData.properties ?? [], 'properties'),
-+        ...mapData(metaData.attributes ?? [], 'attributes'),
-+        ...mapData(metaData.events ?? [], 'events'),
-+        ...mapData(metaData.slots ?? [], 'slots'),
-+        ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
-+        ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
-+      }
-+    );
-+  },
-+  extractArgTypes = (tagName) => {
-+    let cem = getCustomElements();
-+    return extractArgTypesFromElements(tagName, cem);
-+  },
-+  extractComponentDescription = (tagName) => {
-+    let metaData = getMetaData(tagName, getCustomElements());
-+    return metaData && metaData.description;
-+  };
-+var import_lit = require('lit'),
-+  import_preview_api = require('@storybook/preview-api'),
-+  import_docs_tools = require('@storybook/docs-tools'),
-+  LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
-+function skipSourceRender(context) {
-+  let sourceParams = context?.parameters.docs?.source,
-+    isArgsStory = context?.parameters.__isArgsStory;
-+  return sourceParams?.type === import_docs_tools.SourceType.DYNAMIC
-+    ? !1
-+    : !isArgsStory ||
-+        sourceParams?.code ||
-+        sourceParams?.type === import_docs_tools.SourceType.CODE;
-+}
-+function sourceDecorator(storyFn, context) {
-+  let story = storyFn(),
-+    renderedForSource = context?.parameters.docs?.source?.excludeDecorators
-+      ? context.originalStoryFn(context.args, context)
-+      : story,
-+    source;
-+  if (
-+    ((0, import_preview_api.useEffect)(() => {
-+      let {id, unmappedArgs} = context;
-+      source &&
-+        import_preview_api.addons
-+          .getChannel()
-+          .emit(import_docs_tools.SNIPPET_RENDERED, {
-+            id,
-+            source,
-+            args: unmappedArgs,
-+          });
-+    }),
-+    !skipSourceRender(context))
-+  ) {
-+    let container = window.document.createElement('div');
-+    renderedForSource instanceof DocumentFragment
-+      ? (0, import_lit.render)(renderedForSource.cloneNode(!0), container)
-+      : (0, import_lit.render)(renderedForSource, container),
-+      (source = container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''));
-+  }
-+  return story;
-+}
-+var decorators = [sourceDecorator],
-+  parameters = {
-+    docs: {
-+      extractArgTypes,
-+      extractComponentDescription,
-+      story: {inline: !0},
-+      source: {type: import_docs_tools2.SourceType.DYNAMIC, language: 'html'},
-+    },
-+  },
-+  argTypesEnhancers = [import_docs_tools2.enhanceArgTypes];
-+0 && (module.exports = {argTypesEnhancers, decorators, parameters});
-diff --git a/node_modules/@storybook/web-components/dist/entry-preview-docs.mjs b/node_modules/@storybook/web-components/dist/entry-preview-docs.mjs
-index 74a78c8..e6ebf35 100644
---- a/node_modules/@storybook/web-components/dist/entry-preview-docs.mjs
-+++ b/node_modules/@storybook/web-components/dist/entry-preview-docs.mjs
-@@ -1,10 +1,183 @@
--import { getCustomElements, isValidComponent, isValidMetaData } from './chunk-GKNNPQCW.mjs';
--import { SourceType, enhanceArgTypes, SNIPPET_RENDERED } from '@storybook/docs-tools';
-+import {logger} from '@storybook/client-logger';
-+import {
-+  SourceType,
-+  enhanceArgTypes,
-+  SNIPPET_RENDERED,
-+} from '@storybook/docs-tools';
-+import {useEffect, addons} from '@storybook/preview-api';
-+import {render} from 'lit';
- import invariant from 'tiny-invariant';
--import { logger } from '@storybook/client-logger';
--import { render } from 'lit';
--import { useEffect, addons } from '@storybook/preview-api';
-+import {
-+  getCustomElements,
-+  isValidComponent,
-+  isValidMetaData,
-+} from './chunk-GKNNPQCW.mjs';
- 
--function mapItem(item,category){let type;switch(category){case"attributes":case"properties":type={name:item.type?.text||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return {name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{invariant(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType;});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration);});}),metadata||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if(useEffect(()=>{let{id,unmappedArgs}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,source,args:unmappedArgs});}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?render(renderedForSource.cloneNode(!0),container):render(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"");}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[enhanceArgTypes];
-+function mapItem(item, category) {
-+  let type;
-+  switch (category) {
-+    case 'attributes':
-+    case 'properties':
-+      type = {name: item.type?.text || item.type};
-+      break;
-+    case 'slots':
-+      type = {name: 'string'};
-+      break;
-+    default:
-+      type = {name: 'void'};
-+      break;
-+  }
-+  return {
-+    name: item.name,
-+    required: !1,
-+    description: item.description,
-+    type,
-+    table: {
-+      category,
-+      type: {summary: item.type?.text || item.type},
-+      defaultValue: {
-+        summary: item.default !== void 0 ? item.default : item.defaultValue,
-+      },
-+    },
-+  };
-+}
-+function mapEvent(item) {
-+  let name = item.name
-+    .replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) =>
-+      chr ? chr.toUpperCase() : ''
-+    )
-+    .replace(/^([A-Z])/, (match) => match.toLowerCase());
-+  return (
-+    (name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`),
-+    [
-+      {name, action: {name: item.name}, table: {disable: !0}},
-+      mapItem(item, 'events'),
-+    ]
-+  );
-+}
-+function mapData(data, category) {
-+  return (
-+    data &&
-+    data
-+      .filter((item) => item && item.name)
-+      .reduce((acc, item) => {
-+        if (item.kind === 'method') return acc;
-+        switch (category) {
-+          case 'events':
-+            mapEvent(item).forEach((argType) => {
-+              invariant(
-+                argType.name,
-+                `${argType} should have a name property.`
-+              ),
-+                (acc[argType.name] = argType);
-+            });
-+            break;
-+          default:
-+            acc[
-+              `${category === 'css shadow parts' ? 'cssParts' : category}-${item.name}`
-+            ] = mapItem(item, category);
-+            break;
-+        }
-+        return acc;
-+      }, {})
-+  );
-+}
-+var getMetaDataExperimental = (tagName, customElements) => {
-+    if (!isValidComponent(tagName) || !isValidMetaData(customElements))
-+      return null;
-+    let metaData = customElements.tags.find(
-+      (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
-+    );
-+    return (
-+      metaData ||
-+        logger.warn(`Component not found in custom-elements.json: ${tagName}`),
-+      metaData
-+    );
-+  },
-+  getMetaDataV1 = (tagName, customElements) => {
-+    if (!isValidComponent(tagName) || !isValidMetaData(customElements))
-+      return null;
-+    let metadata;
-+    return (
-+      customElements?.modules?.forEach((_module) => {
-+        _module?.declarations?.forEach((declaration) => {
-+          declaration.tagName === tagName && (metadata = declaration);
-+        });
-+      }),
-+      metadata ||
-+        logger.warn(`Component not found in custom-elements.json: ${tagName}`),
-+      metadata
-+    );
-+  },
-+  getMetaData = (tagName, manifest) =>
-+    manifest?.version === 'experimental'
-+      ? getMetaDataExperimental(tagName, manifest)
-+      : getMetaDataV1(tagName, manifest),
-+  extractArgTypesFromElements = (tagName, customElements) => {
-+    let metaData = getMetaData(tagName, customElements);
-+    return (
-+      metaData && {
-+        ...mapData(metaData.members ?? [], 'properties'),
-+        ...mapData(metaData.properties ?? [], 'properties'),
-+        ...mapData(metaData.attributes ?? [], 'attributes'),
-+        ...mapData(metaData.events ?? [], 'events'),
-+        ...mapData(metaData.slots ?? [], 'slots'),
-+        ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
-+        ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
-+      }
-+    );
-+  },
-+  extractArgTypes = (tagName) => {
-+    let cem = getCustomElements();
-+    return extractArgTypesFromElements(tagName, cem);
-+  },
-+  extractComponentDescription = (tagName) => {
-+    let metaData = getMetaData(tagName, getCustomElements());
-+    return metaData && metaData.description;
-+  };
-+var LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
-+function skipSourceRender(context) {
-+  let sourceParams = context?.parameters.docs?.source,
-+    isArgsStory = context?.parameters.__isArgsStory;
-+  return sourceParams?.type === SourceType.DYNAMIC
-+    ? !1
-+    : !isArgsStory ||
-+        sourceParams?.code ||
-+        sourceParams?.type === SourceType.CODE;
-+}
-+function sourceDecorator(storyFn, context) {
-+  let story = storyFn(),
-+    renderedForSource = context?.parameters.docs?.source?.excludeDecorators
-+      ? context.originalStoryFn(context.args, context)
-+      : story,
-+    source;
-+  if (
-+    (useEffect(() => {
-+      let {id, unmappedArgs} = context;
-+      source &&
-+        addons
-+          .getChannel()
-+          .emit(SNIPPET_RENDERED, {id, source, args: unmappedArgs});
-+    }),
-+    !skipSourceRender(context))
-+  ) {
-+    let container = window.document.createElement('div');
-+    renderedForSource instanceof DocumentFragment
-+      ? render(renderedForSource.cloneNode(!0), container)
-+      : render(renderedForSource, container),
-+      (source = container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''));
-+  }
-+  return story;
-+}
-+var decorators = [sourceDecorator],
-+  parameters = {
-+    docs: {
-+      extractArgTypes,
-+      extractComponentDescription,
-+      story: {inline: !0},
-+      source: {type: SourceType.DYNAMIC, language: 'html'},
-+    },
-+  },
-+  argTypesEnhancers = [enhanceArgTypes];
- 
--export { argTypesEnhancers, decorators, parameters };
-+export {argTypesEnhancers, decorators, parameters};