@storybook/addon-interactions 6.4.0-beta.31 → 6.4.0-rc.1

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

@@ -1,6 +1,28 @@
-import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.promise.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.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";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+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; }
+
 import "regenerator-runtime/runtime.js";
 
 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); } }
@@ -8,7 +30,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 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); }); }; }
 
 import { expect } from '@storybook/jest';
-import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
+import { within, waitFor, fireEvent, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
 import React from 'react';
 import { AccountForm } from './AccountForm';
 export default {
@@ -123,6 +145,134 @@ WaitFor.play = /*#__PURE__*/function () {
   };
 }();
 
+export var WaitForElementToBeRemoved = function WaitForElementToBeRemoved() {
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
+
+  React.useEffect(function () {
+    setTimeout(function () {
+      return setIsLoading(false);
+    }, 1500);
+  }, []);
+  return isLoading ? /*#__PURE__*/React.createElement("div", null, "Loading...") : /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, "Loaded!");
+};
+
+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 = within(canvasElement);
+            _context4.t0 = 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 expect(button).not.toBeNull();
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+
+  return function (_x3) {
+    return _ref7.apply(this, arguments);
+  };
+}();
+
+export var WithLoaders = function WithLoaders(args, _ref8) {
+  var todo = _ref8.loaded.todo;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: args.onSubmit(todo.title)
+  }, "Todo: ", todo.title);
+};
+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 = within(canvasElement);
+            _context6.next = 4;
+            return canvas.findByText('Todo: delectus aut autem');
+
+          case 4:
+            todoItem = _context6.sent;
+            _context6.next = 7;
+            return userEvent.click(todoItem);
+
+          case 7:
+            _context6.next = 9;
+            return expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
+
+          case 9:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  }));
+
+  return function (_x4) {
+    return _ref11.apply(this, arguments);
+  };
+}();
+
 export var Standard = {
   args: {
     passwordVerification: false
@@ -130,15 +280,15 @@ export var Standard = {
 };
 export 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 = within(canvasElement);
-              _context4.next = 4;
+              _context7.next = 4;
               return fireEvent.change(canvas.getByTestId('email'), {
                 target: {
                   value: 'michael@chromatic.com'
@@ -147,13 +297,13 @@ export 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);
     }
 
@@ -162,29 +312,29 @@ export var StandardEmailFilled = Object.assign({}, Standard, {
 });
 export 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 = within(canvasElement);
-              _context5.next = 4;
+              _context8.next = 4;
               return userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
 
             case 4:
-              _context5.next = 6;
+              _context8.next = 6;
               return userEvent.type(canvas.getByTestId('password1'), 'supersecret');
 
             case 6:
-              _context5.next = 8;
+              _context8.next = 8;
               return 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:
@@ -192,13 +342,13 @@ export 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);
     }
 
@@ -207,37 +357,37 @@ export var StandardEmailFailed = Object.assign({}, Standard, {
 });
 export 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 = within(canvasElement);
-              _context7.next = 4;
+              _context10.next = 4;
               return userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
 
             case 4:
-              _context7.next = 6;
+              _context10.next = 6;
               return userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
 
             case 6:
-              _context7.next = 8;
+              _context10.next = 8;
               return userEvent.click(canvas.getByTestId('submit'));
 
             case 8:
-              _context7.next = 10;
-              return waitFor( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                return regeneratorRuntime.wrap(function _callee6$(_context6) {
+              _context10.next = 10;
+              return 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 expect(args.onSubmit).toHaveBeenCalledTimes(1);
 
                       case 2:
-                        _context6.next = 4;
+                        _context9.next = 4;
                         return expect(args.onSubmit).toHaveBeenCalledWith({
                           email: 'michael@chromatic.com',
                           password: 'testpasswordthatwontfail'
@@ -245,21 +395,21 @@ export 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);
     }
 
@@ -268,33 +418,33 @@ export var StandardEmailSuccess = Object.assign({}, Standard, {
 });
 export 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 = within(context.canvasElement);
-              _context8.next = 3;
+              _context11.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context8.next = 5;
+              _context11.next = 5;
               return userEvent.type(canvas.getByTestId('password1'), 'asdf');
 
             case 5:
-              _context8.next = 7;
+              _context11.next = 7;
               return 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);
     }
 
@@ -303,43 +453,43 @@ export var StandardPasswordFailed = Object.assign({}, Standard, {
 });
 export 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 = within(context.canvasElement);
-              _context10.next = 3;
+              _context13.next = 3;
               return StandardPasswordFailed.play(context);
 
             case 3:
-              _context10.next = 5;
-              return waitFor( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
-                return regeneratorRuntime.wrap(function _callee9$(_context9) {
+              _context13.next = 5;
+              return 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 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);
     }
 
@@ -358,33 +508,33 @@ export var Verification = {
 };
 export 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 = within(context.canvasElement);
-              _context11.next = 3;
+              _context14.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context11.next = 5;
+              _context14.next = 5;
               return userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
 
             case 5:
-              _context11.next = 7;
+              _context14.next = 7;
               return 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);
     }
 
@@ -393,37 +543,37 @@ export var VerificationPasssword1 = Object.assign({}, Verification, {
 });
 export 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 = within(context.canvasElement);
-              _context12.next = 3;
+              _context15.next = 3;
               return StandardEmailFilled.play(context);
 
             case 3:
-              _context12.next = 5;
+              _context15.next = 5;
               return userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
 
             case 5:
-              _context12.next = 7;
+              _context15.next = 7;
               return userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
 
             case 7:
-              _context12.next = 9;
+              _context15.next = 9;
               return 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);
     }
 
@@ -432,59 +582,59 @@ export var VerificationPasswordMismatch = Object.assign({}, Verification, {
 });
 export 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 = 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 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 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 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/esm/components/Subnav/Subnav.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
+import { Button, IconButton, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { StatusBadge } from '../StatusBadge/StatusBadge';
@@ -37,16 +37,11 @@ var Note = styled(TooltipNote)(function (_ref3) {
     fontFamily: theme.typography.fonts.base
   };
 });
-export var StyledIconButton = styled(StyledButton)(function (_ref4) {
+export var StyledIconButton = styled(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'
   };
 });
 var StyledSeparator = styled(Separator)({
@@ -113,7 +108,6 @@ export var Subnav = function Subnav(_ref6) {
       note: "Go to start"
     })
   }, /*#__PURE__*/React.createElement(RewindButton, {
-    containsIcon: true,
     onClick: onStart,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -126,7 +120,6 @@ export var Subnav = function Subnav(_ref6) {
       note: "Go back"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onPrevious,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -139,7 +132,6 @@ export var Subnav = function Subnav(_ref6) {
       note: "Go forward"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onNext,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -152,7 +144,6 @@ export var Subnav = function Subnav(_ref6) {
       note: "Go to end"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onEnd,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/React.createElement(Icons, {