@storybook/components 6.5.0-alpha.3 → 6.5.0-alpha.30

package/dist/modern/ScrollArea/ScrollArea.js

@@ -1,14 +1,16 @@
+const _excluded = ["horizontal", "vertical"];
+
 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; }
 
-import React, { Suspense } from 'react';
+import React, { lazy, Suspense } from 'react';
 import { styled } from '@storybook/theming';
-const GlobalScrollAreaStyles = /*#__PURE__*/React.lazy(() => import('./GlobalScrollAreaStyles'));
-const OverlayScrollbars = /*#__PURE__*/React.lazy(() => import('./OverlayScrollbars'));
+const GlobalScrollAreaStyles = /*#__PURE__*/lazy(() => import('./GlobalScrollAreaStyles'));
+const OverlayScrollbars = /*#__PURE__*/lazy(() => import('./OverlayScrollbars'));
 
-const Scroller = (_ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref, ["horizontal", "vertical"]);
+const Scroller = _ref => {
+  let props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement("div", props)

package/dist/modern/Zoom/Zoom.js

@@ -1,6 +1,6 @@
 import global from 'global';
-import { ZoomElement as Element } from './ZoomElement';
-import { ZoomIFrame as IFrame } from './ZoomIFrame';
+import { ZoomElement } from './ZoomElement';
+import { ZoomIFrame } from './ZoomIFrame';
 const {
   window: globalWindow
 } = global;
@@ -12,6 +12,6 @@ export const browserSupportsCssZoom = () => {
   }
 };
 export const Zoom = {
-  Element,
-  IFrame
+  Element: ZoomElement,
+  IFrame: ZoomIFrame
 };

package/dist/modern/Zoom/ZoomElement.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 const ZoomElementWrapper = styled.div(({
@@ -17,7 +17,7 @@ export function ZoomElement({
   scale,
   children
 }) {
-  const componentWrapperRef = React.useRef(null);
+  const componentWrapperRef = useRef(null);
   const [height, setHeight] = useState(0);
   useEffect(() => {
     if (componentWrapperRef.current) {

package/dist/modern/bar/bar.js

@@ -1,3 +1,5 @@
+const _excluded = ["children", "backgroundColor"];
+
 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';
@@ -60,12 +62,12 @@ const BarInner = styled.div(({
   height: 40,
   backgroundColor: bgColor || ''
 }));
-export const FlexBar = (_ref) => {
+export const FlexBar = _ref => {
   let {
     children,
     backgroundColor
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "backgroundColor"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [left, right] = Children.toArray(children);
   return /*#__PURE__*/React.createElement(Bar, rest, /*#__PURE__*/React.createElement(BarInner, {

package/dist/modern/bar/button.js

@@ -1,3 +1,5 @@
+const _excluded = ["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; }
@@ -7,11 +9,11 @@ import { styled, isPropValid } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { auto } from '@popperjs/core';
 
-const ButtonOrLink = (_ref) => {
+const ButtonOrLink = _ref => {
   let {
     children
   } = _ref,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return restProps.href != null ? /*#__PURE__*/React.createElement("a", restProps, children) : /*#__PURE__*/React.createElement("button", _extends({
     type: "button"

package/dist/modern/blocks/ArgsTable/ArgJsDoc.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from '@storybook/theming';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 export const Table = styled.table(({
   theme
 }) => ({

package/dist/modern/blocks/ArgsTable/ArgRow.js

@@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
 import { ArgJsDoc } from './ArgJsDoc';
 import { ArgValue } from './ArgValue';
 import { ArgControl } from './ArgControl';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 const Name = styled.span({
   fontWeight: 'bold'
 });

package/dist/modern/blocks/ArgsTable/ArgRow.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { ArgRow } from './ArgRow';
 import { TableWrapper } from './ArgsTable';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 export default {
   component: ArgRow,
   title: 'Docs/ArgRow',

package/dist/modern/blocks/ArgsTable/ArgValue.js

@@ -5,7 +5,7 @@ import uniq from 'lodash/uniq';
 import { WithTooltipPure } from '../../tooltip/lazy-WithTooltip';
 import { Icons } from '../../icon/icon';
 import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 const ITEMS_BEFORE_EXPANSION = 8;
 const Summary = styled.div(({
   isExpanded

package/dist/modern/blocks/ArgsTable/ArgsTable.js

@@ -10,7 +10,7 @@ import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
 import { EmptyBlock } from '../EmptyBlock';
 import { Link } from '../../typography/link/link';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 export const TableWrapper = styled.table(({
   theme,
   compact,

package/dist/modern/blocks/ArgsTable/SectionRow.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SectionRow } from './SectionRow';
 import { TableWrapper } from './ArgsTable';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 export default {
   component: SectionRow,
   title: 'Docs/SectionRow',

package/dist/modern/blocks/ArgsTable/TabbedArgsTable.js

@@ -1,3 +1,5 @@
+const _excluded = ["tabs"];
+
 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; }
@@ -5,11 +7,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { ArgsTable } from './ArgsTable';
 import { TabsState } from '../../tabs/tabs';
-export const TabbedArgsTable = (_ref) => {
+export const TabbedArgsTable = _ref => {
   let {
     tabs
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["tabs"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const entries = Object.entries(tabs);
 

package/dist/modern/blocks/ColorPalette.js

@@ -1,3 +1,5 @@
+const _excluded = ["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; }
@@ -6,7 +8,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-import { ResetWrapper } from '../typography/DocumentFormatting';
+import { ResetWrapper } from '../typography/ResetWrapper';
 const ItemTitle = styled.div(({
   theme
 }) => ({
@@ -162,11 +164,11 @@ ColorItem.displayName = "ColorItem";
  * Styleguide documentation for colors, including names, captions, and color swatches,
  * all specified as `ColorItem` children of this wrapper component.
  */
-export const ColorPalette = (_ref) => {
+export const ColorPalette = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
     className: "docblock-colorpalette"

package/dist/modern/blocks/Description.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
-import { ResetWrapper } from '../typography/DocumentFormatting';
-import { components } from '..';
+import { ResetWrapper } from '../typography/ResetWrapper';
+import { components } from '../typography/components';
 
 /**
  * A markdown description for a component, typically used to show the

package/dist/modern/blocks/DocsPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
-import { withReset } from '../typography/shared';
+import { withReset } from '../typography/lib/common';
 const breakpoint = 600;
 export const Title = styled.h1(withReset, ({
   theme

package/dist/modern/blocks/EmptyBlock.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
-import { withReset } from '../typography/shared';
+import { withReset } from '../typography/lib/common';
 const Wrapper = styled.div(withReset, ({
   theme
 }) => ({

package/dist/modern/blocks/IFrame.js

@@ -1,3 +1,5 @@
+const _excluded = ["id", "title", "src", "allowFullScreen", "scale"];
+
 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; }
@@ -49,7 +51,7 @@ export class IFrame extends Component {
       src,
       allowFullScreen
     } = _this$props,
-          rest = _objectWithoutPropertiesLoose(_this$props, ["id", "title", "src", "allowFullScreen", "scale"]);
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     return /*#__PURE__*/React.createElement("iframe", _extends({
       id: id,

package/dist/modern/blocks/IconGallery.js

@@ -1,10 +1,12 @@
+const _excluded = ["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; }
 
 import React from 'react';
 import { styled } from '@storybook/theming';
-import { ResetWrapper } from '../typography/DocumentFormatting';
+import { ResetWrapper } from '../typography/ResetWrapper';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 const ItemLabel = styled.div(({
   theme
@@ -55,11 +57,11 @@ IconItem.displayName = "IconItem";
 /**
  * Show a grid of icons, as specified by `IconItem`.
  */
-export const IconGallery = (_ref) => {
+export const IconGallery = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
     className: "docblock-icongallery"

package/dist/modern/blocks/Preview.js

@@ -1,3 +1,5 @@
+const _excluded = ["isLoading", "isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"];
+
 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 "core-js/modules/es.array.reduce.js";
@@ -14,7 +16,7 @@ import { ActionBar } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
 import { ZoomContext } from './ZoomContext';
 import { Zoom } from '../Zoom/Zoom';
-import { StorySkeleton } from '.';
+import { StorySkeleton } from './Story';
 const ChildrenContainer = styled.div(({
   isColumn,
   columns,
@@ -178,7 +180,7 @@ const getLayout = children => {
  */
 
 
-export const Preview = (_ref) => {
+export const Preview = _ref => {
   let {
     isLoading,
     isColumn,
@@ -190,7 +192,7 @@ export const Preview = (_ref) => {
     additionalActions,
     className
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["isLoading", "isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [expanded, setExpanded] = useState(isExpanded);
   const {

package/dist/modern/blocks/Source.js

@@ -1,3 +1,5 @@
+const _excluded = ["language", "code", "dark", "format"];
+
 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; }
@@ -90,7 +92,7 @@ const Source = props => {
     dark,
     format
   } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, ["language", "code", "dark", "format"]);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const syntaxHighlighter = /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({
     bordered: true,

package/dist/modern/blocks/Story.js

@@ -1,3 +1,5 @@
+const _excluded = ["children", "error", "inline"];
+
 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 global from 'global';
@@ -5,7 +7,8 @@ import React, { createElement, Fragment } from 'react';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
-import { Loader } from '..';
+import { Loader } from '../Loader/Loader';
+import { getStoryHref } from '../utils/getStoryHref';
 const {
   PREVIEW_URL
 } = global;
@@ -46,7 +49,9 @@ const IFrameStory = ({
     key: "iframe",
     id: `iframe--${id}`,
     title: title,
-    src: `${BASE_URL}?id=${id}&viewMode=story`,
+    src: getStoryHref(BASE_URL, id, {
+      viewMode: 'story'
+    }),
     allowFullScreen: true,
     scale: scale,
     style: {
@@ -63,12 +68,12 @@ IFrameStory.displayName = "IFrameStory";
  * A story element, either rendered inline or in an iframe,
  * with configurable height.
  */
-const Story = (_ref) => {
+const Story = _ref => {
   let {
     error,
     inline
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "error", "inline"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const {
     id,

package/dist/modern/blocks/Toolbar.js

@@ -1,3 +1,5 @@
+const _excluded = ["isLoading", "storyId", "baseUrl", "zoom", "resetZoom"];
+
 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, { Fragment } from 'react';
@@ -5,6 +7,7 @@ import { styled } from '@storybook/theming';
 import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton, IconButtonSkeleton } from '../bar/button';
+import { getStoryHref } from '../utils/getStoryHref';
 
 const Zoom = ({
   zoom,
@@ -43,7 +46,7 @@ const Eject = ({
   storyId
 }) => /*#__PURE__*/React.createElement(IconButton, {
   key: "opener",
-  href: `${baseUrl}?id=${storyId}`,
+  href: getStoryHref(baseUrl, storyId),
   target: "_blank",
   title: "Open canvas in new tab"
 }, /*#__PURE__*/React.createElement(Icons, {
@@ -58,7 +61,7 @@ const Bar = styled(FlexBar)({
   top: 0,
   transition: 'transform .2s linear'
 });
-export const Toolbar = (_ref) => {
+export const Toolbar = _ref => {
   let {
     isLoading,
     storyId,
@@ -66,7 +69,7 @@ export const Toolbar = (_ref) => {
     zoom,
     resetZoom
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["isLoading", "storyId", "baseUrl", "zoom", "resetZoom"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Bar, rest, /*#__PURE__*/React.createElement(Fragment, {
     key: "left"

package/dist/modern/blocks/Typeset.js

@@ -1,3 +1,5 @@
+const _excluded = ["fontFamily", "fontSizes", "fontWeight", "sampleText"];
+
 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; }
@@ -5,7 +7,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
-import { withReset } from '../typography/shared';
+import { withReset } from '../typography/lib/common';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 const Label = styled.div(({
   theme
@@ -38,14 +40,14 @@ const Wrapper = styled.div(withReset, ({
  * Convenient styleguide documentation showing examples of type
  * with different sizes and weights and configurable sample text.
  */
-export const Typeset = (_ref) => {
+export const Typeset = _ref => {
   let {
     fontFamily,
     fontSizes,
     fontWeight,
     sampleText
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["fontFamily", "fontSizes", "fontWeight", "sampleText"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
     className: "docblock-typeset"

package/dist/modern/brand/StorybookIcon.js

@@ -1,7 +1,7 @@
 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); }
 
 import React from 'react';
-export const StorybookIcon = (_ref) => {
+export const StorybookIcon = _ref => {
   let props = Object.assign({}, _ref);
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 64 64"

package/dist/modern/brand/StorybookLogo.js

@@ -1,13 +1,15 @@
+const _excluded = ["alt"];
+
 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; }
 
 import React from 'react';
-export const StorybookLogo = (_ref) => {
+export const StorybookLogo = _ref => {
   let {
     alt
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["alt"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "200px",

package/dist/modern/controls/Color.js

@@ -1,3 +1,5 @@
+const _excluded = ["value", "active", "onClick", "style"];
+
 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; }
@@ -59,14 +61,14 @@ const SwatchColor = styled.div(({
 }));
 const swatchBackground = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`;
 
-const Swatch = (_ref) => {
+const Swatch = _ref => {
   let {
     value,
     active,
     onClick,
     style
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "active", "onClick", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const backgroundImage = `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;
   return /*#__PURE__*/React.createElement(SwatchColor, _extends({}, props, {

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/Object.js

@@ -1,8 +1,7 @@
 import global from 'global';
 import cloneDeep from 'lodash/cloneDeep';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { styled, useTheme } from '@storybook/theming'; // @ts-ignore
-
+import { styled, useTheme } from '@storybook/theming';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import { Form } from '../form';

package/dist/modern/controls/index.js

@@ -1,7 +1,7 @@
-import React, { Suspense } from 'react';
+import React, { lazy, Suspense } from 'react';
 export * from './types';
 export * from './Boolean';
-const LazyColorControl = /*#__PURE__*/React.lazy(() => import('./Color'));
+const LazyColorControl = /*#__PURE__*/lazy(() => import('./Color'));
 export const ColorControl = props => /*#__PURE__*/React.createElement(Suspense, {
   fallback: /*#__PURE__*/React.createElement("div", null)
 }, /*#__PURE__*/React.createElement(LazyColorControl, props));