@storybook/components 6.4.0-alpha.8 → 6.4.0-beta.10

package/dist/modern/controls/options/Options.js

@@ -1,5 +1,3 @@
-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 "core-js/modules/es.array.reduce.js";
 import React from 'react';
 import dedent from 'ts-dedent';
@@ -30,6 +28,14 @@ const normalizeOptions = (options, labels) => {
   return options;
 };
 
+const Controls = {
+  check: CheckboxControl,
+  'inline-check': CheckboxControl,
+  radio: RadioControl,
+  'inline-radio': RadioControl,
+  select: SelectControl,
+  'multi-select': SelectControl
+};
 export const OptionsControl = props => {
   const {
     type = 'select',
@@ -38,7 +44,9 @@ export const OptionsControl = props => {
     argType
   } = props;
   const normalized = Object.assign({}, props, {
-    options: normalizeOptions(options || argType.options, labels)
+    options: normalizeOptions(options || argType.options, labels),
+    isInline: type.includes('inline'),
+    isMulti: type.includes('multi')
   });
 
   if (options) {
@@ -49,26 +57,11 @@ export const OptionsControl = props => {
     `);
   }
 
-  switch (type) {
-    case 'check':
-    case 'inline-check':
-      return /*#__PURE__*/React.createElement(CheckboxControl, _extends({}, normalized, {
-        isInline: type === 'inline-check'
-      }));
-
-    case 'radio':
-    case 'inline-radio':
-      return /*#__PURE__*/React.createElement(RadioControl, _extends({}, normalized, {
-        isInline: type === 'inline-radio'
-      }));
+  const Control = Controls[type];
 
-    case 'select':
-    case 'multi-select':
-      return /*#__PURE__*/React.createElement(SelectControl, _extends({}, normalized, {
-        isMulti: type === 'multi-select'
-      }));
-
-    default:
-      throw new Error(`Unknown options type: ${type}`);
+  if (Control) {
+    return /*#__PURE__*/React.createElement(Control, normalized);
   }
+
+  throw new Error(`Unknown options type: ${type}`);
 };

package/dist/modern/icon/icons.js

@@ -107,7 +107,10 @@ export const icons = {
   dashboard: 'M512 85.3a512 512 0 01361 875c-99.5-44-225-70.4-361.6-70.4-136.1 0-261.4 26.2-360.8 70A512 512 0 01512 85.4zm0 91.5c-112.4 0-218 43.7-297.4 123.1A417.8 417.8 0 0091.4 597.3c0 93 30 181.5 85.5 254.2 101-34.8 215.3-53 334.5-53 119.6 0 234.2 18.3 335.5 53.4a417.3 417.3 0 0085.7-254.6c0-112.3-43.8-218-123.2-297.4a417.5 417.5 0 00-275-122.6l-22.4-.5zm219.7 115.7a45.7 45.7 0 0116.7 62.4L580.4 646c6.5 17.1 6.7 36.6-.6 54.3l-4.3 8.7A73.1 73.1 0 11501.3 600l168-291a45.7 45.7 0 0162.4-16.6z',
   hourglass: 'M511.926 801.946c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.094-17.914 40-40.004 40v0zM831.682 915.242c0.192 1.582 0.318 3.186 0.318 4.82 0 22.090-17.908 40-40 40h-560c-22.092 0-40-17.914-40-40 0-2.438 0.252-4.812 0.67-7.128 2.36-53.636 18.034-105.7 45.852-151.554 0.734-1.476 1.562-2.912 2.492-4.296l5.582-8.364c0.054-0.080 0.11-0.158 0.164-0.238 0.042-0.068 0.098-0.156 0.144-0.222l157.704-236.036-158.5-237.228c-0.116-0.17-0.23-0.342-0.34-0.516-32.842-49.178-51.11-105.994-53.368-165.044-0.238-1.762-0.402-3.546-0.402-5.374 0-22.090 17.908-40 40-40h560c22.092 0 40 17.914 40 40 0 2.056-0.204 4.064-0.504 6.038-2.194 54.020-17.886 106.48-45.894 152.648-0.734 1.472-1.562 2.91-2.492 4.294l-5.582 8.366c-0.054 0.078-0.11 0.156-0.164 0.236-0.042 0.068-0.098 0.154-0.144 0.222l-157.734 236.082 158.468 237.182c0.116 0.168 0.23 0.344 0.34 0.516 32.946 49.33 51.226 106.346 53.39 165.596zM749.958 144.060h-475.99c6.138 31.304 18.384 61.124 36.354 87.916 0.118 0.17 0.23 0.344 0.342 0.514l0.024 0.038c0.036 0.054 0.15 0.23 0.186 0.284l54.286 81.25h293.596l58.196-87.1c0.366-0.67 0.75-1.334 1.154-1.99 15.492-24.916 26.228-52.324 31.852-80.912zM497.528 512.178l-0.032 0.046 14.426 21.592 93.378-139.756h-186.692l78.92 118.118zM305.96 799.156c-15.498 24.91-26.234 52.318-31.856 80.906h476.052c-6.138-31.304-18.384-61.122-36.354-87.918-0.118-0.168-0.23-0.344-0.342-0.512l-0.024-0.040c-0.036-0.050-0.15-0.23-0.186-0.282l-140.242-209.902-28.98 43.374c-7.166 10.72-19.21 17.162-32.11 17.162-12.896 0-24.942-6.442-32.11-17.166l-28.76-43.044-143.938 215.428c-0.36 0.674-0.744 1.338-1.15 1.994z',
   play: 'M878.78 477.856l-591.884-341.722c-9.464-5.464-18.426-8.050-26.386-8.048-19.516 0.002-33.002 15.546-33.002 42.338v683.446c0 26.792 13.482 42.338 33.002 42.338 7.96 0 16.924-2.586 26.386-8.048l591.884-341.722c32.664-18.864 32.664-49.724 0-68.582z',
+  playnext: 'M222 136l513 342 12 10V192a64 64 0 01128 0v640a64 64 0 01-128 0V536l-12 10-513 342c-8 5-16 8-23 8-17 0-28-16-28-42V170c0-26 11-42 28-42 7 0 15 3 23 8z',
+  playback: 'M823 136L311 478l-12 10V192a64 64 0 00-128 0v640a64 64 0 10128 0V536l12 10 512 342c8 5 16 8 23 8 17 0 29-16 29-42V170c0-26-12-42-29-42-7 0-15 3-23 8z',
   stop: 'M1024 512A512 512 0 100 512a512 512 0 001024 0zM215 809a418 418 0 010-594 418 418 0 01594 0 418 418 0 010 594 418 418 0 01-594 0zm471-78H338c-25 0-45-20-45-45V338c0-25 20-45 45-45h348c25 0 45 20 45 45v348c0 25-20 45-45 45z',
+  stopalt: 'M894 85H130c-25 0-45 20-45 45v764c0 25 20 45 45 45h764c25 0 45-20 45-45V130c0-25-20-45-45-45z',
   email: 'M960.032 268.004c0.748-10.040-2.246-20.364-9.226-28.684-5.984-7.132-13.938-11.62-22.394-13.394-0.13-0.026-0.268-0.066-0.396-0.092-1.082-0.22-2.172-0.376-3.272-0.5-0.25-0.032-0.492-0.080-0.742-0.102-1.028-0.096-2.052-0.136-3.090-0.156-0.292-0.002-0.582-0.042-0.876-0.042h-816.008c-21.416 0-38.848 16.844-39.898 38-0.034 0.628-0.092 1.256-0.096 1.89 0 0.034-0.006 0.074-0.006 0.114 0 0.050 0.008 0.102 0.008 0.152v495.692c0 0.054-0.008 0.106-0.008 0.156 0 22.090 17.91 40 40 40h816.004c13.808 0 25.98-6.996 33.17-17.636 0.1-0.148 0.182-0.312 0.28-0.458 0.606-0.93 1.196-1.868 1.722-2.84 0.046-0.082 0.080-0.172 0.124-0.258 2.992-5.604 4.704-12.008 4.704-18.804v0 0-493.038zM144.032 350.156l339.946 281.188c6.568 6.434 14.918 10.168 23.564 11.122 0.16 0.024 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058s0.996-0.042 1.492-0.058c0.842-0.028 1.68-0.058 2.518-0.14 0.16-0.016 0.32-0.042 0.48-0.066 8.646-0.958 16.996-4.688 23.564-11.122l339.946-281.206v370.894h-736v-370.876zM215.066 305.030h593.91l-296.946 245.422-296.964-245.422z',
   link: 'M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z',
   paperclip: 'M824.25 369.354c68.146-70.452 67.478-182.784-2.094-252.354-70.296-70.296-184.266-70.296-254.558 0-0.014 0.012-0.028 0.026-0.042 0.042-0.004 0.002-0.006 0.004-0.010 0.008l-433.144 433.142c-0.036 0.036-0.074 0.068-0.11 0.106-0.054 0.052-0.106 0.11-0.16 0.162l-2.668 2.67c-0.286 0.286-0.528 0.596-0.8 0.888-43.028 44.88-66.664 103.616-66.664 165.986 0 64.106 24.962 124.376 70.292 169.704 45.328 45.33 105.598 70.292 169.706 70.292 50.612 0 98.822-15.57 139.186-44.428 4.932-1.952 9.556-4.906 13.544-8.894l16.802-16.802c0.056-0.056 0.116-0.112 0.172-0.168 0.038-0.038 0.074-0.076 0.112-0.116l289.010-289.014c15.622-15.618 15.62-40.942 0-56.56s-40.948-15.62-56.566 0l-289.124 289.122c-62.482 62.484-163.792 62.484-226.274 0-62.484-62.482-62.484-163.79 0-226.272h-0.002l433.134-433.12c0.058-0.060 0.112-0.122 0.172-0.18 38.99-38.99 102.43-38.99 141.42 0 38.992 38.99 38.99 102.432 0 141.422-0.058 0.060-0.122 0.114-0.18 0.17l0.006 0.006-280.536 280.534c-0.002-0.002-0.002-0.004-0.004-0.006l-79.978 79.98c-0.010 0.010-0.016 0.020-0.028 0.028-0.008 0.012-0.018 0.018-0.028 0.028l-0.064 0.062c-15.622 15.624-40.944 15.624-56.562 0-15.624-15.62-15.624-40.944-0.002-56.566l0.062-0.062c0.010-0.010 0.018-0.020 0.028-0.028 0.008-0.012 0.020-0.018 0.028-0.028l79.98-79.978c-0.002-0.002-0.004-0.002-0.006-0.004l136.508-136.512c15.622-15.62 15.62-40.944-0.002-56.562-15.618-15.62-40.946-15.62-56.564 0l-219.342 219.344c-1.284 1.284-2.42 2.652-3.494 4.052-40.4 47.148-38.316 118.184 6.322 162.824 44.64 44.638 115.674 46.722 162.82 6.324 1.402-1.072 2.772-2.21 4.054-3.494l2.83-2.832c0.002 0 0.002 0 0.002 0s0 0 0 0l360.54-360.54c0.058-0.056 0.12-0.114 0.18-0.172 0.050-0.050 0.098-0.106 0.15-0.158l0.994-0.994c0.34-0.338 0.63-0.702 0.952-1.052z',

package/dist/modern/index.js

@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { createElement, forwardRef } from 'react';
 import { components as rawComponents } from './typography/DocumentFormatting';
 export { Badge } from './Badge/Badge'; // Typography
 
@@ -38,6 +38,8 @@ export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 const resetComponents = {};
 Object.keys(rawComponents).forEach(key => {
-  resetComponents[key] = props => /*#__PURE__*/createElement(key, props);
+  resetComponents[key] = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(key, Object.assign({}, props, {
+    ref
+  })));
 });
 export { resetComponents };

package/dist/modern/syntaxhighlighter/syntaxhighlighter.js

@@ -54,12 +54,13 @@ ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
 const themedSyntax = memoize(2)(theme => Object.entries(theme.code || {}).reduce((acc, [key, val]) => Object.assign({}, acc, {
   [`* .${key}`]: val
 }), {}));
-let copyToClipboard;
+const copyToClipboard = createCopyToClipboardFunction();
+export function createCopyToClipboardFunction() {
+  if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
+    return text => navigator.clipboard.writeText(text);
+  }
 
-if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
-  copyToClipboard = text => navigator.clipboard.writeText(text);
-} else {
-  copyToClipboard = async text => {
+  return async text => {
     const tmp = document.createElement('TEXTAREA');
     const focus = document.activeElement;
     tmp.value = text;
@@ -70,7 +71,6 @@ if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
     focus.focus();
   };
 }
-
 const Wrapper = styled.div(({
   theme
 }) => ({
@@ -139,7 +139,9 @@ export const SyntaxHighlighter = (_ref) => {
 
   const onClick = e => {
     e.preventDefault();
-    copyToClipboard(highlightableCode).then(() => {
+    const selectedText = globalWindow.getSelection().toString();
+    const textToCopy = e.type !== 'click' && selectedText ? selectedText : highlightableCode;
+    copyToClipboard(textToCopy).then(() => {
       setCopied(true);
       globalWindow.setTimeout(() => setCopied(false), 1500);
     }).catch(logger.error);
@@ -148,7 +150,8 @@ export const SyntaxHighlighter = (_ref) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
     bordered: bordered,
     padded: padded,
-    className: className
+    className: className,
+    onCopyCapture: onClick
   }, /*#__PURE__*/React.createElement(Scroller, null, /*#__PURE__*/React.createElement(ReactSyntaxHighlighter, _extends({
     padded: padded || bordered,
     language: language,

package/dist/modern/typography/DocumentFormatting.js

@@ -342,6 +342,10 @@ const DefaultCodeBlock = styled.code(({
   verticalAlign: 'baseline',
   color: 'inherit'
 }), codeCommon);
+const isInlineCodeRegex = /[\n\r]/g;
+
+const isReactChildString = child => typeof child === 'string';
+
 export const Code = (_ref2) => {
   var _language$;
 
@@ -352,12 +356,13 @@ export const Code = (_ref2) => {
       props = _objectWithoutPropertiesLoose(_ref2, ["className", "children"]);
 
   const language = (className || '').match(/lang-(\S+)/);
-  const isInlineCode = !children.match(/[\n\r]/g);
+  const childrenArray = React.Children.toArray(children);
+  const isInlineCode = !childrenArray.filter(isReactChildString).some(child => child.match(isInlineCodeRegex));
 
   if (isInlineCode) {
     return /*#__PURE__*/React.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({

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

@@ -11,6 +11,7 @@ export interface ButtonProps {
     outline?: boolean;
     containsIcon?: boolean;
     children?: React.ReactNode;
+    href?: string;
 }
 declare const ButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps, import("@storybook/theming").Theme>;
 export declare const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>>;

package/dist/ts3.4/controls/helpers.d.ts

@@ -5,3 +5,10 @@
  * @example getControlId('my prop name') -> 'control-my-prop-name'
  */
 export declare const getControlId: (value: string) => string;
+/**
+ * Adds `set` prefix to make ID attribute more specific.
+ * Removes spaces because spaces are not allowed in ID attributes
+ * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
+ * @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
+ */
+export declare const getControlSetterButtonId: (value: string) => string;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export * from './types';
-export * from './Array';
 export * from './Boolean';
 export { ColorProps } from './Color';
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<import("./Color").ColorProps>>;

package/dist/ts3.4/controls/types.d.ts

@@ -8,10 +8,6 @@ export interface ControlProps<T> {
     onFocus?: (evt: any) => void;
     onBlur?: (evt: any) => void;
 }
-export declare type ArrayValue = string[] | readonly string[];
-export interface ArrayConfig {
-    separator?: string;
-}
 export declare type BooleanValue = boolean;
 export interface BooleanConfig {
 }
@@ -56,5 +52,5 @@ export declare type TextValue = string;
 export interface TextConfig {
 }
 export declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
-export declare type Control = ArrayConfig | BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
+export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
 export declare type Controls = Record<string, Control>;

package/dist/ts3.4/icon/icons.d.ts

@@ -106,7 +106,10 @@ export declare const icons: {
     dashboard: string;
     hourglass: string;
     play: string;
+    playnext: string;
+    playback: string;
     stop: string;
+    stopalt: string;
     email: string;
     link: string;
     paperclip: string;

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

@@ -1,6 +1,7 @@
 import { ComponentProps, FunctionComponent } from 'react';
 import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import { SyntaxHighlighterProps } from './syntaxhighlighter-types';
+export declare function createCopyToClipboardFunction(): (text: string) => any;
 export interface WrapperProps {
     bordered?: boolean;
     padded?: boolean;

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

@@ -11,6 +11,7 @@ export interface ButtonProps {
     outline?: boolean;
     containsIcon?: boolean;
     children?: React.ReactNode;
+    href?: string;
 }
 declare const ButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps, import("@storybook/theming").Theme>;
 export declare const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>>;

package/dist/ts3.9/controls/helpers.d.ts

@@ -5,3 +5,10 @@
  * @example getControlId('my prop name') -> 'control-my-prop-name'
  */
 export declare const getControlId: (value: string) => string;
+/**
+ * Adds `set` prefix to make ID attribute more specific.
+ * Removes spaces because spaces are not allowed in ID attributes
+ * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
+ * @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
+ */
+export declare const getControlSetterButtonId: (value: string) => string;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export * from './types';
-export * from './Array';
 export * from './Boolean';
 export type { ColorProps } from './Color';
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<import("./Color").ColorProps>>;

package/dist/ts3.9/controls/types.d.ts

@@ -8,10 +8,6 @@ export interface ControlProps<T> {
     onFocus?: (evt: any) => void;
     onBlur?: (evt: any) => void;
 }
-export declare type ArrayValue = string[] | readonly string[];
-export interface ArrayConfig {
-    separator?: string;
-}
 export declare type BooleanValue = boolean;
 export interface BooleanConfig {
 }
@@ -56,5 +52,5 @@ export declare type TextValue = string;
 export interface TextConfig {
 }
 export declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
-export declare type Control = ArrayConfig | BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
+export declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
 export declare type Controls = Record<string, Control>;

package/dist/ts3.9/icon/icons.d.ts

@@ -106,7 +106,10 @@ export declare const icons: {
     dashboard: string;
     hourglass: string;
     play: string;
+    playnext: string;
+    playback: string;
     stop: string;
+    stopalt: string;
     email: string;
     link: string;
     paperclip: string;

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

@@ -1,6 +1,7 @@
 import { ComponentProps, FunctionComponent } from 'react';
 import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import type { SyntaxHighlighterProps } from './syntaxhighlighter-types';
+export declare function createCopyToClipboardFunction(): (text: string) => any;
 export interface WrapperProps {
     bordered?: boolean;
     padded?: boolean;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-alpha.8",
+  "version": "6.4.0-beta.10",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/components",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/components",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -25,7 +25,7 @@
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
-      "*": [
+      "dist/ts3.9/*": [
         "dist/ts3.4/*"
       ]
     }
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-alpha.8",
-    "@storybook/csf": "0.0.1",
-    "@storybook/theming": "6.4.0-alpha.8",
+    "@storybook/client-logger": "6.4.0-beta.10",
+    "@storybook/csf": "0.0.2--canary.6aca495.0",
+    "@storybook/theming": "6.4.0-beta.10",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1ea7d55df3dc036f6ea091cb09cdc8f9512bda3d",
+  "gitHead": "9128cc184fa9771b332c1aabe85af6751dde890c",
   "sbmodern": "dist/modern/index.js"
 }

package/dist/cjs/controls/Array.js

@@ -1,123 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ArrayControl = void 0;
-
-require("core-js/modules/es.string.trim.js");
-
-require("core-js/modules/es.string.split.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.array.join.js");
-
-require("core-js/modules/es.function.name.js");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _form = require("../form");
-
-var _helpers = require("./helpers");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var parse = function parse(value, separator) {
-  return !value || value.trim() === '' ? [] : value.split(separator);
-};
-
-var format = function format(value, separator) {
-  return value && Array.isArray(value) ? value.join(separator) : '';
-};
-
-var Wrapper = _theming.styled.label({
-  display: 'flex'
-});
-
-var ArrayControl = function ArrayControl(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? ',' : _ref$separator,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus;
-  var handleChange = (0, _react.useCallback)(function (e) {
-    var newVal = e.target.value;
-    onChange(parse(newVal, separator));
-  }, [onChange]);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      forceVisible = _useState2[0],
-      setForceVisible = _useState2[1];
-
-  var onForceVisible = (0, _react.useCallback)(function () {
-    onChange([]);
-    setForceVisible(true);
-  }, [setForceVisible]);
-
-  if (value === undefined) {
-    return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
-      onClick: onForceVisible
-    }, "Set array");
-  }
-
-  var isValid = Array.isArray(value);
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_form.Form.Textarea, {
-    id: (0, _helpers.getControlId)(name),
-    value: format(value, separator),
-    onChange: handleChange,
-    size: "flex",
-    placeholder: "Edit array...",
-    valid: isValid ? null : 'error',
-    autoFocus: forceVisible,
-    name: name,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }));
-};
-
-exports.ArrayControl = ArrayControl;
-ArrayControl.displayName = "ArrayControl";

package/dist/cjs/controls/Array.stories.js

@@ -1,92 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Undefined = exports.Empty = exports.Basic = exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Array = require("./Array");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var _default = {
-  title: 'Controls/Array',
-  component: _Array.ArrayControl
-};
-exports.default = _default;
-
-var Template = function Template(initialValue) {
-  var _useState = (0, _react.useState)(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Array.ArrayControl, {
-    name: "array",
-    value: value,
-    onChange: function onChange(newVal) {
-      return setValue(newVal);
-    },
-    separator: ","
-  }), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(value) || 'undefined'));
-};
-
-var Basic = function Basic() {
-  return Template(['Bat', 'Cat', 'Rat']);
-};
-
-exports.Basic = Basic;
-
-var Empty = function Empty() {
-  return Template([]);
-};
-
-exports.Empty = Empty;
-
-var Undefined = function Undefined() {
-  return Template(undefined);
-};
-
-exports.Undefined = Undefined;