@storybook/components 6.5.0-beta.5 → 6.5.0-beta.8

package/dist/cjs/{Color-d6b81866.js → Color-ab37fa61.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-bbe9389b.js');
+var index = require('./index-cd84b86a.js');
 
 var React = require('react');
 

package/dist/cjs/{OverlayScrollbars-620184af.js → OverlayScrollbars-6e69c99f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-bbe9389b.js');
+var index = require('./index-cd84b86a.js');
 
 var React = require('react');
 

package/dist/cjs/{WithTooltip-5fe41c41.js → WithTooltip-460d00ad.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-bbe9389b.js');
+var index = require('./index-cd84b86a.js');
 
 var React = require('react');
 

package/dist/cjs/{formatter-1d8fe7b2.js → formatter-9109d2ae.js}

@@ -1,4 +1,4 @@
-'use strict';require("core-js/modules/es.typed-array.set.js");var index=require('./index-bbe9389b.js');require('react');require('@storybook/theming');require('@storybook/csf');require('util');require('@storybook/client-logger');var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(index.commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof index.commonjsGlobal?index.commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
+'use strict';require("core-js/modules/es.typed-array.set.js");var index=require('./index-cd84b86a.js');require('react');require('@storybook/theming');require('@storybook/csf');require('util');require('@storybook/client-logger');var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(index.commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof index.commonjsGlobal?index.commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
       	   * @license
       	   * Copyright Google Inc. All Rights Reserved.
       	   *

package/dist/cjs/{index-bbe9389b.js → index-cd84b86a.js}

@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
  *   background: "rgba(255,0,0,0.3)";
  * }
  */function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends$1({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
-var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default["default"].createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=theming.styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=theming.styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=theming.styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default["default"].createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=React.lazy(()=>Promise.resolve().then(function(){return require('./syntaxhighlighter-f8dfc9f1.js');}));const LazySyntaxHighlighterWithFormatter=React.lazy(()=>__awaiter(void 0,void 0,void 0,function*(){const[{SyntaxHighlighter},{formatter}]=yield Promise.all([Promise.resolve().then(function(){return require('./syntaxhighlighter-f8dfc9f1.js');}),Promise.resolve().then(function(){return require('./formatter-1d8fe7b2.js');})]);return{default:props=>React__default["default"].createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}))};}));const SyntaxHighlighter=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},props.format!==false?React__default["default"].createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default["default"].createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=theming.styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
+var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default["default"].createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=theming.styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=theming.styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=theming.styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default["default"].createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=React.lazy(()=>Promise.resolve().then(function(){return require('./syntaxhighlighter-b73c8adf.js');}));const LazySyntaxHighlighterWithFormatter=React.lazy(()=>__awaiter(void 0,void 0,void 0,function*(){const[{SyntaxHighlighter},{formatter}]=yield Promise.all([Promise.resolve().then(function(){return require('./syntaxhighlighter-b73c8adf.js');}),Promise.resolve().then(function(){return require('./formatter-9109d2ae.js');})]);return{default:props=>React__default["default"].createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}))};}));const SyntaxHighlighter=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},props.format!==false?React__default["default"].createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default["default"].createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=theming.styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
 fontSize:`${theme.typography.size.s2-1}px`,lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}}));exports.SourceError=void 0;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(exports.SourceError||(exports.SourceError={}));const SourceSkeletonWrapper=theming.styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=theming.styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%',[`&:first-child${theming.ignoreSsrWarning}`]:{margin:0}}));const SourceSkeleton=()=>React__default["default"].createElement(SourceSkeletonWrapper,null,React__default["default"].createElement(SourceSkeletonPlaceholder,null),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
  * Syntax-highlighted source code for a component (or anything!)
  */const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default["default"].createElement(SourceSkeleton,null);}if(error){return React__default["default"].createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default["default"].createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?theming.themes.dark:theming.themes.light;return React__default["default"].createElement(theming.ThemeProvider,{theme:theming.convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=theming.styled.code(({theme})=>({// from reset
@@ -310,7 +310,7 @@ const icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.7
 shapeRendering:'inherit',transform:'translate3d(0,0,0)'},({inline})=>inline?{display:'inline-block'}:{display:'block'});Svg.displayName='Svg';const Path=theming.styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
 const Icons=React.memo(_a=>{var{icon,symbol}=_a,props=__rest(_a,["icon","symbol"]);return React__default["default"].createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default["default"].createElement("use",{xlinkHref:`#icon--${symbol}`}):React__default["default"].createElement(Path,{d:icons[icon]}));});const Symbols=React.memo(({icons:keys=Object.keys(icons)})=>React__default["default"].createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React__default["default"].createElement("symbol",{id:`icon--${key}`,key:key},React__default["default"].createElement(Path,{d:icons[key]})))));// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 const LEFT_BUTTON=0;const isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;const cancelled=(e,cb)=>{if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};const LinkInner=theming.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}}:{});const A$1=theming.styled.a(({theme})=>({display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.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;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return 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'}:{});const Link=_a=>{var{cancel,children,onClick,withArrow,containsIcon,className}=_a,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default["default"].createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className:className}),React__default["default"].createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default["default"].createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};const DocumentWrapper=theming.styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:'1.6',h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black},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'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'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}}));const Container$1=theming.styled.div(({theme})=>({position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1}));const ActionButton=theming.styled.button(({theme})=>({margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:`1px solid ${theme.appBorderColor}`,borderLeft:`1px solid ${theme.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,'&:not(:last-child)':{borderRight:`1px solid ${theme.appBorderColor}`},'& + *':{borderLeft:`1px solid ${theme.appBorderColor}`,borderRadius:0},'&:focus':{boxShadow:`${theme.color.secondary} 0 -3px 0 0 inset`,outline:'0 none'}}),({disabled})=>disabled&&{cursor:'not-allowed',opacity:0.5});ActionButton.displayName='ActionButton';const ActionBar=_a=>{var{actionItems}=_a,props=__rest(_a,["actionItems"]);return React__default["default"].createElement(Container$1,Object.assign({},props),actionItems.map(({title,className,onClick,disabled},index)=>// eslint-disable-next-line react/no-array-index-key
-React__default["default"].createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=theming.styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){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{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default["default"].createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=theming.styled.div();const Message$1=theming.styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=React.Children.toArray(children);return React__default["default"].createElement(Message$1,Object.assign({},props),React__default["default"].createElement(Title$3,null,title),desc&&React__default["default"].createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=React.lazy(()=>Promise.resolve().then(function(){return require('./GlobalScrollAreaStyles-ff4bd929.js');}));const OverlayScrollbars=React.lazy(()=>Promise.resolve().then(function(){return require('./OverlayScrollbars-620184af.js');}));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",Object.assign({},props))},React__default["default"].createElement(GlobalScrollAreaStyles,null),React__default["default"].createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=theming.styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=theming.styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=React.useRef(null);const[height,setHeight]=React.useState(0);React.useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default["default"].createElement(ZoomElementWrapper,{scale:scale,height:height},React__default["default"].createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends React.Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
+React__default["default"].createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=theming.styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){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{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default["default"].createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=theming.styled.div();const Message$1=theming.styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=React.Children.toArray(children);return React__default["default"].createElement(Message$1,Object.assign({},props),React__default["default"].createElement(Title$3,null,title),desc&&React__default["default"].createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=React.lazy(()=>Promise.resolve().then(function(){return require('./GlobalScrollAreaStyles-ff4bd929.js');}));const OverlayScrollbars=React.lazy(()=>Promise.resolve().then(function(){return require('./OverlayScrollbars-6e69c99f.js');}));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",Object.assign({},props))},React__default["default"].createElement(GlobalScrollAreaStyles,null),React__default["default"].createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=theming.styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=theming.styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=React.useRef(null);const[height,setHeight]=React.useState(0);React.useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default["default"].createElement(ZoomElementWrapper,{scale:scale,height:height},React__default["default"].createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends React.Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
 // never update this component, it will cause the iframe to refresh
 // the only exception is when the url changes, which happens when the version changes
 return nextProps.children.props.src!==this.props.children.props.src;}setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}render(){const{children}=this.props;return children;}}const Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};const ButtonWrapper=theming.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',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?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}}),({disabled})=>disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{},({containsIcon,small})=>containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{},({theme,primary,secondary,gray})=>{let color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.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,0.2)} 0 8px 18px 0px`}}:{};},({theme,tertiary,inForm,small})=>tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.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.input.background},'&:focus':{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:'none'}}):{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(0.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:'none'},'&:active':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{const 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,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,outline,primary,secondary})=>{let color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return 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,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};});const ButtonLink=ButtonWrapper.withComponent('a');const Button$2=Object.assign(React.forwardRef((_a,ref)=>{var{isLink,children}=_a,props=__rest(_a,["isLink","children"]);if(isLink){return React__default["default"].createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default["default"].createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});const Wrapper$7=theming.styled.label(({theme})=>({display:'flex',borderBottom:`1px solid ${theme.appBorderColor}`,margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}}));const Label$4=theming.styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'}));const Field=_a=>{var{label,children}=_a,props=__rest(_a,["label","children"]);return React__default["default"].createElement(Wrapper$7,Object.assign({},props),label?React__default["default"].createElement(Label$4,null,React__default["default"].createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=typeof document!=='undefined'?React.useLayoutEffect:React.useEffect;var useLatest=function useLatest(value){var ref=React.useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=React.useRef();return React.useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};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'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
@@ -326,7 +326,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
 if(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);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);React.useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_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!==undefined;var libRef=React.useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=React.useRef(0);var measurementsCacheRef=React.useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};if(typeof document!=='undefined'){React.useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/React.createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */React.forwardRef(TextareaAutosize);var TextareaAutoResize=index;const styleResets$1={// resets
 appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const styles=({theme})=>Object.assign(Object.assign({},styleResets$1),{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:0.5},'&:-webkit-autofill':{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},'::placeholder':{color:theme.color.mediumdark}});const sizes=({size})=>{switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};const alignment=({align})=>{switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};const 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 undefined:case null:default:{return{};}}};const Input$1=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});const Select=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});const Textarea=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,({height=400})=>({overflow:'visible',maxHeight:height})),{displayName:'Textarea'});const ButtonStyled=theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
 userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
-'&:hover':{transform:'none'}});const Button$1=Object.assign(React.forwardRef((props,ref)=>React__default["default"].createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(theming.styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-5fe41c41.js');}).then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-5fe41c41.js');}).then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=theming.styled.span();const Links=theming.styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=theming.styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=theming.styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default["default"].createElement(MessageWrapper,null,React__default["default"].createElement(Message,null,title&&React__default["default"].createElement(Title$2,null,title),desc&&React__default["default"].createElement(Desc,null,desc)),links&&React__default["default"].createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default["default"].createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=theming.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(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default["default"].createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
+'&:hover':{transform:'none'}});const Button$1=Object.assign(React.forwardRef((props,ref)=>React__default["default"].createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(theming.styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-460d00ad.js');}).then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-460d00ad.js');}).then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=theming.styled.span();const Links=theming.styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=theming.styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=theming.styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default["default"].createElement(MessageWrapper,null,React__default["default"].createElement(Message,null,title&&React__default["default"].createElement(Title$2,null,title),desc&&React__default["default"].createElement(Desc,null,desc)),links&&React__default["default"].createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default["default"].createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=theming.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(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default["default"].createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
 Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
 Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};var similar=Similar;var mapOrSimilar=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=similar;return new Similar();}else{return new Map();}};var MapOrSimilar=mapOrSimilar;var memoizerific=function(limit){var cache=new MapOrSimilar(process.env.FORCE_SIMILAR_INSTEAD_OF_MAP==='true'),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
 for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
@@ -469,7 +469,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
  * items. The preview also shows the source for the component
  * as a drop-down.
  */const Preview=_a=>{var{isLoading,isColumn,columns,children,withSource,withToolbar=false,isExpanded=false,additionalActions,className}=_a,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);const[expanded,setExpanded]=React.useState(isExpanded);const{source,actionItem}=getSource(withSource,expanded,setExpanded);const[scale,setScale]=React.useState(1);const previewClasses=[className].concat(['sbdocs','sbdocs-preview']);const defaultActionItems=withSource?[actionItem]:[];const[additionalActionItems,setAdditionalActionItems]=React.useState(additionalActions?[...additionalActions]:[]);const actionItems=[...defaultActionItems,...additionalActionItems];// @ts-ignore
-const layout=getLayout(React.Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=React.useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield Promise.resolve().then(function(){return require('./syntaxhighlighter-f8dfc9f1.js');});createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default["default"].createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default["default"].createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default["default"].createElement(ZoomContext.Provider,{value:{scale}},React__default["default"].createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default["default"].createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default["default"].createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
+const layout=getLayout(React.Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=React.useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield Promise.resolve().then(function(){return require('./syntaxhighlighter-b73c8adf.js');});createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default["default"].createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default["default"].createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default["default"].createElement(ZoomContext.Provider,{value:{scale}},React__default["default"].createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default["default"].createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default["default"].createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
 children.map((child,i)=>React__default["default"].createElement("div",{key:i},child)):React__default["default"].createElement("div",null,children))),React__default["default"].createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};const StyledPreview=theming.styled(Preview)(()=>({'.docs-story':{paddingTop:32,paddingBottom:40}}));const PreviewSkeleton=()=>React__default["default"].createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default["default"].createElement(StorySkeleton,null));/**
  * A specialized version of `_.map` for arrays without support for iteratee
  * shorthands.
@@ -2103,7 +2103,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
             ${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%, 
             ${curriedLighten$1(0.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,0.2)}`,borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}}));const RangeLabel=theming.styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});const RangeWrapper=theming.styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){const match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
 (match[1]?match[1].length:0)-(// Adjust for scientific notation.
-match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=React.useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default["default"].createElement(RangeWrapper,null,React__default["default"].createElement(RangeLabel,null,min),React__default["default"].createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default["default"].createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=theming.styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=React.useState(false);const onForceVisible=React.useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default["default"].createElement(Wrapper$1,null,React__default["default"].createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=theming.styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default["default"].createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=React.lazy(()=>Promise.resolve().then(function(){return require('./Color-d6b81866.js');}));const ColorControl=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default["default"].createElement(React__default["default"].Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=React.useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
+match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=React.useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default["default"].createElement(RangeWrapper,null,React__default["default"].createElement(RangeLabel,null,min),React__default["default"].createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default["default"].createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=theming.styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=React.useState(false);const onForceVisible=React.useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default["default"].createElement(Wrapper$1,null,React__default["default"].createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=theming.styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default["default"].createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=React.lazy(()=>Promise.resolve().then(function(){return require('./Color-ab37fa61.js');}));const ColorControl=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default["default"].createElement(React__default["default"].Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=React.useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
 const[boxedValue,setBoxedValue]=React.useState({value:arg});React.useEffect(()=>{if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);const onChange=React.useCallback(argVal=>{setBoxedValue({value:argVal});updateArgs({[key]:argVal});return argVal;},[updateArgs,key]);const onBlur=React.useCallback(()=>setFocused(false),[]);const onFocus=React.useCallback(()=>setFocused(true),[]);if(!control||control.disable)return React__default["default"].createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
 // row.key is a hash key and therefore a much safer choice
 const props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus};const Control=Controls[control.type]||NoControl;return React__default["default"].createElement(Control,Object.assign({},props,control,{controlType:control.type}));};const Name=theming.styled.span({fontWeight:'bold'});const Required=theming.styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'}));const Description=theming.styled.div(({theme})=>({'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}}));const Type=theming.styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0}));const TypeWithJsDoc=theming.styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12}));const StyledTd$1=theming.styled.td(({theme,expandable})=>({paddingLeft:expandable?'40px !important':'20px !important'}));const ArgRow=props=>{var _a;const{row,updateArgs,compact,expandable,initialExpandedArgs}=props;const{name,description}=row;const table=row.table||{};const type=table.type||row.type;const defaultValue=table.defaultValue||row.defaultValue;const required=(_a=row.type)===null||_a===void 0?void 0:_a.required;const hasDescription=description!=null&&description!=='';return React__default["default"].createElement("tr",null,React__default["default"].createElement(StyledTd$1,{expandable:expandable},React__default["default"].createElement(Name,null,name),required?React__default["default"].createElement(Required,{title:"Required"},"*"):null),compact?null:React__default["default"].createElement("td",null,hasDescription&&React__default["default"].createElement(Description,null,React__default["default"].createElement(Markdown,null,description)),table.jsDocTags!=null?React__default["default"].createElement(React__default["default"].Fragment,null,React__default["default"].createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default["default"].createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default["default"].createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default["default"].createElement(Type,{hasDescription:hasDescription},React__default["default"].createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default["default"].createElement("td",null,React__default["default"].createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default["default"].createElement("td",null,React__default["default"].createElement(ArgControl,Object.assign({},props))):null);};const ExpanderIcon=theming.styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'}));const FlexWrapper=theming.styled.span(({theme})=>({display:'flex',lineHeight:'20px',alignItems:'center'}));const Section=theming.styled.td(({theme})=>({position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:`${theme.background.app} !important`,'& ~ td':{background:`${theme.background.app} !important`}}));const Subsection=theming.styled.td(({theme})=>({position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content}));const StyledTd=theming.styled.td(({theme})=>({position:'relative'}));const StyledTr=theming.styled.tr(({theme})=>({'&:hover > td':{backgroundColor:`${theme.background.hoverable} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:'row-resize'}}));const ClickIntercept=theming.styled.button(()=>({// reset button style

package/dist/cjs/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 require('react');
 
-var index = require('./index-bbe9389b.js');
+var index = require('./index-cd84b86a.js');
 
 require('@storybook/theming');
 

package/dist/cjs/{syntaxhighlighter-f8dfc9f1.js → syntaxhighlighter-b73c8adf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-bbe9389b.js');
+var index = require('./index-cd84b86a.js');
 
 var React = require('react');
 
@@ -10136,12 +10136,6 @@ const Scroller = theming.styled(({
   position: 'relative'
 }, ({
   theme
-}) => ({
-  '& code': {
-    paddingRight: theme.layoutMargin
-  }
-}), ({
-  theme
 }) => themedSyntax(theme));
 const Pre = theming.styled.pre(({
   theme,
@@ -10152,11 +10146,19 @@ const Pre = theming.styled.pre(({
   margin: 0,
   padding: padded ? theme.layoutMargin : 0
 }));
-const Code = theming.styled.code({
+/*
+We can't use `code` since PrismJS races for it.
+See https://github.com/storybookjs/storybook/issues/18090
+ */
+
+const Code = theming.styled.div(({
+  theme
+}) => ({
   flex: 1,
-  paddingRight: 0,
+  paddingLeft: 2,
+  paddingRight: theme.layoutMargin,
   opacity: 1
-}); // copied from @types/react-syntax-highlighter/index.d.ts
+})); // copied from @types/react-syntax-highlighter/index.d.ts
 
 const SyntaxHighlighter = _a => {
   var {

package/dist/esm/{Color-2180f69c.js → Color-a159ae15.js}

@@ -42,7 +42,7 @@ import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.from.js";
-import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, d as __rest } from './index-1adc6033.js';
+import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, d as __rest } from './index-2a91f2bc.js';
 import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
 import { styled } from '@storybook/theming';
 import '@storybook/csf';

package/dist/esm/{OverlayScrollbars-5b296433.js → OverlayScrollbars-a2bd4cea.js}

@@ -22,7 +22,7 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import { c as commonjsGlobal, d as __rest } from './index-1adc6033.js';
+import { c as commonjsGlobal, d as __rest } from './index-2a91f2bc.js';
 import React__default, { useRef, useEffect } from 'react';
 import '@storybook/theming';
 import '@storybook/csf';

package/dist/esm/{WithTooltip-6d43573d.js → WithTooltip-b75eefc8.js}

@@ -51,7 +51,7 @@ import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.string.starts-with.js";
 import "core-js/modules/es.array.from.js";
-import { f as basePlacements, t as top, l as left, h as bottom, r as right, i as end, v as viewport, s as start, p as popper, j as clippingParents, k as reference, n as variationPlacements, o as placements, q as auto, u as modifierPhases, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoizerific, d as __rest, w as window_1 } from './index-1adc6033.js';
+import { f as basePlacements, t as top, l as left, h as bottom, r as right, i as end, v as viewport, s as start, p as popper, j as clippingParents, k as reference, n as variationPlacements, o as placements, q as auto, u as modifierPhases, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoizerific, d as __rest, w as window_1 } from './index-2a91f2bc.js';
 import * as React from 'react';
 import React__default, { Component, useState, useCallback, useEffect } from 'react';
 import { styled, lighten, darken } from '@storybook/theming';

package/dist/esm/{formatter-a8917567.js → formatter-4df2e127.js}

@@ -1,4 +1,4 @@
-import"regenerator-runtime/runtime.js";function _wrapNativeSuper(Class){var _cache=typeof Map==="function"?new Map():undefined;_wrapNativeSuper=function _wrapNativeSuper(Class){if(Class===null||!_isNativeFunction(Class))return Class;if(typeof Class!=="function"){throw new TypeError("Super expression must either be null or a function");}if(typeof _cache!=="undefined"){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper);}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor);}Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:false,writable:true,configurable:true}});return _setPrototypeOf(Wrapper,Class);};return _wrapNativeSuper(Class);}function _construct(Parent,args,Class){if(_isNativeReflectConstruct()){_construct=Reflect.construct;}else{_construct=function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var Constructor=Function.bind.apply(Parent,a);var instance=new Constructor();if(Class)_setPrototypeOf(instance,Class.prototype);return instance;};}return _construct.apply(null,arguments);}function _isNativeFunction(fn){return Function.toString.call(fn).indexOf("[native code]")!==-1;}function _toArray(arr){return _arrayWithHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableRest();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _createForOfIteratorHelper(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]};},e:function e(_e217){throw _e217;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var normalCompletion=true,didErr=false,err;return{s:function s(){it=it.call(o);},n:function n(){var step=it.next();normalCompletion=step.done;return step;},e:function e(_e218){didErr=true;err=_e218;},f:function f(){try{if(!normalCompletion&&it.return!=null)it.return();}finally{if(didErr)throw err;}}};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}import"core-js/modules/esnext.global-this.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.map.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.string.trim.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.get-prototype-of.js";import"core-js/modules/es.array.map.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.regexp.to-string.js";import"core-js/modules/es.string.split.js";import"core-js/modules/es.string.match.js";import"core-js/modules/es.set.js";import"core-js/modules/es.regexp.constructor.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";import"core-js/modules/es.string.code-point-at.js";import"core-js/modules/es.object.freeze.js";import"core-js/modules/es.number.max-safe-integer.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.weak-map.js";import"core-js/modules/es.array.sort.js";import"core-js/modules/es.object.entries.js";import"core-js/modules/es.object.assign.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.string.starts-with.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.string.ends-with.js";import"core-js/modules/es.string.from-code-point.js";import"core-js/modules/es.array.splice.js";import"core-js/modules/es.symbol.iterator.js";import"core-js/modules/web.url.to-json.js";import"core-js/modules/es.array.from.js";import"core-js/modules/es.array.fill.js";import"core-js/modules/es.string.repeat.js";import"core-js/modules/es.typed-array.uint8-array.js";import"core-js/modules/es.typed-array.copy-within.js";import"core-js/modules/es.typed-array.every.js";import"core-js/modules/es.typed-array.fill.js";import"core-js/modules/es.typed-array.filter.js";import"core-js/modules/es.typed-array.find.js";import"core-js/modules/es.typed-array.find-index.js";import"core-js/modules/es.typed-array.for-each.js";import"core-js/modules/es.typed-array.includes.js";import"core-js/modules/es.typed-array.index-of.js";import"core-js/modules/es.typed-array.iterator.js";import"core-js/modules/es.typed-array.join.js";import"core-js/modules/es.typed-array.last-index-of.js";import"core-js/modules/es.typed-array.map.js";import"core-js/modules/es.typed-array.reduce.js";import"core-js/modules/es.typed-array.reduce-right.js";import"core-js/modules/es.typed-array.reverse.js";import"core-js/modules/es.typed-array.set.js";import"core-js/modules/es.typed-array.slice.js";import"core-js/modules/es.typed-array.some.js";import"core-js/modules/es.typed-array.sort.js";import"core-js/modules/es.typed-array.subarray.js";import"core-js/modules/es.typed-array.to-locale-string.js";import"core-js/modules/es.typed-array.to-string.js";import"core-js/modules/es.array-buffer.constructor.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/es.symbol.async-iterator.js";import"core-js/modules/es.typed-array.uint16-array.js";import"core-js/modules/es.number.is-integer.js";import"core-js/modules/es.regexp.flags.js";import"core-js/modules/es.string.bold.js";import"core-js/modules/es.object.get-own-property-names.js";import"core-js/modules/es.typed-array.float32-array.js";import"core-js/modules/es.typed-array.float64-array.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.string.trim-end.js";import"core-js/modules/es.object.values.js";import"core-js/modules/es.string.trim-start.js";import"core-js/modules/es.array.find-index.js";import"core-js/modules/es.string.anchor.js";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.reflect.get.js";import{c as commonjsGlobal,g as getDefaultExportFromCjs,m as memoizerific,e as dedent}from'./index-1adc6033.js';import'react';import'@storybook/theming';import'@storybook/csf';import'util';import'@storybook/client-logger';var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
+import"regenerator-runtime/runtime.js";function _wrapNativeSuper(Class){var _cache=typeof Map==="function"?new Map():undefined;_wrapNativeSuper=function _wrapNativeSuper(Class){if(Class===null||!_isNativeFunction(Class))return Class;if(typeof Class!=="function"){throw new TypeError("Super expression must either be null or a function");}if(typeof _cache!=="undefined"){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper);}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor);}Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:false,writable:true,configurable:true}});return _setPrototypeOf(Wrapper,Class);};return _wrapNativeSuper(Class);}function _construct(Parent,args,Class){if(_isNativeReflectConstruct()){_construct=Reflect.construct;}else{_construct=function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var Constructor=Function.bind.apply(Parent,a);var instance=new Constructor();if(Class)_setPrototypeOf(instance,Class.prototype);return instance;};}return _construct.apply(null,arguments);}function _isNativeFunction(fn){return Function.toString.call(fn).indexOf("[native code]")!==-1;}function _toArray(arr){return _arrayWithHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableRest();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _createForOfIteratorHelper(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]};},e:function e(_e217){throw _e217;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var normalCompletion=true,didErr=false,err;return{s:function s(){it=it.call(o);},n:function n(){var step=it.next();normalCompletion=step.done;return step;},e:function e(_e218){didErr=true;err=_e218;},f:function f(){try{if(!normalCompletion&&it.return!=null)it.return();}finally{if(didErr)throw err;}}};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}import"core-js/modules/esnext.global-this.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.map.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.string.trim.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.get-prototype-of.js";import"core-js/modules/es.array.map.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.regexp.to-string.js";import"core-js/modules/es.string.split.js";import"core-js/modules/es.string.match.js";import"core-js/modules/es.set.js";import"core-js/modules/es.regexp.constructor.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";import"core-js/modules/es.string.code-point-at.js";import"core-js/modules/es.object.freeze.js";import"core-js/modules/es.number.max-safe-integer.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.weak-map.js";import"core-js/modules/es.array.sort.js";import"core-js/modules/es.object.entries.js";import"core-js/modules/es.object.assign.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.string.starts-with.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.string.ends-with.js";import"core-js/modules/es.string.from-code-point.js";import"core-js/modules/es.array.splice.js";import"core-js/modules/es.symbol.iterator.js";import"core-js/modules/web.url.to-json.js";import"core-js/modules/es.array.from.js";import"core-js/modules/es.array.fill.js";import"core-js/modules/es.string.repeat.js";import"core-js/modules/es.typed-array.uint8-array.js";import"core-js/modules/es.typed-array.copy-within.js";import"core-js/modules/es.typed-array.every.js";import"core-js/modules/es.typed-array.fill.js";import"core-js/modules/es.typed-array.filter.js";import"core-js/modules/es.typed-array.find.js";import"core-js/modules/es.typed-array.find-index.js";import"core-js/modules/es.typed-array.for-each.js";import"core-js/modules/es.typed-array.includes.js";import"core-js/modules/es.typed-array.index-of.js";import"core-js/modules/es.typed-array.iterator.js";import"core-js/modules/es.typed-array.join.js";import"core-js/modules/es.typed-array.last-index-of.js";import"core-js/modules/es.typed-array.map.js";import"core-js/modules/es.typed-array.reduce.js";import"core-js/modules/es.typed-array.reduce-right.js";import"core-js/modules/es.typed-array.reverse.js";import"core-js/modules/es.typed-array.set.js";import"core-js/modules/es.typed-array.slice.js";import"core-js/modules/es.typed-array.some.js";import"core-js/modules/es.typed-array.sort.js";import"core-js/modules/es.typed-array.subarray.js";import"core-js/modules/es.typed-array.to-locale-string.js";import"core-js/modules/es.typed-array.to-string.js";import"core-js/modules/es.array-buffer.constructor.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/es.symbol.async-iterator.js";import"core-js/modules/es.typed-array.uint16-array.js";import"core-js/modules/es.number.is-integer.js";import"core-js/modules/es.regexp.flags.js";import"core-js/modules/es.string.bold.js";import"core-js/modules/es.object.get-own-property-names.js";import"core-js/modules/es.typed-array.float32-array.js";import"core-js/modules/es.typed-array.float64-array.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.string.trim-end.js";import"core-js/modules/es.object.values.js";import"core-js/modules/es.string.trim-start.js";import"core-js/modules/es.array.find-index.js";import"core-js/modules/es.string.anchor.js";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.reflect.get.js";import{c as commonjsGlobal,g as getDefaultExportFromCjs,m as memoizerific,e as dedent}from'./index-2a91f2bc.js';import'react';import'@storybook/theming';import'@storybook/csf';import'util';import'@storybook/client-logger';var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
       	   * @license
       	   * Copyright Google Inc. All Rights Reserved.
       	   *

package/dist/esm/{index-1adc6033.js → index-2a91f2bc.js}

@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
  *   background: "rgba(255,0,0,0.3)";
  * }
  */function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends$1({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
-var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;var headerCommon=function headerCommon(_ref2){var theme=_ref2.theme;return{margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}};};var codeCommon=function codeCommon(_ref3){var theme=_ref3.theme;return{lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?"1px solid ".concat(theme.color.mediumlight):"1px solid ".concat(theme.color.darker),color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border};};var withReset=function withReset(_ref4){var theme=_ref4.theme;return{fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'};};var withMargin={margin:'16px 0'};var Link$1=function Link$1(_a){var input=_a.href,children=_a.children,props=__rest(_a,["href","children"]);var isStorybookPath=/^\//.test(input);var isAnchorUrl=/^#.*/.test(input);var href=isStorybookPath?"?path=".concat(input):input;var target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};var A$2=styled(Link$1)(withReset,function(_ref5){var theme=_ref5.theme;return{fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}};});var Blockquote=styled.blockquote(withReset,withMargin,function(_ref6){var theme=_ref6.theme;return{borderLeft:"4px solid ".concat(theme.color.medium),padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}};});var Wrapper$8=styled.div(withReset,function(_ref7){var theme=_ref7.theme;return{backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:"1px dashed ".concat(theme.appBorderColor),display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2};});var EmptyBlock=function EmptyBlock(props){return React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));};var LazySyntaxHighlighter=lazy(function(){return import('./syntaxhighlighter-21db839d.js');});var LazySyntaxHighlighterWithFormatter=lazy(function(){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee(){var _yield$Promise$all,_yield$Promise$all2,SyntaxHighlighter,formatter;return regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return Promise.all([import('./syntaxhighlighter-21db839d.js'),import('./formatter-a8917567.js')]);case 2:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,2);SyntaxHighlighter=_yield$Promise$all2[0].SyntaxHighlighter;formatter=_yield$Promise$all2[1].formatter;return _context.abrupt("return",{default:function _default(props){return React__default.createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}));}});case 7:case"end":return _context.stop();}}},_callee);}));});var SyntaxHighlighter=function SyntaxHighlighter(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},props.format!==false?React__default.createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));};var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(function(_ref8){var theme=_ref8.theme;return{// DocBlocks-specific styling and overrides
+var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;var headerCommon=function headerCommon(_ref2){var theme=_ref2.theme;return{margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}};};var codeCommon=function codeCommon(_ref3){var theme=_ref3.theme;return{lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?"1px solid ".concat(theme.color.mediumlight):"1px solid ".concat(theme.color.darker),color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border};};var withReset=function withReset(_ref4){var theme=_ref4.theme;return{fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'};};var withMargin={margin:'16px 0'};var Link$1=function Link$1(_a){var input=_a.href,children=_a.children,props=__rest(_a,["href","children"]);var isStorybookPath=/^\//.test(input);var isAnchorUrl=/^#.*/.test(input);var href=isStorybookPath?"?path=".concat(input):input;var target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};var A$2=styled(Link$1)(withReset,function(_ref5){var theme=_ref5.theme;return{fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}};});var Blockquote=styled.blockquote(withReset,withMargin,function(_ref6){var theme=_ref6.theme;return{borderLeft:"4px solid ".concat(theme.color.medium),padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}};});var Wrapper$8=styled.div(withReset,function(_ref7){var theme=_ref7.theme;return{backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:"1px dashed ".concat(theme.appBorderColor),display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2};});var EmptyBlock=function EmptyBlock(props){return React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));};var LazySyntaxHighlighter=lazy(function(){return import('./syntaxhighlighter-af6b50e9.js');});var LazySyntaxHighlighterWithFormatter=lazy(function(){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee(){var _yield$Promise$all,_yield$Promise$all2,SyntaxHighlighter,formatter;return regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return Promise.all([import('./syntaxhighlighter-af6b50e9.js'),import('./formatter-4df2e127.js')]);case 2:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,2);SyntaxHighlighter=_yield$Promise$all2[0].SyntaxHighlighter;formatter=_yield$Promise$all2[1].formatter;return _context.abrupt("return",{default:function _default(props){return React__default.createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}));}});case 7:case"end":return _context.stop();}}},_callee);}));});var SyntaxHighlighter=function SyntaxHighlighter(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},props.format!==false?React__default.createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));};var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(function(_ref8){var theme=_ref8.theme;return{// DocBlocks-specific styling and overrides
 fontSize:"".concat(theme.typography.size.s2-1,"px"),lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}};});var SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));var SourceSkeletonWrapper=styled.div(function(_ref9){var theme=_ref9.theme;return{background:theme.background.content,borderRadius:theme.appBorderRadius,border:"1px solid ".concat(theme.appBorderColor),boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'};});var SourceSkeletonPlaceholder=styled.div(function(_ref10){var theme=_ref10.theme;return _defineProperty2({animation:"".concat(theme.animation.glow," 1.5s ease-in-out infinite"),background:theme.appBorderColor,height:17,marginTop:1,width:'60%'},"&:first-child".concat(ignoreSsrWarning$1),{margin:0});});var SourceSkeleton=function SourceSkeleton(){return React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));};/**
  * Syntax-highlighted source code for a component (or anything!)
  */var Source=function Source(props){var isLoading=props.isLoading,error=props.error;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}var _a=props,language=_a.language,code=_a.code,dark=_a.dark,format=_a.format,rest=__rest(_a,["language","code","dark","format"]);var syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}var overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};var isReactChildString=function isReactChildString(child){return typeof child==='string';};var isInlineCodeRegex=/[\n\r]/g;var DefaultCodeBlock=styled.code(function(_ref12){var theme=_ref12.theme;return{// from reset
@@ -310,7 +310,7 @@ var icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726
 shapeRendering:'inherit',transform:'translate3d(0,0,0)'},function(_ref27){var inline=_ref27.inline;return inline?{display:'inline-block'}:{display:'block'};});Svg.displayName='Svg';var Path=styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
 var Icons=memo(function(_a){var icon=_a.icon,symbol=_a.symbol,props=__rest(_a,["icon","symbol"]);return React__default.createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default.createElement("use",{xlinkHref:"#icon--".concat(symbol)}):React__default.createElement(Path,{d:icons[icon]}));});var Symbols=memo(function(_ref28){var _ref28$icons=_ref28.icons,keys=_ref28$icons===void 0?Object.keys(icons):_ref28$icons;return React__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(function(key){return React__default.createElement("symbol",{id:"icon--".concat(key),key:key},React__default.createElement(Path,{d:icons[key]}));}));});// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 var LEFT_BUTTON=0;var isPlainLeftClick=function isPlainLeftClick(e){return e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;};var cancelled=function cancelled(e,cb){if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};var LinkInner=styled.span(function(_ref29){var withArrow=_ref29.withArrow;return withArrow?{'> svg:last-of-type':{height:'0.7em',width:'0.7em',marginRight:0,marginLeft:'0.25em',bottom:'auto',verticalAlign:'inherit'}}:{};},function(_ref30){var containsIcon=_ref30.containsIcon;return containsIcon?{svg:{height:'1em',width:'1em',verticalAlign:'middle',position:'relative',bottom:0,marginRight:0}}:{};});var A$1=styled.a(function(_ref31){var theme=_ref31.theme;return{display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.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}}};},function(_ref32){var theme=_ref32.theme,secondary=_ref32.secondary,tertiary=_ref32.tertiary;var colors;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return 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]}}}:{};},function(_ref33){var nochrome=_ref33.nochrome;return nochrome?{color:'inherit','&:hover, &:active':{color:'inherit',textDecoration:'underline'}}:{};},function(_ref34){var theme=_ref34.theme,inverse=_ref34.inverse;return 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}}}:{};},function(_ref35){var isButton=_ref35.isButton;return isButton?{border:0,borderRadius:0,background:'none',padding:0,fontSize:'inherit'}:{};});var Link=function Link(_a){var cancel=_a.cancel,children=_a.children,onClick=_a.onClick,withArrow=_a.withArrow,containsIcon=_a.containsIcon,className=_a.className,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default.createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?function(e){return cancelled(e,onClick);}:onClick,className:className}),React__default.createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default.createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};var DocumentWrapper=styled.div(function(_ref36){var theme=_ref36.theme;return{fontSize:"".concat(theme.typography.size.s2,"px"),lineHeight:'1.6',h1:{fontSize:"".concat(theme.typography.size.l1,"px"),fontWeight:theme.typography.weight.black},h2:{fontSize:"".concat(theme.typography.size.m2,"px"),borderBottom:"1px solid ".concat(theme.appBorderColor)},h3:{fontSize:"".concat(theme.typography.size.m1,"px")},h4:{fontSize:"".concat(theme.typography.size.s3,"px")},h5:{fontSize:"".concat(theme.typography.size.s2,"px")},h6:{fontSize:"".concat(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'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'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 ".concat(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 ".concat(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 ".concat(theme.appBorderColor),backgroundColor:'white',margin:0,padding:0,'& th':{fontWeight:'bold',border:"1px solid ".concat(theme.appBorderColor),textAlign:'left',margin:0,padding:'6px 13px'},'& td':{border:"1px solid ".concat(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 ".concat(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 ".concat(theme.color.mediumlight),backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==='dark'&&theme.color.darkest}};});var Container$1=styled.div(function(_ref37){var theme=_ref37.theme;return{position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1};});var ActionButton=styled.button(function(_ref38){var theme=_ref38.theme;return{margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:"1px solid ".concat(theme.appBorderColor),borderLeft:"1px solid ".concat(theme.appBorderColor),marginLeft:-1,borderRadius:"4px 0 0 0",'&:not(:last-child)':{borderRight:"1px solid ".concat(theme.appBorderColor)},'& + *':{borderLeft:"1px solid ".concat(theme.appBorderColor),borderRadius:0},'&:focus':{boxShadow:"".concat(theme.color.secondary," 0 -3px 0 0 inset"),outline:'0 none'}};},function(_ref39){var disabled=_ref39.disabled;return disabled&&{cursor:'not-allowed',opacity:0.5};});ActionButton.displayName='ActionButton';var ActionBar=function ActionBar(_a){var actionItems=_a.actionItems,props=__rest(_a,["actionItems"]);return React__default.createElement(Container$1,Object.assign({},props),actionItems.map(function(_ref40,index){var title=_ref40.title,className=_ref40.className,onClick=_ref40.onClick,disabled=_ref40.disabled;return(// eslint-disable-next-line react/no-array-index-key
-React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title));}));};var toNumber=function toNumber(input){return typeof input==='number'?input:Number(input);};var Container=styled.div(function(_ref41){var theme=_ref41.theme,col=_ref41.col,_ref41$row=_ref41.row,row=_ref41$row===void 0?1:_ref41$row;return col?_defineProperty2({display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginLeft:0}):_defineProperty2({'& > *':{marginTop:row*theme.layoutMargin}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginTop:0});},function(_ref44){var theme=_ref44.theme,outer=_ref44.outer,col=_ref44.col,row=_ref44.row;switch(true){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{};}}});var Spaced=function Spaced(_a){var col=_a.col,row=_a.row,outer=_a.outer,children=_a.children,rest=__rest(_a,["col","row","outer","children"]);var outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};var Title$3=styled.div(function(_ref45){var theme=_ref45.theme;return{fontWeight:theme.typography.weight.bold};});var Desc$1=styled.div();var Message$1=styled.div(function(_ref46){var theme=_ref46.theme;return{padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1};});var Placeholder=function Placeholder(_a){var children=_a.children,props=__rest(_a,["children"]);var _Children$toArray=Children.toArray(children),_Children$toArray2=_slicedToArray(_Children$toArray,2),title=_Children$toArray2[0],desc=_Children$toArray2[1];return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};var GlobalScrollAreaStyles=lazy(function(){return import('./GlobalScrollAreaStyles-8793ce4a.js');});var OverlayScrollbars=lazy(function(){return import('./OverlayScrollbars-5b296433.js');});var Scroller=function Scroller(_a){var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};var ScrollArea=styled(Scroller)(function(_ref47){var vertical=_ref47.vertical;return!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'};},function(_ref48){var horizontal=_ref48.horizontal;return!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'};});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;var globalWindow$2=window_1.window;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}var ZoomElementWrapper=styled.div(function(_ref49){var _ref49$scale=_ref49.scale,scale=_ref49$scale===void 0?1:_ref49$scale,height=_ref49.height;return browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:"scale(".concat(1/scale,")")};});function ZoomElement(_ref50){var scale=_ref50.scale,children=_ref50.children;var componentWrapperRef=useRef(null);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),height=_useState2[0],setHeight=_useState2[1];useEffect(function(){if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}var ZoomIFrame=/*#__PURE__*/function(_Component){_inherits(ZoomIFrame,_Component);var _super=_createSuper(ZoomIFrame);function ZoomIFrame(){var _this2;_classCallCheck(this,ZoomIFrame);_this2=_super.apply(this,arguments);_this2.iframe=null;return _this2;}_createClass(ZoomIFrame,[{key:"componentDidMount",value:function componentDidMount(){var iFrameRef=this.props.iFrameRef;this.iframe=iFrameRef.current;}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var _this$props=this.props,scale=_this$props.scale,active=_this$props.active;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
+React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title));}));};var toNumber=function toNumber(input){return typeof input==='number'?input:Number(input);};var Container=styled.div(function(_ref41){var theme=_ref41.theme,col=_ref41.col,_ref41$row=_ref41.row,row=_ref41$row===void 0?1:_ref41$row;return col?_defineProperty2({display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginLeft:0}):_defineProperty2({'& > *':{marginTop:row*theme.layoutMargin}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginTop:0});},function(_ref44){var theme=_ref44.theme,outer=_ref44.outer,col=_ref44.col,row=_ref44.row;switch(true){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{};}}});var Spaced=function Spaced(_a){var col=_a.col,row=_a.row,outer=_a.outer,children=_a.children,rest=__rest(_a,["col","row","outer","children"]);var outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};var Title$3=styled.div(function(_ref45){var theme=_ref45.theme;return{fontWeight:theme.typography.weight.bold};});var Desc$1=styled.div();var Message$1=styled.div(function(_ref46){var theme=_ref46.theme;return{padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1};});var Placeholder=function Placeholder(_a){var children=_a.children,props=__rest(_a,["children"]);var _Children$toArray=Children.toArray(children),_Children$toArray2=_slicedToArray(_Children$toArray,2),title=_Children$toArray2[0],desc=_Children$toArray2[1];return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};var GlobalScrollAreaStyles=lazy(function(){return import('./GlobalScrollAreaStyles-8793ce4a.js');});var OverlayScrollbars=lazy(function(){return import('./OverlayScrollbars-a2bd4cea.js');});var Scroller=function Scroller(_a){var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};var ScrollArea=styled(Scroller)(function(_ref47){var vertical=_ref47.vertical;return!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'};},function(_ref48){var horizontal=_ref48.horizontal;return!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'};});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;var globalWindow$2=window_1.window;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}var ZoomElementWrapper=styled.div(function(_ref49){var _ref49$scale=_ref49.scale,scale=_ref49$scale===void 0?1:_ref49$scale,height=_ref49.height;return browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:"scale(".concat(1/scale,")")};});function ZoomElement(_ref50){var scale=_ref50.scale,children=_ref50.children;var componentWrapperRef=useRef(null);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),height=_useState2[0],setHeight=_useState2[1];useEffect(function(){if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}var ZoomIFrame=/*#__PURE__*/function(_Component){_inherits(ZoomIFrame,_Component);var _super=_createSuper(ZoomIFrame);function ZoomIFrame(){var _this2;_classCallCheck(this,ZoomIFrame);_this2=_super.apply(this,arguments);_this2.iframe=null;return _this2;}_createClass(ZoomIFrame,[{key:"componentDidMount",value:function componentDidMount(){var iFrameRef=this.props.iFrameRef;this.iframe=iFrameRef.current;}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var _this$props=this.props,scale=_this$props.scale,active=_this$props.active;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
 // never update this component, it will cause the iframe to refresh
 // the only exception is when the url changes, which happens when the version changes
 return nextProps.children.props.src!==this.props.children.props.src;}},{key:"setIframeInnerZoom",value:function setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:"".concat(scale*100,"%"),height:"".concat(scale*100,"%"),transform:"scale(".concat(1/scale,")"),transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}},{key:"setIframeZoom",value:function setIframeZoom(scale){Object.assign(this.iframe.style,{width:"".concat(scale*100,"%"),height:"".concat(scale*100,"%"),transform:"scale(".concat(1/scale,")"),transformOrigin:'top left'});}},{key:"render",value:function render(){var children=this.props.children;return children;}}]);return ZoomIFrame;}(Component);var Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};var ButtonWrapper=styled.button(function(_ref51){var small=_ref51.small,theme=_ref51.theme;return{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:"".concat(small?theme.typography.size.s1:theme.typography.size.s2-1,"px"),fontWeight:theme.typography.weight.bold,lineHeight:'1',svg:{display:'inline-block',height:small?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}};},function(_ref52){var disabled=_ref52.disabled;return disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{};},function(_ref53){var containsIcon=_ref53.containsIcon,small=_ref53.small;return containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{};},function(_ref54){var theme=_ref54.theme,primary=_ref54.primary,secondary=_ref54.secondary,gray=_ref54.gray;var color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.05,color)},'&:active':{boxShadow:'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'},'&:focus':{boxShadow:"".concat(rgba(color,1)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};},function(_ref55){var theme=_ref55.theme,tertiary=_ref55.tertiary,inForm=_ref55.inForm,small=_ref55.small;return tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:"".concat(theme.input.border," 0 0 0 1px inset"),borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.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.input.background},'&:focus':{boxShadow:"".concat(rgba(theme.color.secondary,1)," 0 0 0 1px inset"),outline:'none'}}):{};},function(_ref56){var theme=_ref56.theme,outline=_ref56.outline;return outline?{boxShadow:"".concat(curriedTransparentize$1(0.8,theme.color.defaultText)," 0 0 0 1px inset"),color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:"".concat(curriedTransparentize$1(0.5,theme.color.defaultText)," 0 0 0 1px inset"),outline:'none'},'&:active':{boxShadow:"".concat(curriedTransparentize$1(0.5,theme.color.defaultText)," 0 0 0 2px inset"),color:curriedTransparentize$1(0,theme.color.defaultText)}}:{};},function(_ref57){var theme=_ref57.theme,outline=_ref57.outline,primary=_ref57.primary;var color=theme.color.primary;return outline&&primary?{boxShadow:"".concat(color," 0 0 0 1px inset"),color:color,'svg path':{fill:color},'&:hover':{boxShadow:"".concat(color," 0 0 0 1px inset"),background:'transparent'},'&:active':{background:color,boxShadow:"".concat(color," 0 0 0 1px inset"),color:theme.color.tertiary},'&:focus':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.4)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};},function(_ref58){var theme=_ref58.theme,outline=_ref58.outline,primary=_ref58.primary,secondary=_ref58.secondary;var color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return outline&&color?{boxShadow:"".concat(color," 0 0 0 1px inset"),color:color,'svg path':{fill:color},'&:hover':{boxShadow:"".concat(color," 0 0 0 1px inset"),background:'transparent'},'&:active':{background:color,boxShadow:"".concat(color," 0 0 0 1px inset"),color:theme.color.tertiary},'&:focus':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.4)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};});var ButtonLink=ButtonWrapper.withComponent('a');var Button$2=Object.assign(forwardRef(function(_a,ref){var isLink=_a.isLink,children=_a.children,props=__rest(_a,["isLink","children"]);if(isLink){return React__default.createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default.createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});var Wrapper$7=styled.label(function(_ref59){var theme=_ref59.theme;return{display:'flex',borderBottom:"1px solid ".concat(theme.appBorderColor),margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}};});var Label$4=styled.span(function(_ref60){var theme=_ref60.theme;return{minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'};});var Field=function Field(_a){var label=_a.label,children=_a.children,props=__rest(_a,["label","children"]);return React__default.createElement(Wrapper$7,Object.assign({},props),label?React__default.createElement(Label$4,null,React__default.createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=typeof document!=='undefined'?useLayoutEffect:useEffect;var useLatest=function useLatest(value){var ref=useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};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'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
@@ -326,7 +326,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
 if(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);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_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!==undefined;var libRef=useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=useRef(0);var measurementsCacheRef=useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};if(typeof document!=='undefined'){useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */forwardRef(TextareaAutosize);var TextareaAutoResize=index;var styleResets$1={// resets
 appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};var styles=function styles(_ref61){var theme=_ref61.theme;return Object.assign(Object.assign({},styleResets$1),{transition:'box-shadow 200ms ease-out, opacity 200ms ease-out',color:theme.input.color||'inherit',background:theme.input.background,boxShadow:"".concat(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:"".concat(theme.color.secondary," 0 0 0 1px inset"),outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'&:-webkit-autofill':{WebkitBoxShadow:"0 0 0 3em ".concat(theme.color.lightest," inset")},'::placeholder':{color:theme.color.mediumdark}});};var sizes=function sizes(_ref62){var size=_ref62.size;switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};var alignment=function alignment(_ref63){var align=_ref63.align;switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};var validation=function validation(_ref64){var valid=_ref64.valid,theme=_ref64.theme;switch(valid){case'valid':{return{boxShadow:"".concat(theme.color.positive," 0 0 0 1px inset !important")};}case'error':{return{boxShadow:"".concat(theme.color.negative," 0 0 0 1px inset !important")};}case'warn':{return{boxShadow:"".concat(theme.color.warning," 0 0 0 1px inset")};}case undefined:case null:default:{return{};}}};var Input$1=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});var Select=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});var Textarea=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,function(_ref65){var _ref65$height=_ref65.height,height=_ref65$height===void 0?400:_ref65$height;return{overflow:'visible',maxHeight:height};}),{displayName:'Textarea'});var ButtonStyled=styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
 userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
-'&:hover':{transform:'none'}});var Button$1=Object.assign(forwardRef(function(props,ref){return React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}));}),{displayName:'Button'});var Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field:Field,Input:Input$1,Select:Select,Textarea:Textarea,Button:Button$1});var LazyWithTooltip=lazy(function(){return import('./WithTooltip-6d43573d.js').then(function(mod){return{default:mod.WithTooltip};});});var WithTooltip=function WithTooltip(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));};var LazyWithTooltipPure=lazy(function(){return import('./WithTooltip-6d43573d.js').then(function(mod){return{default:mod.WithTooltipPure};});});var WithTooltipPure=function WithTooltipPure(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));};var Title$2=styled.div(function(_ref66){var theme=_ref66.theme;return{fontWeight:theme.typography.weight.black};});var Desc=styled.span();var Links=styled.div(function(_ref67){var theme=_ref67.theme;return{marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}};});var Message=styled.div(function(_ref68){var theme=_ref68.theme;return{color:theme.textColor,lineHeight:'18px'};});var MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});var TooltipMessage=function TooltipMessage(_ref69){var title=_ref69.title,desc=_ref69.desc,links=_ref69.links;return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(function(_a){var linkTitle=_a.title,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};var Note=styled.div(function(_ref70){var theme=_ref70.theme;return{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(20, 20, 20, 0.85)',margin:6};});var TooltipNote=function TooltipNote(_a){var note=_a.note,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
+'&:hover':{transform:'none'}});var Button$1=Object.assign(forwardRef(function(props,ref){return React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}));}),{displayName:'Button'});var Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field:Field,Input:Input$1,Select:Select,Textarea:Textarea,Button:Button$1});var LazyWithTooltip=lazy(function(){return import('./WithTooltip-b75eefc8.js').then(function(mod){return{default:mod.WithTooltip};});});var WithTooltip=function WithTooltip(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));};var LazyWithTooltipPure=lazy(function(){return import('./WithTooltip-b75eefc8.js').then(function(mod){return{default:mod.WithTooltipPure};});});var WithTooltipPure=function WithTooltipPure(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));};var Title$2=styled.div(function(_ref66){var theme=_ref66.theme;return{fontWeight:theme.typography.weight.black};});var Desc=styled.span();var Links=styled.div(function(_ref67){var theme=_ref67.theme;return{marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}};});var Message=styled.div(function(_ref68){var theme=_ref68.theme;return{color:theme.textColor,lineHeight:'18px'};});var MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});var TooltipMessage=function TooltipMessage(_ref69){var title=_ref69.title,desc=_ref69.desc,links=_ref69.links;return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(function(_a){var linkTitle=_a.title,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};var Note=styled.div(function(_ref70){var theme=_ref70.theme;return{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(20, 20, 20, 0.85)',margin:6};});var TooltipNote=function TooltipNote(_a){var note=_a.note,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
 Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
 Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};var similar=Similar;var mapOrSimilar=function mapOrSimilar(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=similar;return new Similar();}else{return new Map();}};var MapOrSimilar=mapOrSimilar;var memoizerific=function memoizerific(limit){var cache=new MapOrSimilar(process.env.FORCE_SIMILAR_INSTEAD_OF_MAP==='true'),lru=[];return function(fn){var memoizerific=function memoizerific(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
 for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
@@ -457,7 +457,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;var eventSource=ne
  * items. The preview also shows the source for the component
  * as a drop-down.
  */var Preview=function Preview(_a){var isLoading=_a.isLoading,isColumn=_a.isColumn,columns=_a.columns,children=_a.children,withSource=_a.withSource,_a$withToolbar=_a.withToolbar,withToolbar=_a$withToolbar===void 0?false:_a$withToolbar,_a$isExpanded=_a.isExpanded,isExpanded=_a$isExpanded===void 0?false:_a$isExpanded,additionalActions=_a.additionalActions,className=_a.className,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);var _useState7=useState(isExpanded),_useState8=_slicedToArray(_useState7,2),expanded=_useState8[0],setExpanded=_useState8[1];var _getSource=getSource(withSource,expanded,setExpanded),source=_getSource.source,actionItem=_getSource.actionItem;var _useState9=useState(1),_useState10=_slicedToArray(_useState9,2),scale=_useState10[0],setScale=_useState10[1];var previewClasses=[className].concat(['sbdocs','sbdocs-preview']);var defaultActionItems=withSource?[actionItem]:[];var _useState11=useState(additionalActions?_toConsumableArray(additionalActions):[]),_useState12=_slicedToArray(_useState11,2),additionalActionItems=_useState12[0],setAdditionalActionItems=_useState12[1];var actionItems=[].concat(defaultActionItems,_toConsumableArray(additionalActionItems));// @ts-ignore
-var layout=getLayout(Children.count(children)===1?[children]:children);var globalWindow=window_1.window;var copyToClipboard=useCallback(function(text){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee2(){var _yield$import,createCopyToClipboardFunction;return regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return import('./syntaxhighlighter-21db839d.js');case 2:_yield$import=_context2.sent;createCopyToClipboardFunction=_yield$import.createCopyToClipboardFunction;createCopyToClipboardFunction();case 5:case"end":return _context2.stop();}}},_callee2);}));},[]);var onCopyCapture=function onCopyCapture(e){e.preventDefault();if(additionalActionItems.filter(function(item){return item.title==='Copied';}).length===0){copyToClipboard(source.props.code).then(function(){setAdditionalActionItems([].concat(_toConsumableArray(additionalActionItems),[{title:'Copied',onClick:function onClick(){}}]));globalWindow.setTimeout(function(){return setAdditionalActionItems(additionalActionItems.filter(function(item){return item.title!=='Copied';}));},1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource:withSource,withToolbar:withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:function zoom(z){return setScale(scale*z);},resetZoom:function resetZoom(){return setScale(1);},storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale:scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
+var layout=getLayout(Children.count(children)===1?[children]:children);var globalWindow=window_1.window;var copyToClipboard=useCallback(function(text){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee2(){var _yield$import,createCopyToClipboardFunction;return regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return import('./syntaxhighlighter-af6b50e9.js');case 2:_yield$import=_context2.sent;createCopyToClipboardFunction=_yield$import.createCopyToClipboardFunction;createCopyToClipboardFunction();case 5:case"end":return _context2.stop();}}},_callee2);}));},[]);var onCopyCapture=function onCopyCapture(e){e.preventDefault();if(additionalActionItems.filter(function(item){return item.title==='Copied';}).length===0){copyToClipboard(source.props.code).then(function(){setAdditionalActionItems([].concat(_toConsumableArray(additionalActionItems),[{title:'Copied',onClick:function onClick(){}}]));globalWindow.setTimeout(function(){return setAdditionalActionItems(additionalActionItems.filter(function(item){return item.title!=='Copied';}));},1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource:withSource,withToolbar:withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:function zoom(z){return setScale(scale*z);},resetZoom:function resetZoom(){return setScale(1);},storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale:scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
 children.map(function(child,i){return React__default.createElement("div",{key:i},child);}):React__default.createElement("div",null,children))),React__default.createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};var StyledPreview=styled(Preview)(function(){return{'.docs-story':{paddingTop:32,paddingBottom:40}};});var PreviewSkeleton=function PreviewSkeleton(){return React__default.createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default.createElement(StorySkeleton,null));};/**
  * A specialized version of `_.map` for arrays without support for iteratee
  * shorthands.
@@ -2048,7 +2048,7 @@ textareaElementFunction=function textareaElementFunction(){return textareaElemen
 JsonTree.defaultProps={rootName:'root',isCollapsed:function isCollapsed(keyPath,deep){return deep!==-1;},getStyle:function getStyle(keyName,data,keyPath,deep,dataType){switch(dataType){case'Object':case'Error':return object;case'Array':return array;default:return value;}},readOnly:function readOnly(){return false;},onFullyUpdate:function onFullyUpdate(){},onDeltaUpdate:function onDeltaUpdate(){},beforeRemoveAction:function beforeRemoveAction(){return Promise.resolve();},beforeAddAction:function beforeAddAction(){return Promise.resolve();},beforeUpdateAction:function beforeUpdateAction(){return Promise.resolve();},logger:{error:function error(){}},onSubmitValueParser:function onSubmitValueParser(isEditMode,keyPath,deep,name,rawValue){return parse(rawValue);},inputElement:function inputElement(){return React__default.createElement("input",null);},textareaElement:function textareaElement(){return React__default.createElement("textarea",null);},fallback:null};var globalWindow=window_1.window;var Wrapper$2=styled.div(function(_ref163){var theme=_ref163.theme;return{position:'relative',display:'flex','.rejt-tree':{marginLeft:'1rem',fontSize:'13px'},'.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':{'& > svg':{opacity:0,transition:'opacity 0.2s'}},'.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':{'& > svg':{opacity:1}},'.rejt-edit-form button':{display:'none'},'.rejt-add-form':{marginLeft:10},'.rejt-add-value-node':{display:'inline-flex',alignItems:'center'},'.rejt-name':{lineHeight:'22px'},'.rejt-not-collapsed-delimiter':{lineHeight:'22px'},'.rejt-plus-menu':{marginLeft:5},'.rejt-object-node > span > *':{position:'relative',zIndex:2},'.rejt-object-node, .rejt-array-node':{position:'relative'},'.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':{content:'""',position:'absolute',top:0,display:'block',width:'100%',marginLeft:'-1rem',padding:'0 4px 0 1rem',height:22},'.rejt-collapsed::before, .rejt-not-collapsed::before':{zIndex:1,background:'transparent',borderRadius:4,transition:'background 0.2s',pointerEvents:'none',opacity:0.1},'.rejt-object-node:hover, .rejt-array-node:hover':{'& > .rejt-collapsed::before, & > .rejt-not-collapsed::before':{background:theme.color.secondary}},'.rejt-collapsed::after, .rejt-not-collapsed::after':{content:'""',position:'absolute',display:'inline-block',pointerEvents:'none',width:0,height:0},'.rejt-collapsed::after':{left:-8,top:8,borderTop:'3px solid transparent',borderBottom:'3px solid transparent',borderLeft:'3px solid rgba(153,153,153,0.6)'},'.rejt-not-collapsed::after':{left:-10,top:10,borderTop:'3px solid rgba(153,153,153,0.6)',borderLeft:'3px solid transparent',borderRight:'3px solid transparent'},'.rejt-value':{display:'inline-block',border:'1px solid transparent',borderRadius:4,margin:'1px 0',padding:'0 4px',cursor:'text',color:theme.color.defaultText},'.rejt-value-node:hover > .rejt-value':{background:theme.background.app,borderColor:theme.color.border}};});var Button=styled.button(function(_ref164){var theme=_ref164.theme,primary=_ref164.primary;return{border:0,height:20,margin:1,borderRadius:4,background:primary?theme.color.secondary:'transparent',color:primary?theme.color.lightest:theme.color.dark,fontWeight:primary?'bold':'normal',cursor:'pointer',order:primary?'initial':9};});var ActionIcon=styled(Icons)(function(_ref165){var theme=_ref165.theme,icon=_ref165.icon,disabled=_ref165.disabled;return{display:'inline-block',verticalAlign:'middle',width:15,height:15,padding:3,marginLeft:5,cursor:disabled?'not-allowed':'pointer',color:theme.color.mediumdark,'&:hover':disabled?{}:{color:icon==='subtract'?theme.color.negative:theme.color.ancillary},'svg + &':{marginLeft:0}};});var Input=styled.input(function(_ref166){var theme=_ref166.theme,placeholder=_ref166.placeholder;return{outline:0,margin:placeholder?1:'1px 0',padding:'3px 4px',color:theme.color.defaultText,background:theme.background.app,border:"1px solid ".concat(theme.color.border),borderRadius:4,lineHeight:'14px',width:placeholder==='Key'?80:120,'&:focus':{border:"1px solid ".concat(theme.color.secondary)}};});var RawButton=styled(IconButton)(function(_ref167){var theme=_ref167.theme;return{position:'absolute',zIndex:2,top:2,right:2,height:21,padding:'0 3px',background:theme.background.bar,border:"1px solid ".concat(theme.color.border),borderRadius:3,color:theme.color.mediumdark,fontSize:'9px',fontWeight:'bold',span:{marginLeft:3,marginTop:1}};});var RawInput=styled(Form.Textarea)(function(_ref168){var theme=_ref168.theme;return{flex:1,padding:'7px 6px',fontFamily:theme.typography.fonts.mono,fontSize:'12px',lineHeight:'18px','&::placeholder':{fontFamily:theme.typography.fonts.base,fontSize:'13px'},'&:placeholder-shown':{padding:'7px 10px'}};});var ENTER_EVENT={bubbles:true,cancelable:true,key:'Enter',code:'Enter',keyCode:13};var dispatchEnterKey=function dispatchEnterKey(event){event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent('keydown',ENTER_EVENT));};var selectValue=function selectValue(event){event.currentTarget.select();};var getCustomStyleFunction=function getCustomStyleFunction(theme){return function(){return{name:{color:theme.color.secondary},collapsed:{color:theme.color.dark},ul:{listStyle:'none',margin:'0 0 0 1rem',padding:0},li:{outline:0}};};};var ObjectControl=function ObjectControl(_ref169){var name=_ref169.name,value=_ref169.value,onChange=_ref169.onChange;var theme=useTheme();var data=useMemo(function(){return value&&cloneDeep_1(value);},[value]);var hasData=data!==null&&data!==undefined;var _useState27=useState(!hasData),_useState28=_slicedToArray(_useState27,2),showRaw=_useState28[0],setShowRaw=_useState28[1];var _useState29=useState(null),_useState30=_slicedToArray(_useState29,2),parseError=_useState30[0],setParseError=_useState30[1];var updateRaw=useCallback(function(raw){try{if(raw)onChange(JSON.parse(raw));setParseError(undefined);}catch(e){setParseError(e);}},[onChange]);var _useState31=useState(false),_useState32=_slicedToArray(_useState31,2),forceVisible=_useState32[0],setForceVisible=_useState32[1];var onForceVisible=useCallback(function(){onChange({});setForceVisible(true);},[setForceVisible]);var htmlElRef=useRef(null);useEffect(function(){if(forceVisible&&htmlElRef.current)htmlElRef.current.select();},[forceVisible]);if(!hasData){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set object");}var rawJSONForm=React__default.createElement(RawInput,{ref:htmlElRef,id:getControlId(name),name:name,defaultValue:value===null?'':JSON.stringify(value,null,2),onBlur:function onBlur(event){return updateRaw(event.target.value);},placeholder:"Edit JSON string...",autoFocus:forceVisible,valid:parseError?'error':null});return React__default.createElement(Wrapper$2,null,['Object','Array'].includes(getObjectType(data))&&React__default.createElement(RawButton,{onClick:function onClick(){return setShowRaw(function(v){return!v;});}},React__default.createElement(Icons,{icon:showRaw?'eyeclose':'eye'}),React__default.createElement("span",null,"RAW")),!showRaw?React__default.createElement(JsonTree,{data:data,rootName:name,onFullyUpdate:onChange,getStyle:getCustomStyleFunction(theme),cancelButtonElement:React__default.createElement(Button,{type:"button"},"Cancel"),editButtonElement:React__default.createElement(Button,{type:"submit"},"Save"),addButtonElement:React__default.createElement(Button,{type:"submit",primary:true},"Save"),plusMenuElement:React__default.createElement(ActionIcon,{icon:"add"}),minusMenuElement:React__default.createElement(ActionIcon,{icon:"subtract"}),inputElement:function inputElement(_,__,___,key){return key?React__default.createElement(Input,{onFocus:selectValue,onBlur:dispatchEnterKey}):React__default.createElement(Input,null);},fallback:rawJSONForm}):rawJSONForm);};var RangeInput=styled.input(function(_ref170){var theme=_ref170.theme,min=_ref170.min,max=_ref170.max,value=_ref170.value;return{// Resytled using http://danielstern.ca/range.css/#/
 '&':{width:'100%',backgroundColor:'transparent',appearance:'none'},'&::-webkit-slider-runnable-track':{background:theme.base==='light'?"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:6,width:'100%',height:6,cursor:'pointer'},'&::-webkit-slider-thumb':{marginTop:'-6px',width:16,height:16,border:"1px solid ".concat(rgba(theme.appBorderColor,0.2)),borderRadius:'50px',boxShadow:"0 1px 3px 0px ".concat(rgba(theme.appBorderColor,0.2)),cursor:'grab',appearance:'none',background:"".concat(theme.input.background),transition:'all 150ms ease-out','&:hover':{background:"".concat(curriedDarken$1(0.05,theme.input.background)),transform:'scale3d(1.1, 1.1, 1.1) translateY(-1px)',transition:'all 50ms ease-out'},'&:active':{background:"".concat(theme.input.background),transform:'scale3d(1, 1, 1) translateY(0px)',cursor:'grabbing'}},'&:focus':{outline:'none','&::-webkit-slider-runnable-track':{borderColor:rgba(theme.color.secondary,0.4)},'&::-webkit-slider-thumb':{borderColor:theme.color.secondary,boxShadow:"0 0px 5px 0px ".concat(theme.color.secondary)}},'&::-moz-range-track':{background:theme.base==='light'?"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:6,width:'100%',height:6,cursor:'pointer',outline:'none'},'&::-moz-range-thumb':{width:16,height:16,border:"1px solid ".concat(rgba(theme.color.border,0.2)),borderRadius:'50px',boxShadow:"0 1px 3px 0px ".concat(rgba(theme.color.border,0.2)),cursor:'grab',background:"".concat(theme.input.background),transition:'all 150ms ease-out','&:hover':{background:"".concat(curriedDarken$1(0.05,theme.input.background)),transform:'scale3d(1.1, 1.1, 1.1) translateY(-1px)',transition:'all 50ms ease-out'},'&:active':{background:"".concat(theme.input.background),transform:'scale3d(1, 1, 1) translateY(0px)',cursor:'grabbing'}},'&::-ms-track':{background:theme.base==='light'?"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n            ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n            ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:"".concat(theme.input.background),border:"1px solid ".concat(rgba(theme.appBorderColor,0.2)),borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}};});var RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});var RangeWrapper=styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){var match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
 (match[1]?match[1].length:0)-(// Adjust for scientific notation.
-match[2]?+match[2]:0));}var RangeControl=function RangeControl(_ref171){var name=_ref171.name,value=_ref171.value,onChange=_ref171.onChange,_ref171$min=_ref171.min,min=_ref171$min===void 0?0:_ref171$min,_ref171$max=_ref171.max,max=_ref171$max===void 0?100:_ref171$max,_ref171$step=_ref171.step,step=_ref171$step===void 0?1:_ref171$step,onBlur=_ref171.onBlur,onFocus=_ref171.onFocus;var handleChange=function handleChange(event){onChange(parse$1(event.target.value));};var hasValue=value!==undefined;var numberOFDecimalsPlaces=useMemo(function(){return getNumberOfDecimalPlaces(step);},[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name:name,value:value,min:min,max:max,step:step,onFocus:onFocus,onBlur:onBlur})),React__default.createElement(RangeLabel,null,"".concat(hasValue?value.toFixed(numberOFDecimalsPlaces):'--')," / ",max));};var Wrapper$1=styled.label({display:'flex'});var TextControl=function TextControl(_ref172){var name=_ref172.name,value=_ref172.value,onChange=_ref172.onChange,onFocus=_ref172.onFocus,onBlur=_ref172.onBlur;var handleChange=function handleChange(event){onChange(event.target.value);};var _useState33=useState(false),_useState34=_slicedToArray(_useState33,2),forceVisible=_useState34[0],setForceVisible=_useState34[1];var onForceVisible=useCallback(function(){onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}var isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name:name,value:isValid?value:'',onFocus:onFocus,onBlur:onBlur})));};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(function(url){if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}var FilesControl=function FilesControl(_ref173){var onChange=_ref173.onChange,name=_ref173.name,_ref173$accept=_ref173.accept,accept=_ref173$accept===void 0?'image/*':_ref173$accept,value=_ref173.value;function handleFileChange(e){if(!e.target.files){return;}var fileUrls=Array.from(e.target.files).map(function(file){return URL.createObjectURL(file);});onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};var LazyColorControl=lazy(function(){return import('./Color-2180f69c.js');});var ColorControl=function ColorControl(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));};var Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};var NoControl=function NoControl(){return React__default.createElement(React__default.Fragment,null,"-");};var ArgControl=function ArgControl(_ref174){var row=_ref174.row,arg=_ref174.arg,updateArgs=_ref174.updateArgs;var key=row.key,control=row.control;var _useState35=useState(false),_useState36=_slicedToArray(_useState35,2),isFocused=_useState36[0],setFocused=_useState36[1];// box because arg can be a fn (e.g. actions) and useState calls fn's
+match[2]?+match[2]:0));}var RangeControl=function RangeControl(_ref171){var name=_ref171.name,value=_ref171.value,onChange=_ref171.onChange,_ref171$min=_ref171.min,min=_ref171$min===void 0?0:_ref171$min,_ref171$max=_ref171.max,max=_ref171$max===void 0?100:_ref171$max,_ref171$step=_ref171.step,step=_ref171$step===void 0?1:_ref171$step,onBlur=_ref171.onBlur,onFocus=_ref171.onFocus;var handleChange=function handleChange(event){onChange(parse$1(event.target.value));};var hasValue=value!==undefined;var numberOFDecimalsPlaces=useMemo(function(){return getNumberOfDecimalPlaces(step);},[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name:name,value:value,min:min,max:max,step:step,onFocus:onFocus,onBlur:onBlur})),React__default.createElement(RangeLabel,null,"".concat(hasValue?value.toFixed(numberOFDecimalsPlaces):'--')," / ",max));};var Wrapper$1=styled.label({display:'flex'});var TextControl=function TextControl(_ref172){var name=_ref172.name,value=_ref172.value,onChange=_ref172.onChange,onFocus=_ref172.onFocus,onBlur=_ref172.onBlur;var handleChange=function handleChange(event){onChange(event.target.value);};var _useState33=useState(false),_useState34=_slicedToArray(_useState33,2),forceVisible=_useState34[0],setForceVisible=_useState34[1];var onForceVisible=useCallback(function(){onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}var isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name:name,value:isValid?value:'',onFocus:onFocus,onBlur:onBlur})));};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(function(url){if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}var FilesControl=function FilesControl(_ref173){var onChange=_ref173.onChange,name=_ref173.name,_ref173$accept=_ref173.accept,accept=_ref173$accept===void 0?'image/*':_ref173$accept,value=_ref173.value;function handleFileChange(e){if(!e.target.files){return;}var fileUrls=Array.from(e.target.files).map(function(file){return URL.createObjectURL(file);});onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};var LazyColorControl=lazy(function(){return import('./Color-a159ae15.js');});var ColorControl=function ColorControl(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));};var Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};var NoControl=function NoControl(){return React__default.createElement(React__default.Fragment,null,"-");};var ArgControl=function ArgControl(_ref174){var row=_ref174.row,arg=_ref174.arg,updateArgs=_ref174.updateArgs;var key=row.key,control=row.control;var _useState35=useState(false),_useState36=_slicedToArray(_useState35,2),isFocused=_useState36[0],setFocused=_useState36[1];// box because arg can be a fn (e.g. actions) and useState calls fn's
 var _useState37=useState({value:arg}),_useState38=_slicedToArray(_useState37,2),boxedValue=_useState38[0],setBoxedValue=_useState38[1];useEffect(function(){if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);var onChange=useCallback(function(argVal){setBoxedValue({value:argVal});updateArgs(_defineProperty2({},key,argVal));return argVal;},[updateArgs,key]);var onBlur=useCallback(function(){return setFocused(false);},[]);var onFocus=useCallback(function(){return setFocused(true);},[]);if(!control||control.disable)return React__default.createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
 // row.key is a hash key and therefore a much safer choice
 var props={name:key,argType:row,value:boxedValue.value,onChange:onChange,onBlur:onBlur,onFocus:onFocus};var Control=Controls[control.type]||NoControl;return React__default.createElement(Control,Object.assign({},props,control,{controlType:control.type}));};var Name=styled.span({fontWeight:'bold'});var Required=styled.span(function(_ref175){var theme=_ref175.theme;return{color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'};});var Description=styled.div(function(_ref176){var theme=_ref176.theme;return{'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme:theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}};});var Type=styled.div(function(_ref177){var theme=_ref177.theme,hasDescription=_ref177.hasDescription;return{color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0};});var TypeWithJsDoc=styled.div(function(_ref178){var theme=_ref178.theme,hasDescription=_ref178.hasDescription;return{color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12};});var StyledTd$1=styled.td(function(_ref179){var theme=_ref179.theme,expandable=_ref179.expandable;return{paddingLeft:expandable?'40px !important':'20px !important'};});var ArgRow=function ArgRow(props){var _a;var row=props.row,updateArgs=props.updateArgs,compact=props.compact,expandable=props.expandable,initialExpandedArgs=props.initialExpandedArgs;var name=row.name,description=row.description;var table=row.table||{};var type=table.type||row.type;var defaultValue=table.defaultValue||row.defaultValue;var required=(_a=row.type)===null||_a===void 0?void 0:_a.required;var hasDescription=description!=null&&description!=='';return React__default.createElement("tr",null,React__default.createElement(StyledTd$1,{expandable:expandable},React__default.createElement(Name,null,name),required?React__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React__default.createElement("td",null,hasDescription&&React__default.createElement(Description,null,React__default.createElement(Markdown,null,description)),table.jsDocTags!=null?React__default.createElement(React__default.Fragment,null,React__default.createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default.createElement(Type,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default.createElement("td",null,React__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default.createElement("td",null,React__default.createElement(ArgControl,Object.assign({},props))):null);};var ExpanderIcon=styled(Icons)(function(_ref180){var theme=_ref180.theme;return{marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'};});var FlexWrapper=styled.span(function(_ref181){var theme=_ref181.theme;return{display:'flex',lineHeight:'20px',alignItems:'center'};});var Section=styled.td(function(_ref182){var theme=_ref182.theme;return{position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:"".concat(theme.background.app," !important"),'& ~ td':{background:"".concat(theme.background.app," !important")}};});var Subsection=styled.td(function(_ref183){var theme=_ref183.theme;return{position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content};});var StyledTd=styled.td(function(_ref184){var theme=_ref184.theme;return{position:'relative'};});var StyledTr=styled.tr(function(_ref185){var theme=_ref185.theme;return{'&:hover > td':{backgroundColor:"".concat(theme.background.hoverable," !important"),boxShadow:"".concat(theme.color.mediumlight," 0 - 1px 0 0 inset"),cursor:'row-resize'}};});var ClickIntercept=styled.button(function(){return{// reset button style

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import 'react';
-export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, a_ as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b6 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, b1 as NumberControl, X as OL, b3 as ObjectControl, b2 as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b4 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b5 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, b0 as format, aY as formatDate, aZ as formatTime, at as getStoryHref, al as interleaveSeparators, b7 as nameSpaceClassNames, a$ as parse, aW as parseDate, aX as parseTime, D as resetComponents } from './index-1adc6033.js';
+export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, a_ as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b6 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, b1 as NumberControl, X as OL, b3 as ObjectControl, b2 as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b4 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b5 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, b0 as format, aY as formatDate, aZ as formatTime, at as getStoryHref, al as interleaveSeparators, b7 as nameSpaceClassNames, a$ as parse, aW as parseDate, aX as parseTime, D as resetComponents } from './index-2a91f2bc.js';
 import '@storybook/theming';
 import '@storybook/csf';
 import 'util';

package/dist/esm/{syntaxhighlighter-21db839d.js → syntaxhighlighter-af6b50e9.js}

@@ -50,7 +50,7 @@ import "core-js/modules/es.set.js";
 import "core-js/modules/es.string.trim.js";
 import "core-js/modules/esnext.global-this.js";
 import "core-js/modules/es.object.entries.js";
-import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoizerific, b as __awaiter, S as ScrollArea, d as __rest, A as ActionBar, w as window_1 } from './index-1adc6033.js';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoizerific, b as __awaiter, S as ScrollArea, d as __rest, A as ActionBar, w as window_1 } from './index-2a91f2bc.js';
 import React__default, { useState, useCallback } from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
@@ -10197,18 +10197,11 @@ var Scroller = styled(function (_ref12) {
   position: 'relative'
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return {
-    '& code': {
-      paddingRight: theme.layoutMargin
-    }
-  };
-}, function (_ref14) {
-  var theme = _ref14.theme;
   return themedSyntax(theme);
 });
-var Pre = styled.pre(function (_ref15) {
-  var theme = _ref15.theme,
-      padded = _ref15.padded;
+var Pre = styled.pre(function (_ref14) {
+  var theme = _ref14.theme,
+      padded = _ref14.padded;
   return {
     display: 'flex',
     justifyContent: 'flex-start',
@@ -10216,10 +10209,19 @@ var Pre = styled.pre(function (_ref15) {
     padding: padded ? theme.layoutMargin : 0
   };
 });
-var Code = styled.code({
-  flex: 1,
-  paddingRight: 0,
-  opacity: 1
+/*
+We can't use `code` since PrismJS races for it.
+See https://github.com/storybookjs/storybook/issues/18090
+ */
+
+var Code = styled.div(function (_ref15) {
+  var theme = _ref15.theme;
+  return {
+    flex: 1,
+    paddingLeft: 2,
+    paddingRight: theme.layoutMargin,
+    opacity: 1
+  };
 }); // copied from @types/react-syntax-highlighter/index.d.ts
 
 var SyntaxHighlighter = function SyntaxHighlighter(_a) {

package/dist/modern/{Color-49d9e8e4.js → Color-8e98d21f.js}

@@ -1,4 +1,4 @@
-import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, d as __rest } from './index-5c5d9c15.js';
+import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, d as __rest } from './index-0619466c.js';
 import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
 import { styled } from '@storybook/theming';
 import '@storybook/csf';

package/dist/modern/{OverlayScrollbars-86f35188.js → OverlayScrollbars-a4969259.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, d as __rest } from './index-5c5d9c15.js';
+import { c as commonjsGlobal, d as __rest } from './index-0619466c.js';
 import React__default, { useRef, useEffect } from 'react';
 import '@storybook/theming';
 import '@storybook/csf';

package/dist/modern/{WithTooltip-74be8458.js → WithTooltip-069246bb.js}

@@ -1,4 +1,4 @@
-import { f as basePlacements, t as top, l as left, h as bottom, r as right, i as end, v as viewport, s as start, p as popper, j as clippingParents, k as reference, n as variationPlacements, o as placements, q as auto, u as modifierPhases, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoizerific, d as __rest, w as window_1 } from './index-5c5d9c15.js';
+import { f as basePlacements, t as top, l as left, h as bottom, r as right, i as end, v as viewport, s as start, p as popper, j as clippingParents, k as reference, n as variationPlacements, o as placements, q as auto, u as modifierPhases, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoizerific, d as __rest, w as window_1 } from './index-0619466c.js';
 import * as React from 'react';
 import React__default, { Component, useState, useCallback, useEffect } from 'react';
 import { styled, lighten, darken } from '@storybook/theming';

package/dist/modern/{formatter-e46119c9.js → formatter-0e68a4fc.js}

@@ -1,4 +1,4 @@
-import"core-js/modules/es.typed-array.set.js";import{c as commonjsGlobal,g as getDefaultExportFromCjs,m as memoizerific,e as dedent}from'./index-5c5d9c15.js';import'react';import'@storybook/theming';import'@storybook/csf';import'util';import'@storybook/client-logger';var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
+import"core-js/modules/es.typed-array.set.js";import{c as commonjsGlobal,g as getDefaultExportFromCjs,m as memoizerific,e as dedent}from'./index-0619466c.js';import'react';import'@storybook/theming';import'@storybook/csf';import'util';import'@storybook/client-logger';var parserHtml={exports:{}};(function(module,exports){!function(e,t){module.exports=t();}(commonjsGlobal,function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function t(e){var t={exports:{}};return e(t,t.exports),t.exports;}var r=t(function(e,t){function r(e){return t.$0<=e&&e<=t.$9;}/**
       	   * @license
       	   * Copyright Google Inc. All Rights Reserved.
       	   *

package/dist/modern/{index-5c5d9c15.js → index-0619466c.js}

@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
  *   background: "rgba(255,0,0,0.3)";
  * }
  */function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends$1({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
-var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-22b2e172.js'));const LazySyntaxHighlighterWithFormatter=lazy(()=>__awaiter(void 0,void 0,void 0,function*(){const[{SyntaxHighlighter},{formatter}]=yield Promise.all([import('./syntaxhighlighter-22b2e172.js'),import('./formatter-e46119c9.js')]);return{default:props=>React__default.createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}))};}));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},props.format!==false?React__default.createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
+var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-fd785d56.js'));const LazySyntaxHighlighterWithFormatter=lazy(()=>__awaiter(void 0,void 0,void 0,function*(){const[{SyntaxHighlighter},{formatter}]=yield Promise.all([import('./syntaxhighlighter-fd785d56.js'),import('./formatter-0e68a4fc.js')]);return{default:props=>React__default.createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}))};}));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},props.format!==false?React__default.createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
 fontSize:`${theme.typography.size.s2-1}px`,lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}}));var SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));const SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%',[`&:first-child${ignoreSsrWarning$1}`]:{margin:0}}));const SourceSkeleton=()=>React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
  * Syntax-highlighted source code for a component (or anything!)
  */const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=styled.code(({theme})=>({// from reset
@@ -310,7 +310,7 @@ const icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.7
 shapeRendering:'inherit',transform:'translate3d(0,0,0)'},({inline})=>inline?{display:'inline-block'}:{display:'block'});Svg.displayName='Svg';const Path=styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
 const Icons=memo(_a=>{var{icon,symbol}=_a,props=__rest(_a,["icon","symbol"]);return React__default.createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default.createElement("use",{xlinkHref:`#icon--${symbol}`}):React__default.createElement(Path,{d:icons[icon]}));});const Symbols=memo(({icons:keys=Object.keys(icons)})=>React__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React__default.createElement("symbol",{id:`icon--${key}`,key:key},React__default.createElement(Path,{d:icons[key]})))));// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 const LEFT_BUTTON=0;const isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;const cancelled=(e,cb)=>{if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};const 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}}:{});const A$1=styled.a(({theme})=>({display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.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;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return 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'}:{});const Link=_a=>{var{cancel,children,onClick,withArrow,containsIcon,className}=_a,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default.createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className:className}),React__default.createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default.createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};const DocumentWrapper=styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:'1.6',h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black},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'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'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}}));const Container$1=styled.div(({theme})=>({position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1}));const ActionButton=styled.button(({theme})=>({margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:`1px solid ${theme.appBorderColor}`,borderLeft:`1px solid ${theme.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,'&:not(:last-child)':{borderRight:`1px solid ${theme.appBorderColor}`},'& + *':{borderLeft:`1px solid ${theme.appBorderColor}`,borderRadius:0},'&:focus':{boxShadow:`${theme.color.secondary} 0 -3px 0 0 inset`,outline:'0 none'}}),({disabled})=>disabled&&{cursor:'not-allowed',opacity:0.5});ActionButton.displayName='ActionButton';const ActionBar=_a=>{var{actionItems}=_a,props=__rest(_a,["actionItems"]);return React__default.createElement(Container$1,Object.assign({},props),actionItems.map(({title,className,onClick,disabled},index)=>// eslint-disable-next-line react/no-array-index-key
-React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){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{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-86f35188.js'));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=useRef(null);const[height,setHeight]=useState(0);useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
+React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){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{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-a4969259.js'));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=useRef(null);const[height,setHeight]=useState(0);useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
 // never update this component, it will cause the iframe to refresh
 // the only exception is when the url changes, which happens when the version changes
 return nextProps.children.props.src!==this.props.children.props.src;}setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}render(){const{children}=this.props;return children;}}const Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};const 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',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?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}}),({disabled})=>disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{},({containsIcon,small})=>containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{},({theme,primary,secondary,gray})=>{let color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.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,0.2)} 0 8px 18px 0px`}}:{};},({theme,tertiary,inForm,small})=>tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.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.input.background},'&:focus':{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:'none'}}):{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(0.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:'none'},'&:active':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{const 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,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,outline,primary,secondary})=>{let color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return 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,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};});const ButtonLink=ButtonWrapper.withComponent('a');const Button$2=Object.assign(forwardRef((_a,ref)=>{var{isLink,children}=_a,props=__rest(_a,["isLink","children"]);if(isLink){return React__default.createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default.createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});const Wrapper$7=styled.label(({theme})=>({display:'flex',borderBottom:`1px solid ${theme.appBorderColor}`,margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}}));const Label$4=styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'}));const Field=_a=>{var{label,children}=_a,props=__rest(_a,["label","children"]);return React__default.createElement(Wrapper$7,Object.assign({},props),label?React__default.createElement(Label$4,null,React__default.createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=typeof document!=='undefined'?useLayoutEffect:useEffect;var useLatest=function useLatest(value){var ref=useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};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'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
@@ -326,7 +326,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
 if(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);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_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!==undefined;var libRef=useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=useRef(0);var measurementsCacheRef=useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};if(typeof document!=='undefined'){useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */forwardRef(TextareaAutosize);const TextareaAutoResize=index;const styleResets$1={// resets
 appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const styles=({theme})=>Object.assign(Object.assign({},styleResets$1),{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:0.5},'&:-webkit-autofill':{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},'::placeholder':{color:theme.color.mediumdark}});const sizes=({size})=>{switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};const alignment=({align})=>{switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};const 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 undefined:case null:default:{return{};}}};const Input$1=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});const Select=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});const Textarea=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,({height=400})=>({overflow:'visible',maxHeight:height})),{displayName:'Textarea'});const ButtonStyled=styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
 userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
-'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-74be8458.js').then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=lazy(()=>import('./WithTooltip-74be8458.js').then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=styled.span();const Links=styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const 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(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
+'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-069246bb.js').then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=lazy(()=>import('./WithTooltip-069246bb.js').then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=styled.span();const Links=styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const 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(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
 Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
 Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};var similar=Similar;var mapOrSimilar=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=similar;return new Similar();}else{return new Map();}};var MapOrSimilar=mapOrSimilar;var memoizerific=function(limit){var cache=new MapOrSimilar(process.env.FORCE_SIMILAR_INSTEAD_OF_MAP==='true'),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
 for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
@@ -469,7 +469,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
  * items. The preview also shows the source for the component
  * as a drop-down.
  */const Preview=_a=>{var{isLoading,isColumn,columns,children,withSource,withToolbar=false,isExpanded=false,additionalActions,className}=_a,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);const[expanded,setExpanded]=useState(isExpanded);const{source,actionItem}=getSource(withSource,expanded,setExpanded);const[scale,setScale]=useState(1);const previewClasses=[className].concat(['sbdocs','sbdocs-preview']);const defaultActionItems=withSource?[actionItem]:[];const[additionalActionItems,setAdditionalActionItems]=useState(additionalActions?[...additionalActions]:[]);const actionItems=[...defaultActionItems,...additionalActionItems];// @ts-ignore
-const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-22b2e172.js');createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
+const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-fd785d56.js');createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
 children.map((child,i)=>React__default.createElement("div",{key:i},child)):React__default.createElement("div",null,children))),React__default.createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};const StyledPreview=styled(Preview)(()=>({'.docs-story':{paddingTop:32,paddingBottom:40}}));const PreviewSkeleton=()=>React__default.createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default.createElement(StorySkeleton,null));/**
  * A specialized version of `_.map` for arrays without support for iteratee
  * shorthands.
@@ -2103,7 +2103,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
             ${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%, 
             ${curriedLighten$1(0.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,0.2)}`,borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}}));const RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});const RangeWrapper=styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){const match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
 (match[1]?match[1].length:0)-(// Adjust for scientific notation.
-match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-49d9e8e4.js'));const ColorControl=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default.createElement(React__default.Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
+match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-8e98d21f.js'));const ColorControl=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default.createElement(React__default.Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
 const[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);const onChange=useCallback(argVal=>{setBoxedValue({value:argVal});updateArgs({[key]:argVal});return argVal;},[updateArgs,key]);const onBlur=useCallback(()=>setFocused(false),[]);const onFocus=useCallback(()=>setFocused(true),[]);if(!control||control.disable)return React__default.createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
 // row.key is a hash key and therefore a much safer choice
 const props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus};const Control=Controls[control.type]||NoControl;return React__default.createElement(Control,Object.assign({},props,control,{controlType:control.type}));};const Name=styled.span({fontWeight:'bold'});const Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'}));const Description=styled.div(({theme})=>({'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}}));const Type=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0}));const TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12}));const StyledTd$1=styled.td(({theme,expandable})=>({paddingLeft:expandable?'40px !important':'20px !important'}));const ArgRow=props=>{var _a;const{row,updateArgs,compact,expandable,initialExpandedArgs}=props;const{name,description}=row;const table=row.table||{};const type=table.type||row.type;const defaultValue=table.defaultValue||row.defaultValue;const required=(_a=row.type)===null||_a===void 0?void 0:_a.required;const hasDescription=description!=null&&description!=='';return React__default.createElement("tr",null,React__default.createElement(StyledTd$1,{expandable:expandable},React__default.createElement(Name,null,name),required?React__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React__default.createElement("td",null,hasDescription&&React__default.createElement(Description,null,React__default.createElement(Markdown,null,description)),table.jsDocTags!=null?React__default.createElement(React__default.Fragment,null,React__default.createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default.createElement(Type,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default.createElement("td",null,React__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default.createElement("td",null,React__default.createElement(ArgControl,Object.assign({},props))):null);};const ExpanderIcon=styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'}));const FlexWrapper=styled.span(({theme})=>({display:'flex',lineHeight:'20px',alignItems:'center'}));const Section=styled.td(({theme})=>({position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:`${theme.background.app} !important`,'& ~ td':{background:`${theme.background.app} !important`}}));const Subsection=styled.td(({theme})=>({position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content}));const StyledTd=styled.td(({theme})=>({position:'relative'}));const StyledTr=styled.tr(({theme})=>({'&:hover > td':{backgroundColor:`${theme.background.hoverable} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:'row-resize'}}));const ClickIntercept=styled.button(()=>({// reset button style

package/dist/modern/index.js

@@ -1,5 +1,5 @@
 import 'react';
-export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, a_ as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b6 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, b1 as NumberControl, X as OL, b3 as ObjectControl, b2 as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b4 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b5 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, b0 as format, aY as formatDate, aZ as formatTime, at as getStoryHref, al as interleaveSeparators, b7 as nameSpaceClassNames, a$ as parse, aW as parseDate, aX as parseTime, D as resetComponents } from './index-5c5d9c15.js';
+export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, a_ as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b6 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, b1 as NumberControl, X as OL, b3 as ObjectControl, b2 as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b4 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b5 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, b0 as format, aY as formatDate, aZ as formatTime, at as getStoryHref, al as interleaveSeparators, b7 as nameSpaceClassNames, a$ as parse, aW as parseDate, aX as parseTime, D as resetComponents } from './index-0619466c.js';
 import '@storybook/theming';
 import '@storybook/csf';
 import 'util';

package/dist/modern/{syntaxhighlighter-22b2e172.js → syntaxhighlighter-fd785d56.js}

@@ -1,4 +1,4 @@
-import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoizerific, b as __awaiter, S as ScrollArea, d as __rest, A as ActionBar, w as window_1 } from './index-5c5d9c15.js';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoizerific, b as __awaiter, S as ScrollArea, d as __rest, A as ActionBar, w as window_1 } from './index-0619466c.js';
 import React__default, { useState, useCallback } from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
@@ -10120,12 +10120,6 @@ const Scroller = styled(({
   position: 'relative'
 }, ({
   theme
-}) => ({
-  '& code': {
-    paddingRight: theme.layoutMargin
-  }
-}), ({
-  theme
 }) => themedSyntax(theme));
 const Pre = styled.pre(({
   theme,
@@ -10136,11 +10130,19 @@ const Pre = styled.pre(({
   margin: 0,
   padding: padded ? theme.layoutMargin : 0
 }));
-const Code = styled.code({
+/*
+We can't use `code` since PrismJS races for it.
+See https://github.com/storybookjs/storybook/issues/18090
+ */
+
+const Code = styled.div(({
+  theme
+}) => ({
   flex: 1,
-  paddingRight: 0,
+  paddingLeft: 2,
+  paddingRight: theme.layoutMargin,
   opacity: 1
-}); // copied from @types/react-syntax-highlighter/index.d.ts
+})); // copied from @types/react-syntax-highlighter/index.d.ts
 
 const SyntaxHighlighter = _a => {
   var {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.5.0-beta.5",
+  "version": "6.5.0-beta.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.5.0-beta.5",
+    "@storybook/client-logger": "6.5.0-beta.8",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.5",
+    "@storybook/theming": "6.5.0-beta.8",
     "@types/react-syntax-highlighter": "11.0.5",
     "core-js": "^3.8.2",
     "react-syntax-highlighter": "^15.4.5",
@@ -80,6 +80,6 @@
     "access": "public"
   },
   "bundlerEntrypoint": "./src/index.ts",
-  "gitHead": "77cd38edc2aa4728c360467c5418bb2ef2d8817a",
+  "gitHead": "9b9d570d753341bfd69ae649df3c7fb3cadf11b2",
   "sbmodern": "dist/modern/index.js"
 }