@storybook/components 7.2.2 → 7.3.0-alpha.0

package/dist/index.mjs

@@ -20,7 +20,7 @@ import './chunk-SWV57YYC.mjs';
 import './chunk-MNLJ4LIX.mjs';
 import './chunk-JRLSWQMA.mjs';
 import * as React5 from 'react';
-import React5__default, { memo, lazy, forwardRef, useMemo, Fragment, Component, createElement, Children, Suspense, useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import React5__default, { memo, lazy, forwardRef, useMemo, Fragment, createElement, Children, Suspense, useRef, useState, useCallback, useLayoutEffect, Component, useEffect } from 'react';
 import { styled, ignoreSsrWarning, isPropValid, keyframes, color, typography } from '@storybook/theming';
 import useResizeObserver from 'use-resize-observer';
 import { global } from '@storybook/global';
@@ -36,7 +36,7 @@ var nameSpaceClassNames=({...props},key)=>{let classes=[props.class,props.classN
   path {
     fill: currentColor;
   }
-`,Icons=({icon,useSymbol,...props})=>React5__default.createElement(Svg,{viewBox:"0 0 14 14",width:"14px",height:"14px",...props},useSymbol?React5__default.createElement("use",{xlinkHref:`#icon--${icon}`}):icons[icon]),Symbols=memo(function({icons:keys=Object.keys(icons)}){return React5__default.createElement(Svg,{viewBox:"0 0 14 14",style:{position:"absolute",width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React5__default.createElement("symbol",{id:`icon--${key}`,key},icons[key])))});var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb)=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkInner=styled.span(({withArrow})=>withArrow?{"> svg:last-of-type":{height:"0.7em",width:"0.7em",marginRight:0,marginLeft:"0.25em",bottom:"auto",verticalAlign:"inherit"}}:{},({containsIcon})=>containsIcon?{svg:{height:"1em",width:"1em",verticalAlign:"middle",position:"relative",bottom:0,marginRight:0}}:{}),A2=styled.a(({theme})=>({display:"inline-block",transition:"all 150ms ease-out",textDecoration:"none",color:theme.color.secondary,"&:hover, &:focus":{cursor:"pointer",color:curriedDarken$1(.07,theme.color.secondary),"svg path":{fill:curriedDarken$1(.07,theme.color.secondary)}},"&:active":{color:curriedDarken$1(.1,theme.color.secondary),"svg path":{fill:curriedDarken$1(.1,theme.color.secondary)}},svg:{display:"inline-block",height:"1em",width:"1em",verticalAlign:"text-top",position:"relative",bottom:"-0.125em",marginRight:"0.4em","& path":{fill:theme.color.secondary}}}),({theme,secondary,tertiary})=>{let colors;return secondary&&(colors=[theme.textMutedColor,theme.color.dark,theme.color.darker]),tertiary&&(colors=[theme.color.dark,theme.color.darkest,theme.textMutedColor]),colors?{color:colors[0],"svg path":{fill:colors[0]},"&:hover":{color:colors[1],"svg path":{fill:colors[1]}},"&:active":{color:colors[2],"svg path":{fill:colors[2]}}}:{}},({nochrome})=>nochrome?{color:"inherit","&:hover, &:active":{color:"inherit",textDecoration:"underline"}}:{},({theme,inverse})=>inverse?{color:theme.color.lightest,"svg path":{fill:theme.color.lightest},"&:hover":{color:theme.color.lighter,"svg path":{fill:theme.color.lighter}},"&:active":{color:theme.color.light,"svg path":{fill:theme.color.light}}}:{},({isButton})=>isButton?{border:0,borderRadius:0,background:"none",padding:0,fontSize:"inherit"}:{}),Link2=({cancel,children,onClick,withArrow,containsIcon,className,...rest})=>React5__default.createElement(A2,{...rest,onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className},React5__default.createElement(LinkInner,{withArrow,containsIcon},children,withArrow&&React5__default.createElement(Icons,{icon:"arrowright"})));Link2.defaultProps={cancel:!0,className:void 0,style:void 0,onClick:void 0,withArrow:!1,containsIcon:!1};var DocumentWrapper=styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:"1.6",h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},h2:{fontSize:`${theme.typography.size.m2}px`,borderBottom:`1px solid ${theme.appBorderColor}`},h3:{fontSize:`${theme.typography.size.m1}px`},h4:{fontSize:`${theme.typography.size.s3}px`},h5:{fontSize:`${theme.typography.size.s2}px`},h6:{fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},"pre:not(.prismjs)":{background:"transparent",border:"none",borderRadius:0,padding:0,margin:0},"pre pre, pre.prismjs":{padding:15,margin:0,whiteSpace:"pre-wrap",color:"inherit",fontSize:"13px",lineHeight:"19px"},"pre pre code, pre.prismjs code":{color:"inherit",fontSize:"inherit"},"pre code":{margin:0,padding:0,whiteSpace:"pre",border:"none",background:"transparent"},"pre code, pre tt":{backgroundColor:"transparent",border:"none"},"body > *:first-of-type":{marginTop:"0 !important"},"body > *:last-child":{marginBottom:"0 !important"},a:{color:theme.color.secondary,textDecoration:"none"},"a.absent":{color:"#cc0000"},"a.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0},"h1, h2, h3, h4, h5, h6":{margin:"20px 0 10px",padding:0,cursor:"text",position:"relative","&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& tt, & code":{fontSize:"inherit"}},"h1:first-of-type + h2":{marginTop:0,paddingTop:0},"p, blockquote, ul, ol, dl, li, table, pre":{margin:"15px 0"},hr:{border:"0 none",borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},"body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type":{marginTop:0,paddingTop:0},"body > h1:first-of-type + h2":{marginTop:0,paddingTop:0},"a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6":{marginTop:0,paddingTop:0},"h1 p, h2 p, h3 p, h4 p, h5 p, h6 p":{marginTop:0},"li p.first":{display:"inline-block"},"ul, ol":{paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},dl:{padding:0},"dl dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",margin:"0 0 15px",padding:"0 15px","&:first-of-type":{padding:0},"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},blockquote:{borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},table:{padding:0,borderCollapse:"collapse","& tr":{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:"white",margin:0,padding:0,"& th":{fontWeight:"bold",border:`1px solid ${theme.appBorderColor}`,textAlign:"left",margin:0,padding:"6px 13px"},"& td":{border:`1px solid ${theme.appBorderColor}`,textAlign:"left",margin:0,padding:"6px 13px"},"&:nth-of-type(2n)":{backgroundColor:theme.color.lighter},"& th :first-of-type, & td :first-of-type":{marginTop:0},"& th :last-child, & td :last-child":{marginBottom:0}}},img:{maxWidth:"100%"},"span.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"}},"span.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"}},"span.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"}},"span.float-left":{display:"block",marginRight:13,overflow:"hidden",float:"left","& span":{margin:"13px 0 0"}},"span.float-right":{display:"block",marginLeft:13,overflow:"hidden",float:"right","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"right"}},"code, tt":{margin:"0 2px",padding:"0 5px",whiteSpace:"nowrap",border:`1px solid ${theme.color.mediumlight}`,backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==="dark"&&theme.color.darkest}}));var languages=[],Comp=null,LazySyntaxHighlighter=lazy(async()=>{let{SyntaxHighlighter:SyntaxHighlighter3}=await import('./syntaxhighlighter-4OVWVELQ.mjs');return languages.length>0&&(languages.forEach(args=>{SyntaxHighlighter3.registerLanguage(...args);}),languages=[]),Comp===null&&(Comp=SyntaxHighlighter3),{default:props=>React5__default.createElement(SyntaxHighlighter3,{...props})}}),LazySyntaxHighlighterWithFormatter=lazy(async()=>{let[{SyntaxHighlighter:SyntaxHighlighter3},{formatter}]=await Promise.all([import('./syntaxhighlighter-4OVWVELQ.mjs'),import('./formatter-ZNWCFYAW.mjs')]);return languages.length>0&&(languages.forEach(args=>{SyntaxHighlighter3.registerLanguage(...args);}),languages=[]),Comp===null&&(Comp=SyntaxHighlighter3),{default:props=>React5__default.createElement(SyntaxHighlighter3,{...props,formatter})}}),SyntaxHighlighter2=props=>React5__default.createElement(Suspense,{fallback:React5__default.createElement("div",null)},props.format!==!1?React5__default.createElement(LazySyntaxHighlighterWithFormatter,{...props}):React5__default.createElement(LazySyntaxHighlighter,{...props}));SyntaxHighlighter2.registerLanguage=(...args)=>{if(Comp!==null){Comp.registerLanguage(...args);return}languages.push(args);};var toNumber=input=>typeof input=="number"?input:Number(input),Container=styled.div(({theme,col,row=1})=>col?{display:"inline-block",verticalAlign:"inherit","& > *":{marginLeft:col*theme.layoutMargin,verticalAlign:"inherit"},[`& > *:first-child${ignoreSsrWarning}`]:{marginLeft:0}}:{"& > *":{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(!0){case!!(outer&&col):return {marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};case!!(outer&&row):return {marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};default:return {}}}),Spaced=({col,row,outer,children,...rest})=>{let outerAmount=toNumber(typeof outer=="number"||!outer?outer:col||row);return React5__default.createElement(Container,{col,row,outer:outerAmount,...rest},children)};var Title=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc=styled.div(),Message=styled.div(({theme})=>({padding:30,textAlign:"center",color:theme.color.defaultText,fontSize:theme.typography.size.s2-1})),Placeholder=({children,...props})=>{let[title,desc]=Children.toArray(children);return React5__default.createElement(Message,{...props},React5__default.createElement(Title,null,title),desc&&React5__default.createElement(Desc,null,desc))};var ZoomElementWrapper=styled.div(({scale=1,elementHeight})=>({height:elementHeight||"auto",transformOrigin:"top left",transform:`scale(${1/scale})`}));function ZoomElement({scale,children}){let componentWrapperRef=useRef(null),[elementHeight,setElementHeight]=useState(0),onResize=useCallback(({height})=>{height&&setElementHeight(height/scale);},[scale]);return useEffect(()=>{componentWrapperRef.current&&setElementHeight(componentWrapperRef.current.getBoundingClientRect().height);},[scale]),useResizeObserver({ref:componentWrapperRef,onResize}),React5__default.createElement(ZoomElementWrapper,{scale,elementHeight},React5__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children))}var ZoomIFrame=class extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){let{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){let{scale,active}=this.props;return scale!==nextProps.scale&&this.setIframeInnerZoom(nextProps.scale),active!==nextProps.active&&this.iframe.setAttribute("data-is-storybook",nextProps.active?"true":"false"),nextProps.children.props.src!==this.props.children.props.src}setIframeInnerZoom(scale){try{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"});}catch{this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"});}render(){let{children}=this.props;return children}};var Zoom={Element:ZoomElement,IFrame:ZoomIFrame};var {document}=global,ErrorName=styled.strong(({theme})=>({color:theme.color.orange})),ErrorImportant=styled.strong(({theme})=>({color:theme.color.ancillary,textDecoration:"underline"})),ErrorDetail=styled.em(({theme})=>({color:theme.textMutedColor})),firstLineRegex=/(Error): (.*)\n/,linesRegexChromium=/at (?:(.*) )?\(?(.+)\)?/,linesRegexFirefox=/([^@]+)?(?:\/<)?@(.+)?/,linesRegexSafari=/([^@]+)?@(.+)?/,ErrorFormatter=({error})=>{if(!error)return React5__default.createElement(Fragment,null,"This error has no stack or message");if(!error.stack)return React5__default.createElement(Fragment,null,error.message||"This error has no stack or message");let input=error.stack.toString();input&&error.message&&!input.includes(error.message)&&(input=`Error: ${error.message}
+`,Icons=({icon,useSymbol,...props})=>React5__default.createElement(Svg,{viewBox:"0 0 14 14",width:"14px",height:"14px",...props},useSymbol?React5__default.createElement("use",{xlinkHref:`#icon--${icon}`}):icons[icon]),Symbols=memo(function({icons:keys=Object.keys(icons)}){return React5__default.createElement(Svg,{viewBox:"0 0 14 14",style:{position:"absolute",width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React5__default.createElement("symbol",{id:`icon--${key}`,key},icons[key])))});var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb)=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkInner=styled.span(({withArrow})=>withArrow?{"> svg:last-of-type":{height:"0.7em",width:"0.7em",marginRight:0,marginLeft:"0.25em",bottom:"auto",verticalAlign:"inherit"}}:{},({containsIcon})=>containsIcon?{svg:{height:"1em",width:"1em",verticalAlign:"middle",position:"relative",bottom:0,marginRight:0}}:{}),A2=styled.a(({theme})=>({display:"inline-block",transition:"all 150ms ease-out",textDecoration:"none",color:theme.color.secondary,"&:hover, &:focus":{cursor:"pointer",color:curriedDarken$1(.07,theme.color.secondary),"svg path":{fill:curriedDarken$1(.07,theme.color.secondary)}},"&:active":{color:curriedDarken$1(.1,theme.color.secondary),"svg path":{fill:curriedDarken$1(.1,theme.color.secondary)}},svg:{display:"inline-block",height:"1em",width:"1em",verticalAlign:"text-top",position:"relative",bottom:"-0.125em",marginRight:"0.4em","& path":{fill:theme.color.secondary}}}),({theme,secondary,tertiary})=>{let colors;return secondary&&(colors=[theme.textMutedColor,theme.color.dark,theme.color.darker]),tertiary&&(colors=[theme.color.dark,theme.color.darkest,theme.textMutedColor]),colors?{color:colors[0],"svg path":{fill:colors[0]},"&:hover":{color:colors[1],"svg path":{fill:colors[1]}},"&:active":{color:colors[2],"svg path":{fill:colors[2]}}}:{}},({nochrome})=>nochrome?{color:"inherit","&:hover, &:active":{color:"inherit",textDecoration:"underline"}}:{},({theme,inverse})=>inverse?{color:theme.color.lightest,"svg path":{fill:theme.color.lightest},"&:hover":{color:theme.color.lighter,"svg path":{fill:theme.color.lighter}},"&:active":{color:theme.color.light,"svg path":{fill:theme.color.light}}}:{},({isButton})=>isButton?{border:0,borderRadius:0,background:"none",padding:0,fontSize:"inherit"}:{}),Link2=({cancel,children,onClick,withArrow,containsIcon,className,...rest})=>React5__default.createElement(A2,{...rest,onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className},React5__default.createElement(LinkInner,{withArrow,containsIcon},children,withArrow&&React5__default.createElement(Icons,{icon:"arrowright"})));Link2.defaultProps={cancel:!0,className:void 0,style:void 0,onClick:void 0,withArrow:!1,containsIcon:!1};var DocumentWrapper=styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:"1.6",h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},h2:{fontSize:`${theme.typography.size.m2}px`,borderBottom:`1px solid ${theme.appBorderColor}`},h3:{fontSize:`${theme.typography.size.m1}px`},h4:{fontSize:`${theme.typography.size.s3}px`},h5:{fontSize:`${theme.typography.size.s2}px`},h6:{fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},"pre:not(.prismjs)":{background:"transparent",border:"none",borderRadius:0,padding:0,margin:0},"pre pre, pre.prismjs":{padding:15,margin:0,whiteSpace:"pre-wrap",color:"inherit",fontSize:"13px",lineHeight:"19px"},"pre pre code, pre.prismjs code":{color:"inherit",fontSize:"inherit"},"pre code":{margin:0,padding:0,whiteSpace:"pre",border:"none",background:"transparent"},"pre code, pre tt":{backgroundColor:"transparent",border:"none"},"body > *:first-of-type":{marginTop:"0 !important"},"body > *:last-child":{marginBottom:"0 !important"},a:{color:theme.color.secondary,textDecoration:"none"},"a.absent":{color:"#cc0000"},"a.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0},"h1, h2, h3, h4, h5, h6":{margin:"20px 0 10px",padding:0,cursor:"text",position:"relative","&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& tt, & code":{fontSize:"inherit"}},"h1:first-of-type + h2":{marginTop:0,paddingTop:0},"p, blockquote, ul, ol, dl, li, table, pre":{margin:"15px 0"},hr:{border:"0 none",borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},"body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type":{marginTop:0,paddingTop:0},"body > h1:first-of-type + h2":{marginTop:0,paddingTop:0},"a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6":{marginTop:0,paddingTop:0},"h1 p, h2 p, h3 p, h4 p, h5 p, h6 p":{marginTop:0},"li p.first":{display:"inline-block"},"ul, ol":{paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},dl:{padding:0},"dl dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",margin:"0 0 15px",padding:"0 15px","&:first-of-type":{padding:0},"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},blockquote:{borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},table:{padding:0,borderCollapse:"collapse","& tr":{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:"white",margin:0,padding:0,"& th":{fontWeight:"bold",border:`1px solid ${theme.appBorderColor}`,textAlign:"left",margin:0,padding:"6px 13px"},"& td":{border:`1px solid ${theme.appBorderColor}`,textAlign:"left",margin:0,padding:"6px 13px"},"&:nth-of-type(2n)":{backgroundColor:theme.color.lighter},"& th :first-of-type, & td :first-of-type":{marginTop:0},"& th :last-child, & td :last-child":{marginBottom:0}}},img:{maxWidth:"100%"},"span.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"}},"span.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"}},"span.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"}},"span.float-left":{display:"block",marginRight:13,overflow:"hidden",float:"left","& span":{margin:"13px 0 0"}},"span.float-right":{display:"block",marginLeft:13,overflow:"hidden",float:"right","& > span":{display:"block",overflow:"hidden",margin:"13px auto 0",textAlign:"right"}},"code, tt":{margin:"0 2px",padding:"0 5px",whiteSpace:"nowrap",border:`1px solid ${theme.color.mediumlight}`,backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==="dark"&&theme.color.darkest}}));var languages=[],Comp=null,LazySyntaxHighlighter=lazy(async()=>{let{SyntaxHighlighter:SyntaxHighlighter3}=await import('./syntaxhighlighter-4OVWVELQ.mjs');return languages.length>0&&(languages.forEach(args=>{SyntaxHighlighter3.registerLanguage(...args);}),languages=[]),Comp===null&&(Comp=SyntaxHighlighter3),{default:props=>React5__default.createElement(SyntaxHighlighter3,{...props})}}),LazySyntaxHighlighterWithFormatter=lazy(async()=>{let[{SyntaxHighlighter:SyntaxHighlighter3},{formatter}]=await Promise.all([import('./syntaxhighlighter-4OVWVELQ.mjs'),import('./formatter-6736J7QO.mjs')]);return languages.length>0&&(languages.forEach(args=>{SyntaxHighlighter3.registerLanguage(...args);}),languages=[]),Comp===null&&(Comp=SyntaxHighlighter3),{default:props=>React5__default.createElement(SyntaxHighlighter3,{...props,formatter})}}),SyntaxHighlighter2=props=>React5__default.createElement(Suspense,{fallback:React5__default.createElement("div",null)},props.format!==!1?React5__default.createElement(LazySyntaxHighlighterWithFormatter,{...props}):React5__default.createElement(LazySyntaxHighlighter,{...props}));SyntaxHighlighter2.registerLanguage=(...args)=>{if(Comp!==null){Comp.registerLanguage(...args);return}languages.push(args);};var toNumber=input=>typeof input=="number"?input:Number(input),Container=styled.div(({theme,col,row=1})=>col?{display:"inline-block",verticalAlign:"inherit","& > *":{marginLeft:col*theme.layoutMargin,verticalAlign:"inherit"},[`& > *:first-child${ignoreSsrWarning}`]:{marginLeft:0}}:{"& > *":{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(!0){case!!(outer&&col):return {marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};case!!(outer&&row):return {marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};default:return {}}}),Spaced=({col,row,outer,children,...rest})=>{let outerAmount=toNumber(typeof outer=="number"||!outer?outer:col||row);return React5__default.createElement(Container,{col,row,outer:outerAmount,...rest},children)};var Title=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc=styled.div(),Message=styled.div(({theme})=>({padding:30,textAlign:"center",color:theme.color.defaultText,fontSize:theme.typography.size.s2-1})),Placeholder=({children,...props})=>{let[title,desc]=Children.toArray(children);return React5__default.createElement(Message,{...props},React5__default.createElement(Title,null,title),desc&&React5__default.createElement(Desc,null,desc))};var ZoomElementWrapper=styled.div(({scale=1,elementHeight})=>({height:elementHeight||"auto",transformOrigin:"top left",transform:`scale(${1/scale})`}));function ZoomElement({scale,children}){let componentWrapperRef=useRef(null),[elementHeight,setElementHeight]=useState(0),onResize=useCallback(({height})=>{height&&setElementHeight(height/scale);},[scale]);return useEffect(()=>{componentWrapperRef.current&&setElementHeight(componentWrapperRef.current.getBoundingClientRect().height);},[scale]),useResizeObserver({ref:componentWrapperRef,onResize}),React5__default.createElement(ZoomElementWrapper,{scale,elementHeight},React5__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children))}var ZoomIFrame=class extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){let{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){let{scale,active}=this.props;return scale!==nextProps.scale&&this.setIframeInnerZoom(nextProps.scale),active!==nextProps.active&&this.iframe.setAttribute("data-is-storybook",nextProps.active?"true":"false"),nextProps.children.props.src!==this.props.children.props.src}setIframeInnerZoom(scale){try{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"});}catch{this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"});}render(){let{children}=this.props;return children}};var Zoom={Element:ZoomElement,IFrame:ZoomIFrame};var {document}=global,ErrorName=styled.strong(({theme})=>({color:theme.color.orange})),ErrorImportant=styled.strong(({theme})=>({color:theme.color.ancillary,textDecoration:"underline"})),ErrorDetail=styled.em(({theme})=>({color:theme.textMutedColor})),firstLineRegex=/(Error): (.*)\n/,linesRegexChromium=/at (?:(.*) )?\(?(.+)\)?/,linesRegexFirefox=/([^@]+)?(?:\/<)?@(.+)?/,linesRegexSafari=/([^@]+)?@(.+)?/,ErrorFormatter=({error})=>{if(!error)return React5__default.createElement(Fragment,null,"This error has no stack or message");if(!error.stack)return React5__default.createElement(Fragment,null,error.message||"This error has no stack or message");let input=error.stack.toString();input&&error.message&&!input.includes(error.message)&&(input=`Error: ${error.message}
 
 ${input}`);let match=input.match(firstLineRegex);if(!match)return React5__default.createElement(Fragment,null,input);let[,type,name]=match,rawLines=input.split(/\n/).slice(1),[,...lines]=rawLines.map(line=>{let result=line.match(linesRegexChromium)||line.match(linesRegexFirefox)||line.match(linesRegexSafari);return result?{name:(result[1]||"").replace("/<",""),location:result[2].replace(document.location.origin,"")}:null}).filter(Boolean);return React5__default.createElement(Fragment,null,React5__default.createElement("span",null,type),": ",React5__default.createElement(ErrorName,null,name),React5__default.createElement("br",null),lines.map((l,i)=>l.name?React5__default.createElement(Fragment,{key:i},"  ","at ",React5__default.createElement(ErrorImportant,null,l.name)," (",React5__default.createElement(ErrorDetail,null,l.location),")",React5__default.createElement("br",null)):React5__default.createElement(Fragment,{key:i},"  ","at ",React5__default.createElement(ErrorDetail,null,l.location),React5__default.createElement("br",null))))};var ButtonWrapper=styled.button(({small,theme})=>({border:0,borderRadius:"3em",cursor:"pointer",display:"inline-block",overflow:"hidden",padding:small?"8px 16px":"13px 20px",position:"relative",textAlign:"center",textDecoration:"none",transitionProperty:"background, box-shadow",transitionDuration:"150ms",transitionTimingFunction:"ease-out",verticalAlign:"top",whiteSpace:"nowrap",userSelect:"none",opacity:1,margin:0,background:"transparent",fontSize:`${small?theme.typography.size.s1:theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"1",svg:{display:"inline-block",height:small?12:14,width:small?12:14,verticalAlign:"top",marginRight:small?4:6,marginTop:small?0:-1,marginBottom:small?0:-1,pointerEvents:"none",path:{fill:"currentColor"}}}),({disabled})=>disabled?{cursor:"not-allowed !important",opacity:.5,"&:hover":{transform:"none"}}:{},({containsIcon,small})=>containsIcon?{svg:{display:"block",margin:0},...small?{padding:10}:{padding:13}}:{},({theme,primary,secondary,gray})=>{let color2;return gray?color2=theme.color.mediumlight:secondary?color2=theme.color.secondary:primary&&(color2=theme.color.primary),color2?{background:color2,color:gray?theme.color.darkest:theme.color.lightest,"&:hover":{background:curriedDarken$1(.05,color2)},"&:active":{boxShadow:"rgba(0, 0, 0, 0.1) 0 0 0 3em inset"},"&:focus":{boxShadow:`${rgba(color2,1)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${rgba(color2,.2)} 0 8px 18px 0px`}}:{}},({theme,tertiary,inForm,small})=>tertiary?{background:theme.button.background,color:theme.input.color,boxShadow:`${theme.button.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius,...inForm&&small?{padding:"10px 16px"}:{},"&:hover":{background:theme.base==="light"?curriedDarken$1(.02,theme.button.background):curriedLighten$1(.03,theme.button.background),...inForm?{}:{boxShadow:"rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset"}},"&:active":{background:theme.button.background},"&:focus":{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:"none"}}:{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(.3,theme.color.defaultText),background:"transparent","&:hover, &:focus":{boxShadow:`${curriedTransparentize$1(.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:"none"},"&:active":{boxShadow:`${curriedTransparentize$1(.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{let color2=theme.color.primary;return outline&&primary?{boxShadow:`${color2} 0 0 0 1px inset`,color:color2,"svg path":{fill:color2},"&:hover":{boxShadow:`${color2} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color2,boxShadow:`${color2} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color2} 0 0 0 1px inset, ${rgba(color2,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color2} 0 0 0 1px inset, ${rgba(color2,.2)} 0 8px 18px 0px`}}:{}},({theme,outline,primary,secondary})=>{let color2;return secondary?color2=theme.color.secondary:primary&&(color2=theme.color.primary),outline&&color2?{boxShadow:`${color2} 0 0 0 1px inset`,color:color2,"svg path":{fill:color2},"&:hover":{boxShadow:`${color2} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color2,boxShadow:`${color2} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color2} 0 0 0 1px inset, ${rgba(color2,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color2} 0 0 0 1px inset, ${rgba(color2,.2)} 0 8px 18px 0px`}}:{}}),ButtonLink=ButtonWrapper.withComponent("a"),Button=Object.assign(forwardRef(function({isLink,children,...props},ref){return isLink?React5__default.createElement(ButtonLink,{...props,ref},children):React5__default.createElement(ButtonWrapper,{...props,ref},children)}),{defaultProps:{isLink:!1}});var Wrapper=styled.label(({theme})=>({display:"flex",borderBottom:`1px solid ${theme.appBorderColor}`,margin:"0 15px",padding:"8px 0","&:last-child":{marginBottom:"3rem"}})),Label=styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:"flex",justifyContent:"flex-start",alignItems:"center",lineHeight:"16px"})),Field=({label,children,...props})=>React5__default.createElement(Wrapper,{...props},label?React5__default.createElement(Label,null,React5__default.createElement("span",null,label)):null,children);Field.defaultProps={label:void 0};var updateRef=function(ref,value){if(typeof ref=="function"){ref(value);return}ref.current=value;},useComposedRef=function(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance,prevUserRef.current&&updateRef(prevUserRef.current,null),prevUserRef.current=userRef,userRef&&updateRef(userRef,instance);},[userRef])},use_composed_ref_esm_default=useComposedRef;var noop=function(){},_excluded=["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"],TextareaAutosize=function(_ref,userRef){_ref.cacheMeasurements,_ref.maxRows,_ref.minRows;var _ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop:_ref$onChange;_ref.onHeightChange;var props=_objectWithoutPropertiesLoose(_ref,_excluded);props.value;var libRef=React5.useRef(null),ref=use_composed_ref_esm_default(libRef,userRef);return React5.useRef(0),React5.useRef(),React5.createElement("textarea",_extends({},props,{onChange,ref}))},index=React5.forwardRef(TextareaAutosize);var styleResets={appearance:"none",border:"0 none",boxSizing:"inherit",display:" block",margin:" 0",background:"transparent",padding:0,fontSize:"inherit",position:"relative"},styles=({theme})=>({...styleResets,transition:"box-shadow 200ms ease-out, opacity 200ms ease-out",color:theme.input.color||"inherit",background:theme.input.background,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius,fontSize:theme.typography.size.s2-1,lineHeight:"20px",padding:"6px 10px",boxSizing:"border-box",height:32,'&[type="file"]':{height:"auto"},"&:focus":{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:"none"},"&[disabled]":{cursor:"not-allowed",opacity:.5},"&:-webkit-autofill":{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},"&::placeholder":{color:theme.textMutedColor,opacity:1}}),sizes=({size})=>{switch(size){case"100%":return {width:"100%"};case"flex":return {flex:1};case"auto":default:return {display:"inline"}}},alignment=({align})=>{switch(align){case"end":return {textAlign:"right"};case"center":return {textAlign:"center"};case"start":default:return {textAlign:"left"}}},validation=({valid,theme})=>{switch(valid){case"valid":return {boxShadow:`${theme.color.positive} 0 0 0 1px inset !important`};case"error":return {boxShadow:`${theme.color.negative} 0 0 0 1px inset !important`};case"warn":return {boxShadow:`${theme.color.warning} 0 0 0 1px inset`};case void 0:case null:default:return {}}},Input=Object.assign(styled(forwardRef(function({size,valid,align,...props},ref){return React5__default.createElement("input",{...props,ref})}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:"Input"}),Select=Object.assign(styled(forwardRef(function({size,valid,align,...props},ref){return React5__default.createElement("select",{...props,ref})}))(styles,sizes,validation,{height:32,userSelect:"none",paddingRight:20,appearance:"menulist"}),{displayName:"Select"}),Textarea=Object.assign(styled(forwardRef(function({size,valid,align,...props},ref){return React5__default.createElement(index,{...props,ref})}))(styles,sizes,alignment,validation,({height=400})=>({overflow:"visible",maxHeight:height})),{displayName:"Textarea"}),ButtonStyled=styled(forwardRef(function({size,valid,align,...props},ref){return React5__default.createElement(Button,{...props,ref})}))(sizes,validation,{userSelect:"none",overflow:"visible",zIndex:2,"&:hover":{transform:"none"}}),Button3=Object.assign(forwardRef(function(props,ref){return React5__default.createElement(ButtonStyled,{...props,tertiary:!0,small:!0,inForm:!0,ref})}),{displayName:"Button"});var Form=Object.assign(styled.form({boxSizing:"border-box",width:"100%"}),{Field,Input,Select,Textarea,Button:Button3});var LazyWithTooltip=lazy(()=>import('./WithTooltip-YBG737T3.mjs').then(mod=>({default:mod.WithTooltip}))),WithTooltip=props=>React5__default.createElement(Suspense,{fallback:React5__default.createElement("div",null)},React5__default.createElement(LazyWithTooltip,{...props})),LazyWithTooltipPure=lazy(()=>import('./WithTooltip-YBG737T3.mjs').then(mod=>({default:mod.WithTooltipPure}))),WithTooltipPure=props=>React5__default.createElement(Suspense,{fallback:React5__default.createElement("div",null)},React5__default.createElement(LazyWithTooltipPure,{...props}));var Title2=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc2=styled.span(),Links=styled.div(({theme})=>({marginTop:8,textAlign:"center","> *":{margin:"0 8px",fontWeight:theme.typography.weight.bold}})),Message2=styled.div(({theme})=>({color:theme.color.defaultText,lineHeight:"18px"})),MessageWrapper=styled.div({padding:15,width:280,boxSizing:"border-box"}),TooltipMessage=({title,desc,links})=>React5__default.createElement(MessageWrapper,null,React5__default.createElement(Message2,null,title&&React5__default.createElement(Title2,null,title),desc&&React5__default.createElement(Desc2,null,desc)),links&&React5__default.createElement(Links,null,links.map(({title:linkTitle,...other})=>React5__default.createElement(Link2,{...other,key:linkTitle},linkTitle))));TooltipMessage.defaultProps={title:null,desc:null,links:null};var Note=styled.div(({theme})=>({padding:"2px 6px",lineHeight:"16px",fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:"0 0 5px 0 rgba(0, 0, 0, 0.3)",borderRadius:4,whiteSpace:"nowrap",pointerEvents:"none",zIndex:-1,background:theme.base==="light"?"rgba(60, 60, 60, 0.9)":"rgba(0, 0, 0, 0.95)",margin:6})),TooltipNote=({note,...props})=>React5__default.createElement(Note,{...props},note);var Title3=styled(({active,loading,disabled,...rest})=>React5__default.createElement("span",{...rest}))(({theme})=>({color:theme.color.defaultText,fontWeight:theme.typography.weight.regular}),({active,theme})=>active?{color:theme.color.secondary,fontWeight:theme.typography.weight.bold}:{},({loading,theme})=>loading?{display:"inline-block",flex:"none",...theme.animation.inlineGlow}:{},({disabled,theme})=>disabled?{color:curriedTransparentize$1(.7,theme.color.defaultText)}:{}),Right=styled.span({display:"flex","& svg":{height:12,width:12,margin:"3px 0",verticalAlign:"top"},"& path":{fill:"inherit"}}),Center=styled.span({flex:1,textAlign:"left",display:"flex",flexDirection:"column"},({isIndented})=>isIndented?{marginLeft:24}:{}),CenterText=styled.span(({theme})=>({fontSize:"11px",lineHeight:"14px"}),({active,theme})=>active?{color:theme.color.secondary}:{},({theme,disabled})=>disabled?{color:theme.textMutedColor}:{}),Left=styled.span(({active,theme})=>active?{"& svg":{opacity:1},"& svg path":{fill:theme.color.secondary}}:{},()=>({display:"flex",maxWidth:14})),Item=styled.a(({theme})=>({fontSize:theme.typography.size.s1,transition:"all 150ms ease-out",color:theme.color.dark,textDecoration:"none",cursor:"pointer",justifyContent:"space-between",lineHeight:"18px",padding:"7px 10px",display:"flex",alignItems:"center","& > * + *":{paddingLeft:10},"&:hover":{background:theme.background.hoverable},"&:hover svg":{opacity:1}}),({disabled})=>disabled?{cursor:"not-allowed"}:{}),getItemProps=memoize(100)((onClick,href,LinkWrapper)=>{let result={};return onClick&&Object.assign(result,{onClick}),href&&Object.assign(result,{href}),LinkWrapper&&href&&Object.assign(result,{to:href,as:LinkWrapper}),result}),ListItem=({loading,left,title,center,right,icon,active,disabled,isIndented,href,onClick,LinkWrapper,...rest})=>{let itemProps=getItemProps(onClick,href,LinkWrapper),commonProps={active,disabled},isStorybookIcon=typeof icon=="string"&&icons[icon];return React5__default.createElement(Item,{...commonProps,...rest,...itemProps},icon?React5__default.createElement(Left,{...commonProps},isStorybookIcon?React5__default.createElement(Icons,{icon}):icon):left&&React5__default.createElement(Left,{...commonProps},left),title||center?React5__default.createElement(Center,{isIndented:!left&&!icon&&isIndented},title&&React5__default.createElement(Title3,{...commonProps,loading},title),center&&React5__default.createElement(CenterText,{...commonProps},center)):null,right&&React5__default.createElement(Right,{...commonProps},right))};ListItem.defaultProps={loading:!1,left:null,title:React5__default.createElement("span",null,"Loading state"),center:null,right:null,active:!1,disabled:!1,href:null,LinkWrapper:null,onClick:null};var ListItem_default=ListItem;var List=styled.div({minWidth:180,overflow:"hidden",overflowY:"auto",maxHeight:15.5*32},({theme})=>({borderRadius:theme.appBorderRadius})),Item2=props=>{let{LinkWrapper,onClick:onClickFromProps,id,isIndented,...rest}=props,{title,href,active}=rest,onClick=useCallback(event=>{onClickFromProps(event,rest);},[onClickFromProps]),hasOnClick=!!onClickFromProps;return React5__default.createElement(ListItem_default,{title,active,href,id:`list-item-${id}`,LinkWrapper,isIndented,...rest,...hasOnClick?{onClick}:{}})},TooltipLinkList=({links,LinkWrapper})=>{let hasOneLeftElement=links.some(link=>link.left||link.icon);return React5__default.createElement(List,null,links.map(({isGatsby,...p})=>React5__default.createElement(Item2,{key:p.id,LinkWrapper:isGatsby?LinkWrapper:null,isIndented:hasOneLeftElement,...p})))};TooltipLinkList.defaultProps={LinkWrapper:ListItem_default.defaultProps.LinkWrapper};var ButtonOrLink=React5__default.forwardRef(({children,...restProps},ref)=>restProps.href!=null?React5__default.createElement("a",{ref,...restProps},children):React5__default.createElement("button",{ref,type:"button",...restProps},children));ButtonOrLink.displayName="ButtonOrLink";var TabButton=styled(ButtonOrLink,{shouldForwardProp:isPropValid})({whiteSpace:"normal",display:"inline-flex",overflow:"hidden",verticalAlign:"top",justifyContent:"center",alignItems:"center",textAlign:"center",textDecoration:"none","&:empty":{display:"none"}},({theme})=>({padding:"0 15px",transition:"color 0.2s linear, border-bottom-color 0.2s linear",height:40,lineHeight:"12px",cursor:"pointer",background:"transparent",border:"0 solid transparent",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",fontWeight:"bold",fontSize:13,"&:focus":{outline:"0 none",borderBottomColor:theme.color.secondary}}),({active,textColor,theme})=>active?{color:textColor||theme.barSelectedColor,borderBottomColor:theme.barSelectedColor}:{color:textColor||theme.barTextColor,borderBottomColor:"transparent"});TabButton.displayName="TabButton";var IconButton=styled(ButtonOrLink,{shouldForwardProp:isPropValid})(()=>({alignItems:"center",background:"transparent",border:"none",borderRadius:4,color:"inherit",cursor:"pointer",display:"inline-flex",fontSize:13,fontWeight:"bold",height:28,justifyContent:"center",marginTop:6,padding:"8px 7px","& > svg":{width:14}}),({active,theme})=>active?{backgroundColor:theme.background.hoverable,color:theme.color.secondary}:{},({disabled,theme})=>disabled?{opacity:.5,cursor:"not-allowed"}:{"&:hover, &:focus-visible":{background:curriedTransparentize$1(.88,theme.color.secondary),color:theme.color.secondary},"&:focus-visible":{outline:auto},"&:focus:not(:focus-visible)":{outline:"none"}});IconButton.displayName="IconButton";var IconPlaceholder=styled.div(({theme})=>({width:14,height:14,backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),IconButtonSkeletonWrapper=styled.div(()=>({marginTop:6,padding:7,height:28})),IconButtonSkeleton=()=>React5__default.createElement(IconButtonSkeletonWrapper,null,React5__default.createElement(IconPlaceholder,null));var Side=styled.div({display:"flex",whiteSpace:"nowrap",flexBasis:"auto",marginLeft:3,marginRight:3},({scrollable})=>scrollable?{flexShrink:0}:{},({left})=>left?{"& > *":{marginLeft:4}}:{},({right})=>right?{marginLeft:30,"& > *":{marginRight:4}}:{});Side.displayName="Side";var UnstyledBar=({children,className,scrollable})=>scrollable?React5__default.createElement(ScrollArea,{vertical:!1,className},children):React5__default.createElement("div",{className},children),Bar=styled(UnstyledBar)(({theme,scrollable=!0})=>({color:theme.barTextColor,width:"100%",height:40,flexShrink:0,overflow:scrollable?"auto":"hidden",overflowY:"hidden"}),({theme,border=!1})=>border?{boxShadow:`${theme.appBorderColor}  0 -1px 0 0 inset`,background:theme.barBg}:{});Bar.displayName="Bar";var BarInner=styled.div(({bgColor})=>({display:"flex",justifyContent:"space-between",position:"relative",flexWrap:"nowrap",flexShrink:0,height:40,backgroundColor:bgColor||""})),FlexBar=({children,backgroundColor,...rest})=>{let[left,right]=Children.toArray(children);return React5__default.createElement(Bar,{...rest},React5__default.createElement(BarInner,{bgColor:backgroundColor},React5__default.createElement(Side,{scrollable:rest.scrollable,left:!0},left),right?React5__default.createElement(Side,{right:!0},right):null))};FlexBar.displayName="FlexBar";var VisuallyHidden=styled.div(({active})=>active?{display:"block"}:{display:"none"}),childrenToList=children=>Children.toArray(children).map(({props:{title,id,color:color2,children:childrenOfChild}})=>{let content=Array.isArray(childrenOfChild)?childrenOfChild[0]:childrenOfChild;return {title,id,...color2?{color:color2}:{},render:typeof content=="function"?content:({active,key})=>React5__default.createElement(VisuallyHidden,{key,active,role:"tabpanel"},content)}});var CollapseIcon=styled.span(({theme,isActive})=>({display:"inline-block",width:0,height:0,marginLeft:8,color:isActive?theme.color.secondary:theme.color.mediumdark,borderRight:"3px solid transparent",borderLeft:"3px solid transparent",borderTop:"3px solid",transition:"transform .1s ease-out"})),AddonButton=styled(TabButton)(({active,theme,preActive})=>`
     color: ${preActive||active?theme.color.secondary:theme.color.mediumdark};
@@ -46,7 +46,7 @@ ${input}`);let match=input.match(firstLineRegex);if(!match)return React5__defaul
         color: ${theme.color.secondary};
       }
     }
-  `);function useList(list){let tabBarRef=useRef(),addonsRef=useRef(),tabRefs=useRef(new Map),{width:tabBarWidth=1}=useResizeObserver({ref:tabBarRef}),[visibleList,setVisibleList]=useState(list),[invisibleList,setInvisibleList]=useState([]),previousList=useRef(list),AddonTab=useCallback(({menuName,actions})=>{let isAddonsActive=invisibleList.some(({active})=>active),[isTooltipVisible,setTooltipVisible]=useState(!1);return React5__default.createElement(React5__default.Fragment,null,React5__default.createElement(WithToolTipState,{interactive:!0,visible:isTooltipVisible,onVisibleChange:setTooltipVisible,placement:"bottom",delayHide:100,tooltip:React5__default.createElement(TooltipLinkList,{links:invisibleList.map(({title,id,color:color2,active})=>({id,title,color:color2,active,onClick:e=>{e.preventDefault(),actions.onSelect(id);}}))})},React5__default.createElement(AddonButton,{ref:addonsRef,active:isAddonsActive,preActive:isTooltipVisible,style:{visibility:invisibleList.length?"visible":"hidden"},"aria-hidden":!invisibleList.length,className:"tabbutton",type:"button",role:"tab"},menuName,React5__default.createElement(CollapseIcon,{className:"addon-collapsible-icon",isActive:isAddonsActive||isTooltipVisible}))),invisibleList.map(({title,id,color:color2},index2)=>{let indexId=`index-${index2}`;return React5__default.createElement(TabButton,{id:`tabbutton-${sanitize(id)??indexId}`,style:{visibility:"hidden"},"aria-hidden":!0,tabIndex:-1,ref:ref=>{tabRefs.current.set(id,ref);},className:"tabbutton",type:"button",key:id,textColor:color2,role:"tab"},title)}))},[invisibleList]),setTabLists=useCallback(()=>{if(!tabBarRef.current||!addonsRef.current)return;let{x,width}=tabBarRef.current.getBoundingClientRect(),{width:widthAddonsTab}=addonsRef.current.getBoundingClientRect(),rightBorder=invisibleList.length?x+width-widthAddonsTab:x+width,newVisibleList=[],widthSum=0,newInvisibleList=list.filter(item=>{let{id}=item,tabButton=tabRefs.current.get(id),{width:tabWidth=0}=tabButton?.getBoundingClientRect()||{},crossBorder=x+widthSum+tabWidth>rightBorder;return (!crossBorder||!tabButton)&&newVisibleList.push(item),widthSum+=tabWidth,crossBorder});(newVisibleList.length!==visibleList.length||previousList.current!==list)&&(setVisibleList(newVisibleList),setInvisibleList(newInvisibleList),previousList.current=list);},[invisibleList.length,list,visibleList]);return useLayoutEffect(setTabLists,[setTabLists,tabBarWidth]),{tabRefs,addonsRef,tabBarRef,visibleList,invisibleList,AddonTab}}var ignoreSsrWarning2="/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */",Wrapper2=styled.div(({theme,bordered})=>bordered?{backgroundClip:"padding-box",border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius,overflow:"hidden",boxSizing:"border-box"}:{},({absolute})=>absolute?{width:"100%",height:"100%",boxSizing:"border-box",display:"flex",flexDirection:"column"}:{display:"block"}),TabBar=styled.div({overflow:"hidden","&:first-of-type":{marginLeft:-3},whiteSpace:"nowrap",flexGrow:1});TabBar.displayName="TabBar";var Content=styled.div({display:"block",position:"relative"},({theme})=>({fontSize:theme.typography.size.s2-1,background:theme.background.content}),({bordered,theme})=>bordered?{borderRadius:`0 0 ${theme.appBorderRadius-1}px ${theme.appBorderRadius-1}px`}:{},({absolute,bordered})=>absolute?{height:`calc(100% - ${bordered?42:40}px)`,position:"absolute",left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:40+(bordered?1:0),overflow:"auto",[`& > *:first-child${ignoreSsrWarning2}`]:{position:"absolute",left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:0+(bordered?1:0),height:`calc(100% - ${bordered?2:0}px)`,overflow:"auto"}}:{}),TabWrapper=({active,render,children})=>React5__default.createElement(VisuallyHidden,{active},render?render():children);var Tabs=memo(({children,selected,actions,absolute,bordered,tools,backgroundColor,id:htmlId,menuName})=>{let idList=childrenToList(children).map(i=>i.id),list=useMemo(()=>childrenToList(children).map((i,index2)=>({...i,active:selected?i.id===selected:index2===0})),[selected,...idList]),{visibleList,tabBarRef,tabRefs,AddonTab}=useList(list);return list.length?React5__default.createElement(Wrapper2,{absolute,bordered,id:htmlId},React5__default.createElement(FlexBar,{scrollable:!1,border:!0,backgroundColor},React5__default.createElement(TabBar,{style:{whiteSpace:"normal"},ref:tabBarRef,role:"tablist"},visibleList.map(({title,id,active,color:color2},index2)=>{let indexId=`index-${index2}`;return React5__default.createElement(TabButton,{id:`tabbutton-${sanitize(id)??indexId}`,ref:ref=>{tabRefs.current.set(id,ref);},className:`tabbutton ${active?"tabbutton-active":""}`,type:"button",key:id,active,textColor:color2,onClick:e=>{e.preventDefault(),actions.onSelect(id);},role:"tab"},typeof title=="function"?React5__default.createElement("title",null):title)}),React5__default.createElement(AddonTab,{menuName,actions})),tools),React5__default.createElement(Content,{id:"panel-tab-content",bordered,absolute},list.map(({id,active,render})=>React5__default.createElement(render,{key:id,active},null)))):React5__default.createElement(Placeholder,null,React5__default.createElement(Fragment,{key:"title"},"Nothing found"))});Tabs.displayName="Tabs";Tabs.defaultProps={id:null,children:null,tools:null,selected:null,absolute:!1,bordered:!1,menuName:"Tabs"};var TabsState=class extends Component{constructor(props){super(props);this.handlers={onSelect:id=>this.setState({selected:id})};this.state={selected:props.initial};}static{this.defaultProps={children:[],initial:null,absolute:!1,bordered:!1,backgroundColor:"",menuName:void 0};}render(){let{bordered=!1,absolute=!1,children,backgroundColor,menuName}=this.props,{selected}=this.state;return React5__default.createElement(Tabs,{bordered,absolute,selected,backgroundColor,menuName,actions:this.handlers},children)}};var Separator=styled.span(({theme})=>({width:1,height:20,background:theme.appBorderColor,marginTop:10,marginLeft:6,marginRight:2}),({force})=>force?{}:{"& + &":{display:"none"}});Separator.displayName="Separator";var interleaveSeparators=list=>list.reduce((acc,item,index2)=>item?React5__default.createElement(Fragment,{key:item.id||item.key||`f-${index2}`},acc,index2>0?React5__default.createElement(Separator,{key:`s-${index2}`}):null,item.render()||item):acc,null);var usePrevious=value=>{let ref=useRef();return useEffect(()=>{ref.current=value;},[value]),ref.current},useUpdate=(update,value)=>{let previousValue=usePrevious(value);return update?value:previousValue},AddonPanel=({active,children})=>React5__default.createElement("div",{hidden:!active},useUpdate(active,children));var StorybookLogo=({alt,...props})=>React5__default.createElement("svg",{width:"200px",height:"40px",viewBox:"0 0 200 40",...props,role:"img"},alt?React5__default.createElement("title",null,alt):null,React5__default.createElement("defs",null,React5__default.createElement("path",{d:"M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z",id:"a"})),React5__default.createElement("g",{fill:"none",fillRule:"evenodd"},React5__default.createElement("path",{d:"M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z",fill:"currentColor"}),React5__default.createElement("mask",{id:"b",fill:"#fff"},React5__default.createElement("use",{xlinkHref:"#a"})),React5__default.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#a"}),React5__default.createElement("path",{d:"M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z",fill:"#FFF",fillRule:"nonzero",mask:"url(#b)"})));var StorybookIcon=({...props})=>React5__default.createElement("svg",{viewBox:"0 0 64 64",...props},React5__default.createElement("title",null,"Storybook icon"),React5__default.createElement("g",{id:"Artboard",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},React5__default.createElement("path",{d:"M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z",id:"path-1",fill:"#FF4785",fillRule:"nonzero"}),React5__default.createElement("path",{d:"M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z",id:"path9_fill-path",fill:"#FFFFFF",fillRule:"nonzero"}),React5__default.createElement("path",{d:"M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z",id:"Path",fill:"#FFFFFF"})));var rotate360=keyframes`
+  `);function useList(list){let tabBarRef=useRef(),addonsRef=useRef(),tabRefs=useRef(new Map),{width:tabBarWidth=1}=useResizeObserver({ref:tabBarRef}),[visibleList,setVisibleList]=useState(list),[invisibleList,setInvisibleList]=useState([]),previousList=useRef(list),AddonTab=useCallback(({menuName,actions})=>{let isAddonsActive=invisibleList.some(({active})=>active),[isTooltipVisible,setTooltipVisible]=useState(!1);return React5__default.createElement(React5__default.Fragment,null,React5__default.createElement(WithToolTipState,{interactive:!0,visible:isTooltipVisible,onVisibleChange:setTooltipVisible,placement:"bottom",delayHide:100,tooltip:React5__default.createElement(TooltipLinkList,{links:invisibleList.map(({title,id,color:color2,active})=>({id,title,color:color2,active,onClick:e=>{e.preventDefault(),actions.onSelect(id);}}))})},React5__default.createElement(AddonButton,{ref:addonsRef,active:isAddonsActive,preActive:isTooltipVisible,style:{visibility:invisibleList.length?"visible":"hidden"},"aria-hidden":!invisibleList.length,className:"tabbutton",type:"button",role:"tab"},menuName,React5__default.createElement(CollapseIcon,{className:"addon-collapsible-icon",isActive:isAddonsActive||isTooltipVisible}))),invisibleList.map(({title,id,color:color2},index2)=>{let indexId=`index-${index2}`;return React5__default.createElement(TabButton,{id:`tabbutton-${sanitize(id)??indexId}`,style:{visibility:"hidden"},"aria-hidden":!0,tabIndex:-1,ref:ref=>{tabRefs.current.set(id,ref);},className:"tabbutton",type:"button",key:id,textColor:color2,role:"tab"},title)}))},[invisibleList]),setTabLists=useCallback(()=>{if(!tabBarRef.current||!addonsRef.current)return;let{x,width}=tabBarRef.current.getBoundingClientRect(),{width:widthAddonsTab}=addonsRef.current.getBoundingClientRect(),rightBorder=invisibleList.length?x+width-widthAddonsTab:x+width,newVisibleList=[],widthSum=0,newInvisibleList=list.filter(item=>{let{id}=item,tabButton=tabRefs.current.get(id),{width:tabWidth=0}=tabButton?.getBoundingClientRect()||{},crossBorder=x+widthSum+tabWidth>rightBorder;return (!crossBorder||!tabButton)&&newVisibleList.push(item),widthSum+=tabWidth,crossBorder});(newVisibleList.length!==visibleList.length||previousList.current!==list)&&(setVisibleList(newVisibleList),setInvisibleList(newInvisibleList),previousList.current=list);},[invisibleList.length,list,visibleList]);return useLayoutEffect(setTabLists,[setTabLists,tabBarWidth]),{tabRefs,addonsRef,tabBarRef,visibleList,invisibleList,AddonTab}}var ignoreSsrWarning2="/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */",Wrapper2=styled.div(({theme,bordered})=>bordered?{backgroundClip:"padding-box",border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius,overflow:"hidden",boxSizing:"border-box"}:{},({absolute})=>absolute?{width:"100%",height:"100%",boxSizing:"border-box",display:"flex",flexDirection:"column"}:{display:"block"}),TabBar=styled.div({overflow:"hidden","&:first-of-type":{marginLeft:-3},whiteSpace:"nowrap",flexGrow:1});TabBar.displayName="TabBar";var Content=styled.div({display:"block",position:"relative"},({theme})=>({fontSize:theme.typography.size.s2-1,background:theme.background.content}),({bordered,theme})=>bordered?{borderRadius:`0 0 ${theme.appBorderRadius-1}px ${theme.appBorderRadius-1}px`}:{},({absolute,bordered})=>absolute?{height:`calc(100% - ${bordered?42:40}px)`,position:"absolute",left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:40+(bordered?1:0),overflow:"auto",[`& > *:first-child${ignoreSsrWarning2}`]:{position:"absolute",left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:0+(bordered?1:0),height:`calc(100% - ${bordered?2:0}px)`,overflow:"auto"}}:{}),TabWrapper=({active,render,children})=>React5__default.createElement(VisuallyHidden,{active},render?render():children);var Tabs=memo(({children,selected,actions,absolute,bordered,tools,backgroundColor,id:htmlId,menuName})=>{let idList=childrenToList(children).map(i=>i.id),list=useMemo(()=>childrenToList(children).map((i,index2)=>({...i,active:selected?i.id===selected:index2===0})),[selected,...idList]),{visibleList,tabBarRef,tabRefs,AddonTab}=useList(list);return list.length?React5__default.createElement(Wrapper2,{absolute,bordered,id:htmlId},React5__default.createElement(FlexBar,{scrollable:!1,border:!0,backgroundColor},React5__default.createElement(TabBar,{style:{whiteSpace:"normal"},ref:tabBarRef,role:"tablist"},visibleList.map(({title,id,active,color:color2},index2)=>{let indexId=`index-${index2}`;return React5__default.createElement(TabButton,{id:`tabbutton-${sanitize(id)??indexId}`,ref:ref=>{tabRefs.current.set(id,ref);},className:`tabbutton ${active?"tabbutton-active":""}`,type:"button",key:id,active,textColor:color2,onClick:e=>{e.preventDefault(),actions.onSelect(id);},role:"tab"},typeof title=="function"?React5__default.createElement("title",null):title)}),React5__default.createElement(AddonTab,{menuName,actions})),tools),React5__default.createElement(Content,{id:"panel-tab-content",bordered,absolute},list.map(({id,active,render})=>React5__default.createElement(render,{key:id,active},null)))):React5__default.createElement(Placeholder,null,React5__default.createElement(Fragment,{key:"title"},"Nothing found"))});Tabs.displayName="Tabs";Tabs.defaultProps={id:null,children:null,tools:null,selected:null,absolute:!1,bordered:!1,menuName:"Tabs"};var TabsState=class extends Component{constructor(props){super(props);this.handlers={onSelect:id=>this.setState({selected:id})};this.state={selected:props.initial};}render(){let{bordered=!1,absolute=!1,children,backgroundColor,menuName}=this.props,{selected}=this.state;return React5__default.createElement(Tabs,{bordered,absolute,selected,backgroundColor,menuName,actions:this.handlers},children)}};TabsState.defaultProps={children:[],initial:null,absolute:!1,bordered:!1,backgroundColor:"",menuName:void 0};var Separator=styled.span(({theme})=>({width:1,height:20,background:theme.appBorderColor,marginTop:10,marginLeft:6,marginRight:2}),({force})=>force?{}:{"& + &":{display:"none"}});Separator.displayName="Separator";var interleaveSeparators=list=>list.reduce((acc,item,index2)=>item?React5__default.createElement(Fragment,{key:item.id||item.key||`f-${index2}`},acc,index2>0?React5__default.createElement(Separator,{key:`s-${index2}`}):null,item.render()||item):acc,null);var usePrevious=value=>{let ref=useRef();return useEffect(()=>{ref.current=value;},[value]),ref.current},useUpdate=(update,value)=>{let previousValue=usePrevious(value);return update?value:previousValue},AddonPanel=({active,children})=>React5__default.createElement("div",{hidden:!active},useUpdate(active,children));var StorybookLogo=({alt,...props})=>React5__default.createElement("svg",{width:"200px",height:"40px",viewBox:"0 0 200 40",...props,role:"img"},alt?React5__default.createElement("title",null,alt):null,React5__default.createElement("defs",null,React5__default.createElement("path",{d:"M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z",id:"a"})),React5__default.createElement("g",{fill:"none",fillRule:"evenodd"},React5__default.createElement("path",{d:"M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z",fill:"currentColor"}),React5__default.createElement("mask",{id:"b",fill:"#fff"},React5__default.createElement("use",{xlinkHref:"#a"})),React5__default.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#a"}),React5__default.createElement("path",{d:"M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z",fill:"#FFF",fillRule:"nonzero",mask:"url(#b)"})));var StorybookIcon=({...props})=>React5__default.createElement("svg",{viewBox:"0 0 64 64",...props},React5__default.createElement("title",null,"Storybook icon"),React5__default.createElement("g",{id:"Artboard",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},React5__default.createElement("path",{d:"M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z",id:"path-1",fill:"#FF4785",fillRule:"nonzero"}),React5__default.createElement("path",{d:"M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z",id:"path9_fill-path",fill:"#FFFFFF",fillRule:"nonzero"}),React5__default.createElement("path",{d:"M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z",id:"Path",fill:"#FFFFFF"})));var rotate360=keyframes`
 	from {
 		transform: rotate(0deg);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.2.2",
+  "version": "7.3.0-alpha.0",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -68,12 +68,13 @@
   },
   "dependencies": {
     "@radix-ui/react-select": "^1.2.2",
-    "@storybook/client-logger": "7.2.2",
+    "@radix-ui/react-toolbar": "^1.0.4",
+    "@storybook/client-logger": "7.3.0-alpha.0",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.1.0",
-    "@storybook/theming": "7.2.2",
-    "@storybook/types": "7.2.2",
+    "@storybook/icons": "^1.1.6",
+    "@storybook/theming": "7.3.0-alpha.0",
+    "@storybook/types": "7.3.0-alpha.0",
     "memoizerific": "^1.11.3",
     "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"