@storybook/components 6.4.0-beta.3 → 6.4.0-beta.33

package/dist/cjs/blocks/Typeset.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withWeightText = exports.withFontFamily = exports.withFontWeight = exports.withFontSizes = exports.default = void 0;
+exports.WithWeightText = exports.WithFontFamily = exports.WithFontWeight = exports.WithFontSizes = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -20,36 +20,36 @@ var fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px']
 var fontWeight = 900;
 var fontFamily = 'monospace';
 
-var withFontSizes = function withFontSizes() {
+var WithFontSizes = function WithFontSizes() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes
   });
 };
 
-exports.withFontSizes = withFontSizes;
-withFontSizes.displayName = "withFontSizes";
+exports.WithFontSizes = WithFontSizes;
+WithFontSizes.displayName = "WithFontSizes";
 
-var withFontWeight = function withFontWeight() {
+var WithFontWeight = function WithFontWeight() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight
   });
 };
 
-exports.withFontWeight = withFontWeight;
-withFontWeight.displayName = "withFontWeight";
+exports.WithFontWeight = WithFontWeight;
+WithFontWeight.displayName = "WithFontWeight";
 
-var withFontFamily = function withFontFamily() {
+var WithFontFamily = function WithFontFamily() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontFamily: fontFamily
   });
 };
 
-exports.withFontFamily = withFontFamily;
-withFontFamily.displayName = "withFontFamily";
+exports.WithFontFamily = WithFontFamily;
+WithFontFamily.displayName = "WithFontFamily";
 
-var withWeightText = function withWeightText() {
+var WithWeightText = function WithWeightText() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight,
@@ -57,5 +57,5 @@ var withWeightText = function withWeightText() {
   });
 };
 
-exports.withWeightText = withWeightText;
-withWeightText.displayName = "withWeightText";
+exports.WithWeightText = WithWeightText;
+WithWeightText.displayName = "WithWeightText";

package/dist/cjs/brand/StorybookLogo.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normal = exports.default = void 0;
+exports.Normal = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,11 +17,11 @@ var _default = {
 };
 exports.default = _default;
 
-var normal = function normal() {
+var Normal = function Normal() {
   return /*#__PURE__*/_react.default.createElement(_StorybookLogo.StorybookLogo, {
     alt: "Storybook logo"
   });
 };
 
-exports.normal = normal;
-normal.displayName = "normal";
+exports.Normal = Normal;
+Normal.displayName = "Normal";

package/dist/cjs/icon/icons.js

@@ -117,6 +117,8 @@ var icons = {
   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',
+  rewind: 'm631.8 642.6 345 245.4c7.7 5.4 15 8 21.4 8 15.9 0 26.8-15.5 26.8-42.3V170.3c0-26.8-11-42.3-26.8-42.3-6.4 0-13.7 2.6-21.4 8l-345 245.4v-211c0-26.9-10.9-42.4-26.8-42.4-6.4 0-13.7 2.6-21.4 8L129 459.4V192a64 64 0 0 0-128 0v640a64 64 0 0 0 128 0V564.6L583.6 888c7.7 5.4 15 8 21.4 8 15.9 0 26.8-15.5 26.8-42.3v-211Z',
+  fastforward: 'M398.2 386.4 53.2 141c-7.7-5.4-15-8-21.4-8C15.9 133 5 148.5 5 175.3v683.4C5 885.5 16 901 31.8 901c6.4 0 13.7-2.6 21.4-8l345-245.4v211c0 26.9 11 42.4 26.8 42.4 6.4 0 13.7-2.6 21.4-8L901 569.6V837a64 64 0 0 0 128 0V197a64 64 0 0 0-128 0v267.4L446.4 141c-7.7-5.4-15-8-21.4-8-15.9 0-26.8 15.5-26.8 42.3v211Z',
   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/placeholder/placeholder.stories.js

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.twoChildren = exports.singleChild = exports.default = void 0;
+exports.TwoChildren = exports.SingleChild = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,14 +41,14 @@ var _default = {
 };
 exports.default = _default;
 
-var singleChild = function singleChild() {
+var SingleChild = function SingleChild() {
   return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, "This is a placeholder with single child, it's bolded");
 };
 
-exports.singleChild = singleChild;
-singleChild.displayName = "singleChild";
+exports.SingleChild = SingleChild;
+SingleChild.displayName = "SingleChild";
 
-var twoChildren = function twoChildren() {
+var TwoChildren = function TwoChildren() {
   return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: "title"
   }, "This has two children, the first bold"), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -60,5 +60,5 @@ var twoChildren = function twoChildren() {
   }, "link")));
 };
 
-exports.twoChildren = twoChildren;
-twoChildren.displayName = "twoChildren";
+exports.TwoChildren = TwoChildren;
+TwoChildren.displayName = "TwoChildren";

package/dist/cjs/tabs/tabs.js

@@ -99,7 +99,7 @@ var Wrapper = _theming.styled.div(function (_ref) {
 var TabBar = _theming.styled.div({
   overflow: 'hidden',
   '&:first-of-type': {
-    marginLeft: 0
+    marginLeft: -3
   }
 });
 

package/dist/cjs/tooltip/TooltipNote.js

@@ -34,7 +34,7 @@ var Note = _theming.styled.div(function (_ref) {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     zIndex: -1,
-    background: 'rgba(0, 0, 0, 0.4)',
+    background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
     margin: 6
   };
 });

package/dist/cjs/typography/DocumentFormatting.js

@@ -13,10 +13,10 @@ require("core-js/modules/es.string.match.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
-require("core-js/modules/es.array.join.js");
-
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.array.join.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -442,6 +442,12 @@ var DefaultCodeBlock = _theming.styled.code(function (_ref16) {
   };
 }, _shared.codeCommon);
 
+var isInlineCodeRegex = /[\n\r]/g;
+
+var isReactChildString = function isReactChildString(child) {
+  return typeof child === 'string';
+};
+
 var Code = function Code(_ref17) {
   var _language$;
 
@@ -450,12 +456,17 @@ var Code = function Code(_ref17) {
       props = _objectWithoutProperties(_ref17, ["className", "children"]);
 
   var language = (className || '').match(/lang-(\S+)/);
-  var isInlineCode = !children.match(/[\n\r]/g);
+
+  var childrenArray = _react.default.Children.toArray(children);
+
+  var isInlineCode = !childrenArray.filter(isReactChildString).some(function (child) {
+    return child.match(isInlineCodeRegex);
+  });
 
   if (isInlineCode) {
     return /*#__PURE__*/_react.default.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/_react.default.createElement(_Source.StyledSyntaxHighlighter, _extends({

package/dist/cjs/typography/DocumentWrapper.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withDOM = exports.withMarkdown = exports.default = void 0;
+exports.WithDOM = exports.WithMarkdown = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -26,14 +26,14 @@ var _default = {
 };
 exports.default = _default;
 
-var withMarkdown = function withMarkdown() {
+var WithMarkdown = function WithMarkdown() {
   return /*#__PURE__*/_react.default.createElement(_DocumentWrapper.DocumentWrapper, null, /*#__PURE__*/_react.default.createElement(_DocumentFormattingSample.default, null));
 };
 
-exports.withMarkdown = withMarkdown;
-withMarkdown.displayName = "withMarkdown";
+exports.WithMarkdown = WithMarkdown;
+WithMarkdown.displayName = "WithMarkdown";
 
-var withDOM = function withDOM() {
+var WithDOM = function WithDOM() {
   return /*#__PURE__*/_react.default.createElement(_DocumentWrapper.DocumentWrapper, null, /*#__PURE__*/_react.default.createElement("h1", null, "h1 Heading"), /*#__PURE__*/_react.default.createElement("h2", null, "h2 Heading"), /*#__PURE__*/_react.default.createElement("h3", null, "h3 Heading"), /*#__PURE__*/_react.default.createElement("h4", null, "h4 Heading"), /*#__PURE__*/_react.default.createElement("h5", null, "h5 Heading"), /*#__PURE__*/_react.default.createElement("h6", null, "h6 Heading"), /*#__PURE__*/_react.default.createElement("h2", null, "Typographic replacements"), /*#__PURE__*/_react.default.createElement("p", null, "Enable typographer option to see result."), /*#__PURE__*/_react.default.createElement("p", null, "\xA9 \xA9 \xAE \xAE \u2122 \u2122 \xA7 \xA7 \xB1"), /*#__PURE__*/_react.default.createElement("p", null, "test\u2026 test\u2026 test\u2026 test?.. test!.."), /*#__PURE__*/_react.default.createElement("p", null, "!!! ??? , \u2013 \u2014"), /*#__PURE__*/_react.default.createElement("p", null, "\u201CSmartypants, double quotes\u201D and \u2018single quotes\u2019"), /*#__PURE__*/_react.default.createElement("h2", null, "Emphasis"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "This is bold text")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "This is bold text")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("em", null, "This is italic text")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("em", null, "This is italic text")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("em", null, /*#__PURE__*/_react.default.createElement("strong", null, "This is bold italic text"))), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("s", null, "Strikethrough")), /*#__PURE__*/_react.default.createElement("h2", null, "Blockquotes"), /*#__PURE__*/_react.default.createElement("blockquote", null, /*#__PURE__*/_react.default.createElement("p", null, "Blockquotes can also be nested\u2026"), /*#__PURE__*/_react.default.createElement("blockquote", null, /*#__PURE__*/_react.default.createElement("p", null, "\u2026by using additional greater-than signs right next to each other\u2026"), /*#__PURE__*/_react.default.createElement("blockquote", null, /*#__PURE__*/_react.default.createElement("p", null, "\u2026or with spaces between arrows.")))), /*#__PURE__*/_react.default.createElement("h2", null, "Lists"), /*#__PURE__*/_react.default.createElement("p", null, "Unordered"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Create a list by starting a line with ", /*#__PURE__*/_react.default.createElement("code", null, "+"), ", ", /*#__PURE__*/_react.default.createElement("code", null, "-"), ", or ", /*#__PURE__*/_react.default.createElement("code", null, "*")), /*#__PURE__*/_react.default.createElement("li", null, "Sub-lists are made by indenting 2 spaces:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Marker character change forces new list start:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Ac tristique libero volutpat at")), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Facilisis in pretium nisl aliquet")), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Nulla volutpat aliquam velit"))))), /*#__PURE__*/_react.default.createElement("li", null, "Very easy!")), /*#__PURE__*/_react.default.createElement("p", null, "Ordered"), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, "Consectetur adipiscing elit")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, "Integer molestie lorem at massa")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, "You can use sequential numbers\u2026")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, "\u2026or keep all the numbers as ", /*#__PURE__*/_react.default.createElement("code", null, "1.")))), /*#__PURE__*/_react.default.createElement("p", null, "Start numbering with offset:"), /*#__PURE__*/_react.default.createElement("ol", {
     start: 57
   }, /*#__PURE__*/_react.default.createElement("li", null, "foo"), /*#__PURE__*/_react.default.createElement("li", null, "bar")), /*#__PURE__*/_react.default.createElement("h2", null, "Horizontal Rule"), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("h2", null, "Tables"), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Option"), /*#__PURE__*/_react.default.createElement("th", null, "Description"))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "data"), /*#__PURE__*/_react.default.createElement("td", null, "path to data files to supply the data that will be passed into templates.")), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "engine"), /*#__PURE__*/_react.default.createElement("td", null, "engine to be used for processing templates. Handlebars is the default.")), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "ext"), /*#__PURE__*/_react.default.createElement("td", null, "extension to be used for dest files.")))), /*#__PURE__*/_react.default.createElement("p", null, "Right aligned columns"), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
@@ -85,5 +85,5 @@ var withDOM = function withDOM() {
   })));
 };
 
-exports.withDOM = withDOM;
-withDOM.displayName = "withDOM";
+exports.WithDOM = WithDOM;
+WithDOM.displayName = "WithDOM";

package/dist/cjs/typography/link/link.js

@@ -183,7 +183,7 @@ var Link = function Link(_ref8) {
       rest = _objectWithoutProperties(_ref8, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
 
   return /*#__PURE__*/_react.default.createElement(A, _extends({}, rest, {
-    onClick: cancel ? function (e) {
+    onClick: onClick && cancel ? function (e) {
       return cancelled(e, onClick);
     } : onClick,
     className: className
@@ -201,7 +201,7 @@ Link.defaultProps = {
   cancel: true,
   className: undefined,
   style: undefined,
-  onClick: function onClick() {},
+  onClick: undefined,
   withArrow: false,
   containsIcon: false
 };

package/dist/cjs/typography/typography.stories.mdx

@@ -0,0 +1,75 @@
+import { typography } from '@storybook/theming';
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
+  (size) => `${typography.size[size]}px`
+);
+
+export const sampleText =
+  'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
+
+<Meta title="Basics/Typography" />
+
+## Sans-serif
+
+```
+font-family:
+  "Nunito Sans",
+  -apple-system,
+  ".SFNSText-Regular",
+  "San Francisco",
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
+```
+
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.black}
+  sampleText={sampleText}
+/>
+
+## Monospace
+
+```
+font-family:
+  ui-monospace,
+  Menlo,
+  Monaco,
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  "Source Code Pro",
+  "Droid Sans Mono",
+  "Courier New",
+  monospace;
+```
+
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>

package/dist/esm/ActionBar/ActionBar.stories.js

@@ -20,7 +20,7 @@ export default {
     }, storyFn());
   }]
 };
-export var singleItem = function singleItem() {
+export var SingleItem = function SingleItem() {
   return /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: [{
       title: 'Clear',
@@ -28,8 +28,8 @@ export var singleItem = function singleItem() {
     }]
   });
 };
-singleItem.displayName = "singleItem";
-export var manyItems = function manyItems() {
+SingleItem.displayName = "SingleItem";
+export var ManyItems = function ManyItems() {
   return /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: [{
       title: 'Action string',
@@ -44,4 +44,4 @@ export var manyItems = function manyItems() {
     }]
   });
 };
-manyItems.displayName = "manyItems";
+ManyItems.displayName = "ManyItems";

package/dist/esm/ScrollArea/GlobalScrollAreaStyles.js

@@ -418,7 +418,7 @@ export var getScrollAreaStyles = function getScrollAreaStyles(theme) {
       borderRadius: 10
     },
     '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-      background: theme.color.darker,
+      background: theme.color.mediumdark,
       opacity: 0.5
     },
     '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {

package/dist/esm/ScrollArea/ScrollArea.stories.js

@@ -37,7 +37,7 @@ export default {
     return /*#__PURE__*/React.createElement(Wrapper, null, storyFn());
   }]
 };
-export var vertical = function vertical() {
+export var Vertical = function Vertical() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     vertical: true
   }, list(function (i) {
@@ -46,8 +46,8 @@ export var vertical = function vertical() {
     }, /*#__PURE__*/React.createElement(Block, null, i), /*#__PURE__*/React.createElement("br", null));
   }));
 };
-vertical.displayName = "vertical";
-export var horizontal = function horizontal() {
+Vertical.displayName = "Vertical";
+export var Horizontal = function Horizontal() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true
   }, list(function (i) {
@@ -56,8 +56,8 @@ export var horizontal = function horizontal() {
     }, i);
   }));
 };
-horizontal.displayName = "horizontal";
-export var both = function both() {
+Horizontal.displayName = "Horizontal";
+export var Both = function Both() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true,
     vertical: true
@@ -71,8 +71,8 @@ export var both = function both() {
     }), /*#__PURE__*/React.createElement("br", null));
   }));
 };
-both.displayName = "both";
-export var withOuterBorder = function withOuterBorder() {
+Both.displayName = "Both";
+export var WithOuterBorder = function WithOuterBorder() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true,
     vertical: true
@@ -85,4 +85,4 @@ export var withOuterBorder = function withOuterBorder() {
     }
   }));
 };
-withOuterBorder.displayName = "withOuterBorder";
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/esm/Zoom/Zoom.stories.js

@@ -57,18 +57,18 @@ var TemplateElement = function TemplateElement(args) {
 };
 
 TemplateElement.displayName = "TemplateElement";
-export var elementActualSize = TemplateElement.bind({});
-elementActualSize.args = {
+export var ElementActualSize = TemplateElement.bind({});
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-export var elementZoomedIn = TemplateElement.bind({});
-elementZoomedIn.args = {
+export var ElementZoomedIn = TemplateElement.bind({});
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-export var elementZoomedOut = TemplateElement.bind({});
-elementZoomedOut.args = {
+export var ElementZoomedOut = TemplateElement.bind({});
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -115,34 +115,34 @@ var TemplateIFrame = function TemplateIFrame(args) {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-export var iFrameActualSize = TemplateIFrame.bind({});
-iFrameActualSize.args = {
+export var IFrameActualSize = TemplateIFrame.bind({});
+IFrameActualSize.args = {
   scale: 1,
   active: true
 }; // The iFrame stories are disabled because useGlobals works in practice
 // but, for some reason breaks in the stories for Zoom.iFrame
 
-iFrameActualSize.parameters = {
+IFrameActualSize.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-export var iFrameZoomedIn = TemplateIFrame.bind({});
-iFrameZoomedIn.args = {
+export var IFrameZoomedIn = TemplateIFrame.bind({});
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-export var iFrameZoomedOut = TemplateIFrame.bind({});
-iFrameZoomedOut.args = {
+export var IFrameZoomedOut = TemplateIFrame.bind({});
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/esm/bar/bar.js

@@ -33,12 +33,14 @@ var Side = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, function (_ref) {
   var left = _ref.left;
   return left ? {
     '& > *': {
-      marginLeft: 15
+      marginLeft: 4
     }
   } : {};
 }, function (_ref2) {
@@ -46,7 +48,7 @@ var Side = styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/esm/bar/button.js

@@ -10,6 +10,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import { styled, isPropValid } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { auto } from '@popperjs/core';
 
 var ButtonOrLink = function ButtonOrLink(_ref) {
   var children = _ref.children,
@@ -68,39 +70,68 @@ export var TabButton = styled(ButtonOrLink, {
 TabButton.displayName = 'TabButton';
 export var IconButton = styled(ButtonOrLink, {
   shouldForwardProp: isPropValid
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function () {
   return {
-    display: 'inline-flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    height: 40,
-    background: 'none',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 4,
     color: 'inherit',
-    padding: 0,
     cursor: 'pointer',
-    // Icon Buttons may have text depending on user preferences.
-    // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-    fontWeight: 'bold',
+    display: 'inline-flex',
     fontSize: 13,
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    '&:hover, &:focus': {
-      outline: '0 none',
-      color: theme.color.secondary
-    },
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
-}, function (_ref5) {
-  var active = _ref5.active,
-      theme = _ref5.theme;
+}, function (_ref4) {
+  var active = _ref4.active,
+      theme = _ref4.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
+}, function (_ref5) {
+  var disabled = _ref5.disabled,
+      theme = _ref5.theme;
+  return disabled ? {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  } : {
+    '&:hover, &:focus-visible': {
+      background: transparentize(0.88, theme.color.secondary),
+      color: theme.color.secondary
+    },
+    '&:focus-visible': {
+      outline: auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    }
+  };
+});
+IconButton.displayName = 'IconButton';
+var IconPlaceholder = styled.div(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    width: 14,
+    height: 14,
+    backgroundColor: theme.appBorderColor,
+    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite")
+  };
 });
-IconButton.displayName = 'IconButton';
+var IconButtonSkeletonWrapper = styled.div(function () {
+  return {
+    padding: 5
+  };
+});
+export var IconButtonSkeleton = function IconButtonSkeleton() {
+  return /*#__PURE__*/React.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/React.createElement(IconPlaceholder, null));
+};
+IconButtonSkeleton.displayName = "IconButtonSkeleton";