@storybook/components 6.5.9-alpha.1 → 6.5.9-alpha.2

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.
Files changed (22) hide show
  1. package/dist/cjs/{Color-d3116a31.js → Color-a62ba7e9.js} +3 -1
  2. package/dist/cjs/{OverlayScrollbars-b655a091.js → OverlayScrollbars-c574dc71.js} +3 -1
  3. package/dist/cjs/{WithTooltip-aa7ec521.js → WithTooltip-f49e8812.js} +6 -2
  4. package/dist/cjs/{formatter-42139f42.js → formatter-e9350ac6.js} +2 -2
  5. package/dist/cjs/{index-82acc4b4.js → index-967d55af.js} +9 -22
  6. package/dist/cjs/index.js +3 -1
  7. package/dist/cjs/{syntaxhighlighter-3f6db113.js → syntaxhighlighter-9522fde9.js} +6 -2
  8. package/dist/esm/{Color-e9687cd5.js → Color-3c22bb81.js} +2 -1
  9. package/dist/esm/{OverlayScrollbars-d54f9566.js → OverlayScrollbars-26c4a78d.js} +2 -1
  10. package/dist/esm/{WithTooltip-5d9955be.js → WithTooltip-508b8277.js} +3 -2
  11. package/dist/esm/{formatter-c2d2643c.js → formatter-9dc562d4.js} +2 -2
  12. package/dist/esm/{index-f6d446d8.js → index-b45716e8.js} +9 -22
  13. package/dist/esm/index.js +2 -1
  14. package/dist/esm/{syntaxhighlighter-75381027.js → syntaxhighlighter-82dea71a.js} +3 -2
  15. package/dist/modern/{Color-31c3091f.js → Color-f9ce6f57.js} +2 -1
  16. package/dist/modern/{OverlayScrollbars-0d0d9ac6.js → OverlayScrollbars-119b80c2.js} +2 -1
  17. package/dist/modern/{WithTooltip-c478b6c7.js → WithTooltip-040f3a83.js} +3 -2
  18. package/dist/modern/{formatter-781ca345.js → formatter-12a1a8d1.js} +2 -2
  19. package/dist/modern/{index-4e034b71.js → index-9ef3b84b.js} +9 -22
  20. package/dist/modern/index.js +2 -1
  21. package/dist/modern/{syntaxhighlighter-848db87b.js → syntaxhighlighter-5c1fdb3d.js} +3 -2
  22. package/package.json +5 -5
@@ -1,4 +1,4 @@
1
- 'use strict';var React=require('react');var theming=require('@storybook/theming');var csf=require('@storybook/csf');var qs=require('qs');var clientLogger=require('@storybook/client-logger');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e};}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var qs__default=/*#__PURE__*/_interopDefaultLegacy(qs);/*! *****************************************************************************
1
+ 'use strict';var React=require('react');var theming=require('@storybook/theming');var memoize$2=require('memoizerific');var csf=require('@storybook/csf');var qs=require('qs');var clientLogger=require('@storybook/client-logger');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e};}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var memoize__default=/*#__PURE__*/_interopDefaultLegacy(memoize$2);var qs__default=/*#__PURE__*/_interopDefaultLegacy(qs);/*! *****************************************************************************
2
2
  Copyright (c) Microsoft Corporation.
3
3
 
4
4
  Permission to use, copy, modify, and/or distribute this software for any
@@ -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$1({},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-3f6db113.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-3f6db113.js');}),Promise.resolve().then(function(){return require('./formatter-42139f42.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
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-9522fde9.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-9522fde9.js');}),Promise.resolve().then(function(){return require('./formatter-e9350ac6.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
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`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child`]:{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-b655a091.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
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`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child`]:{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-c574dc71.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
314
314
  // never update this component, it will cause the iframe to refresh
315
315
  // the only exception is when the url changes, which happens when the version changes
316
316
  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,21 +326,8 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
326
326
  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
327
327
  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
328
328
  userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
329
- '&: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-aa7ec521.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-aa7ec521.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
330
- 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)
331
- 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
332
- 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.
333
- // if all arguments up to the second-last have been found, this will potentially be a cache hit (determined later)
334
- if(currentCache.has(arguments[i])){currentCache=currentCache.get(arguments[i]);continue;}isMemoized=false;// make maps until last value
335
- newMap=new MapOrSimilar(process.env.FORCE_SIMILAR_INSTEAD_OF_MAP==='true');currentCache.set(arguments[i],newMap);currentCache=newMap;}// we are at the last arg, check if it is really memoized
336
- if(isMemoized){if(currentCache.has(arguments[argsLengthMinusOne])){fnResult=currentCache.get(arguments[argsLengthMinusOne]);}else{isMemoized=false;}}// if the result wasn't memoized, compute it and cache it
337
- if(!isMemoized){fnResult=fn.apply(null,arguments);currentCache.set(arguments[argsLengthMinusOne],fnResult);}// if there is a cache limit, purge any extra results
338
- if(limit>0){lruPath[argsLengthMinusOne]={cacheItem:currentCache,arg:arguments[argsLengthMinusOne]};if(isMemoized){moveToMostRecentLru(lru,lruPath);}else{lru.push(lruPath);}if(lru.length>limit){removeCachedResult(lru.shift());}}memoizerific.wasMemoized=isMemoized;memoizerific.numArgs=argsLengthMinusOne+1;return fnResult;};memoizerific.limit=limit;memoizerific.wasMemoized=false;memoizerific.cache=cache;memoizerific.lru=lru;return memoizerific;};};// move current args to most recent position
339
- function moveToMostRecentLru(lru,lruPath){var lruLen=lru.length,lruPathLen=lruPath.length,isMatch,i,ii;for(i=0;i<lruLen;i++){isMatch=true;for(ii=0;ii<lruPathLen;ii++){if(!isEqual(lru[i][ii].arg,lruPath[ii].arg)){isMatch=false;break;}}if(isMatch){break;}}lru.push(lru.splice(i,1)[0]);}// remove least recently used cache item and all dead branches
340
- function removeCachedResult(removedLru){var removedLruLen=removedLru.length,currentLru=removedLru[removedLruLen-1],tmp,i;currentLru.cacheItem.delete(currentLru.arg);// walk down the tree removing dead branches (size 0) along the way
341
- for(i=removedLruLen-2;i>=0;i--){currentLru=removedLru[i];tmp=currentLru.cacheItem.get(currentLru.arg);if(!tmp||!tmp.size){currentLru.cacheItem.delete(currentLru.arg);}else{break;}}}// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
342
- function isEqual(val1,val2){return val1===val2||val1!==val1&&val2!==val2;}const Title$1=theming.styled(_a=>{var rest=__rest(_a,["active","loading","disabled"]);return React__default["default"].createElement("span",Object.assign({},rest));})(({theme})=>({color:theme.color.defaultText,// Previously was theme.typography.weight.normal but this weight does not exists in Theme
343
- fontWeight:theme.typography.weight.regular}),({active,theme})=>active?{color:theme.color.primary,fontWeight:theme.typography.weight.bold}:{},({loading,theme})=>loading?Object.assign({display:'inline-block',flex:'none'},theme.animation.inlineGlow):{},({disabled,theme})=>disabled?{color:curriedTransparentize$1(0.7,theme.color.defaultText)}:{});const Right=theming.styled.span({'& svg':{transition:'all 200ms ease-out',opacity:0,height:12,width:12,margin:'3px 0',verticalAlign:'top'},'& path':{fill:'inherit'}},({active,theme})=>active?{'& svg':{opacity:1},'& path':{fill:theme.color.primary}}:{});const Center=theming.styled.span({flex:1,textAlign:'left',display:'inline-flex','& > * + *':{paddingLeft:10}});const CenterText=theming.styled.span({flex:1,textAlign:'center'},({active,theme})=>active?{color:theme.color.primary}:{},({theme,disabled})=>disabled?{color:theme.color.mediumdark}:{});const Left=theming.styled.span(({active,theme})=>active?{'& svg':{opacity:1},'& path':{fill:theme.color.primary}}:{});const Item$3=theming.styled.a(({theme})=>({fontSize:theme.typography.size.s1,transition:'all 150ms ease-out',color:curriedTransparentize$1(0.5,theme.color.defaultText),textDecoration:'none',cursor:'pointer',justifyContent:'space-between',lineHeight:'18px',padding:'7px 15px',display:'flex',alignItems:'center','& > * + *':{paddingLeft:10},'&:hover':{background:theme.background.hoverable},'&:hover svg':{opacity:1}}),({disabled})=>disabled?{cursor:'not-allowed'}:{});const getItemProps=memoizerific(100)((onClick,href,LinkWrapper)=>{const result={};if(onClick){Object.assign(result,{onClick});}if(href){Object.assign(result,{href});}if(LinkWrapper&&href){Object.assign(result,{to:href,as:LinkWrapper});}return result;});const ListItem=_a=>{var{loading,left,title,center,right,active,disabled,href,onClick,LinkWrapper}=_a,rest=__rest(_a,["loading","left","title","center","right","active","disabled","href","onClick","LinkWrapper"]);const itemProps=getItemProps(onClick,href,LinkWrapper);const commonProps={active,disabled};return React__default["default"].createElement(Item$3,Object.assign({},commonProps,rest,itemProps),left&&React__default["default"].createElement(Left,Object.assign({},commonProps),left),title||center?React__default["default"].createElement(Center,null,title&&React__default["default"].createElement(Title$1,Object.assign({},commonProps,{loading:loading}),title),center&&React__default["default"].createElement(CenterText,Object.assign({},commonProps),center)):null,right&&React__default["default"].createElement(Right,Object.assign({},commonProps),right));};ListItem.defaultProps={loading:false,left:null,title:React__default["default"].createElement("span",null,"Loading state"),center:null,right:null,active:false,disabled:false,href:null,LinkWrapper:null,onClick:null};const List$2=theming.styled.div({minWidth:180,overflow:'hidden',overflowY:'auto',maxHeight:13.5*32},({theme})=>({borderRadius:theme.appBorderRadius*2}));const Item$2=props=>{const{LinkWrapper,onClick:onClickFromProps}=props,rest=__rest(props,["LinkWrapper","onClick"]);const{title,href,active}=rest;const onClick=React.useCallback(event=>{onClickFromProps(event,rest);},[onClickFromProps]);const hasOnClick=!!onClickFromProps;return React__default["default"].createElement(ListItem,Object.assign({title:title,active:active,href:href,LinkWrapper:LinkWrapper},rest,hasOnClick?{onClick}:{}));};const TooltipLinkList=({links,LinkWrapper})=>React__default["default"].createElement(List$2,null,links.map(_a=>{var{isGatsby}=_a,p=__rest(_a,["isGatsby"]);return React__default["default"].createElement(Item$2,Object.assign({key:p.id,LinkWrapper:isGatsby?LinkWrapper:null},p));}));TooltipLinkList.defaultProps={LinkWrapper:ListItem.defaultProps.LinkWrapper};const Side=theming.styled.div({display:'flex',whiteSpace:'nowrap',flexBasis:'auto',flexShrink:0,marginLeft:3,marginRight:3},({left})=>left?{'& > *':{marginLeft:4}}:{},({right})=>right?{marginLeft:30,'& > *':{marginRight:4}}:{});Side.displayName='Side';const Bar$1=theming.styled(({children,className})=>React__default["default"].createElement(ScrollArea,{horizontal:true,vertical:false,className:className},children))(({theme})=>({color:theme.barTextColor,width:'100%',height:40,flexShrink:0,overflow:'auto',overflowY:'hidden'}),({theme,border})=>border?{boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.barBg}:{});Bar$1.displayName='Bar';const BarInner=theming.styled.div(({bgColor})=>({display:'flex',justifyContent:'space-between',position:'relative',flexWrap:'nowrap',flexShrink:0,height:40,backgroundColor:bgColor||''}));const FlexBar=_a=>{var{children,backgroundColor}=_a,rest=__rest(_a,["children","backgroundColor"]);const[left,right]=React.Children.toArray(children);return React__default["default"].createElement(Bar$1,Object.assign({},rest),React__default["default"].createElement(BarInner,{bgColor:backgroundColor},React__default["default"].createElement(Side,{left:true},left),right?React__default["default"].createElement(Side,{right:true},right):null));};FlexBar.displayName='FlexBar';var top='top';var bottom='bottom';var right='right';var left='left';var auto='auto';var basePlacements=[top,bottom,right,left];var start='start';var end='end';var clippingParents='clippingParents';var viewport='viewport';var popper='popper';var reference='reference';var variationPlacements=/*#__PURE__*/basePlacements.reduce(function(acc,placement){return acc.concat([placement+"-"+start,placement+"-"+end]);},[]);var placements=/*#__PURE__*/[].concat(basePlacements,[auto]).reduce(function(acc,placement){return acc.concat([placement,placement+"-"+start,placement+"-"+end]);},[]);// modifiers that need to read the DOM
329
+ '&: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-f49e8812.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-f49e8812.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);};const Title$1=theming.styled(_a=>{var rest=__rest(_a,["active","loading","disabled"]);return React__default["default"].createElement("span",Object.assign({},rest));})(({theme})=>({color:theme.color.defaultText,// Previously was theme.typography.weight.normal but this weight does not exists in Theme
330
+ fontWeight:theme.typography.weight.regular}),({active,theme})=>active?{color:theme.color.primary,fontWeight:theme.typography.weight.bold}:{},({loading,theme})=>loading?Object.assign({display:'inline-block',flex:'none'},theme.animation.inlineGlow):{},({disabled,theme})=>disabled?{color:curriedTransparentize$1(0.7,theme.color.defaultText)}:{});const Right=theming.styled.span({'& svg':{transition:'all 200ms ease-out',opacity:0,height:12,width:12,margin:'3px 0',verticalAlign:'top'},'& path':{fill:'inherit'}},({active,theme})=>active?{'& svg':{opacity:1},'& path':{fill:theme.color.primary}}:{});const Center=theming.styled.span({flex:1,textAlign:'left',display:'inline-flex','& > * + *':{paddingLeft:10}});const CenterText=theming.styled.span({flex:1,textAlign:'center'},({active,theme})=>active?{color:theme.color.primary}:{},({theme,disabled})=>disabled?{color:theme.color.mediumdark}:{});const Left=theming.styled.span(({active,theme})=>active?{'& svg':{opacity:1},'& path':{fill:theme.color.primary}}:{});const Item$3=theming.styled.a(({theme})=>({fontSize:theme.typography.size.s1,transition:'all 150ms ease-out',color:curriedTransparentize$1(0.5,theme.color.defaultText),textDecoration:'none',cursor:'pointer',justifyContent:'space-between',lineHeight:'18px',padding:'7px 15px',display:'flex',alignItems:'center','& > * + *':{paddingLeft:10},'&:hover':{background:theme.background.hoverable},'&:hover svg':{opacity:1}}),({disabled})=>disabled?{cursor:'not-allowed'}:{});const getItemProps=memoize__default["default"](100)((onClick,href,LinkWrapper)=>{const result={};if(onClick){Object.assign(result,{onClick});}if(href){Object.assign(result,{href});}if(LinkWrapper&&href){Object.assign(result,{to:href,as:LinkWrapper});}return result;});const ListItem=_a=>{var{loading,left,title,center,right,active,disabled,href,onClick,LinkWrapper}=_a,rest=__rest(_a,["loading","left","title","center","right","active","disabled","href","onClick","LinkWrapper"]);const itemProps=getItemProps(onClick,href,LinkWrapper);const commonProps={active,disabled};return React__default["default"].createElement(Item$3,Object.assign({},commonProps,rest,itemProps),left&&React__default["default"].createElement(Left,Object.assign({},commonProps),left),title||center?React__default["default"].createElement(Center,null,title&&React__default["default"].createElement(Title$1,Object.assign({},commonProps,{loading:loading}),title),center&&React__default["default"].createElement(CenterText,Object.assign({},commonProps),center)):null,right&&React__default["default"].createElement(Right,Object.assign({},commonProps),right));};ListItem.defaultProps={loading:false,left:null,title:React__default["default"].createElement("span",null,"Loading state"),center:null,right:null,active:false,disabled:false,href:null,LinkWrapper:null,onClick:null};const List$2=theming.styled.div({minWidth:180,overflow:'hidden',overflowY:'auto',maxHeight:13.5*32},({theme})=>({borderRadius:theme.appBorderRadius*2}));const Item$2=props=>{const{LinkWrapper,onClick:onClickFromProps}=props,rest=__rest(props,["LinkWrapper","onClick"]);const{title,href,active}=rest;const onClick=React.useCallback(event=>{onClickFromProps(event,rest);},[onClickFromProps]);const hasOnClick=!!onClickFromProps;return React__default["default"].createElement(ListItem,Object.assign({title:title,active:active,href:href,LinkWrapper:LinkWrapper},rest,hasOnClick?{onClick}:{}));};const TooltipLinkList=({links,LinkWrapper})=>React__default["default"].createElement(List$2,null,links.map(_a=>{var{isGatsby}=_a,p=__rest(_a,["isGatsby"]);return React__default["default"].createElement(Item$2,Object.assign({key:p.id,LinkWrapper:isGatsby?LinkWrapper:null},p));}));TooltipLinkList.defaultProps={LinkWrapper:ListItem.defaultProps.LinkWrapper};const Side=theming.styled.div({display:'flex',whiteSpace:'nowrap',flexBasis:'auto',flexShrink:0,marginLeft:3,marginRight:3},({left})=>left?{'& > *':{marginLeft:4}}:{},({right})=>right?{marginLeft:30,'& > *':{marginRight:4}}:{});Side.displayName='Side';const Bar$1=theming.styled(({children,className})=>React__default["default"].createElement(ScrollArea,{horizontal:true,vertical:false,className:className},children))(({theme})=>({color:theme.barTextColor,width:'100%',height:40,flexShrink:0,overflow:'auto',overflowY:'hidden'}),({theme,border})=>border?{boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.barBg}:{});Bar$1.displayName='Bar';const BarInner=theming.styled.div(({bgColor})=>({display:'flex',justifyContent:'space-between',position:'relative',flexWrap:'nowrap',flexShrink:0,height:40,backgroundColor:bgColor||''}));const FlexBar=_a=>{var{children,backgroundColor}=_a,rest=__rest(_a,["children","backgroundColor"]);const[left,right]=React.Children.toArray(children);return React__default["default"].createElement(Bar$1,Object.assign({},rest),React__default["default"].createElement(BarInner,{bgColor:backgroundColor},React__default["default"].createElement(Side,{left:true},left),right?React__default["default"].createElement(Side,{right:true},right):null));};FlexBar.displayName='FlexBar';var top='top';var bottom='bottom';var right='right';var left='left';var auto='auto';var basePlacements=[top,bottom,right,left];var start='start';var end='end';var clippingParents='clippingParents';var viewport='viewport';var popper='popper';var reference='reference';var variationPlacements=/*#__PURE__*/basePlacements.reduce(function(acc,placement){return acc.concat([placement+"-"+start,placement+"-"+end]);},[]);var placements=/*#__PURE__*/[].concat(basePlacements,[auto]).reduce(function(acc,placement){return acc.concat([placement,placement+"-"+start,placement+"-"+end]);},[]);// modifiers that need to read the DOM
344
331
  var beforeRead='beforeRead';var read='read';var afterRead='afterRead';// pure-logic modifiers
345
332
  var beforeMain='beforeMain';var main='main';var afterMain='afterMain';// modifier with the purpose to write to the DOM (or write into a framework state)
346
333
  var beforeWrite='beforeWrite';var write='write';var afterWrite='afterWrite';var modifierPhases=[beforeRead,read,afterRead,beforeMain,main,afterMain,beforeWrite,write,afterWrite];const ButtonOrLink=_a=>{var{children}=_a,restProps=__rest(_a,["children"]);return restProps.href!=null?React__default["default"].createElement("a",Object.assign({},restProps),children):React__default["default"].createElement("button",Object.assign({type:"button"},restProps),children);};const TabButton=theming.styled(ButtonOrLink,{shouldForwardProp:theming.isPropValid})({whiteSpace:'normal',display:'inline-flex',overflow:'hidden',verticalAlign:'top',justifyContent:'center',alignItems:'center',textAlign:'center',textDecoration:'none','&:empty':{display:'none'}},({theme})=>({padding:'0 15px',transition:'color 0.2s linear, border-bottom-color 0.2s linear',height:40,lineHeight:'12px',cursor:'pointer',background:'transparent',border:'0 solid transparent',borderTop:'3px solid transparent',borderBottom:'3px solid transparent',fontWeight:'bold',fontSize:13,'&:focus':{outline:'0 none',borderBottomColor:theme.color.secondary}}),({active,textColor,theme})=>active?{color:textColor||theme.barSelectedColor,borderBottomColor:theme.barSelectedColor}:{color:textColor||theme.barTextColor,borderBottomColor:'transparent'});TabButton.displayName='TabButton';const IconButton=theming.styled(ButtonOrLink,{shouldForwardProp:theming.isPropValid})(()=>({alignItems:'center',background:'transparent',border:'none',borderRadius:4,color:'inherit',cursor:'pointer',display:'inline-flex',fontSize:13,fontWeight:'bold',height:28,justifyContent:'center',marginTop:6,padding:'8px 7px','& > svg':{width:14}}),({active,theme})=>active?{backgroundColor:theme.background.hoverable,color:theme.color.secondary}:{},({disabled,theme})=>disabled?{opacity:0.5,cursor:'not-allowed'}:{'&:hover, &:focus-visible':{background:curriedTransparentize$1(0.88,theme.color.secondary),color:theme.color.secondary},'&:focus-visible':{outline:auto},'&:focus:not(:focus-visible)':{outline:'none'}});IconButton.displayName='IconButton';const IconPlaceholder=theming.styled.div(({theme})=>({width:14,height:14,backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`}));const IconButtonSkeletonWrapper=theming.styled.div(()=>({marginTop:6,padding:7,height:28}));const IconButtonSkeleton=()=>React__default["default"].createElement(IconButtonSkeletonWrapper,null,React__default["default"].createElement(IconPlaceholder,null));const Wrapper$6=theming.styled.div(({theme,bordered})=>bordered?{backgroundClip:'padding-box',border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius,overflow:'hidden',boxSizing:'border-box'}:{},({absolute})=>absolute?{width:'100%',height:'100%',boxSizing:'border-box',display:'flex',flexDirection:'column'}:{display:'block'});const TabBar=theming.styled.div({overflow:'hidden','&:first-of-type':{marginLeft:-3}});const Content=theming.styled.div({display:'block',position:'relative'},({theme})=>({fontSize:theme.typography.size.s2-1,background:theme.background.content}),({bordered,theme})=>bordered?{borderRadius:`0 0 ${theme.appBorderRadius-1}px ${theme.appBorderRadius-1}px`}:{},({absolute,bordered})=>absolute?{height:`calc(100% - ${bordered?42:40}px)`,position:'absolute',left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:40+(bordered?1:0),overflow:'auto',[`& > *:first-child`]:{position:'absolute',left:0+(bordered?1:0),right:0+(bordered?1:0),bottom:0+(bordered?1:0),top:0+(bordered?1:0),height:`calc(100% - ${bordered?2:0}px)`,overflow:'auto'}}:{});const VisuallyHidden=theming.styled.div(({active})=>active?{display:'block'}:{display:'none'});const TabWrapper=({active,render,children})=>React__default["default"].createElement(VisuallyHidden,{active:active},render?render():children);const childrenToList=(children,selected)=>React.Children.toArray(children).map(({props:{title,id,color,children:childrenOfChild}},index)=>{const content=Array.isArray(childrenOfChild)?childrenOfChild[0]:childrenOfChild;return{active:selected?id===selected:index===0,title,id,color,render:typeof content==='function'?content:({active,key})=>React__default["default"].createElement(VisuallyHidden,{key:key,active:active,role:"tabpanel"},content)};});const Tabs=React.memo(({children,selected,actions,absolute,bordered,tools,backgroundColor,id:htmlId})=>{const list=childrenToList(children,selected);return list.length?React__default["default"].createElement(Wrapper$6,{absolute:absolute,bordered:bordered,id:htmlId},React__default["default"].createElement(FlexBar,{border:true,backgroundColor:backgroundColor},React__default["default"].createElement(TabBar,{role:"tablist"},list.map(({title,id,active,color})=>{const tabTitle=typeof title==='function'?title():title;return React__default["default"].createElement(TabButton,{id:`tabbutton-${csf.sanitize(tabTitle)}`,className:`tabbutton ${active?'tabbutton-active':''}`,type:"button",key:id,active:active,textColor:color,onClick:e=>{e.preventDefault();actions.onSelect(id);},role:"tab"},tabTitle);})),tools?React__default["default"].createElement(React.Fragment,null,tools):null),React__default["default"].createElement(Content,{id:"panel-tab-content",bordered:bordered,absolute:absolute},list.map(({id,active,render})=>render({key:id,active})))):React__default["default"].createElement(Placeholder,null,React__default["default"].createElement(React.Fragment,{key:"title"},"Nothing found"));});Tabs.displayName='Tabs';Tabs.defaultProps={id:null,children:null,tools:null,selected:null,absolute:false,bordered:false};class TabsState extends React.Component{constructor(props){super(props);this.handlers={onSelect:id=>this.setState({selected:id})};this.state={selected:props.initial};}render(){const{bordered=false,absolute=false,children,backgroundColor}=this.props;const{selected}=this.state;return React__default["default"].createElement(Tabs,{bordered:bordered,absolute:absolute,selected:selected,backgroundColor:backgroundColor,actions:this.handlers},children);}}TabsState.defaultProps={children:[],initial:null,absolute:false,bordered:false,backgroundColor:''};const Separator=theming.styled.span(({theme})=>({width:1,height:20,background:theme.appBorderColor,marginTop:10,marginLeft:6,marginRight:2}),({force})=>force?{}:{'& + &':{display:'none'}});Separator.displayName='Separator';const interleaveSeparators=list=>list.reduce((acc,item,index)=>item?React__default["default"].createElement(React.Fragment,{key:item.id||item.key||`f-${index}`},acc,index>0?React__default["default"].createElement(Separator,{key:`s-${index}`}):null,item.render()||item):acc,null);const usePrevious=value=>{const ref=React.useRef();React.useEffect(()=>{// happens after return
@@ -376,7 +363,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
376
363
  * items. The preview also shows the source for the component
377
364
  * as a drop-down.
378
365
  */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
379
- 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-3f6db113.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
366
+ 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-9522fde9.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
380
367
  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));/**
381
368
  * A specialized version of `_.map` for arrays without support for iteratee
382
369
  * shorthands.
@@ -1653,7 +1640,7 @@ marginTop:0,marginBottom:0,'th:first-of-type, td:first-of-type':{paddingLeft:0},
1653
1640
  * // => [2, 1]
1654
1641
  */function uniq(array){return array&&array.length?baseUniq(array):[];}var uniq_1=uniq;const ITEMS_BEFORE_EXPANSION=8;const Summary=theming.styled.div(({isExpanded})=>({display:'flex',flexDirection:isExpanded?'column':'row',flexWrap:'wrap',alignItems:'flex-start',marginBottom:'-4px',minWidth:100}));const Text$2=theming.styled.span(codeCommon,({theme,simple=false})=>Object.assign({flex:'0 0 auto',fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,wordBreak:'break-word',whiteSpace:'normal',maxWidth:'100%',margin:0,marginRight:'4px',marginBottom:'4px',paddingTop:'2px',paddingBottom:'2px',lineHeight:'13px'},simple&&{background:'transparent',border:'0 none',paddingLeft:0}));const ExpandButton=theming.styled.button(({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,marginBottom:'4px',background:'none',border:'none'}));const Expandable=theming.styled.div(codeCommon,({theme})=>({fontFamily:theme.typography.fonts.mono,color:theme.color.secondary,fontSize:theme.typography.size.s1,margin:0,whiteSpace:'nowrap',display:'flex',alignItems:'center'}));const Detail=theming.styled.div(({theme,width})=>({width,minWidth:200,maxWidth:800,padding:15,// Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
1655
1642
  fontFamily:theme.typography.fonts.mono,fontSize:theme.typography.size.s1,// Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
1656
- boxSizing:'content-box','& code':{padding:'0 !important'}}));const ArrowIcon=theming.styled(Icons)({height:10,width:10,minWidth:10,marginLeft:4});const EmptyArg=()=>{return React__default["default"].createElement("span",null,"-");};const ArgText=({text,simple})=>{return React__default["default"].createElement(Text$2,{simple:simple},text);};const calculateDetailWidth=memoizerific(1000)(detail=>{const lines=detail.split(/\r?\n/);return`${Math.max(...lines.map(x=>x.length))}ch`;});const getSummaryItems=summary=>{if(!summary)return[summary];const splittedItems=summary.split('|');const summaryItems=splittedItems.map(value=>value.trim());return uniq_1(summaryItems);};const renderSummaryItems=(summaryItems,isExpanded=true)=>{let items=summaryItems;if(!isExpanded){items=summaryItems.slice(0,ITEMS_BEFORE_EXPANSION);}return items.map(item=>React__default["default"].createElement(ArgText,{key:item,text:item===''?'""':item}));};const ArgSummary=({value,initialExpandedArgs})=>{const{summary,detail}=value;const[isOpen,setIsOpen]=React.useState(false);const[isExpanded,setIsExpanded]=React.useState(initialExpandedArgs||false);if(summary===undefined||summary===null)return null;// summary is used for the default value
1643
+ boxSizing:'content-box','& code':{padding:'0 !important'}}));const ArrowIcon=theming.styled(Icons)({height:10,width:10,minWidth:10,marginLeft:4});const EmptyArg=()=>{return React__default["default"].createElement("span",null,"-");};const ArgText=({text,simple})=>{return React__default["default"].createElement(Text$2,{simple:simple},text);};const calculateDetailWidth=memoize__default["default"](1000)(detail=>{const lines=detail.split(/\r?\n/);return`${Math.max(...lines.map(x=>x.length))}ch`;});const getSummaryItems=summary=>{if(!summary)return[summary];const splittedItems=summary.split('|');const summaryItems=splittedItems.map(value=>value.trim());return uniq_1(summaryItems);};const renderSummaryItems=(summaryItems,isExpanded=true)=>{let items=summaryItems;if(!isExpanded){items=summaryItems.slice(0,ITEMS_BEFORE_EXPANSION);}return items.map(item=>React__default["default"].createElement(ArgText,{key:item,text:item===''?'""':item}));};const ArgSummary=({value,initialExpandedArgs})=>{const{summary,detail}=value;const[isOpen,setIsOpen]=React.useState(false);const[isExpanded,setIsExpanded]=React.useState(initialExpandedArgs||false);if(summary===undefined||summary===null)return null;// summary is used for the default value
1657
1644
  // below check fixes not displaying default values for boolean typescript vars
1658
1645
  const summaryAsString=typeof summary.toString==='function'?summary.toString():summary;if(detail==null){const cannotBeSafelySplitted=/[(){}[\]<>]/.test(summaryAsString);if(cannotBeSafelySplitted){return React__default["default"].createElement(ArgText,{text:summaryAsString});}const summaryItems=getSummaryItems(summaryAsString);const itemsCount=summaryItems.length;const hasManyItems=itemsCount>ITEMS_BEFORE_EXPANSION;return hasManyItems?React__default["default"].createElement(Summary,{isExpanded:isExpanded},renderSummaryItems(summaryItems,isExpanded),React__default["default"].createElement(ExpandButton,{onClick:()=>setIsExpanded(!isExpanded)},isExpanded?'Show less...':`Show ${itemsCount-ITEMS_BEFORE_EXPANSION} more...`)):React__default["default"].createElement(Summary,null,renderSummaryItems(summaryItems));}return React__default["default"].createElement(WithTooltipPure,{closeOnClick:true,trigger:"click",placement:"bottom",tooltipShown:isOpen,onVisibilityChange:isVisible=>{setIsOpen(isVisible);},tooltip:React__default["default"].createElement(Detail,{width:calculateDetailWidth(detail)},React__default["default"].createElement(SyntaxHighlighter,{language:"jsx",format:false},detail))},React__default["default"].createElement(Expandable,{className:"sbdocs-expandable"},React__default["default"].createElement("span",null,summaryAsString),React__default["default"].createElement(ArrowIcon,{icon:isOpen?'arrowup':'arrowdown'})));};const ArgValue=({value,initialExpandedArgs})=>{return value==null?React__default["default"].createElement(EmptyArg,null):React__default["default"].createElement(ArgSummary,{value:value,initialExpandedArgs:initialExpandedArgs});};/**
1659
1646
  * Adds `control` prefix to make ID attribute more specific.
@@ -2010,7 +1997,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
2010
1997
  ${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%,
2011
1998
  ${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.
2012
1999
  (match[1]?match[1].length:0)-(// Adjust for scientific notation.
2013
- 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-d3116a31.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
2000
+ 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-a62ba7e9.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
2014
2001
  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.
2015
2002
  // row.key is a hash key and therefore a much safer choice
2016
2003
  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
@@ -2057,4 +2044,4 @@ const sortFn=sortFns[sort];const sortSubsection=record=>{if(!sortFn)return recor
2057
2044
  * Show a grid of icons, as specified by `IconItem`.
2058
2045
  */const IconGallery=_a=>{var{children}=_a,props=__rest(_a,["children"]);return React__default["default"].createElement(ResetWrapper,null,React__default["default"].createElement(List,Object.assign({},props,{className:"docblock-icongallery"}),children));};// eslint-disable-next-line @typescript-eslint/triple-slash-reference
2059
2046
  // eslint-disable-next-line prefer-destructuring
2060
- const components=components$1;const resetComponents={};Object.keys(components$1).forEach(key=>{resetComponents[key]=React.forwardRef((props,ref)=>React.createElement(key,Object.assign(Object.assign({},props),{ref})));});exports.A=A$2;exports.ActionBar=ActionBar;exports.AddonPanel=AddonPanel;exports.ArgsTable=ArgsTable;exports.Badge=Badge;exports.Bar=Bar$1;exports.Blockquote=Blockquote;exports.BooleanControl=BooleanControl;exports.Button=Button$2;exports.Code=Code;exports.ColorControl=ColorControl;exports.ColorItem=ColorItem;exports.ColorPalette=ColorPalette;exports.DL=DL;exports.DateControl=DateControl;exports.Description=Description$1;exports.Div=Div;exports.DocsContent=DocsContent;exports.DocsPageWrapper=DocsPageWrapper;exports.DocsWrapper=DocsWrapper;exports.DocumentWrapper=DocumentWrapper;exports.FilesControl=FilesControl;exports.FlexBar=FlexBar;exports.Form=Form;exports.H1=H1;exports.H2=H2;exports.H3=H3;exports.H4=H4;exports.H5=H5;exports.H6=H6;exports.HR=HR;exports.IFrame=IFrame;exports.IconButton=IconButton;exports.IconGallery=IconGallery;exports.IconItem=IconItem;exports.Icons=Icons;exports.Img=Img;exports.LI=LI;exports.Link=Link;exports.Loader=Loader;exports.NoControlsWarning=NoControlsWarning;exports.NumberControl=NumberControl;exports.OL=OL;exports.ObjectControl=ObjectControl;exports.OptionsControl=OptionsControl;exports.P=P$1;exports.Placeholder=Placeholder;exports.Pre=Pre;exports.Preview=Preview;exports.PreviewSkeleton=PreviewSkeleton;exports.RangeControl=RangeControl;exports.ScrollArea=ScrollArea;exports.Separator=Separator;exports.Source=Source;exports.Spaced=Spaced;exports.Span=Span;exports.Story=Story;exports.StorySkeleton=StorySkeleton;exports.StorybookIcon=StorybookIcon;exports.StorybookLogo=StorybookLogo;exports.StyledSyntaxHighlighter=StyledSyntaxHighlighter;exports.Subtitle=Subtitle;exports.Symbols=Symbols;exports.SyntaxHighlighter=SyntaxHighlighter;exports.TT=TT;exports.TabBar=TabBar;exports.TabButton=TabButton;exports.TabWrapper=TabWrapper;exports.TabbedArgsTable=TabbedArgsTable;exports.Table=Table$1;exports.TableWrapper=TableWrapper;exports.Tabs=Tabs;exports.TabsState=TabsState;exports.TextControl=TextControl;exports.Title=Title;exports.TooltipLinkList=TooltipLinkList;exports.TooltipMessage=TooltipMessage;exports.TooltipNote=TooltipNote;exports.Typeset=Typeset;exports.UL=UL;exports.WithTooltip=WithTooltip;exports.WithTooltipPure=WithTooltipPure;exports.Zoom=Zoom$1;exports.__awaiter=__awaiter;exports.__rest=__rest;exports._extends=_extends;exports._objectWithoutPropertiesLoose=_objectWithoutPropertiesLoose;exports._root=_root;exports.argsTableLoadingData=argsTableLoadingData;exports.auto=auto;exports.basePlacements=basePlacements;exports.bottom=bottom;exports.clippingParents=clippingParents;exports.commonjsGlobal=commonjsGlobal;exports.components=components;exports.dedent=dedent;exports.end=end;exports.format=format;exports.formatDate=formatDate;exports.formatTime=formatTime;exports.getControlId=getControlId;exports.getDefaultExportFromCjs=getDefaultExportFromCjs;exports.getStoryHref=getStoryHref;exports.interleaveSeparators=interleaveSeparators;exports.isObject_1=isObject_1;exports.isSymbol_1=isSymbol_1;exports.left=left;exports.memoizerific=memoizerific;exports.modifierPhases=modifierPhases;exports.nameSpaceClassNames=nameSpaceClassNames;exports.parse=parse$1;exports.parseDate=parseDate;exports.parseTime=parseTime;exports.placements=placements;exports.popper=popper;exports.reference=reference;exports.resetComponents=resetComponents;exports.right=right;exports.start=start;exports.top=top;exports.variationPlacements=variationPlacements;exports.viewport=viewport;exports.window_1=window_1;
2047
+ const components=components$1;const resetComponents={};Object.keys(components$1).forEach(key=>{resetComponents[key]=React.forwardRef((props,ref)=>React.createElement(key,Object.assign(Object.assign({},props),{ref})));});exports.A=A$2;exports.ActionBar=ActionBar;exports.AddonPanel=AddonPanel;exports.ArgsTable=ArgsTable;exports.Badge=Badge;exports.Bar=Bar$1;exports.Blockquote=Blockquote;exports.BooleanControl=BooleanControl;exports.Button=Button$2;exports.Code=Code;exports.ColorControl=ColorControl;exports.ColorItem=ColorItem;exports.ColorPalette=ColorPalette;exports.DL=DL;exports.DateControl=DateControl;exports.Description=Description$1;exports.Div=Div;exports.DocsContent=DocsContent;exports.DocsPageWrapper=DocsPageWrapper;exports.DocsWrapper=DocsWrapper;exports.DocumentWrapper=DocumentWrapper;exports.FilesControl=FilesControl;exports.FlexBar=FlexBar;exports.Form=Form;exports.H1=H1;exports.H2=H2;exports.H3=H3;exports.H4=H4;exports.H5=H5;exports.H6=H6;exports.HR=HR;exports.IFrame=IFrame;exports.IconButton=IconButton;exports.IconGallery=IconGallery;exports.IconItem=IconItem;exports.Icons=Icons;exports.Img=Img;exports.LI=LI;exports.Link=Link;exports.Loader=Loader;exports.NoControlsWarning=NoControlsWarning;exports.NumberControl=NumberControl;exports.OL=OL;exports.ObjectControl=ObjectControl;exports.OptionsControl=OptionsControl;exports.P=P$1;exports.Placeholder=Placeholder;exports.Pre=Pre;exports.Preview=Preview;exports.PreviewSkeleton=PreviewSkeleton;exports.RangeControl=RangeControl;exports.ScrollArea=ScrollArea;exports.Separator=Separator;exports.Source=Source;exports.Spaced=Spaced;exports.Span=Span;exports.Story=Story;exports.StorySkeleton=StorySkeleton;exports.StorybookIcon=StorybookIcon;exports.StorybookLogo=StorybookLogo;exports.StyledSyntaxHighlighter=StyledSyntaxHighlighter;exports.Subtitle=Subtitle;exports.Symbols=Symbols;exports.SyntaxHighlighter=SyntaxHighlighter;exports.TT=TT;exports.TabBar=TabBar;exports.TabButton=TabButton;exports.TabWrapper=TabWrapper;exports.TabbedArgsTable=TabbedArgsTable;exports.Table=Table$1;exports.TableWrapper=TableWrapper;exports.Tabs=Tabs;exports.TabsState=TabsState;exports.TextControl=TextControl;exports.Title=Title;exports.TooltipLinkList=TooltipLinkList;exports.TooltipMessage=TooltipMessage;exports.TooltipNote=TooltipNote;exports.Typeset=Typeset;exports.UL=UL;exports.WithTooltip=WithTooltip;exports.WithTooltipPure=WithTooltipPure;exports.Zoom=Zoom$1;exports.__awaiter=__awaiter;exports.__rest=__rest;exports._extends=_extends;exports._objectWithoutPropertiesLoose=_objectWithoutPropertiesLoose;exports._root=_root;exports.argsTableLoadingData=argsTableLoadingData;exports.auto=auto;exports.basePlacements=basePlacements;exports.bottom=bottom;exports.clippingParents=clippingParents;exports.commonjsGlobal=commonjsGlobal;exports.components=components;exports.dedent=dedent;exports.end=end;exports.format=format;exports.formatDate=formatDate;exports.formatTime=formatTime;exports.getControlId=getControlId;exports.getDefaultExportFromCjs=getDefaultExportFromCjs;exports.getStoryHref=getStoryHref;exports.interleaveSeparators=interleaveSeparators;exports.isObject_1=isObject_1;exports.isSymbol_1=isSymbol_1;exports.left=left;exports.modifierPhases=modifierPhases;exports.nameSpaceClassNames=nameSpaceClassNames;exports.parse=parse$1;exports.parseDate=parseDate;exports.parseTime=parseTime;exports.placements=placements;exports.popper=popper;exports.reference=reference;exports.resetComponents=resetComponents;exports.right=right;exports.start=start;exports.top=top;exports.variationPlacements=variationPlacements;exports.viewport=viewport;exports.window_1=window_1;
package/dist/cjs/index.js CHANGED
@@ -6,10 +6,12 @@ Object.defineProperty(exports, '__esModule', {
6
6
 
7
7
  require('react');
8
8
 
9
- var index = require('./index-82acc4b4.js');
9
+ var index = require('./index-967d55af.js');
10
10
 
11
11
  require('@storybook/theming');
12
12
 
13
+ require('memoizerific');
14
+
13
15
  require('@storybook/csf');
14
16
 
15
17
  require('qs');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-82acc4b4.js');
3
+ var index = require('./index-967d55af.js');
4
4
 
5
5
  var React = require('react');
6
6
 
@@ -8,6 +8,8 @@ var clientLogger = require('@storybook/client-logger');
8
8
 
9
9
  var theming = require('@storybook/theming');
10
10
 
11
+ var memoize = require('memoizerific');
12
+
11
13
  var jsx = require('react-syntax-highlighter/dist/esm/languages/prism/jsx');
12
14
 
13
15
  var bash = require('react-syntax-highlighter/dist/esm/languages/prism/bash');
@@ -44,6 +46,8 @@ function _interopDefaultLegacy(e) {
44
46
 
45
47
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
46
48
 
49
+ var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
50
+
47
51
  var jsx__default = /*#__PURE__*/_interopDefaultLegacy(jsx);
48
52
 
49
53
  var bash__default = /*#__PURE__*/_interopDefaultLegacy(bash);
@@ -84,7 +88,7 @@ ReactSyntaxHighlighter__default["default"].registerLanguage('html', html__defaul
84
88
  ReactSyntaxHighlighter__default["default"].registerLanguage('tsx', tsx__default["default"]);
85
89
  ReactSyntaxHighlighter__default["default"].registerLanguage('typescript', typescript__default["default"]);
86
90
  ReactSyntaxHighlighter__default["default"].registerLanguage('graphql', graphql__default["default"]);
87
- const themedSyntax = index.memoizerific(2)(theme => Object.entries(theme.code || {}).reduce((acc, [key, val]) => Object.assign(Object.assign({}, acc), {
91
+ const themedSyntax = memoize__default["default"](2)(theme => Object.entries(theme.code || {}).reduce((acc, [key, val]) => Object.assign(Object.assign({}, acc), {
88
92
  [`* .${key}`]: val
89
93
  }), {}));
90
94
  const copyToClipboard = createCopyToClipboardFunction();
@@ -42,9 +42,10 @@ 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, a as __rest } from './index-f6d446d8.js';
45
+ import { u as _root, x as isObject_1, y as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, z as getControlId, a as __rest } from './index-b45716e8.js';
46
46
  import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
47
47
  import { styled } from '@storybook/theming';
48
+ import 'memoizerific';
48
49
  import '@storybook/csf';
49
50
  import 'qs';
50
51
  import '@storybook/client-logger';
@@ -22,9 +22,10 @@ import "core-js/modules/es.symbol.iterator.js";
22
22
  import "core-js/modules/es.array.iterator.js";
23
23
  import "core-js/modules/es.string.iterator.js";
24
24
  import "core-js/modules/web.dom-collections.iterator.js";
25
- import { c as commonjsGlobal, a as __rest } from './index-f6d446d8.js';
25
+ import { c as commonjsGlobal, a as __rest } from './index-b45716e8.js';
26
26
  import React__default, { useRef, useEffect } from 'react';
27
27
  import '@storybook/theming';
28
+ import 'memoizerific';
28
29
  import '@storybook/csf';
29
30
  import 'qs';
30
31
  import '@storybook/client-logger';
@@ -51,11 +51,12 @@ import "core-js/modules/es.array.includes.js";
51
51
  import "core-js/modules/es.string.includes.js";
52
52
  import "core-js/modules/es.string.starts-with.js";
53
53
  import "core-js/modules/es.array.from.js";
54
- import { b as basePlacements, t as top, l as left, e as bottom, r as right, f as end, v as viewport, s as start, p as popper, h as clippingParents, i as reference, j as variationPlacements, k as placements, n as auto, o as modifierPhases, q as _extends, u as _objectWithoutPropertiesLoose, m as memoizerific, a as __rest, w as window_1 } from './index-f6d446d8.js';
54
+ import { b as basePlacements, t as top, l as left, e as bottom, r as right, f as end, v as viewport, s as start, p as popper, h as clippingParents, i as reference, j as variationPlacements, k as placements, m as auto, n as modifierPhases, o as _extends, q as _objectWithoutPropertiesLoose, a as __rest, w as window_1 } from './index-b45716e8.js';
55
55
  import * as React from 'react';
56
56
  import React__default, { Component, useState, useCallback, useEffect } from 'react';
57
57
  import { styled, lighten, darken } from '@storybook/theming';
58
58
  import { createPortal } from 'react-dom';
59
+ import memoize from 'memoizerific';
59
60
  import '@storybook/csf';
60
61
  import 'qs';
61
62
  import '@storybook/client-logger';
@@ -2949,7 +2950,7 @@ TooltipTrigger.defaultProps = {
2949
2950
  modifiers: []
2950
2951
  };
2951
2952
  var TooltipTrigger$1 = TooltipTrigger;
2952
- var match = memoizerific(1000)(function (requests, actual, value) {
2953
+ var match = memoize(1000)(function (requests, actual, value) {
2953
2954
  var fallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
2954
2955
  return actual.split('-')[0] === requests ? value : fallback;
2955
2956
  });