@storybook/components 6.5.0-alpha.2 → 6.5.0-alpha.23

package/dist/modern/controls/Number.js

@@ -43,6 +43,13 @@ export const NumberControl = ({
   useEffect(() => {
     if (forceVisible && htmlElRef.current) htmlElRef.current.select();
   }, [forceVisible]);
+  useEffect(() => {
+    const newInputValue = typeof value === 'number' ? value : '';
+
+    if (inputValue !== newInputValue) {
+      setInputValue(value);
+    }
+  }, [value]);
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {

package/dist/modern/controls/types.js

@@ -0,0 +1 @@
+export {};

package/dist/modern/form/field/field.js

@@ -1,3 +1,5 @@
+const _excluded = ["label", "children"];
+
 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; }
 
 import React from 'react';
@@ -24,12 +26,12 @@ const Label = styled.span(({
   alignItems: 'center',
   lineHeight: '16px'
 }));
-export const Field = (_ref) => {
+export const Field = _ref => {
   let {
     label,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, props, label ? /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement("span", null, label)) : null, children);
 };

package/dist/modern/form/input/input.js

@@ -1,3 +1,8 @@
+const _excluded = ["size", "valid", "align"],
+      _excluded2 = ["size", "valid", "align"],
+      _excluded3 = ["size", "valid", "align"],
+      _excluded4 = ["size", "valid", "align"];
+
 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; }
@@ -139,7 +144,7 @@ const validation = ({
 };
 
 export const Input = Object.assign(styled( /*#__PURE__*/forwardRef((_ref, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref, ["size", "valid", "align"]);
+  let props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("input", _extends({}, props, {
     ref: ref
@@ -150,7 +155,7 @@ export const Input = Object.assign(styled( /*#__PURE__*/forwardRef((_ref, ref) =
   displayName: 'Input'
 });
 export const Select = Object.assign(styled( /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref2, ["size", "valid", "align"]);
+  let props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   return /*#__PURE__*/React.createElement("select", _extends({}, props, {
     ref: ref
@@ -164,7 +169,7 @@ export const Select = Object.assign(styled( /*#__PURE__*/forwardRef((_ref2, ref)
   displayName: 'Select'
 });
 export const Textarea = Object.assign(styled( /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref3, ["size", "valid", "align"]);
+  let props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
   return /*#__PURE__*/React.createElement(TextareaAutoResize, _extends({}, props, {
     ref: ref
@@ -178,7 +183,7 @@ export const Textarea = Object.assign(styled( /*#__PURE__*/forwardRef((_ref3, re
   displayName: 'Textarea'
 });
 const ButtonStyled = styled( /*#__PURE__*/forwardRef((_ref4, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref4, ["size", "valid", "align"]);
+  let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
   return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
     ref: ref

package/dist/modern/icon/icon.js

@@ -1,3 +1,5 @@
+const _excluded = ["icon", "symbol"];
+
 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; }
@@ -10,12 +12,12 @@ const Path = styled.path({
   fill: 'currentColor'
 });
 // TODO: if we can resize the 1024 to 20, we can remove the size attributes
-export const Icons = /*#__PURE__*/React.memo((_ref) => {
+export const Icons = /*#__PURE__*/React.memo(_ref => {
   let {
     icon,
     symbol
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["icon", "symbol"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Svg, _extends({
     viewBox: "0 0 1024 1024"

package/dist/modern/index.js

@@ -33,7 +33,9 @@ export { StorybookIcon } from './brand/StorybookIcon'; // Doc blocks
 export * from './blocks';
 export * from './controls'; // Loader
 
-export { Loader } from './Loader/Loader';
+export { Loader } from './Loader/Loader'; // Utils
+
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 const resetComponents = {};

package/dist/modern/placeholder/placeholder.js

@@ -1,3 +1,5 @@
+const _excluded = ["children"];
+
 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; }
 
 import React, { Children } from 'react';
@@ -16,11 +18,11 @@ const Message = styled.div(({
   color: theme.color.defaultText,
   fontSize: theme.typography.size.s2 - 1
 }));
-export const Placeholder = (_ref) => {
+export const Placeholder = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [title, desc] = Children.toArray(children);
   return /*#__PURE__*/React.createElement(Message, props, /*#__PURE__*/React.createElement(Title, null, title), desc && /*#__PURE__*/React.createElement(Desc, null, desc));

package/dist/modern/spaced/Spaced.js

@@ -1,3 +1,5 @@
+const _excluded = ["col", "row", "outer", "children"];
+
 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; }
@@ -57,14 +59,14 @@ const Container = styled.div(({
       }
   }
 });
-export const Spaced = (_ref) => {
+export const Spaced = _ref => {
   let {
     col,
     row,
     outer,
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["col", "row", "outer", "children"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
   return /*#__PURE__*/React.createElement(Container, _extends({

package/dist/modern/syntaxhighlighter/syntaxhighlighter-types.js

@@ -0,0 +1 @@
+export {};

package/dist/modern/syntaxhighlighter/syntaxhighlighter.js

@@ -1,3 +1,5 @@
+const _excluded = ["children", "language", "copyable", "bordered", "padded", "format", "className", "showLineNumbers"];
+
 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; }
@@ -117,7 +119,7 @@ const Code = styled.code({
   paddingRight: 0,
   opacity: 1
 });
-export const SyntaxHighlighter = (_ref) => {
+export const SyntaxHighlighter = _ref => {
   let {
     children,
     language = 'jsx',
@@ -128,7 +130,7 @@ export const SyntaxHighlighter = (_ref) => {
     className = null,
     showLineNumbers = false
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "language", "copyable", "bordered", "padded", "format", "className", "showLineNumbers"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   if (typeof children !== 'string' || !children.trim()) {
     return null;

package/dist/modern/tooltip/ListItem.js

@@ -1,3 +1,6 @@
+const _excluded = ["active", "loading", "disabled"],
+      _excluded2 = ["loading", "left", "title", "center", "right", "active", "disabled", "href", "onClick", "LinkWrapper"];
+
 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; }
@@ -6,8 +9,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { transparentize } from 'polished';
-const Title = styled((_ref) => {
-  let rest = _objectWithoutPropertiesLoose(_ref, ["active", "loading", "disabled"]);
+const Title = styled(_ref => {
+  let rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("span", rest);
 })(({
@@ -142,7 +145,7 @@ const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
   return result;
 });
 
-const ListItem = (_ref2) => {
+const ListItem = _ref2 => {
   let {
     loading,
     left,
@@ -155,7 +158,7 @@ const ListItem = (_ref2) => {
     onClick,
     LinkWrapper
   } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["loading", "left", "title", "center", "right", "active", "disabled", "href", "onClick", "LinkWrapper"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = {

package/dist/modern/tooltip/Tooltip.js

@@ -1,3 +1,5 @@
+const _excluded = ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "color"];
+
 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; }
@@ -74,7 +76,7 @@ const Wrapper = styled.div(({
   borderRadius: theme.appBorderRadius * 2,
   fontSize: theme.typography.size.s1
 } : {});
-export const Tooltip = (_ref) => {
+export const Tooltip = _ref => {
   let {
     placement,
     hasChrome,
@@ -84,7 +86,7 @@ export const Tooltip = (_ref) => {
     arrowRef,
     color
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "color"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
     hasChrome: hasChrome,

package/dist/modern/tooltip/TooltipLinkList.js

@@ -1,3 +1,6 @@
+const _excluded = ["LinkWrapper", "onClick"],
+      _excluded2 = ["isGatsby"];
+
 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; }
@@ -22,7 +25,7 @@ const Item = props => {
     LinkWrapper,
     onClick: onClickFromProps
   } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["LinkWrapper", "onClick"]);
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
 
   const {
     title,
@@ -47,11 +50,11 @@ Item.displayName = "Item";
 export const TooltipLinkList = ({
   links,
   LinkWrapper
-}) => /*#__PURE__*/React.createElement(List, null, links.map((_ref) => {
+}) => /*#__PURE__*/React.createElement(List, null, links.map(_ref => {
   let {
     isGatsby
   } = _ref,
-      p = _objectWithoutPropertiesLoose(_ref, ["isGatsby"]);
+      p = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
   return /*#__PURE__*/React.createElement(Item, _extends({
     key: p.id,

package/dist/modern/tooltip/TooltipMessage.js

@@ -1,3 +1,5 @@
+const _excluded = ["title"];
+
 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; }
@@ -37,11 +39,11 @@ export const TooltipMessage = ({
   desc,
   links
 }) => {
-  return /*#__PURE__*/React.createElement(MessageWrapper, null, /*#__PURE__*/React.createElement(Message, null, title && /*#__PURE__*/React.createElement(Title, null, title), desc && /*#__PURE__*/React.createElement(Desc, null, desc)), links && /*#__PURE__*/React.createElement(Links, null, links.map((_ref) => {
+  return /*#__PURE__*/React.createElement(MessageWrapper, null, /*#__PURE__*/React.createElement(Message, null, title && /*#__PURE__*/React.createElement(Title, null, title), desc && /*#__PURE__*/React.createElement(Desc, null, desc)), links && /*#__PURE__*/React.createElement(Links, null, links.map(_ref => {
     let {
       title: linkTitle
     } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, ["title"]);
+        other = _objectWithoutPropertiesLoose(_ref, _excluded);
 
     return /*#__PURE__*/React.createElement(Link, _extends({}, other, {
       key: linkTitle

package/dist/modern/tooltip/TooltipNote.js

@@ -1,3 +1,5 @@
+const _excluded = ["note"];
+
 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; }
 
 import React from 'react';
@@ -18,11 +20,11 @@ const Note = styled.div(({
   background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
   margin: 6
 }));
-export const TooltipNote = (_ref) => {
+export const TooltipNote = _ref => {
   let {
     note
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["note"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Note, props, note);
 };

package/dist/modern/tooltip/WithTooltip.js

@@ -1,3 +1,6 @@
+const _excluded = ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"],
+      _excluded2 = ["startOpen", "onVisibilityChange"];
+
 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; }
@@ -20,7 +23,7 @@ const TargetSvgContainer = styled.g`
 `;
 
 // Pure, does not bind to the body
-const WithTooltipPure = (_ref) => {
+const WithTooltipPure = _ref => {
   let {
     svg,
     trigger,
@@ -32,7 +35,7 @@ const WithTooltipPure = (_ref) => {
     tooltipShown,
     onVisibilityChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const Container = svg ? TargetSvgContainer : TargetContainer;
   return /*#__PURE__*/React.createElement(TooltipTrigger, {
@@ -93,12 +96,12 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false
 };
 
-const WithToolTipState = (_ref2) => {
+const WithToolTipState = _ref2 => {
   let {
     startOpen,
     onVisibilityChange: onChange
   } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["startOpen", "onVisibilityChange"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   const [tooltipShown, setTooltipShown] = useState(startOpen || false);
   const onVisibilityChange = useCallback(visibility => {

package/dist/modern/typings.d.ts

@@ -0,0 +1,4 @@
+declare module 'global';
+declare module 'markdown-to-jsx';
+declare module '*.md';
+declare module '@storybook/semver';

package/dist/modern/typography/DocumentFormatting.js

@@ -1,3 +1,6 @@
+const _excluded = ["href", "children"],
+      _excluded2 = ["className", "children"];
+
 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; }
@@ -80,12 +83,12 @@ export const Pre = styled.pre(withReset, withMargin, ({
   }
 }));
 
-const Link = (_ref) => {
+const Link = _ref => {
   let {
     href: input,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["href", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const isStorybookPath = /^\//.test(input);
   const isAnchorUrl = /^#.*/.test(input);
@@ -346,14 +349,14 @@ const isInlineCodeRegex = /[\n\r]/g;
 
 const isReactChildString = child => typeof child === 'string';
 
-export const Code = (_ref2) => {
+export const Code = _ref2 => {
   var _language$;
 
   let {
     className,
     children
   } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, ["className", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   const language = (className || '').match(/lang-(\S+)/);
   const childrenArray = React.Children.toArray(children);

package/dist/modern/typography/link/link.js

@@ -1,3 +1,5 @@
+const _excluded = ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"];
+
 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; }
@@ -143,7 +145,7 @@ const A = styled.a(({
   padding: 0,
   fontSize: 'inherit'
 } : {});
-export const Link = (_ref) => {
+export const Link = _ref => {
   let {
     cancel,
     children,
@@ -152,7 +154,7 @@ export const Link = (_ref) => {
     containsIcon,
     className
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
     onClick: onClick && cancel ? e => cancelled(e, onClick) : onClick,

package/dist/modern/utils/getStoryHref.js

@@ -0,0 +1,13 @@
+import qs from 'qs';
+export const getStoryHref = (baseUrl, storyId, additionalParams = {}) => {
+  const [url, paramsStr] = baseUrl.split('?');
+  const params = paramsStr ? Object.assign({}, qs.parse(paramsStr), additionalParams, {
+    id: storyId
+  }) : Object.assign({}, additionalParams, {
+    id: storyId
+  });
+  return `${url}${qs.stringify(params, {
+    addQueryPrefix: true,
+    encode: false
+  })}`;
+};

package/dist/ts3.4/Zoom/ZoomIFrame.d.ts

@@ -11,5 +11,5 @@ export declare class ZoomIFrame extends Component<IZoomIFrameProps> {
     shouldComponentUpdate(nextProps: IZoomIFrameProps): boolean;
     setIframeInnerZoom(scale: number): void;
     setIframeZoom(scale: number): void;
-    render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
+    render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
 }

package/dist/ts3.4/index.d.ts

@@ -28,6 +28,7 @@ export { StorybookIcon } from './brand/StorybookIcon';
 export * from './blocks';
 export * from './controls';
 export { Loader } from './Loader/Loader';
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 declare const resetComponents: Record<string, ElementType>;

package/dist/ts3.4/utils/getStoryHref.d.ts

@@ -0,0 +1 @@
+export declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;

package/dist/ts3.9/Zoom/ZoomIFrame.d.ts

@@ -11,5 +11,5 @@ export declare class ZoomIFrame extends Component<IZoomIFrameProps> {
     shouldComponentUpdate(nextProps: IZoomIFrameProps): boolean;
     setIframeInnerZoom(scale: number): void;
     setIframeZoom(scale: number): void;
-    render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
+    render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
 }

package/dist/ts3.9/index.d.ts

@@ -28,6 +28,7 @@ export { StorybookIcon } from './brand/StorybookIcon';
 export * from './blocks';
 export * from './controls';
 export { Loader } from './Loader/Loader';
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 declare const resetComponents: Record<string, ElementType>;

package/dist/ts3.9/utils/getStoryHref.d.ts

@@ -0,0 +1 @@
+export declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.5.0-alpha.2",
+  "version": "6.5.0-alpha.23",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.5.0-alpha.2",
+    "@storybook/client-logger": "6.5.0-alpha.23",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.2",
+    "@storybook/theming": "6.5.0-alpha.23",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -57,9 +57,10 @@
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
+    "qs": "^6.10.0",
     "react-colorful": "^5.1.2",
     "react-popper-tooltip": "^3.1.1",
-    "react-syntax-highlighter": "^13.5.3",
+    "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
@@ -76,6 +77,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca9d89393f36d156e34819fe120eb7e6819245f4",
+  "gitHead": "0006ec45ff04e42229dbee92cc49764699477e1b",
   "sbmodern": "dist/modern/index.js"
 }

package/dist/cjs/typings.d.js

@@ -1 +0,0 @@
-"use strict";