@storybook/components 7.0.0-beta.46 → 7.0.0-beta.48

package/dist/index.mjs

@@ -156,7 +156,7 @@ To pass a single animation please supply them in simple values, e.g. animation('
   path {
     fill: currentColor;
   }
-`,Icons=({icon,useSymbol,...props})=>React6.createElement(Svg,{viewBox:"0 0 14 14",width:"14px",height:"14px",...props},useSymbol?React6.createElement("use",{xlinkHref:`#icon--${icon}`}):icons[icon]),Symbols=memo(function({icons:keys=Object.keys(icons)}){return React6.createElement(Svg,{viewBox:"0 0 14 14",style:{position:"absolute",width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React6.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=styled25.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=styled25.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})=>React7.createElement(A2,{...rest,onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className},React7.createElement(LinkInner,{withArrow,containsIcon},children,withArrow&&React7.createElement(Icons,{icon:"arrowright"})));Link2.defaultProps={cancel:!0,className:void 0,style:void 0,onClick:void 0,withArrow:!1,containsIcon:!1};import{styled as styled26}from"@storybook/theming";var DocumentWrapper=styled26.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}}));import React8,{Suspense,lazy}from"react";var LazySyntaxHighlighter=lazy(()=>import("./syntaxhighlighter-6JBF4TYN.mjs")),LazySyntaxHighlighterWithFormatter=lazy(async()=>{let[{SyntaxHighlighter:SyntaxHighlighter3},{formatter}]=await Promise.all([import("./syntaxhighlighter-6JBF4TYN.mjs"),import("./formatter-GCLXO5IP.mjs")]);return{default:props=>React8.createElement(SyntaxHighlighter3,{...props,formatter})}}),SyntaxHighlighter2=props=>React8.createElement(Suspense,{fallback:React8.createElement("div",null)},props.format!==!1?React8.createElement(LazySyntaxHighlighterWithFormatter,{...props}):React8.createElement(LazySyntaxHighlighter,{...props}));import React9 from"react";import{styled as styled27}from"@storybook/theming";var toNumber=input=>typeof input=="number"?input:Number(input),Container=styled27.div(({theme,col,row=1})=>col?{display:"inline-block",verticalAlign:"inherit","& > *":{marginLeft:col*theme.layoutMargin,verticalAlign:"inherit"},["& > *:first-child"]:{marginLeft:0}}:{"& > *":{marginTop:row*theme.layoutMargin},["& > *:first-child"]:{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 React9.createElement(Container,{col,row,outer:outerAmount,...rest},children)};import React10,{Children as Children2}from"react";import{styled as styled28}from"@storybook/theming";var Title=styled28.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc=styled28.div(),Message=styled28.div(({theme})=>({padding:30,textAlign:"center",color:theme.color.defaultText,fontSize:theme.typography.size.s2-1})),Placeholder=({children,...props})=>{let[title,desc]=Children2.toArray(children);return React10.createElement(Message,{...props},React10.createElement(Title,null,title),desc&&React10.createElement(Desc,null,desc))};import React11,{useEffect,useRef,useState,useCallback}from"react";import{styled as styled29}from"@storybook/theming";import{global}from"@storybook/global";function browserSupportsCssZoom(){try{return global.document.implementation.createHTMLDocument("").body.style.zoom!==void 0}catch{return!1}}var hasBrowserSupportForCssZoom=browserSupportsCssZoom(),ZoomElementWrapper=styled29.div(({scale=1,height})=>hasBrowserSupportForCssZoom?{"> *":{zoom:1/scale}}:{height:height?height+50:"auto",transformOrigin:"top left",transform:`scale(${1/scale})`}),useMutationObserver=({element,options={},callback})=>{let observer=useRef();useEffect(()=>(observer.current||(observer.current=new MutationObserver((mutationRecord,mutationObserver)=>{callback(mutationRecord,mutationObserver)})),element?.current&&observer.current.observe(element.current,options),()=>observer.current.disconnect()),[element,observer,options])},mutationObserverOptions={subtree:!0,childList:!0};function ZoomElement({scale,children}){let componentWrapperRef=useRef(null),[height,setHeight]=useState(0),handleMutations=useCallback(()=>{setHeight(componentWrapperRef.current.getBoundingClientRect().height)},[]);return useEffect(()=>{componentWrapperRef.current&&setHeight(componentWrapperRef.current.getBoundingClientRect().height)},[scale,componentWrapperRef.current]),useMutationObserver({element:componentWrapperRef,options:mutationObserverOptions,callback:handleMutations}),React11.createElement(ZoomElementWrapper,{scale,height},React11.createElement("div",{ref:hasBrowserSupportForCssZoom?null:componentWrapperRef,className:"innerZoomElementWrapper"},children))}import{Component}from"react";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{browserSupportsCssZoom()?Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale,minHeight:`calc(100vh / ${1/scale})`}):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};import React12,{forwardRef}from"react";import{styled as styled30}from"@storybook/theming";var ButtonWrapper=styled30.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",transition:"all 150ms ease-out",transform:"translate3d(0,0,0)",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 color;return gray?color=theme.color.mediumlight:secondary?color=theme.color.secondary:primary&&(color=theme.color.primary),color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,"&:hover":{background:curriedDarken$1(.05,color)},"&:active":{boxShadow:"rgba(0, 0, 0, 0.1) 0 0 0 3em inset"},"&:focus":{boxShadow:`${rgba(color,1)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${rgba(color,.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 color=theme.color.primary;return outline&&primary?{boxShadow:`${color} 0 0 0 1px inset`,color,"svg path":{fill:color},"&:hover":{boxShadow:`${color} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.2)} 0 8px 18px 0px`}}:{}},({theme,outline,primary,secondary})=>{let color;return secondary?color=theme.color.secondary:primary&&(color=theme.color.primary),outline&&color?{boxShadow:`${color} 0 0 0 1px inset`,color,"svg path":{fill:color},"&:hover":{boxShadow:`${color} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.2)} 0 8px 18px 0px`}}:{}}),ButtonLink=ButtonWrapper.withComponent("a"),Button=Object.assign(forwardRef(function({isLink,children,...props},ref){return isLink?React12.createElement(ButtonLink,{...props,ref},children):React12.createElement(ButtonWrapper,{...props,ref},children)}),{defaultProps:{isLink:!1}});import{styled as styled33}from"@storybook/theming";import React13 from"react";import{styled as styled31}from"@storybook/theming";var Wrapper=styled31.label(({theme})=>({display:"flex",borderBottom:`1px solid ${theme.appBorderColor}`,margin:"0 15px",padding:"8px 0","&:last-child":{marginBottom:"3rem"}})),Label=styled31.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:"flex",justifyContent:"flex-start",alignItems:"center",lineHeight:"16px"})),Field=({label,children,...props})=>React13.createElement(Wrapper,{...props},label?React13.createElement(Label,null,React13.createElement("span",null,label)):null,children);Field.defaultProps={label:void 0};import React15,{forwardRef as forwardRef3}from"react";import{styled as styled32}from"@storybook/theming";import{useLayoutEffect as useLayoutEffect2,forwardRef as forwardRef2,useRef as useRef4,createElement}from"react";import*as React14 from"react";import{useLayoutEffect,useEffect as useEffect2}from"react";var index=typeof document<"u"?useLayoutEffect:useEffect2,use_isomorphic_layout_effect_esm_default=index;var useLatest=function(value){var ref=React14.useRef(value);return use_isomorphic_layout_effect_esm_default(function(){ref.current=value}),ref};import{useRef as useRef3,useCallback as useCallback2}from"react";var updateRef=function(ref,value){if(typeof ref=="function"){ref(value);return}ref.current=value},useComposedRef=function(libRef,userRef){var prevUserRef=useRef3();return useCallback2(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 HIDDEN_TEXTAREA_STYLE={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},forceHiddenStyles=function(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],"important")})},hiddenTextarea=null,getHeight=function(node,sizingData){var height=node.scrollHeight;return sizingData.sizingStyle.boxSizing==="border-box"?height+sizingData.borderSize:height-sizingData.paddingSize};function calculateNodeHeight(sizingData,value,minRows,maxRows){minRows===void 0&&(minRows=1),maxRows===void 0&&(maxRows=1/0),hiddenTextarea||(hiddenTextarea=document.createElement("textarea"),hiddenTextarea.setAttribute("tabindex","-1"),hiddenTextarea.setAttribute("aria-hidden","true"),forceHiddenStyles(hiddenTextarea)),hiddenTextarea.parentNode===null&&document.body.appendChild(hiddenTextarea);var paddingSize=sizingData.paddingSize,borderSize=sizingData.borderSize,sizingStyle=sizingData.sizingStyle,boxSizing=sizingStyle.boxSizing;Object.keys(sizingStyle).forEach(function(_key){var key=_key;hiddenTextarea.style[key]=sizingStyle[key]}),forceHiddenStyles(hiddenTextarea),hiddenTextarea.value=value;var height=getHeight(hiddenTextarea,sizingData);hiddenTextarea.value="x";var rowHeight=hiddenTextarea.scrollHeight-paddingSize,minHeight=rowHeight*minRows;boxSizing==="border-box"&&(minHeight=minHeight+paddingSize+borderSize),height=Math.max(minHeight,height);var maxHeight=rowHeight*maxRows;return boxSizing==="border-box"&&(maxHeight=maxHeight+paddingSize+borderSize),height=Math.min(maxHeight,height),[height,rowHeight]}var noop=function(){},pick=function(props,obj){return props.reduce(function(acc,prop){return acc[prop]=obj[prop],acc},{})},SIZING_STYLE=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak"],isIE=typeof document<"u"?!!document.documentElement.currentStyle:!1,getSizingData=function(node){var style=window.getComputedStyle(node);if(style===null)return null;var sizingStyle=pick(SIZING_STYLE,style),boxSizing=sizingStyle.boxSizing;if(boxSizing==="")return null;isIE&&boxSizing==="border-box"&&(sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+"px");var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop),borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle,paddingSize,borderSize}},useWindowResizeListener=function(listener){var latestListener=useLatest(listener);useLayoutEffect2(function(){var handler=function(event){latestListener.current(event)};return window.addEventListener("resize",handler),function(){window.removeEventListener("resize",handler)}},[])},TextareaAutosize=function(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=="production"&&props.style){if("maxHeight"in props.style)throw new Error("Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.");if("minHeight"in props.style)throw new Error("Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.")}var isControlled=props.value!==void 0,libRef=useRef4(null),ref=use_composed_ref_esm_default(libRef,userRef),heightRef=useRef4(0),measurementsCacheRef=useRef4(),resizeTextarea=function(){var node=libRef.current,nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(nodeSizingData){measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||"x",minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];heightRef.current!==height&&(heightRef.current=height,node.style.setProperty("height",height+"px","important"),onHeightChange(height,{rowHeight}))}},handleChange=function(event){isControlled||resizeTextarea(),onChange(event)};return typeof document<"u"&&(useLayoutEffect2(resizeTextarea),useWindowResizeListener(resizeTextarea)),createElement("textarea",_extends({},props,{onChange:handleChange,ref}))},index2=forwardRef2(TextareaAutosize),react_textarea_autosize_esm_default=index2;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","&: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(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement("input",{...props,ref})}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:"Input"}),Select=Object.assign(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement("select",{...props,ref})}))(styles,sizes,validation,{height:32,userSelect:"none",paddingRight:20,appearance:"menulist"}),{displayName:"Select"}),Textarea=Object.assign(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement(react_textarea_autosize_esm_default,{...props,ref})}))(styles,sizes,alignment,validation,({height=400})=>({overflow:"visible",maxHeight:height})),{displayName:"Textarea"}),ButtonStyled=styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement(Button,{...props,ref})}))(sizes,validation,{userSelect:"none",overflow:"visible",zIndex:2,"&:hover":{transform:"none"}}),Button3=Object.assign(forwardRef3(function(props,ref){return React15.createElement(ButtonStyled,{...props,tertiary:!0,small:!0,inForm:!0,ref})}),{displayName:"Button"});var Form=Object.assign(styled33.form({boxSizing:"border-box",width:"100%"}),{Field,Input,Select,Textarea,Button:Button3});import React16,{lazy as lazy2,Suspense as Suspense2}from"react";var LazyWithTooltip=lazy2(()=>import("./WithTooltip-5WWCYCAA.mjs").then(mod=>({default:mod.WithTooltip}))),WithTooltip=props=>React16.createElement(Suspense2,{fallback:React16.createElement("div",null)},React16.createElement(LazyWithTooltip,{...props})),LazyWithTooltipPure=lazy2(()=>import("./WithTooltip-5WWCYCAA.mjs").then(mod=>({default:mod.WithTooltipPure}))),WithTooltipPure=props=>React16.createElement(Suspense2,{fallback:React16.createElement("div",null)},React16.createElement(LazyWithTooltipPure,{...props}));import React17 from"react";import{styled as styled34}from"@storybook/theming";var Title2=styled34.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc2=styled34.span(),Links=styled34.div(({theme})=>({marginTop:8,textAlign:"center","> *":{margin:"0 8px",fontWeight:theme.typography.weight.bold}})),Message2=styled34.div(({theme})=>({color:theme.color.defaultText,lineHeight:"18px"})),MessageWrapper=styled34.div({padding:15,width:280,boxSizing:"border-box"}),TooltipMessage=({title,desc,links})=>React17.createElement(MessageWrapper,null,React17.createElement(Message2,null,title&&React17.createElement(Title2,null,title),desc&&React17.createElement(Desc2,null,desc)),links&&React17.createElement(Links,null,links.map(({title:linkTitle,...other})=>React17.createElement(Link2,{...other,key:linkTitle},linkTitle))));TooltipMessage.defaultProps={title:null,desc:null,links:null};import React18 from"react";import{styled as styled35}from"@storybook/theming";var Note=styled35.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})=>React18.createElement(Note,{...props},note);import React20,{useCallback as useCallback3}from"react";import{styled as styled37}from"@storybook/theming";import React19 from"react";import{styled as styled36}from"@storybook/theming";import memoize from"memoizerific";var Title3=styled36(({active,loading,disabled,...rest})=>React19.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=styled36.span({display:"flex","& svg":{height:12,width:12,margin:"3px 0",verticalAlign:"top"},"& path":{fill:"inherit"}}),Center=styled36.span({flex:1,textAlign:"left",display:"flex",flexDirection:"column"},({isIndented})=>isIndented?{marginLeft:24}:{}),CenterText=styled36.span(({theme})=>({fontSize:"11px",lineHeight:"14px"}),({active,theme})=>active?{color:theme.color.secondary}:{},({theme,disabled})=>disabled?{color:theme.textMutedColor}:{}),Left=styled36.span(({active,theme})=>active?{"& svg":{opacity:1},"& svg path":{fill:theme.color.secondary}}:{},()=>({display:"flex",maxWidth:14})),Item=styled36.a(({theme})=>({fontSize:theme.typography.size.s1,transition:"all 150ms ease-out",color:curriedTransparentize$1(.5,theme.color.defaultText),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 React19.createElement(Item,{...commonProps,...rest,...itemProps},icon?React19.createElement(Left,{...commonProps},isStorybookIcon?React19.createElement(Icons,{icon}):icon):left&&React19.createElement(Left,{...commonProps},left),title||center?React19.createElement(Center,{isIndented:!left&&!icon&&isIndented},title&&React19.createElement(Title3,{...commonProps,loading},title),center&&React19.createElement(CenterText,{...commonProps},center)):null,right&&React19.createElement(Right,{...commonProps},right))};ListItem.defaultProps={loading:!1,left:null,title:React19.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=styled37.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=useCallback3(event=>{onClickFromProps(event,rest)},[onClickFromProps]),hasOnClick=!!onClickFromProps;return React20.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 React20.createElement(List,null,links.map(({isGatsby,...p})=>React20.createElement(Item2,{key:p.id,LinkWrapper:isGatsby?LinkWrapper:null,isIndented:hasOneLeftElement,...p})))};TooltipLinkList.defaultProps={LinkWrapper:ListItem_default.defaultProps.LinkWrapper};import React25,{useMemo,Component as Component2,Fragment,memo as memo2}from"react";import{styled as styled42}from"@storybook/theming";import{sanitize as sanitize2}from"@storybook/csf";import React21 from"react";import{styled as styled38,isPropValid}from"@storybook/theming";var ButtonOrLink=React21.forwardRef(({children,...restProps},ref)=>restProps.href!=null?React21.createElement("a",{ref,...restProps},children):React21.createElement("button",{ref,type:"button",...restProps},children));ButtonOrLink.displayName="ButtonOrLink";var TabButton=styled38(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=styled38(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=styled38.div(({theme})=>({width:14,height:14,backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),IconButtonSkeletonWrapper=styled38.div(()=>({marginTop:6,padding:7,height:28})),IconButtonSkeleton=()=>React21.createElement(IconButtonSkeletonWrapper,null,React21.createElement(IconPlaceholder,null));import React22,{Children as Children3}from"react";import{styled as styled39}from"@storybook/theming";var Side=styled39.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?React22.createElement(ScrollArea,{vertical:!1,className},children):React22.createElement("div",{className},children),Bar=styled39(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=styled39.div(({bgColor})=>({display:"flex",justifyContent:"space-between",position:"relative",flexWrap:"nowrap",flexShrink:0,height:40,backgroundColor:bgColor||""})),FlexBar=({children,backgroundColor,...rest})=>{let[left,right]=Children3.toArray(children);return React22.createElement(Bar,{...rest},React22.createElement(BarInner,{bgColor:backgroundColor},React22.createElement(Side,{scrollable:rest.scrollable,left:!0},left),right?React22.createElement(Side,{right:!0},right):null))};FlexBar.displayName="FlexBar";import{styled as styled40}from"@storybook/theming";import React23,{Children as Children4}from"react";var VisuallyHidden=styled40.div(({active})=>active?{display:"block"}:{display:"none"}),childrenToList=(children,selected)=>Children4.toArray(children).map(({props:{title,id,color,children:childrenOfChild}},index3)=>{let content=Array.isArray(childrenOfChild)?childrenOfChild[0]:childrenOfChild;return{active:selected?id===selected:index3===0,title,id,color,render:typeof content=="function"?content:({active,key})=>React23.createElement(VisuallyHidden,{key,active,role:"tabpanel"},content)}});import React24,{useCallback as useCallback4,useLayoutEffect as useLayoutEffect3,useRef as useRef5,useState as useState2}from"react";import{sanitize}from"@storybook/csf";import{styled as styled41}from"@storybook/theming";import useResizeObserver from"use-resize-observer";var CollapseIcon=styled41.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=styled41(TabButton)(({active,theme,preActive})=>`
+`,Icons=({icon,useSymbol,...props})=>React6.createElement(Svg,{viewBox:"0 0 14 14",width:"14px",height:"14px",...props},useSymbol?React6.createElement("use",{xlinkHref:`#icon--${icon}`}):icons[icon]),Symbols=memo(function({icons:keys=Object.keys(icons)}){return React6.createElement(Svg,{viewBox:"0 0 14 14",style:{position:"absolute",width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React6.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=styled25.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=styled25.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})=>React7.createElement(A2,{...rest,onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className},React7.createElement(LinkInner,{withArrow,containsIcon},children,withArrow&&React7.createElement(Icons,{icon:"arrowright"})));Link2.defaultProps={cancel:!0,className:void 0,style:void 0,onClick:void 0,withArrow:!1,containsIcon:!1};import{styled as styled26}from"@storybook/theming";var DocumentWrapper=styled26.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}}));import React8,{Suspense,lazy}from"react";var LazySyntaxHighlighter=lazy(()=>import("./syntaxhighlighter-6JBF4TYN.mjs")),LazySyntaxHighlighterWithFormatter=lazy(async()=>{let[{SyntaxHighlighter:SyntaxHighlighter3},{formatter}]=await Promise.all([import("./syntaxhighlighter-6JBF4TYN.mjs"),import("./formatter-MGIGMU7Y.mjs")]);return{default:props=>React8.createElement(SyntaxHighlighter3,{...props,formatter})}}),SyntaxHighlighter2=props=>React8.createElement(Suspense,{fallback:React8.createElement("div",null)},props.format!==!1?React8.createElement(LazySyntaxHighlighterWithFormatter,{...props}):React8.createElement(LazySyntaxHighlighter,{...props}));import React9 from"react";import{styled as styled27}from"@storybook/theming";var toNumber=input=>typeof input=="number"?input:Number(input),Container=styled27.div(({theme,col,row=1})=>col?{display:"inline-block",verticalAlign:"inherit","& > *":{marginLeft:col*theme.layoutMargin,verticalAlign:"inherit"},["& > *:first-child"]:{marginLeft:0}}:{"& > *":{marginTop:row*theme.layoutMargin},["& > *:first-child"]:{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 React9.createElement(Container,{col,row,outer:outerAmount,...rest},children)};import React10,{Children as Children2}from"react";import{styled as styled28}from"@storybook/theming";var Title=styled28.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc=styled28.div(),Message=styled28.div(({theme})=>({padding:30,textAlign:"center",color:theme.color.defaultText,fontSize:theme.typography.size.s2-1})),Placeholder=({children,...props})=>{let[title,desc]=Children2.toArray(children);return React10.createElement(Message,{...props},React10.createElement(Title,null,title),desc&&React10.createElement(Desc,null,desc))};import React11,{useEffect,useRef,useState,useCallback}from"react";import{styled as styled29}from"@storybook/theming";import{global}from"@storybook/global";function browserSupportsCssZoom(){try{return global.document.implementation.createHTMLDocument("").body.style.zoom!==void 0}catch{return!1}}var hasBrowserSupportForCssZoom=browserSupportsCssZoom(),ZoomElementWrapper=styled29.div(({scale=1,height})=>hasBrowserSupportForCssZoom?{"> *":{zoom:1/scale}}:{height:height?height+50:"auto",transformOrigin:"top left",transform:`scale(${1/scale})`}),useMutationObserver=({element,options={},callback})=>{let observer=useRef();useEffect(()=>(observer.current||(observer.current=new MutationObserver((mutationRecord,mutationObserver)=>{callback(mutationRecord,mutationObserver)})),element?.current&&observer.current.observe(element.current,options),()=>observer.current.disconnect()),[element,observer,options])},mutationObserverOptions={subtree:!0,childList:!0};function ZoomElement({scale,children}){let componentWrapperRef=useRef(null),[height,setHeight]=useState(0),handleMutations=useCallback(()=>{setHeight(componentWrapperRef.current.getBoundingClientRect().height)},[]);return useEffect(()=>{componentWrapperRef.current&&setHeight(componentWrapperRef.current.getBoundingClientRect().height)},[scale,componentWrapperRef.current]),useMutationObserver({element:componentWrapperRef,options:mutationObserverOptions,callback:handleMutations}),React11.createElement(ZoomElementWrapper,{scale,height},React11.createElement("div",{ref:hasBrowserSupportForCssZoom?null:componentWrapperRef,className:"innerZoomElementWrapper"},children))}import{Component}from"react";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{browserSupportsCssZoom()?Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale,minHeight:`calc(100vh / ${1/scale})`}):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};import React12,{forwardRef}from"react";import{styled as styled30}from"@storybook/theming";var ButtonWrapper=styled30.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",transition:"all 150ms ease-out",transform:"translate3d(0,0,0)",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 color;return gray?color=theme.color.mediumlight:secondary?color=theme.color.secondary:primary&&(color=theme.color.primary),color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,"&:hover":{background:curriedDarken$1(.05,color)},"&:active":{boxShadow:"rgba(0, 0, 0, 0.1) 0 0 0 3em inset"},"&:focus":{boxShadow:`${rgba(color,1)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${rgba(color,.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 color=theme.color.primary;return outline&&primary?{boxShadow:`${color} 0 0 0 1px inset`,color,"svg path":{fill:color},"&:hover":{boxShadow:`${color} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.2)} 0 8px 18px 0px`}}:{}},({theme,outline,primary,secondary})=>{let color;return secondary?color=theme.color.secondary:primary&&(color=theme.color.primary),outline&&color?{boxShadow:`${color} 0 0 0 1px inset`,color,"svg path":{fill:color},"&:hover":{boxShadow:`${color} 0 0 0 1px inset`,background:"transparent"},"&:active":{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},"&:focus":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.4)} 0 1px 9px 2px`,outline:"none"},"&:focus:hover":{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,.2)} 0 8px 18px 0px`}}:{}}),ButtonLink=ButtonWrapper.withComponent("a"),Button=Object.assign(forwardRef(function({isLink,children,...props},ref){return isLink?React12.createElement(ButtonLink,{...props,ref},children):React12.createElement(ButtonWrapper,{...props,ref},children)}),{defaultProps:{isLink:!1}});import{styled as styled33}from"@storybook/theming";import React13 from"react";import{styled as styled31}from"@storybook/theming";var Wrapper=styled31.label(({theme})=>({display:"flex",borderBottom:`1px solid ${theme.appBorderColor}`,margin:"0 15px",padding:"8px 0","&:last-child":{marginBottom:"3rem"}})),Label=styled31.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:"flex",justifyContent:"flex-start",alignItems:"center",lineHeight:"16px"})),Field=({label,children,...props})=>React13.createElement(Wrapper,{...props},label?React13.createElement(Label,null,React13.createElement("span",null,label)):null,children);Field.defaultProps={label:void 0};import React15,{forwardRef as forwardRef3}from"react";import{styled as styled32}from"@storybook/theming";import{useLayoutEffect as useLayoutEffect2,forwardRef as forwardRef2,useRef as useRef4,createElement}from"react";import*as React14 from"react";import{useLayoutEffect,useEffect as useEffect2}from"react";var index=typeof document<"u"?useLayoutEffect:useEffect2,use_isomorphic_layout_effect_esm_default=index;var useLatest=function(value){var ref=React14.useRef(value);return use_isomorphic_layout_effect_esm_default(function(){ref.current=value}),ref};import{useRef as useRef3,useCallback as useCallback2}from"react";var updateRef=function(ref,value){if(typeof ref=="function"){ref(value);return}ref.current=value},useComposedRef=function(libRef,userRef){var prevUserRef=useRef3();return useCallback2(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 HIDDEN_TEXTAREA_STYLE={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},forceHiddenStyles=function(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],"important")})},hiddenTextarea=null,getHeight=function(node,sizingData){var height=node.scrollHeight;return sizingData.sizingStyle.boxSizing==="border-box"?height+sizingData.borderSize:height-sizingData.paddingSize};function calculateNodeHeight(sizingData,value,minRows,maxRows){minRows===void 0&&(minRows=1),maxRows===void 0&&(maxRows=1/0),hiddenTextarea||(hiddenTextarea=document.createElement("textarea"),hiddenTextarea.setAttribute("tabindex","-1"),hiddenTextarea.setAttribute("aria-hidden","true"),forceHiddenStyles(hiddenTextarea)),hiddenTextarea.parentNode===null&&document.body.appendChild(hiddenTextarea);var paddingSize=sizingData.paddingSize,borderSize=sizingData.borderSize,sizingStyle=sizingData.sizingStyle,boxSizing=sizingStyle.boxSizing;Object.keys(sizingStyle).forEach(function(_key){var key=_key;hiddenTextarea.style[key]=sizingStyle[key]}),forceHiddenStyles(hiddenTextarea),hiddenTextarea.value=value;var height=getHeight(hiddenTextarea,sizingData);hiddenTextarea.value="x";var rowHeight=hiddenTextarea.scrollHeight-paddingSize,minHeight=rowHeight*minRows;boxSizing==="border-box"&&(minHeight=minHeight+paddingSize+borderSize),height=Math.max(minHeight,height);var maxHeight=rowHeight*maxRows;return boxSizing==="border-box"&&(maxHeight=maxHeight+paddingSize+borderSize),height=Math.min(maxHeight,height),[height,rowHeight]}var noop=function(){},pick=function(props,obj){return props.reduce(function(acc,prop){return acc[prop]=obj[prop],acc},{})},SIZING_STYLE=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak"],isIE=typeof document<"u"?!!document.documentElement.currentStyle:!1,getSizingData=function(node){var style=window.getComputedStyle(node);if(style===null)return null;var sizingStyle=pick(SIZING_STYLE,style),boxSizing=sizingStyle.boxSizing;if(boxSizing==="")return null;isIE&&boxSizing==="border-box"&&(sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+"px");var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop),borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle,paddingSize,borderSize}},useWindowResizeListener=function(listener){var latestListener=useLatest(listener);useLayoutEffect2(function(){var handler=function(event){latestListener.current(event)};return window.addEventListener("resize",handler),function(){window.removeEventListener("resize",handler)}},[])},TextareaAutosize=function(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=="production"&&props.style){if("maxHeight"in props.style)throw new Error("Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.");if("minHeight"in props.style)throw new Error("Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.")}var isControlled=props.value!==void 0,libRef=useRef4(null),ref=use_composed_ref_esm_default(libRef,userRef),heightRef=useRef4(0),measurementsCacheRef=useRef4(),resizeTextarea=function(){var node=libRef.current,nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(nodeSizingData){measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||"x",minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];heightRef.current!==height&&(heightRef.current=height,node.style.setProperty("height",height+"px","important"),onHeightChange(height,{rowHeight}))}},handleChange=function(event){isControlled||resizeTextarea(),onChange(event)};return typeof document<"u"&&(useLayoutEffect2(resizeTextarea),useWindowResizeListener(resizeTextarea)),createElement("textarea",_extends({},props,{onChange:handleChange,ref}))},index2=forwardRef2(TextareaAutosize),react_textarea_autosize_esm_default=index2;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","&: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(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement("input",{...props,ref})}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:"Input"}),Select=Object.assign(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement("select",{...props,ref})}))(styles,sizes,validation,{height:32,userSelect:"none",paddingRight:20,appearance:"menulist"}),{displayName:"Select"}),Textarea=Object.assign(styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement(react_textarea_autosize_esm_default,{...props,ref})}))(styles,sizes,alignment,validation,({height=400})=>({overflow:"visible",maxHeight:height})),{displayName:"Textarea"}),ButtonStyled=styled32(forwardRef3(function({size,valid,align,...props},ref){return React15.createElement(Button,{...props,ref})}))(sizes,validation,{userSelect:"none",overflow:"visible",zIndex:2,"&:hover":{transform:"none"}}),Button3=Object.assign(forwardRef3(function(props,ref){return React15.createElement(ButtonStyled,{...props,tertiary:!0,small:!0,inForm:!0,ref})}),{displayName:"Button"});var Form=Object.assign(styled33.form({boxSizing:"border-box",width:"100%"}),{Field,Input,Select,Textarea,Button:Button3});import React16,{lazy as lazy2,Suspense as Suspense2}from"react";var LazyWithTooltip=lazy2(()=>import("./WithTooltip-5WWCYCAA.mjs").then(mod=>({default:mod.WithTooltip}))),WithTooltip=props=>React16.createElement(Suspense2,{fallback:React16.createElement("div",null)},React16.createElement(LazyWithTooltip,{...props})),LazyWithTooltipPure=lazy2(()=>import("./WithTooltip-5WWCYCAA.mjs").then(mod=>({default:mod.WithTooltipPure}))),WithTooltipPure=props=>React16.createElement(Suspense2,{fallback:React16.createElement("div",null)},React16.createElement(LazyWithTooltipPure,{...props}));import React17 from"react";import{styled as styled34}from"@storybook/theming";var Title2=styled34.div(({theme})=>({fontWeight:theme.typography.weight.bold})),Desc2=styled34.span(),Links=styled34.div(({theme})=>({marginTop:8,textAlign:"center","> *":{margin:"0 8px",fontWeight:theme.typography.weight.bold}})),Message2=styled34.div(({theme})=>({color:theme.color.defaultText,lineHeight:"18px"})),MessageWrapper=styled34.div({padding:15,width:280,boxSizing:"border-box"}),TooltipMessage=({title,desc,links})=>React17.createElement(MessageWrapper,null,React17.createElement(Message2,null,title&&React17.createElement(Title2,null,title),desc&&React17.createElement(Desc2,null,desc)),links&&React17.createElement(Links,null,links.map(({title:linkTitle,...other})=>React17.createElement(Link2,{...other,key:linkTitle},linkTitle))));TooltipMessage.defaultProps={title:null,desc:null,links:null};import React18 from"react";import{styled as styled35}from"@storybook/theming";var Note=styled35.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})=>React18.createElement(Note,{...props},note);import React20,{useCallback as useCallback3}from"react";import{styled as styled37}from"@storybook/theming";import React19 from"react";import{styled as styled36}from"@storybook/theming";import memoize from"memoizerific";var Title3=styled36(({active,loading,disabled,...rest})=>React19.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=styled36.span({display:"flex","& svg":{height:12,width:12,margin:"3px 0",verticalAlign:"top"},"& path":{fill:"inherit"}}),Center=styled36.span({flex:1,textAlign:"left",display:"flex",flexDirection:"column"},({isIndented})=>isIndented?{marginLeft:24}:{}),CenterText=styled36.span(({theme})=>({fontSize:"11px",lineHeight:"14px"}),({active,theme})=>active?{color:theme.color.secondary}:{},({theme,disabled})=>disabled?{color:theme.textMutedColor}:{}),Left=styled36.span(({active,theme})=>active?{"& svg":{opacity:1},"& svg path":{fill:theme.color.secondary}}:{},()=>({display:"flex",maxWidth:14})),Item=styled36.a(({theme})=>({fontSize:theme.typography.size.s1,transition:"all 150ms ease-out",color:curriedTransparentize$1(.5,theme.color.defaultText),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 React19.createElement(Item,{...commonProps,...rest,...itemProps},icon?React19.createElement(Left,{...commonProps},isStorybookIcon?React19.createElement(Icons,{icon}):icon):left&&React19.createElement(Left,{...commonProps},left),title||center?React19.createElement(Center,{isIndented:!left&&!icon&&isIndented},title&&React19.createElement(Title3,{...commonProps,loading},title),center&&React19.createElement(CenterText,{...commonProps},center)):null,right&&React19.createElement(Right,{...commonProps},right))};ListItem.defaultProps={loading:!1,left:null,title:React19.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=styled37.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=useCallback3(event=>{onClickFromProps(event,rest)},[onClickFromProps]),hasOnClick=!!onClickFromProps;return React20.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 React20.createElement(List,null,links.map(({isGatsby,...p})=>React20.createElement(Item2,{key:p.id,LinkWrapper:isGatsby?LinkWrapper:null,isIndented:hasOneLeftElement,...p})))};TooltipLinkList.defaultProps={LinkWrapper:ListItem_default.defaultProps.LinkWrapper};import React25,{useMemo,Component as Component2,Fragment,memo as memo2}from"react";import{styled as styled42}from"@storybook/theming";import{sanitize as sanitize2}from"@storybook/csf";import React21 from"react";import{styled as styled38,isPropValid}from"@storybook/theming";var ButtonOrLink=React21.forwardRef(({children,...restProps},ref)=>restProps.href!=null?React21.createElement("a",{ref,...restProps},children):React21.createElement("button",{ref,type:"button",...restProps},children));ButtonOrLink.displayName="ButtonOrLink";var TabButton=styled38(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=styled38(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=styled38.div(({theme})=>({width:14,height:14,backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),IconButtonSkeletonWrapper=styled38.div(()=>({marginTop:6,padding:7,height:28})),IconButtonSkeleton=()=>React21.createElement(IconButtonSkeletonWrapper,null,React21.createElement(IconPlaceholder,null));import React22,{Children as Children3}from"react";import{styled as styled39}from"@storybook/theming";var Side=styled39.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?React22.createElement(ScrollArea,{vertical:!1,className},children):React22.createElement("div",{className},children),Bar=styled39(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=styled39.div(({bgColor})=>({display:"flex",justifyContent:"space-between",position:"relative",flexWrap:"nowrap",flexShrink:0,height:40,backgroundColor:bgColor||""})),FlexBar=({children,backgroundColor,...rest})=>{let[left,right]=Children3.toArray(children);return React22.createElement(Bar,{...rest},React22.createElement(BarInner,{bgColor:backgroundColor},React22.createElement(Side,{scrollable:rest.scrollable,left:!0},left),right?React22.createElement(Side,{right:!0},right):null))};FlexBar.displayName="FlexBar";import{styled as styled40}from"@storybook/theming";import React23,{Children as Children4}from"react";var VisuallyHidden=styled40.div(({active})=>active?{display:"block"}:{display:"none"}),childrenToList=(children,selected)=>Children4.toArray(children).map(({props:{title,id,color,children:childrenOfChild}},index3)=>{let content=Array.isArray(childrenOfChild)?childrenOfChild[0]:childrenOfChild;return{active:selected?id===selected:index3===0,title,id,color,render:typeof content=="function"?content:({active,key})=>React23.createElement(VisuallyHidden,{key,active,role:"tabpanel"},content)}});import React24,{useCallback as useCallback4,useLayoutEffect as useLayoutEffect3,useRef as useRef5,useState as useState2}from"react";import{sanitize}from"@storybook/csf";import{styled as styled41}from"@storybook/theming";import useResizeObserver from"use-resize-observer";var CollapseIcon=styled41.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=styled41(TabButton)(({active,theme,preActive})=>`
     color: ${preActive||active?theme.color.secondary:theme.color.mediumdark};
     &:hover {
       color: ${theme.color.secondary};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.0.0-beta.46",
+  "version": "7.0.0-beta.48",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -48,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-beta.46",
+    "@storybook/client-logger": "7.0.0-beta.48",
     "@storybook/csf": "next",
     "@storybook/global": "^5.0.0",
-    "@storybook/theming": "7.0.0-beta.46",
-    "@storybook/types": "7.0.0-beta.46",
+    "@storybook/theming": "7.0.0-beta.48",
+    "@storybook/types": "7.0.0-beta.48",
     "memoizerific": "^1.11.3",
     "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
@@ -85,5 +85,5 @@
     ],
     "platform": "neutral"
   },
-  "gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
+  "gitHead": "8c9765f9cd204fc63b928526941d8d8bffaf7c38"
 }