@storybook/addon-interactions 6.4.0-beta.29 → 6.4.0-beta.33

package/dist/cjs/components/AccountForm/addon-interactions.stories.js

@@ -1,16 +1,34 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.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");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VerificationSuccess = exports.VerificationPasswordMismatch = exports.VerificationPasssword1 = exports.Verification = exports.StandardFailHover = exports.StandardPasswordFailed = exports.StandardEmailSuccess = exports.StandardEmailFailed = exports.StandardEmailFilled = exports.Standard = exports.WaitFor = exports.Demo = exports.default = void 0;
-
-require("core-js/modules/es.object.assign.js");
+exports.VerificationSuccess = exports.VerificationPasswordMismatch = exports.VerificationPasssword1 = exports.Verification = exports.StandardFailHover = exports.StandardPasswordFailed = exports.StandardEmailSuccess = exports.StandardEmailFailed = exports.StandardEmailFilled = exports.Standard = exports.WithLoaders = exports.WaitForElementToBeRemoved = exports.WaitFor = exports.Demo = exports.default = void 0;
 
 require("core-js/modules/es.promise.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.object.assign.js");
+
 require("regenerator-runtime/runtime.js");
 
 var _jest = require("@storybook/jest");
@@ -23,6 +41,18 @@ var _AccountForm = require("./AccountForm");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 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); }); }; }
@@ -145,6 +175,139 @@ WaitFor.play = /*#__PURE__*/function () {
   };
 }();
 
+var WaitForElementToBeRemoved = function WaitForElementToBeRemoved() {
+  var _React$useState = _react.default.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    setTimeout(function () {
+      return setIsLoading(false);
+    }, 1500);
+  }, []);
+
+  return isLoading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, "Loaded!");
+};
+
+exports.WaitForElementToBeRemoved = WaitForElementToBeRemoved;
+
+WaitForElementToBeRemoved.play = /*#__PURE__*/function () {
+  var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref6) {
+    var canvasElement, canvas, button;
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            canvasElement = _ref6.canvasElement;
+            canvas = (0, _testingLibrary.within)(canvasElement);
+            _context4.t0 = _testingLibrary.waitForElementToBeRemoved;
+            _context4.next = 5;
+            return canvas.findByText('Loading...');
+
+          case 5:
+            _context4.t1 = _context4.sent;
+            _context4.t2 = {
+              timeout: 2000
+            };
+            _context4.next = 9;
+            return (0, _context4.t0)(_context4.t1, _context4.t2);
+
+          case 9:
+            _context4.next = 11;
+            return canvas.findByText('Loaded!');
+
+          case 11:
+            button = _context4.sent;
+            _context4.next = 14;
+            return (0, _jest.expect)(button).not.toBeNull();
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+
+  return function (_x3) {
+    return _ref7.apply(this, arguments);
+  };
+}();
+
+var WithLoaders = function WithLoaders(args, _ref8) {
+  var todo = _ref8.loaded.todo;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: args.onSubmit(todo.title)
+  }, "Todo: ", todo.title);
+};
+
+exports.WithLoaders = WithLoaders;
+WithLoaders.loaders = [/*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+  return regeneratorRuntime.wrap(function _callee5$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return new Promise(function (resolve) {
+            return setTimeout(resolve, 2000);
+          });
+
+        case 2:
+          return _context5.abrupt("return", {
+            todo: {
+              userId: 1,
+              id: 1,
+              title: 'delectus aut autem',
+              completed: false
+            }
+          });
+
+        case 3:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee5);
+}))];
+
+WithLoaders.play = /*#__PURE__*/function () {
+  var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(_ref10) {
+    var args, canvasElement, canvas, todoItem;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            args = _ref10.args, canvasElement = _ref10.canvasElement;
+            canvas = (0, _testingLibrary.within)(canvasElement);
+            _context6.next = 4;
+            return canvas.findByText('Todo: delectus aut autem');
+
+          case 4:
+            todoItem = _context6.sent;
+            _context6.next = 7;
+            return _testingLibrary.userEvent.click(todoItem);
+
+          case 7:
+            _context6.next = 9;
+            return (0, _jest.expect)(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
+
+          case 9:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  }));
+
+  return function (_x4) {
+    return _ref11.apply(this, arguments);
+  };
+}();
+
 var Standard = {
   args: {
     passwordVerification: false
@@ -153,15 +316,15 @@ var Standard = {
 exports.Standard = Standard;
 var StandardEmailFilled = Object.assign({}, Standard, {
   play: function () {
-    var _play = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref6) {
+    var _play = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(_ref12) {
       var canvasElement, canvas;
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      return regeneratorRuntime.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
-              canvasElement = _ref6.canvasElement;
+              canvasElement = _ref12.canvasElement;
               canvas = (0, _testingLibrary.within)(canvasElement);
-              _context4.next = 4;
+              _context7.next = 4;
               return _testingLibrary.fireEvent.change(canvas.getByTestId('email'), {
                 target: {
                   value: 'michael@chromatic.com'
@@ -170,13 +333,13 @@ var StandardEmailFilled = Object.assign({}, Standard, {
 
             case 4:
             case "end":
-              return _context4.stop();
+              return _context7.stop();
           }
         }
-      }, _callee4);
+      }, _callee7);
     }));
 
-    function play(_x3) {
+    function play(_x5) {
       return _play.apply(this, arguments);
     }
 
@@ -186,29 +349,29 @@ var StandardEmailFilled = Object.assign({}, Standard, {
 exports.StandardEmailFilled = StandardEmailFilled;
 var StandardEmailFailed = Object.assign({}, Standard, {
   play: function () {
-    var _play2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(_ref7) {
+    var _play2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(_ref13) {
       var args, canvasElement, canvas;
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      return regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
-              args = _ref7.args, canvasElement = _ref7.canvasElement;
+              args = _ref13.args, canvasElement = _ref13.canvasElement;
               canvas = (0, _testingLibrary.within)(canvasElement);
-              _context5.next = 4;
+              _context8.next = 4;
               return _testingLibrary.userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
 
             case 4:
-              _context5.next = 6;
+              _context8.next = 6;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'supersecret');
 
             case 6:
-              _context5.next = 8;
+              _context8.next = 8;
               return _testingLibrary.userEvent.click(canvas.getByRole('button', {
                 name: /create account/i
               }));
 
             case 8:
-              _context5.next = 10;
+              _context8.next = 10;
               return canvas.findByText('Please enter a correctly formatted email address');
 
             case 10:
@@ -216,13 +379,13 @@ var StandardEmailFailed = Object.assign({}, Standard, {
 
             case 11:
             case "end":
-              return _context5.stop();
+              return _context8.stop();
           }
         }
-      }, _callee5);
+      }, _callee8);
     }));
 
-    function play(_x4) {
+    function play(_x6) {
       return _play2.apply(this, arguments);
     }
 
@@ -232,37 +395,37 @@ var StandardEmailFailed = Object.assign({}, Standard, {
 exports.StandardEmailFailed = StandardEmailFailed;
 var StandardEmailSuccess = Object.assign({}, Standard, {
   play: function () {
-    var _play3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(_ref8) {
+    var _play3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(_ref14) {
       var args, canvasElement, canvas;
-      return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      return regeneratorRuntime.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
-              args = _ref8.args, canvasElement = _ref8.canvasElement;
+              args = _ref14.args, canvasElement = _ref14.canvasElement;
               canvas = (0, _testingLibrary.within)(canvasElement);
-              _context7.next = 4;
+              _context10.next = 4;
               return _testingLibrary.userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
 
             case 4:
-              _context7.next = 6;
+              _context10.next = 6;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
 
             case 6:
-              _context7.next = 8;
+              _context10.next = 8;
               return _testingLibrary.userEvent.click(canvas.getByTestId('submit'));
 
             case 8:
-              _context7.next = 10;
-              return (0, _testingLibrary.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                return regeneratorRuntime.wrap(function _callee6$(_context6) {
+              _context10.next = 10;
+              return (0, _testingLibrary.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+                return regeneratorRuntime.wrap(function _callee9$(_context9) {
                   while (1) {
-                    switch (_context6.prev = _context6.next) {
+                    switch (_context9.prev = _context9.next) {
                       case 0:
-                        _context6.next = 2;
+                        _context9.next = 2;
                         return (0, _jest.expect)(args.onSubmit).toHaveBeenCalledTimes(1);
 
                       case 2:
-                        _context6.next = 4;
+                        _context9.next = 4;
                         return (0, _jest.expect)(args.onSubmit).toHaveBeenCalledWith({
                           email: 'michael@chromatic.com',
                           password: 'testpasswordthatwontfail'
@@ -270,21 +433,21 @@ var StandardEmailSuccess = Object.assign({}, Standard, {
 
                       case 4:
                       case "end":
-                        return _context6.stop();
+                        return _context9.stop();
                     }
                   }
-                }, _callee6);
+                }, _callee9);
               })));
 
             case 10:
             case "end":
-              return _context7.stop();
+              return _context10.stop();
           }
         }
-      }, _callee7);
+      }, _callee10);
     }));
 
-    function play(_x5) {
+    function play(_x7) {
       return _play3.apply(this, arguments);
     }
 
@@ -294,33 +457,33 @@ var StandardEmailSuccess = Object.assign({}, Standard, {
 exports.StandardEmailSuccess = StandardEmailSuccess;
 var StandardPasswordFailed = Object.assign({}, Standard, {
   play: function () {
-    var _play4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(context) {
+    var _play4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(context) {
       var canvas;
-      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      return regeneratorRuntime.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
               canvas = (0, _testingLibrary.within)(context.canvasElement);
-              _context8.next = 3;
+              _context11.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context8.next = 5;
+              _context11.next = 5;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'asdf');
 
             case 5:
-              _context8.next = 7;
+              _context11.next = 7;
               return _testingLibrary.userEvent.click(canvas.getByTestId('submit'));
 
             case 7:
             case "end":
-              return _context8.stop();
+              return _context11.stop();
           }
         }
-      }, _callee8);
+      }, _callee11);
     }));
 
-    function play(_x6) {
+    function play(_x8) {
       return _play4.apply(this, arguments);
     }
 
@@ -330,43 +493,43 @@ var StandardPasswordFailed = Object.assign({}, Standard, {
 exports.StandardPasswordFailed = StandardPasswordFailed;
 var StandardFailHover = Object.assign({}, StandardPasswordFailed, {
   play: function () {
-    var _play5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(context) {
+    var _play5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(context) {
       var canvas;
-      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      return regeneratorRuntime.wrap(function _callee13$(_context13) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context13.prev = _context13.next) {
             case 0:
               canvas = (0, _testingLibrary.within)(context.canvasElement);
-              _context10.next = 3;
+              _context13.next = 3;
               return StandardPasswordFailed.play(context);
 
             case 3:
-              _context10.next = 5;
-              return (0, _testingLibrary.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
-                return regeneratorRuntime.wrap(function _callee9$(_context9) {
+              _context13.next = 5;
+              return (0, _testingLibrary.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+                return regeneratorRuntime.wrap(function _callee12$(_context12) {
                   while (1) {
-                    switch (_context9.prev = _context9.next) {
+                    switch (_context12.prev = _context12.next) {
                       case 0:
-                        _context9.next = 2;
+                        _context12.next = 2;
                         return _testingLibrary.userEvent.hover(canvas.getByTestId('password-error-info'));
 
                       case 2:
                       case "end":
-                        return _context9.stop();
+                        return _context12.stop();
                     }
                   }
-                }, _callee9);
+                }, _callee12);
               })));
 
             case 5:
             case "end":
-              return _context10.stop();
+              return _context13.stop();
           }
         }
-      }, _callee10);
+      }, _callee13);
     }));
 
-    function play(_x7) {
+    function play(_x9) {
       return _play5.apply(this, arguments);
     }
 
@@ -387,33 +550,33 @@ var Verification = {
 exports.Verification = Verification;
 var VerificationPasssword1 = Object.assign({}, Verification, {
   play: function () {
-    var _play6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(context) {
+    var _play6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(context) {
       var canvas;
-      return regeneratorRuntime.wrap(function _callee11$(_context11) {
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
               canvas = (0, _testingLibrary.within)(context.canvasElement);
-              _context11.next = 3;
+              _context14.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context11.next = 5;
+              _context14.next = 5;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
 
             case 5:
-              _context11.next = 7;
+              _context14.next = 7;
               return _testingLibrary.userEvent.click(canvas.getByTestId('submit'));
 
             case 7:
             case "end":
-              return _context11.stop();
+              return _context14.stop();
           }
         }
-      }, _callee11);
+      }, _callee14);
     }));
 
-    function play(_x8) {
+    function play(_x10) {
       return _play6.apply(this, arguments);
     }
 
@@ -423,37 +586,37 @@ var VerificationPasssword1 = Object.assign({}, Verification, {
 exports.VerificationPasssword1 = VerificationPasssword1;
 var VerificationPasswordMismatch = Object.assign({}, Verification, {
   play: function () {
-    var _play7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(context) {
+    var _play7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(context) {
       var canvas;
-      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
               canvas = (0, _testingLibrary.within)(context.canvasElement);
-              _context12.next = 3;
+              _context15.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context12.next = 5;
+              _context15.next = 5;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
 
             case 5:
-              _context12.next = 7;
+              _context15.next = 7;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
 
             case 7:
-              _context12.next = 9;
+              _context15.next = 9;
               return _testingLibrary.userEvent.click(canvas.getByTestId('submit'));
 
             case 9:
             case "end":
-              return _context12.stop();
+              return _context15.stop();
           }
         }
-      }, _callee12);
+      }, _callee15);
     }));
 
-    function play(_x9) {
+    function play(_x11) {
       return _play7.apply(this, arguments);
     }
 
@@ -463,59 +626,59 @@ var VerificationPasswordMismatch = Object.assign({}, Verification, {
 exports.VerificationPasswordMismatch = VerificationPasswordMismatch;
 var VerificationSuccess = Object.assign({}, Verification, {
   play: function () {
-    var _play8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(context) {
+    var _play8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(context) {
       var canvas;
-      return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context16.prev = _context16.next) {
             case 0:
               canvas = (0, _testingLibrary.within)(context.canvasElement);
-              _context13.next = 3;
+              _context16.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context13.next = 5;
+              _context16.next = 5;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 1000);
               });
 
             case 5:
-              _context13.next = 7;
+              _context16.next = 7;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password1'), 'helloyou', {
                 delay: 50
               });
 
             case 7:
-              _context13.next = 9;
+              _context16.next = 9;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 1000);
               });
 
             case 9:
-              _context13.next = 11;
+              _context16.next = 11;
               return _testingLibrary.userEvent.type(canvas.getByTestId('password2'), 'helloyou', {
                 delay: 50
               });
 
             case 11:
-              _context13.next = 13;
+              _context16.next = 13;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 1000);
               });
 
             case 13:
-              _context13.next = 15;
+              _context16.next = 15;
               return _testingLibrary.userEvent.click(canvas.getByTestId('submit'));
 
             case 15:
             case "end":
-              return _context13.stop();
+              return _context16.stop();
           }
         }
-      }, _callee13);
+      }, _callee16);
     }));
 
-    function play(_x10) {
+    function play(_x12) {
       return _play8.apply(this, arguments);
     }
 

package/dist/cjs/components/Subnav/Subnav.js

@@ -52,16 +52,11 @@ var Note = (0, _theming.styled)(_components.TooltipNote)(function (_ref3) {
     fontFamily: theme.typography.fonts.base
   };
 });
-var StyledIconButton = (0, _theming.styled)(StyledButton)(function (_ref4) {
+var StyledIconButton = (0, _theming.styled)(_components.IconButton)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     color: theme.color.mediumdark,
-    margin: '0 3px',
-    '&:not(:disabled)': {
-      '&:hover,&:focus-visible': {
-        background: theme.background.hoverable
-      }
-    }
+    margin: '0 3px'
   };
 });
 exports.StyledIconButton = StyledIconButton;
@@ -132,7 +127,6 @@ var Subnav = function Subnav(_ref6) {
       note: "Go to start"
     })
   }, /*#__PURE__*/_react.default.createElement(RewindButton, {
-    containsIcon: true,
     onClick: onStart,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
@@ -145,7 +139,6 @@ var Subnav = function Subnav(_ref6) {
       note: "Go back"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onPrevious,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
@@ -158,7 +151,6 @@ var Subnav = function Subnav(_ref6) {
       note: "Go forward"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onNext,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
@@ -171,7 +163,6 @@ var Subnav = function Subnav(_ref6) {
       note: "Go to end"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onEnd,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {