@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Tabs/Tabs.story.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.WithInputs = exports.WithData = exports.InitialAutoScroll = exports.Default = exports.Counts = exports.ConditionalTabs = exports.Cached = exports.AutoScrolling = void 0;
 var _test = require("@storybook/test");
 var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
 var _Sup = require("../Sup");
 var _ = require("./");
 var _Box = require("../Box");
 var _useCursor2 = require("use-cursor");
 var _Button = require("../Button");
 var _Input = require("../Input");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -23,204 +23,218 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = exports.default = {
-  title: "Components/Tabs"
-};
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      initialTabIndex: 2
-    }, {
-      justifyContent: "center"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: (0, _test.fn)()
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Overview"
-  }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Works for sale"
-  }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "CV"
-  }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Auction results"
-  }, "Auction results panel")));
-};
-Default.displayName = "Default";
-var WithData = exports.WithData = function WithData() {
-  var _useState = (0, _react.useState)({
-      name: "Pending"
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: function onChange(tabInfo) {
-      if (!tabInfo) return;
-      setData(tabInfo.data);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Overview",
-    data: {
-      name: "Overview"
-    }
-  }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Works for sale",
-    data: {
-      name: "Works for sale"
-    }
-  }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "CV",
-    data: {
-      name: "CV"
-    }
-  }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Auction results",
-    data: {
-      name: "Auction results"
+  title: "Components/Tabs",
+  component: _.Tabs,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Tabs component provides a tabbed interface for organizing content into separate panels. Supports keyboard navigation, custom initial tab selection, and flexible layout options."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
     }
-  }, "Auction results panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "No data"
-  }, "No data panel")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(data, null, 2)));
+  }
 };
-var Counts = exports.Counts = function Counts() {
-  return /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: (0, _test.fn)()
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Overview ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
-  }), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Works for sale ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
-  }), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "CV"
-  }), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Auction results ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
-  }));
+var Default = exports.Default = {
+  args: {
+    onChange: (0, _test.fn)(),
+    children: [/*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Overview",
+      key: "overview"
+    }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Works for sale",
+      key: "works"
+    }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV",
+      key: "cv"
+    }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Auction results",
+      key: "auctions"
+    }, "Auction results panel")]
+  }
 };
-Counts.displayName = "Counts";
-var ConditionalTabs = exports.ConditionalTabs = function ConditionalTabs() {
-  return /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: (0, _test.fn)()
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "First"
-  }, "First"), false && /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Second"
-  }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Third"
-  }, "Third"));
+var WithData = exports.WithData = {
+  render: function render() {
+    var _useState = (0, _react.useState)({
+        name: "Pending"
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: function onChange(tabInfo) {
+        if (!tabInfo) return;
+        setData(tabInfo.data);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Overview",
+      data: {
+        name: "Overview"
+      }
+    }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Works for sale",
+      data: {
+        name: "Works for sale"
+      }
+    }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV",
+      data: {
+        name: "CV"
+      }
+    }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Auction results",
+      data: {
+        name: "Auction results"
+      }
+    }, "Auction results panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "No data"
+    }, "No data panel")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(data, null, 2)));
+  }
 };
-ConditionalTabs.displayName = "ConditionalTabs";
-var AutoScrolling = exports.AutoScrolling = function AutoScrolling() {
-  var _useCursor = (0, _useCursor2.useCursor)({
-      max: 15
-    }),
-    initialTabIndex = _useCursor.index,
-    handleNext = _useCursor.handleNext;
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(handleNext, 500);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, [handleNext]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    initialTabIndex: initialTabIndex,
-    onChange: (0, _test.fn)()
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "First"
-  }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Second"
-  }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Third"
-  }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fourth"
-  }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fifth"
-  }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Sixth"
-  }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Seventh"
-  }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Eighth"
-  }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Nineth"
-  }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Tenth"
-  }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Eleventh"
-  }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Twelveth"
-  }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Thirteenth"
-  }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fourteenth"
-  }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fifteenth"
-  }, "Fifteenth")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
-    initialTabIndex: initialTabIndex
-  })));
+var Counts = exports.Counts = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Overview ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Works for sale ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV"
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Auction results ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }));
+  }
+};
+var ConditionalTabs = exports.ConditionalTabs = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), false && /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"));
+  }
 };
-AutoScrolling.story = {
+var AutoScrolling = exports.AutoScrolling = {
+  render: function render() {
+    var _useCursor = (0, _useCursor2.useCursor)({
+        max: 15
+      }),
+      initialTabIndex = _useCursor.index,
+      handleNext = _useCursor.handleNext;
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(handleNext, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, [handleNext]);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      initialTabIndex: initialTabIndex,
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifteenth"
+    }, "Fifteenth")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      initialTabIndex: initialTabIndex
+    })));
+  },
   parameters: {
     chromatic: {
       disable: true
     }
   }
 };
-var InitialAutoScroll = exports.InitialAutoScroll = function InitialAutoScroll() {
-  var _useState3 = (0, _react.useState)(1),
-    _useState4 = _slicedToArray(_useState3, 2),
-    key = _useState4[0],
-    setKey = _useState4[1];
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(function () {
-      setKey(function (key) {
-        return key + 1;
-      });
-    }, 500);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    height: 1000,
-    p: 2
-  }, "The vertical scroll of this page should be at the top.", /*#__PURE__*/_react.default.createElement("br", null), "Scroll down to see the tabs.", /*#__PURE__*/_react.default.createElement("br", null), "Render: #", key), /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: (0, _test.fn)(),
-    initialTabIndex: 14
-  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "First"
-  }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Second"
-  }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Third"
-  }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fourth"
-  }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fifth"
-  }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Sixth"
-  }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Seventh"
-  }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Eighth"
-  }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Nineth"
-  }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Tenth"
-  }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Eleventh"
-  }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Twelveth"
-  }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Thirteenth"
-  }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fourteenth"
-  }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Fifteenth"
-  }, "This tab should be active & visible on mount.")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    height: 1000
-  }));
-};
-InitialAutoScroll.story = {
+var InitialAutoScroll = exports.InitialAutoScroll = {
+  render: function render() {
+    var _useState3 = (0, _react.useState)(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      key = _useState4[0],
+      setKey = _useState4[1];
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(function () {
+        setKey(function (key) {
+          return key + 1;
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      height: 1000,
+      p: 2
+    }, "The vertical scroll of this page should be at the top.", /*#__PURE__*/_react.default.createElement("br", null), "Scroll down to see the tabs.", /*#__PURE__*/_react.default.createElement("br", null), "Render: #", key), /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)(),
+      initialTabIndex: 14
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifteenth"
+    }, "This tab should be active & visible on mount.")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      height: 1000
+    }));
+  },
   parameters: {
     chromatic: {
       disable: true
@@ -229,56 +243,59 @@ InitialAutoScroll.story = {
 };
 
 // FIXME: Currently renders one step behind
-var Cached = exports.Cached = function Cached() {
-  var _useState5 = (0, _react.useState)(1),
-    _useState6 = _slicedToArray(_useState5, 2),
-    count = _useState6[0],
-    setCount = _useState6[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    variant: "secondaryBlack",
-    size: "small",
-    mb: 1,
-    onClick: function onClick() {
-      setCount(function (prevCount) {
-        return prevCount + 1;
-      });
-    }
-  }, "Increment count \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "First"
-  }, "First \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Second"
-  }, "Second \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Third"
-  }, "Third \u2014 count: ", count)));
+var Cached = exports.Cached = {
+  render: function render() {
+    var _useState5 = (0, _react.useState)(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      count = _useState6[0],
+      setCount = _useState6[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      variant: "secondaryBlack",
+      size: "small",
+      mb: 1,
+      onClick: function onClick() {
+        setCount(function (prevCount) {
+          return prevCount + 1;
+        });
+      }
+    }, "Increment count \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third \u2014 count: ", count)));
+  }
 };
-var WithInputs = exports.WithInputs = function WithInputs() {
-  var _useState7 = (0, _react.useState)(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    value = _useState8[0],
-    setValue = _useState8[1];
-  var _useState9 = (0, _react.useState)(""),
-    _useState10 = _slicedToArray(_useState9, 2),
-    value2 = _useState10[0],
-    setValue2 = _useState10[1];
-  return /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "First"
-  }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
-    value: value
-  })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    value: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_.Tab, {
-    name: "Second"
-  }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
-    value2: value2
-  })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    value: value2,
-    onChange: function onChange(e) {
-      return setValue2(e.target.value);
-    }
-  })));
+var WithInputs = exports.WithInputs = {
+  render: function render() {
+    var _useState7 = (0, _react.useState)(""),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    var _useState9 = (0, _react.useState)(""),
+      _useState10 = _slicedToArray(_useState9, 2),
+      value2 = _useState10[0],
+      setValue2 = _useState10[1];
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      value: value
+    })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: value,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      value2: value2
+    })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: value2,
+      onChange: function onChange(e) {
+        return setValue2(e.target.value);
+      }
+    })));
+  }
 };
-WithInputs.displayName = "WithInputs";
 //# sourceMappingURL=Tabs.story.js.map