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

package/dist/cjs/ActionBar/ActionBar.js

@@ -39,6 +39,7 @@ var Container = _theming.styled.div(function (_ref) {
 var ActionButton = _theming.styled.button(function (_ref2) {
   var theme = _ref2.theme;
   return {
+    margin: 0,
     border: '0 none',
     padding: '4px 10px',
     cursor: 'pointer',

package/dist/cjs/Button/Button.stories.js

@@ -63,5 +63,12 @@ var FormButton = _index.Form.Button;
     small: true
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
     icon: "link"
-  }), "Link"));
+  }), "Link"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true,
+    small: true,
+    isLink: true,
+    href: "#"
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "link"
+  }), " Link"));
 });

package/dist/cjs/bar/separator.js

@@ -25,8 +25,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.interleaveSeparators = exports.Separator = void 0;
 
-require("core-js/modules/es.array.reduce.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _theming = require("@storybook/theming");

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

@@ -57,6 +57,24 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var Controls = {
+  array: _controls.ObjectControl,
+  object: _controls.ObjectControl,
+  boolean: _controls.BooleanControl,
+  color: _controls.ColorControl,
+  date: _controls.DateControl,
+  number: _controls.NumberControl,
+  check: _controls.OptionsControl,
+  'inline-check': _controls.OptionsControl,
+  radio: _controls.OptionsControl,
+  'inline-radio': _controls.OptionsControl,
+  select: _controls.OptionsControl,
+  'multi-select': _controls.OptionsControl,
+  range: _controls.RangeControl,
+  text: _controls.TextControl,
+  file: _controls.FilesControl
+};
+
 var NoControl = function NoControl() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "-");
 };
@@ -110,46 +128,11 @@ var ArgControl = function ArgControl(_ref) {
     onBlur: onBlur,
     onFocus: onFocus
   };
-
-  switch (control.type) {
-    case 'array':
-    case 'object':
-      return /*#__PURE__*/_react.default.createElement(_controls.ObjectControl, _extends({}, props, control));
-
-    case 'boolean':
-      return /*#__PURE__*/_react.default.createElement(_controls.BooleanControl, _extends({}, props, control));
-
-    case 'color':
-      return /*#__PURE__*/_react.default.createElement(_controls.ColorControl, _extends({}, props, control));
-
-    case 'date':
-      return /*#__PURE__*/_react.default.createElement(_controls.DateControl, _extends({}, props, control));
-
-    case 'number':
-      return /*#__PURE__*/_react.default.createElement(_controls.NumberControl, _extends({}, props, control));
-
-    case 'check':
-    case 'inline-check':
-    case 'radio':
-    case 'inline-radio':
-    case 'select':
-    case 'multi-select':
-      return /*#__PURE__*/_react.default.createElement(_controls.OptionsControl, _extends({}, props, control, {
-        controlType: control.type
-      }));
-
-    case 'range':
-      return /*#__PURE__*/_react.default.createElement(_controls.RangeControl, _extends({}, props, control));
-
-    case 'text':
-      return /*#__PURE__*/_react.default.createElement(_controls.TextControl, _extends({}, props, control));
-
-    case 'file':
-      return /*#__PURE__*/_react.default.createElement(_controls.FilesControl, _extends({}, props, control));
-
-    default:
-      return /*#__PURE__*/_react.default.createElement(NoControl, null);
-  }
+  var Control = Controls[control.type] || NoControl;
+  return /*#__PURE__*/_react.default.createElement(Control, _extends({}, props, control, {
+    controlType: control.type
+  }));
 };
 
-exports.ArgControl = ArgControl;
+exports.ArgControl = ArgControl;
+ArgControl.displayName = "ArgControl";

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ArgRow = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.symbol.js");
@@ -53,12 +55,18 @@ var Description = _theming.styled.div(function (_ref2) {
         color: theme.color.secondary
       }
     },
-    code: (0, _shared.codeCommon)({
+    code: Object.assign({}, (0, _shared.codeCommon)({
       theme: theme
+    }), {
+      fontSize: 12,
+      fontFamily: theme.typography.fonts.mono
     }),
     '& code': {
       margin: 0,
       display: 'inline-block'
+    },
+    '& pre > code': {
+      whiteSpace: 'pre-wrap'
     }
   };
 });

package/dist/cjs/blocks/ArgsTable/ArgsTable.js

@@ -35,8 +35,6 @@ require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.entries.js");
 
-require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.object.keys.js");
 
 require("core-js/modules/es.array.map.js");
@@ -386,7 +384,7 @@ var ArgsTable = function ArgsTable(props) {
     },
     title: "Reset controls"
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "sync",
+    icon: "undo",
     "aria-hidden": true
   })))) : null)), /*#__PURE__*/_react.default.createElement("tbody", {
     className: "docblock-argstable-body"

package/dist/cjs/blocks/ColorPalette.js

@@ -86,18 +86,34 @@ var SwatchLabels = _theming.styled.div({
   flexDirection: 'row'
 });
 
-var Swatch = _theming.styled.div({
-  flex: 1
+var Swatch = _theming.styled.div(function (_ref4) {
+  var background = _ref4.background;
+  return {
+    position: 'relative',
+    flex: 1,
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background: background,
+      content: '""'
+    }
+  };
 });
 
-var SwatchColors = _theming.styled.div(function (_ref4) {
-  var theme = _ref4.theme;
+var SwatchColors = _theming.styled.div(function (_ref5) {
+  var theme = _ref5.theme;
   return Object.assign({}, (0, _BlockBackgroundStyles.getBlockBackgroundStyle)(theme), {
     display: 'flex',
     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'
   });
 });
 
@@ -128,8 +144,8 @@ var ListSwatches = _theming.styled.div({
   flex: 1
 });
 
-var ListHeading = _theming.styled.div(function (_ref5) {
-  var theme = _ref5.theme;
+var ListHeading = _theming.styled.div(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     display: 'flex',
     flexDirection: 'row',
@@ -140,8 +156,8 @@ var ListHeading = _theming.styled.div(function (_ref5) {
   };
 });
 
-var List = _theming.styled.div(function (_ref6) {
-  var theme = _ref6.theme;
+var List = _theming.styled.div(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     fontSize: theme.typography.size.s2,
     lineHeight: "20px",
@@ -154,9 +170,7 @@ function renderSwatch(color, index) {
   return /*#__PURE__*/_react.default.createElement(Swatch, {
     key: "".concat(color, "-").concat(index),
     title: color,
-    style: {
-      background: color
-    }
+    background: color
   });
 }
 
@@ -193,10 +207,10 @@ renderSwatchSpecimen.displayName = "renderSwatchSpecimen";
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-var ColorItem = function ColorItem(_ref7) {
-  var title = _ref7.title,
-      subtitle = _ref7.subtitle,
-      colors = _ref7.colors;
+var ColorItem = function ColorItem(_ref8) {
+  var title = _ref8.title,
+      subtitle = _ref8.subtitle,
+      colors = _ref8.colors;
   return /*#__PURE__*/_react.default.createElement(Item, null, /*#__PURE__*/_react.default.createElement(ItemDescription, null, /*#__PURE__*/_react.default.createElement(ItemTitle, null, title), /*#__PURE__*/_react.default.createElement(ItemSubtitle, null, subtitle)), /*#__PURE__*/_react.default.createElement(Swatches, null, renderSwatchSpecimen(colors)));
 };
 
@@ -207,9 +221,9 @@ ColorItem.displayName = "ColorItem";
  * Styleguide documentation for colors, including names, captions, and color swatches,
  * all specified as `ColorItem` children of this wrapper component.
  */
-var ColorPalette = function ColorPalette(_ref8) {
-  var children = _ref8.children,
-      props = _objectWithoutProperties(_ref8, ["children"]);
+var ColorPalette = function ColorPalette(_ref9) {
+  var children = _ref9.children,
+      props = _objectWithoutProperties(_ref9, ["children"]);
 
   return /*#__PURE__*/_react.default.createElement(_DocumentFormatting.ResetWrapper, null, /*#__PURE__*/_react.default.createElement(List, _extends({}, props, {
     className: "docblock-colorpalette"

package/dist/cjs/blocks/Preview.js

@@ -8,8 +8,6 @@ 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");
@@ -33,12 +31,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Preview = void 0;
 
-require("core-js/modules/es.object.assign.js");
+require("regenerator-runtime/runtime.js");
 
-require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.object.assign.js");
 
 require("core-js/modules/es.array.concat.js");
 
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.filter.js");
+
 require("core-js/modules/es.array.join.js");
 
 require("core-js/modules/es.array.map.js");
@@ -49,6 +53,8 @@ var _polished = require("polished");
 
 var _theming = require("@storybook/theming");
 
+var _global = _interopRequireDefault(require("global"));
+
 var _BlockBackgroundStyles = require("./BlockBackgroundStyles");
 
 var _Source = require("./Source");
@@ -61,10 +67,16 @@ var _ZoomContext = require("./ZoomContext");
 
 var _Zoom = require("../Zoom/Zoom");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -212,7 +224,9 @@ var getSource = function getSource(withSource, expanded, setExpanded) {
     default:
       {
         return {
-          source: null,
+          source: /*#__PURE__*/_react.default.createElement(StyledSource, _extends({}, withSource, {
+            dark: true
+          })),
           actionItem: {
             title: 'Show code',
             className: 'docblock-code-toggle',
@@ -299,9 +313,67 @@ var Preview = function Preview(_ref8) {
 
   var previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
   var defaultActionItems = withSource ? [actionItem] : [];
-  var actionItems = additionalActions ? [].concat(defaultActionItems, _toConsumableArray(additionalActions)) : defaultActionItems; // @ts-ignore
+
+  var _useState5 = (0, _react.useState)(additionalActions ? _toConsumableArray(additionalActions) : []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      additionalActionItems = _useState6[0],
+      setAdditionalActionItems = _useState6[1];
+
+  var actionItems = [].concat(defaultActionItems, _toConsumableArray(additionalActionItems)); // @ts-ignore
 
   var layout = getLayout(_react.Children.count(children) === 1 ? [children] : children);
+  var globalWindow = _global.default.window;
+  var copyToClipboard = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(text) {
+      var _yield$import, createCopyToClipboardFunction;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve().then(function () {
+                return _interopRequireWildcard(require('../syntaxhighlighter/syntaxhighlighter'));
+              });
+
+            case 2:
+              _yield$import = _context.sent;
+              createCopyToClipboardFunction = _yield$import.createCopyToClipboardFunction;
+              createCopyToClipboardFunction();
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref9.apply(this, arguments);
+    };
+  }(), []);
+
+  var onCopyCapture = function onCopyCapture(e) {
+    e.preventDefault();
+
+    if (additionalActionItems.filter(function (item) {
+      return item.title === 'Copied';
+    }).length === 0) {
+      copyToClipboard(source.props.code).then(function () {
+        setAdditionalActionItems([].concat(_toConsumableArray(additionalActionItems), [{
+          title: 'Copied',
+          onClick: function onClick() {}
+        }]));
+        globalWindow.setTimeout(function () {
+          return setAdditionalActionItems(additionalActionItems.filter(function (item) {
+            return item.title !== 'Copied';
+          }));
+        }, 1500);
+      });
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(PreviewContainer, _extends({
     withSource: withSource,
     withToolbar: withToolbar
@@ -322,7 +394,8 @@ var Preview = function Preview(_ref8) {
       scale: scale
     }
   }, /*#__PURE__*/_react.default.createElement(Relative, {
-    className: "docs-story"
+    className: "docs-story",
+    onCopyCapture: withSource && onCopyCapture
   }, /*#__PURE__*/_react.default.createElement(ChildrenContainer, {
     isColumn: isColumn || !Array.isArray(children),
     columns: columns,
@@ -336,7 +409,7 @@ var Preview = function Preview(_ref8) {
     }, child);
   }) : /*#__PURE__*/_react.default.createElement("div", null, children))), /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
     actionItems: actionItems
-  }))), withSource && source);
+  }))), withSource && expanded && source);
 };
 
 exports.Preview = Preview;

package/dist/cjs/controls/Boolean.js

@@ -101,7 +101,7 @@ var Label = _theming.styled.label(function (_ref) {
       }
     },
     'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-      background: theme.background.bar,
+      background: theme.background.app,
       boxShadow: "".concat((0, _polished.opacify)(0.1, theme.appBorderColor), " 0 0 2px"),
       color: theme.color.defaultText,
       padding: '7px 15px'
@@ -129,6 +129,7 @@ var BooleanControl = function BooleanControl(_ref2) {
 
   if (value === undefined) {
     return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
+      id: (0, _helpers.getControlSetterButtonId)(name),
       onClick: onSetFalse
     }, "Set boolean");
   }

package/dist/cjs/controls/Number.js

@@ -124,6 +124,7 @@ var NumberControl = function NumberControl(_ref) {
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
+      id: (0, _helpers.getControlSetterButtonId)(name),
       onClick: onForceVisible
     }, "Set number");
   }

package/dist/cjs/controls/Object.js

@@ -355,6 +355,7 @@ var ObjectControl = function ObjectControl(_ref7) {
 
   if (!hasData) {
     return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
+      id: (0, _helpers.getControlSetterButtonId)(name),
       onClick: onForceVisible
     }, "Set object");
   }

package/dist/cjs/controls/Text.js

@@ -82,6 +82,7 @@ var TextControl = function TextControl(_ref) {
 
   if (value === undefined) {
     return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {
+      id: (0, _helpers.getControlSetterButtonId)(name),
       onClick: onForceVisible
     }, "Set string");
   }

package/dist/cjs/controls/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getControlId = void 0;
+exports.getControlSetterButtonId = exports.getControlId = void 0;
 
 require("core-js/modules/es.string.replace.js");
 
@@ -18,5 +18,18 @@ require("core-js/modules/es.regexp.exec.js");
 var getControlId = function getControlId(value) {
   return "control-".concat(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'
+ */
+
+
+exports.getControlId = getControlId;
+
+var getControlSetterButtonId = function getControlSetterButtonId(value) {
+  return "set-".concat(value.replace(/\s+/g, '-'));
+};
 
-exports.getControlId = getControlId;
+exports.getControlSetterButtonId = getControlSetterButtonId;

package/dist/cjs/controls/index.js

@@ -48,20 +48,6 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 
-var _Array = require("./Array");
-
-Object.keys(_Array).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Array[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Array[key];
-    }
-  });
-});
-
 var _Boolean = require("./Boolean");
 
 Object.keys(_Boolean).forEach(function (key) {

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

@@ -9,10 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionsControl = void 0;
 
-require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.object.assign.js");
 
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
@@ -29,8 +31,6 @@ var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 /**
@@ -55,6 +55,15 @@ var normalizeOptions = function normalizeOptions(options, labels) {
   return options;
 };
 
+var Controls = {
+  check: _Checkbox.CheckboxControl,
+  'inline-check': _Checkbox.CheckboxControl,
+  radio: _Radio.RadioControl,
+  'inline-radio': _Radio.RadioControl,
+  select: _Select.SelectControl,
+  'multi-select': _Select.SelectControl
+};
+
 var OptionsControl = function OptionsControl(props) {
   var _props$type = props.type,
       type = _props$type === void 0 ? 'select' : _props$type,
@@ -62,35 +71,22 @@ var OptionsControl = function OptionsControl(props) {
       labels = props.labels,
       argType = props.argType;
   var 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) {
     _clientLogger.once.warn((0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.\n\n      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions\n    "]))));
   }
 
-  switch (type) {
-    case 'check':
-    case 'inline-check':
-      return /*#__PURE__*/_react.default.createElement(_Checkbox.CheckboxControl, _extends({}, normalized, {
-        isInline: type === 'inline-check'
-      }));
-
-    case 'radio':
-    case 'inline-radio':
-      return /*#__PURE__*/_react.default.createElement(_Radio.RadioControl, _extends({}, normalized, {
-        isInline: type === 'inline-radio'
-      }));
-
-    case 'select':
-    case 'multi-select':
-      return /*#__PURE__*/_react.default.createElement(_Select.SelectControl, _extends({}, normalized, {
-        isMulti: type === 'multi-select'
-      }));
-
-    default:
-      throw new Error("Unknown options type: ".concat(type));
+  var Control = Controls[type];
+
+  if (Control) {
+    return /*#__PURE__*/_react.default.createElement(Control, normalized);
   }
+
+  throw new Error("Unknown options type: ".concat(type));
 };
 
 exports.OptionsControl = OptionsControl;

package/dist/cjs/icon/icons.js

@@ -113,7 +113,10 @@ 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/cjs/index.js

@@ -243,6 +243,8 @@ require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.keys.js");
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = require("react");
 
 var _DocumentFormatting = require("./typography/DocumentFormatting");
@@ -345,7 +347,9 @@ var _Loader = require("./Loader/Loader");
 var resetComponents = {};
 exports.resetComponents = resetComponents;
 Object.keys(_DocumentFormatting.components).forEach(function (key) {
-  resetComponents[key] = function (props) {
-    return /*#__PURE__*/(0, _react.createElement)(key, props);
-  };
+  resetComponents[key] = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    return /*#__PURE__*/(0, _react.createElement)(key, Object.assign({}, props, {
+      ref: ref
+    }));
+  });
 });