@storybook/components 6.4.0-alpha.4 → 6.4.0-alpha.40

package/dist/esm/icon/icons.js

@@ -107,7 +107,10 @@ export var 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/esm/index.js

@@ -1,6 +1,7 @@
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.keys.js";
-import { createElement } from 'react';
+import "core-js/modules/es.object.assign.js";
+import { createElement, forwardRef } from 'react';
 import { components as rawComponents } from './typography/DocumentFormatting';
 export { Badge } from './Badge/Badge'; // Typography
 
@@ -40,8 +41,10 @@ export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 var resetComponents = {};
 Object.keys(rawComponents).forEach(function (key) {
-  resetComponents[key] = function (props) {
-    return /*#__PURE__*/createElement(key, props);
-  };
+  resetComponents[key] = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/createElement(key, Object.assign({}, props, {
+      ref: ref
+    }));
+  });
 });
 export { resetComponents };

package/dist/esm/syntaxhighlighter/syntaxhighlighter.js

@@ -24,13 +24,13 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.object.entries.js";
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.string.trim.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.iterator.js";
@@ -95,14 +95,15 @@ var themedSyntax = memoize(2)(function (theme) {
     return Object.assign({}, acc, _defineProperty({}, "* .".concat(key), val));
   }, {});
 });
-var copyToClipboard;
+var copyToClipboard = createCopyToClipboardFunction();
+export function createCopyToClipboardFunction() {
+  if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
+    return function (text) {
+      return navigator.clipboard.writeText(text);
+    };
+  }
 
-if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
-  copyToClipboard = function copyToClipboard(text) {
-    return navigator.clipboard.writeText(text);
-  };
-} else {
-  copyToClipboard = /*#__PURE__*/function () {
+  return /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(text) {
       var tmp, focus;
       return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -126,12 +127,11 @@ if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
       }, _callee);
     }));
 
-    return function copyToClipboard(_x) {
+    return function (_x) {
       return _ref3.apply(this, arguments);
     };
   }();
 }
-
 var Wrapper = styled.div(function (_ref4) {
   var theme = _ref4.theme;
   return {
@@ -215,7 +215,9 @@ export var SyntaxHighlighter = function SyntaxHighlighter(_ref10) {
 
   var onClick = function onClick(e) {
     e.preventDefault();
-    copyToClipboard(highlightableCode).then(function () {
+    var selectedText = globalWindow.getSelection().toString();
+    var textToCopy = e.type !== 'click' && selectedText ? selectedText : highlightableCode;
+    copyToClipboard(textToCopy).then(function () {
       setCopied(true);
       globalWindow.setTimeout(function () {
         return setCopied(false);
@@ -226,7 +228,8 @@ export var SyntaxHighlighter = function SyntaxHighlighter(_ref10) {
   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/ActionBar/ActionBar.js

@@ -16,6 +16,7 @@ const Container = styled.div(({
 export const ActionButton = styled.button(({
   theme
 }) => ({
+  margin: 0,
   border: '0 none',
   padding: '4px 10px',
   cursor: 'pointer',

package/dist/modern/Button/Button.stories.js

@@ -55,4 +55,11 @@ storiesOf('Basics/Button', module).add('all buttons', () => /*#__PURE__*/React.c
   small: true
 }, /*#__PURE__*/React.createElement(Icons, {
   icon: "link"
-}), "Link")));
+}), "Link"), /*#__PURE__*/React.createElement(Button, {
+  primary: true,
+  small: true,
+  isLink: true,
+  href: "#"
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "link"
+}), " Link")));

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

@@ -2,6 +2,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useState, useEffect } from 'react';
 import { BooleanControl, ColorControl, DateControl, FilesControl, NumberControl, ObjectControl, OptionsControl, RangeControl, TextControl } from '../../controls';
+const Controls = {
+  array: ObjectControl,
+  object: ObjectControl,
+  boolean: BooleanControl,
+  color: ColorControl,
+  date: DateControl,
+  number: NumberControl,
+  check: OptionsControl,
+  'inline-check': OptionsControl,
+  radio: OptionsControl,
+  'inline-radio': OptionsControl,
+  select: OptionsControl,
+  'multi-select': OptionsControl,
+  range: RangeControl,
+  text: TextControl,
+  file: FilesControl
+};
 
 const NoControl = () => /*#__PURE__*/React.createElement(React.Fragment, null, "-");
 
@@ -46,44 +63,9 @@ export const ArgControl = ({
     onBlur,
     onFocus
   };
-
-  switch (control.type) {
-    case 'array':
-    case 'object':
-      return /*#__PURE__*/React.createElement(ObjectControl, _extends({}, props, control));
-
-    case 'boolean':
-      return /*#__PURE__*/React.createElement(BooleanControl, _extends({}, props, control));
-
-    case 'color':
-      return /*#__PURE__*/React.createElement(ColorControl, _extends({}, props, control));
-
-    case 'date':
-      return /*#__PURE__*/React.createElement(DateControl, _extends({}, props, control));
-
-    case 'number':
-      return /*#__PURE__*/React.createElement(NumberControl, _extends({}, props, control));
-
-    case 'check':
-    case 'inline-check':
-    case 'radio':
-    case 'inline-radio':
-    case 'select':
-    case 'multi-select':
-      return /*#__PURE__*/React.createElement(OptionsControl, _extends({}, props, control, {
-        controlType: control.type
-      }));
-
-    case 'range':
-      return /*#__PURE__*/React.createElement(RangeControl, _extends({}, props, control));
-
-    case 'text':
-      return /*#__PURE__*/React.createElement(TextControl, _extends({}, props, control));
-
-    case 'file':
-      return /*#__PURE__*/React.createElement(FilesControl, _extends({}, props, control));
-
-    default:
-      return /*#__PURE__*/React.createElement(NoControl, null);
-  }
-};
+  const Control = Controls[control.type] || NoControl;
+  return /*#__PURE__*/React.createElement(Control, _extends({}, props, control, {
+    controlType: control.type
+  }));
+};
+ArgControl.displayName = "ArgControl";

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

@@ -27,12 +27,18 @@ const Description = styled.div(({
       color: theme.color.secondary
     }
   },
-  code: codeCommon({
+  code: Object.assign({}, codeCommon({
     theme
+  }), {
+    fontSize: 12,
+    fontFamily: theme.typography.fonts.mono
   }),
   '& code': {
     margin: 0,
     display: 'inline-block'
+  },
+  '& pre > code': {
+    whiteSpace: 'pre-wrap'
   }
 }));
 const Type = styled.div(({

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

@@ -314,7 +314,7 @@ export const ArgsTable = props => {
     onClick: () => resetArgs(),
     title: "Reset controls"
   }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "sync",
+    icon: "undo",
     "aria-hidden": true
   })))) : null)), /*#__PURE__*/React.createElement("tbody", {
     className: "docblock-argstable-body"

package/dist/modern/blocks/ColorPalette.js

@@ -48,9 +48,21 @@ const SwatchLabels = styled.div({
   display: 'flex',
   flexDirection: 'row'
 });
-const Swatch = styled.div({
-  flex: 1
-});
+const Swatch = styled.div(({
+  background
+}) => ({
+  position: 'relative',
+  flex: 1,
+  '&::before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background,
+    content: '""'
+  }
+}));
 const SwatchColors = styled.div(({
   theme
 }) => Object.assign({}, getBlockBackgroundStyle(theme), {
@@ -58,7 +70,10 @@ const SwatchColors = styled.div(({
   flexDirection: 'row',
   height: 50,
   marginBottom: 5,
-  overflow: 'hidden'
+  overflow: 'hidden',
+  backgroundColor: 'white',
+  backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  backgroundClip: 'padding-box'
 }));
 const SwatchSpecimen = styled.div({
   display: 'flex',
@@ -105,9 +120,7 @@ function renderSwatch(color, index) {
   return /*#__PURE__*/React.createElement(Swatch, {
     key: `${color}-${index}`,
     title: color,
-    style: {
-      background: color
-    }
+    background: color
   });
 }
 

package/dist/modern/blocks/Preview.js

@@ -4,9 +4,10 @@ import "core-js/modules/es.array.reduce.js";
 
 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, { Children, useState } from 'react';
+import React, { Children, useCallback, useState } from 'react';
 import { darken } from 'polished';
 import { styled } from '@storybook/theming';
+import global from 'global';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 import { Source } from './Source';
 import { ActionBar } from '../ActionBar/ActionBar';
@@ -119,7 +120,9 @@ const getSource = (withSource, expanded, setExpanded) => {
     default:
       {
         return {
-          source: null,
+          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
+            dark: true
+          })),
           actionItem: {
             title: 'Show code',
             className: 'docblock-code-toggle',
@@ -195,9 +198,34 @@ const Preview = (_ref) => {
   const [scale, setScale] = useState(1);
   const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
   const defaultActionItems = withSource ? [actionItem] : [];
-  const actionItems = additionalActions ? [...defaultActionItems, ...additionalActions] : defaultActionItems; // @ts-ignore
+  const [additionalActionItems, setAdditionalActionItems] = useState(additionalActions ? [...additionalActions] : []);
+  const actionItems = [...defaultActionItems, ...additionalActionItems]; // @ts-ignore
 
   const layout = getLayout(Children.count(children) === 1 ? [children] : children);
+  const {
+    window: globalWindow
+  } = global;
+  const copyToClipboard = useCallback(async text => {
+    const {
+      createCopyToClipboardFunction
+    } = await import('../syntaxhighlighter/syntaxhighlighter');
+    createCopyToClipboardFunction();
+  }, []);
+
+  const onCopyCapture = e => {
+    e.preventDefault();
+
+    if (additionalActionItems.filter(item => item.title === 'Copied').length === 0) {
+      copyToClipboard(source.props.code).then(() => {
+        setAdditionalActionItems([...additionalActionItems, {
+          title: 'Copied',
+          onClick: () => {}
+        }]);
+        globalWindow.setTimeout(() => setAdditionalActionItems(additionalActionItems.filter(item => item.title !== 'Copied')), 1500);
+      });
+    }
+  };
+
   return /*#__PURE__*/React.createElement(PreviewContainer, _extends({
     withSource,
     withToolbar
@@ -214,7 +242,8 @@ const Preview = (_ref) => {
       scale
     }
   }, /*#__PURE__*/React.createElement(Relative, {
-    className: "docs-story"
+    className: "docs-story",
+    onCopyCapture: withSource && onCopyCapture
   }, /*#__PURE__*/React.createElement(ChildrenContainer, {
     isColumn: isColumn || !Array.isArray(children),
     columns: columns,
@@ -226,7 +255,7 @@ const Preview = (_ref) => {
     key: i
   }, child)) : /*#__PURE__*/React.createElement("div", null, children))), /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: actionItems
-  }))), withSource && source);
+  }))), withSource && expanded && source);
 };
 
 Preview.displayName = "Preview";

package/dist/modern/controls/Boolean.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { opacify, transparentize } from 'polished';
 import { styled } from '@storybook/theming';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 import { Form } from '../form';
 const Label = styled.label(({
   theme
@@ -61,7 +61,7 @@ const Label = styled.label(({
     }
   },
   'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-    background: theme.background.bar,
+    background: theme.background.app,
     boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
     color: theme.color.defaultText,
     padding: '7px 15px'
@@ -83,6 +83,7 @@ export const BooleanControl = ({
 
   if (value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onSetFalse
     }, "Set boolean");
   }

package/dist/modern/controls/Number.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { styled } from '@storybook/theming';
 import { Form } from '../form';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 const Wrapper = styled.label({
   display: 'flex'
 });
@@ -46,6 +46,7 @@ export const NumberControl = ({
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set number");
   }

package/dist/modern/controls/Object.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'
 import { styled, useTheme } from '@storybook/theming'; // @ts-ignore
 
 import { JsonTree, getObjectType } from './react-editable-json-tree';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 import { Form } from '../form';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -266,6 +266,7 @@ export const ObjectControl = ({
 
   if (!hasData) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set object");
   }

package/dist/modern/controls/Text.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Form } from '../form';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 const Wrapper = styled.label({
   display: 'flex'
 });
@@ -24,6 +24,7 @@ export const TextControl = ({
 
   if (value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set string");
   }

package/dist/modern/controls/helpers.js

@@ -4,4 +4,12 @@
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  * @example getControlId('my prop name') -> 'control-my-prop-name'
  */
-export const getControlId = value => `control-${value.replace(/\s+/g, '-')}`;
+export const getControlId = value => `control-${value.replace(/\s+/g, '-')}`;
+/**
+ * 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 const getControlSetterButtonId = value => `set-${value.replace(/\s+/g, '-')}`;

package/dist/modern/controls/index.js

@@ -1,6 +1,5 @@
 import React, { Suspense } from 'react';
 export * from './types';
-export * from './Array';
 export * from './Boolean';
 const LazyColorControl = /*#__PURE__*/React.lazy(() => import('./Color'));
 export const ColorControl = props => /*#__PURE__*/React.createElement(Suspense, {

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/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;