@storybook/components 6.5.0-alpha.42 → 6.5.0-alpha.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-47d44c7b.js');
3
+ var index = require('./index-6505b0f4.js');
4
4
 
5
5
  var React = require('react');
6
6
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-47d44c7b.js');
3
+ var index = require('./index-6505b0f4.js');
4
4
 
5
5
  var React = require('react');
6
6
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-47d44c7b.js');
3
+ var index = require('./index-6505b0f4.js');
4
4
 
5
5
  var React = require('react');
6
6
 
@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
294
294
  * background: "rgba(255,0,0,0.3)";
295
295
  * }
296
296
  */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({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
297
- 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-360eaf97.js');}));const SyntaxHighlighter=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=theming.styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
297
+ 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-5738a93b.js');}));const SyntaxHighlighter=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=theming.styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
298
298
  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':{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%'}}));/**
299
299
  * Syntax-highlighted source code for a component (or anything!)
300
300
  */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
310
310
  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
311
311
  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
312
312
  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
313
- 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-5d789924.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 getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}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
313
+ 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-12baf8f1.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 getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}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
314
314
  // never update this component, it will cause the iframe to refresh
315
315
  return false;}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 _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=React.useLayoutEffect;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];
316
316
  // https://github.com/microsoft/TypeScript/issues/28259
@@ -325,7 +325,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
325
325
  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);};{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
326
326
  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
327
327
  userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
328
- '&: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-c525aefa.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-c525aefa.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);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){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
328
+ '&: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-24db3dd6.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-24db3dd6.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);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){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
329
329
  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)
330
330
  Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};module.exports=Similar;},{}],3:[function(_dereq_,module,exports){var MapOrSimilar=_dereq_('map-or-similar');module.exports=function(limit){var cache=new MapOrSimilar(undefined==='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
331
331
  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.
@@ -466,7 +466,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
466
466
  * items. The preview also shows the source for the component
467
467
  * as a drop-down.
468
468
  */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
469
- 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-360eaf97.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
469
+ 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-5738a93b.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
470
470
  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));/**
471
471
  * A specialized version of `_.map` for arrays without support for iteratee
472
472
  * shorthands.
@@ -2100,7 +2100,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
2100
2100
  ${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%,
2101
2101
  ${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.
2102
2102
  (match[1]?match[1].length:0)-(// Adjust for scientific notation.
2103
- 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-2b2a4f31.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
2103
+ 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-c3026b71.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
2104
2104
  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.
2105
2105
  // row.key is a hash key and therefore a much safer choice
2106
2106
  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 CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
6
6
 
7
7
  require('react');
8
8
 
9
- var index = require('./index-47d44c7b.js');
9
+ var index = require('./index-6505b0f4.js');
10
10
 
11
11
  require('@storybook/theming');
12
12
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-47d44c7b.js');
3
+ var index = require('./index-6505b0f4.js');
4
4
 
5
5
  var React = require('react');
6
6
 
@@ -47,8 +47,8 @@ function jsx(Prism) {
47
47
  spread = re(spread).source;
48
48
  Prism.languages.jsx = Prism.languages.extend('markup', javascript);
49
49
  Prism.languages.jsx.tag.pattern = re(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source);
50
- Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
51
- Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/i;
50
+ Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/;
51
+ Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
52
52
  Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
53
53
  Prism.languages.jsx.tag.inside['comment'] = javascript['comment'];
54
54
  Prism.languages.insertBefore('inside', 'attr-name', {
@@ -61,14 +61,14 @@ function jsx(Prism) {
61
61
  script: {
62
62
  // Allow for two levels of nesting
63
63
  pattern: re(/=<BRACES>/.source),
64
+ alias: 'language-javascript',
64
65
  inside: {
65
66
  'script-punctuation': {
66
67
  pattern: /^=(?=\{)/,
67
68
  alias: 'punctuation'
68
69
  },
69
70
  rest: Prism.languages.jsx
70
- },
71
- alias: 'language-javascript'
71
+ }
72
72
  }
73
73
  }, Prism.languages.jsx.tag); // The following will handle plain text inside tags
74
74
 
@@ -225,7 +225,7 @@ function bash(Prism) {
225
225
  }
226
226
  }, /\$(?:\w+|[#?*!@$])/],
227
227
  // Escape sequences from echo and printf's manuals, and escaped quotes.
228
- entity: /\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|x[0-9a-fA-F]{1,2}|u[0-9a-fA-F]{4}|U[0-9a-fA-F]{8})/
228
+ entity: /\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/
229
229
  };
230
230
  Prism.languages.bash = {
231
231
  shebang: {
@@ -311,22 +311,22 @@ function bash(Prism) {
311
311
  },
312
312
  variable: insideString.variable,
313
313
  function: {
314
- pattern: /(^|[\s;|&]|[<>]\()(?:add|apropos|apt|aptitude|apt-cache|apt-get|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,
314
+ pattern: /(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,
315
315
  lookbehind: true
316
316
  },
317
317
  keyword: {
318
- pattern: /(^|[\s;|&]|[<>]\()(?:if|then|else|elif|fi|for|while|in|case|esac|function|select|do|done|until)(?=$|[)\s;|&])/,
318
+ pattern: /(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,
319
319
  lookbehind: true
320
320
  },
321
321
  // https://www.gnu.org/software/bash/manual/html_node/Shell-Builtin-Commands.html
322
322
  builtin: {
323
- pattern: /(^|[\s;|&]|[<>]\()(?:\.|:|break|cd|continue|eval|exec|exit|export|getopts|hash|pwd|readonly|return|shift|test|times|trap|umask|unset|alias|bind|builtin|caller|command|declare|echo|enable|help|let|local|logout|mapfile|printf|read|readarray|source|type|typeset|ulimit|unalias|set|shopt)(?=$|[)\s;|&])/,
323
+ pattern: /(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,
324
324
  lookbehind: true,
325
325
  // Alias added to make those easier to distinguish from strings.
326
326
  alias: 'class-name'
327
327
  },
328
328
  boolean: {
329
- pattern: /(^|[\s;|&]|[<>]\()(?:true|false)(?=$|[)\s;|&])/,
329
+ pattern: /(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,
330
330
  lookbehind: true
331
331
  },
332
332
  'file-descriptor': {
@@ -456,7 +456,7 @@ function jsExtras(Prism) {
456
456
  'known-class-name': [{
457
457
  // standard built-ins
458
458
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
459
- pattern: /\b(?:(?:(?:Uint|Int)(?:8|16|32)|Uint8Clamped|Float(?:32|64))?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|(?:Weak)?(?:Set|Map)|WebAssembly)\b/,
459
+ pattern: /\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,
460
460
  alias: 'class-name'
461
461
  }, {
462
462
  // errors
@@ -496,7 +496,7 @@ function jsExtras(Prism) {
496
496
  pattern: /\b(?:as|default|export|from|import)\b/,
497
497
  alias: 'module'
498
498
  }, {
499
- pattern: /\b(?:await|break|catch|continue|do|else|for|finally|if|return|switch|throw|try|while|yield)\b/,
499
+ pattern: /\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,
500
500
  alias: 'control-flow'
501
501
  }, {
502
502
  pattern: /\bnull\b/,
@@ -526,7 +526,7 @@ function jsExtras(Prism) {
526
526
  },
527
527
  dom: {
528
528
  // this contains only a few commonly used DOM variables
529
- pattern: /\b(?:document|location|navigator|performance|(?:local|session)Storage|window)\b/,
529
+ pattern: /\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,
530
530
  alias: 'variable'
531
531
  },
532
532
  console: {
@@ -580,7 +580,7 @@ function json(Prism) {
580
580
  number: /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
581
581
  punctuation: /[{}[\],]/,
582
582
  operator: /:/,
583
- boolean: /\b(?:true|false)\b/,
583
+ boolean: /\b(?:false|true)\b/,
584
584
  null: {
585
585
  pattern: /\bnull\b/,
586
586
  alias: 'keyword'
@@ -614,18 +614,18 @@ function graphql(Prism) {
614
614
  greedy: true
615
615
  },
616
616
  number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
617
- boolean: /\b(?:true|false)\b/,
617
+ boolean: /\b(?:false|true)\b/,
618
618
  variable: /\$[a-z_]\w*/i,
619
619
  directive: {
620
620
  pattern: /@[a-z_]\w*/i,
621
621
  alias: 'function'
622
622
  },
623
623
  'attr-name': {
624
- pattern: /[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
624
+ pattern: /\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
625
625
  greedy: true
626
626
  },
627
627
  'atom-input': {
628
- pattern: /[A-Z]\w*Input(?=!?.*$)/m,
628
+ pattern: /\b[A-Z]\w*Input\b/,
629
629
  alias: 'class-name'
630
630
  },
631
631
  scalar: /\b(?:Boolean|Float|ID|Int|String)\b/,
@@ -1028,7 +1028,7 @@ function markdown(Prism) {
1028
1028
  greedy: true,
1029
1029
  inside: {
1030
1030
  punctuation: /^---|---$/,
1031
- 'font-matter': {
1031
+ 'front-matter': {
1032
1032
  pattern: /\S+(?:\s+\S+)*/,
1033
1033
  alias: ['yaml', 'language-yaml'],
1034
1034
  inside: Prism.languages.yaml
@@ -1466,7 +1466,7 @@ function yaml(Prism) {
1466
1466
  alias: 'number'
1467
1467
  },
1468
1468
  boolean: {
1469
- pattern: createValuePattern(/true|false/.source, 'i'),
1469
+ pattern: createValuePattern(/false|true/.source, 'i'),
1470
1470
  lookbehind: true,
1471
1471
  alias: 'important'
1472
1472
  },
@@ -1507,14 +1507,15 @@ function typescript(Prism) {
1507
1507
  inside: null // see below
1508
1508
 
1509
1509
  },
1510
- builtin: /\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/
1510
+ builtin: /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/
1511
1511
  }); // The keywords TypeScript adds to JavaScript
1512
1512
 
1513
- Prism.languages.typescript.keyword.push(/\b(?:abstract|as|declare|implements|is|keyof|readonly|require)\b/, // keywords that have to be followed by an identifier
1513
+ Prism.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/, // keywords that have to be followed by an identifier
1514
1514
  /\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/, // This is for `import type *, {}`
1515
1515
  /\btype\b(?=\s*(?:[\{*]|$))/); // doesn't work with TS because TS is too complex
1516
1516
 
1517
- delete Prism.languages.typescript['parameter']; // a version of typescript specifically for highlighting types
1517
+ delete Prism.languages.typescript['parameter'];
1518
+ delete Prism.languages.typescript['literal-property']; // a version of typescript specifically for highlighting types
1518
1519
 
1519
1520
  var typeInside = Prism.languages.extend('typescript', {});
1520
1521
  delete typeInside['class-name'];
@@ -1562,7 +1563,10 @@ function tsx(Prism) {
1562
1563
 
1563
1564
  (function (Prism) {
1564
1565
  var typescript = Prism.util.clone(Prism.languages.typescript);
1565
- Prism.languages.tsx = Prism.languages.extend('jsx', typescript); // This will prevent collisions between TSX tags and TS generic types.
1566
+ Prism.languages.tsx = Prism.languages.extend('jsx', typescript); // doesn't work with TS because TS is too complex
1567
+
1568
+ delete Prism.languages.tsx['parameter'];
1569
+ delete Prism.languages.tsx['literal-property']; // This will prevent collisions between TSX tags and TS generic types.
1566
1570
  // Idea by https://github.com/karlhorky
1567
1571
  // Discussion: https://github.com/PrismJS/prism/issues/2594#issuecomment-710666928
1568
1572
 
@@ -3956,7 +3960,7 @@ var prismCore = {
3956
3960
 
3957
3961
  var Prism = function (_self) {
3958
3962
  // Private helper vars
3959
- var lang = /\blang(?:uage)?-([\w-]+)\b/i;
3963
+ var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
3960
3964
  var uniqueId = 0; // The grammar object for plaintext
3961
3965
 
3962
3966
  var plainTextGrammar = {};
@@ -3983,6 +3987,28 @@ var prismCore = {
3983
3987
  * @public
3984
3988
  */
3985
3989
  manual: _self.Prism && _self.Prism.manual,
3990
+
3991
+ /**
3992
+ * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
3993
+ * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
3994
+ * own worker, you don't want it to do this.
3995
+ *
3996
+ * By setting this value to `true`, Prism will not add its own listeners to the worker.
3997
+ *
3998
+ * You obviously have to change this value before Prism executes. To do this, you can add an
3999
+ * empty Prism object into the global scope before loading the Prism script like this:
4000
+ *
4001
+ * ```js
4002
+ * window.Prism = window.Prism || {};
4003
+ * Prism.disableWorkerMessageHandler = true;
4004
+ * // Load Prism's script
4005
+ * ```
4006
+ *
4007
+ * @default false
4008
+ * @type {boolean}
4009
+ * @memberof Prism
4010
+ * @public
4011
+ */
3986
4012
  disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
3987
4013
 
3988
4014
  /**
@@ -4115,17 +4141,35 @@ var prismCore = {
4115
4141
  * @returns {string}
4116
4142
  */
4117
4143
  getLanguage: function (element) {
4118
- while (element && !lang.test(element.className)) {
4119
- element = element.parentElement;
4120
- }
4144
+ while (element) {
4145
+ var m = lang.exec(element.className);
4146
+
4147
+ if (m) {
4148
+ return m[1].toLowerCase();
4149
+ }
4121
4150
 
4122
- if (element) {
4123
- return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
4151
+ element = element.parentElement;
4124
4152
  }
4125
4153
 
4126
4154
  return 'none';
4127
4155
  },
4128
4156
 
4157
+ /**
4158
+ * Sets the Prism `language-xxxx` class of the given element.
4159
+ *
4160
+ * @param {Element} element
4161
+ * @param {string} language
4162
+ * @returns {void}
4163
+ */
4164
+ setLanguage: function (element, language) {
4165
+ // remove all `language-xxxx` classes
4166
+ // (this might leave behind a leading space)
4167
+ element.className = element.className.replace(RegExp(lang, 'gi'), ''); // add the new `language-xxxx` class
4168
+ // (using `classList` will automatically clean up spaces for us)
4169
+
4170
+ element.classList.add('language-' + language);
4171
+ },
4172
+
4129
4173
  /**
4130
4174
  * Returns the script element that is currently executing.
4131
4175
  *
@@ -4489,12 +4533,13 @@ var prismCore = {
4489
4533
 
4490
4534
  var grammar = _.languages[language]; // Set language on the element, if not present
4491
4535
 
4492
- element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; // Set language on the parent, for styling
4536
+ _.util.setLanguage(element, language); // Set language on the parent, for styling
4537
+
4493
4538
 
4494
4539
  var parent = element.parentElement;
4495
4540
 
4496
4541
  if (parent && parent.nodeName.toLowerCase() === 'pre') {
4497
- parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
4542
+ _.util.setLanguage(parent, language);
4498
4543
  }
4499
4544
 
4500
4545
  var code = element.textContent;
@@ -4588,6 +4633,10 @@ var prismCore = {
4588
4633
 
4589
4634
  _.hooks.run('before-tokenize', env);
4590
4635
 
4636
+ if (!env.grammar) {
4637
+ throw new Error('The language "' + env.language + '" has no grammar.');
4638
+ }
4639
+
4591
4640
  env.tokens = _.tokenize(env.code, env.grammar);
4592
4641
 
4593
4642
  _.hooks.run('after-tokenize', env);
@@ -4898,7 +4947,7 @@ var prismCore = {
4898
4947
  if (greedy) {
4899
4948
  match = matchPattern(pattern, pos, text, lookbehind);
4900
4949
 
4901
- if (!match) {
4950
+ if (!match || match.index >= text.length) {
4902
4951
  break;
4903
4952
  }
4904
4953
 
@@ -5229,14 +5278,14 @@ function clike$1(Prism) {
5229
5278
  greedy: true
5230
5279
  },
5231
5280
  'class-name': {
5232
- pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
5281
+ pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
5233
5282
  lookbehind: true,
5234
5283
  inside: {
5235
5284
  punctuation: /[.\\]/
5236
5285
  }
5237
5286
  },
5238
- keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
5239
- boolean: /\b(?:true|false)\b/,
5287
+ keyword: /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
5288
+ boolean: /\b(?:false|true)\b/,
5240
5289
  function: /\b\w+(?=\()/,
5241
5290
  number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
5242
5291
  operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
@@ -5251,7 +5300,7 @@ javascript.aliases = ['js'];
5251
5300
  function javascript(Prism) {
5252
5301
  Prism.languages.javascript = Prism.languages.extend('clike', {
5253
5302
  'class-name': [Prism.languages.clike['class-name'], {
5254
- pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,
5303
+ pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
5255
5304
  lookbehind: true
5256
5305
  }],
5257
5306
  keyword: [{
@@ -5263,10 +5312,19 @@ function javascript(Prism) {
5263
5312
  }],
5264
5313
  // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
5265
5314
  function: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
5266
- number: /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
5315
+ number: {
5316
+ pattern: RegExp(/(^|[^\w$])/.source + '(?:' + ( // constant
5317
+ /NaN|Infinity/.source + '|' + // binary integer
5318
+ /0[bB][01]+(?:_[01]+)*n?/.source + '|' + // octal integer
5319
+ /0[oO][0-7]+(?:_[0-7]+)*n?/.source + '|' + // hexadecimal integer
5320
+ /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + '|' + // decimal bigint
5321
+ /\d+(?:_\d+)*n/.source + '|' + // decimal number (integer or float) but no bigint
5322
+ /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ')' + /(?![\w$])/.source),
5323
+ lookbehind: true
5324
+ },
5267
5325
  operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
5268
5326
  });
5269
- Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;
5327
+ Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
5270
5328
  Prism.languages.insertBefore('javascript', 'keyword', {
5271
5329
  regex: {
5272
5330
  // eslint-disable-next-line regexp/no-dupe-characters-character-class
@@ -5335,6 +5393,19 @@ function javascript(Prism) {
5335
5393
  },
5336
5394
  string: /[\s\S]+/
5337
5395
  }
5396
+ },
5397
+ 'string-property': {
5398
+ pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
5399
+ lookbehind: true,
5400
+ greedy: true,
5401
+ alias: 'property'
5402
+ }
5403
+ });
5404
+ Prism.languages.insertBefore('javascript', 'operator', {
5405
+ 'literal-property': {
5406
+ pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
5407
+ lookbehind: true,
5408
+ alias: 'property'
5338
5409
  }
5339
5410
  });
5340
5411
 
@@ -42,7 +42,7 @@ import "core-js/modules/es.symbol.js";
42
42
  import "core-js/modules/es.symbol.description.js";
43
43
  import "core-js/modules/es.symbol.iterator.js";
44
44
  import "core-js/modules/es.array.from.js";
45
- 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, e as __rest } from './index-37675b63.js';
45
+ 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, e as __rest } from './index-be4edbbc.js';
46
46
  import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
47
47
  import { styled } from '@storybook/theming';
48
48
  import '@storybook/csf';