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

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

@@ -7,31 +7,31 @@ export default {
 var fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'];
 var fontWeight = 900;
 var fontFamily = 'monospace';
-export var withFontSizes = function withFontSizes() {
+export var WithFontSizes = function WithFontSizes() {
   return /*#__PURE__*/React.createElement(Typeset, {
     fontSizes: fontSizes
   });
 };
-withFontSizes.displayName = "withFontSizes";
-export var withFontWeight = function withFontWeight() {
+WithFontSizes.displayName = "WithFontSizes";
+export var WithFontWeight = function WithFontWeight() {
   return /*#__PURE__*/React.createElement(Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight
   });
 };
-withFontWeight.displayName = "withFontWeight";
-export var withFontFamily = function withFontFamily() {
+WithFontWeight.displayName = "WithFontWeight";
+export var WithFontFamily = function WithFontFamily() {
   return /*#__PURE__*/React.createElement(Typeset, {
     fontSizes: fontSizes,
     fontFamily: fontFamily
   });
 };
-withFontFamily.displayName = "withFontFamily";
-export var withWeightText = function withWeightText() {
+WithFontFamily.displayName = "WithFontFamily";
+export var WithWeightText = function WithWeightText() {
   return /*#__PURE__*/React.createElement(Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight,
     sampleText: "Heading"
   });
 };
-withWeightText.displayName = "withWeightText";
+WithWeightText.displayName = "WithWeightText";

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

@@ -4,9 +4,9 @@ export default {
   component: StorybookLogo,
   title: 'Basics/Brand/StorybookLogo'
 };
-export var normal = function normal() {
+export var Normal = function Normal() {
   return /*#__PURE__*/React.createElement(StorybookLogo, {
     alt: "Storybook logo"
   });
 };
-normal.displayName = "normal";
+Normal.displayName = "Normal";

package/dist/esm/icon/icons.js

@@ -111,6 +111,8 @@ export 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/esm/placeholder/placeholder.stories.js

@@ -5,11 +5,11 @@ export default {
   component: Placeholder,
   title: 'Basics/Placeholder'
 };
-export var singleChild = function singleChild() {
+export var SingleChild = function SingleChild() {
   return /*#__PURE__*/React.createElement(Placeholder, null, "This is a placeholder with single child, it's bolded");
 };
-singleChild.displayName = "singleChild";
-export var twoChildren = function twoChildren() {
+SingleChild.displayName = "SingleChild";
+export var TwoChildren = function TwoChildren() {
   return /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Fragment, {
     key: "title"
   }, "This has two children, the first bold"), /*#__PURE__*/React.createElement(Fragment, {
@@ -20,4 +20,4 @@ export var twoChildren = function twoChildren() {
     cancel: false
   }, "link")));
 };
-twoChildren.displayName = "twoChildren";
+TwoChildren.displayName = "TwoChildren";

package/dist/esm/tabs/tabs.js

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

package/dist/esm/tooltip/TooltipNote.js

@@ -20,7 +20,7 @@ var Note = 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/esm/typography/DocumentFormatting.js

@@ -1,8 +1,8 @@
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.string.match.js";
 import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
@@ -366,6 +366,12 @@ var DefaultCodeBlock = styled.code(function (_ref16) {
     color: 'inherit'
   };
 }, codeCommon);
+var isInlineCodeRegex = /[\n\r]/g;
+
+var isReactChildString = function isReactChildString(child) {
+  return typeof child === 'string';
+};
+
 export var Code = function Code(_ref17) {
   var _language$;
 
@@ -374,12 +380,15 @@ export 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.Children.toArray(children);
+  var isInlineCode = !childrenArray.filter(isReactChildString).some(function (child) {
+    return child.match(isInlineCodeRegex);
+  });
 
   if (isInlineCode) {
     return /*#__PURE__*/React.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({

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

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

package/dist/esm/typography/link/link.js

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

package/dist/esm/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/modern/ActionBar/ActionBar.stories.js

@@ -18,14 +18,14 @@ export default {
     }
   }, storyFn())]
 };
-export const singleItem = () => /*#__PURE__*/React.createElement(ActionBar, {
+export const SingleItem = () => /*#__PURE__*/React.createElement(ActionBar, {
   actionItems: [{
     title: 'Clear',
     onClick: action1
   }]
 });
-singleItem.displayName = "singleItem";
-export const manyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
+SingleItem.displayName = "SingleItem";
+export const ManyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
   actionItems: [{
     title: 'Action string',
     onClick: action1
@@ -38,4 +38,4 @@ export const manyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
     onClick: action3
   }]
 });
-manyItems.displayName = "manyItems";
+ManyItems.displayName = "ManyItems";

package/dist/modern/ScrollArea/GlobalScrollAreaStyles.js

@@ -410,7 +410,7 @@ export const 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/modern/ScrollArea/ScrollArea.stories.js

@@ -35,19 +35,19 @@ export default {
   title: 'Basics/ScrollArea',
   decorators: [storyFn => /*#__PURE__*/React.createElement(Wrapper, null, storyFn())]
 };
-export const vertical = () => /*#__PURE__*/React.createElement(ScrollArea, {
+export const Vertical = () => /*#__PURE__*/React.createElement(ScrollArea, {
   vertical: true
 }, list(i => /*#__PURE__*/React.createElement(Fragment, {
   key: i
 }, /*#__PURE__*/React.createElement(Block, null, i), /*#__PURE__*/React.createElement("br", null))));
-vertical.displayName = "vertical";
-export const horizontal = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Vertical.displayName = "Vertical";
+export const Horizontal = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true
 }, list(i => /*#__PURE__*/React.createElement(Block, {
   key: i
 }, i)));
-horizontal.displayName = "horizontal";
-export const both = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Horizontal.displayName = "Horizontal";
+export const Both = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true,
   vertical: true
 }, list(i => /*#__PURE__*/React.createElement(Fragment, {
@@ -55,8 +55,8 @@ export const both = () => /*#__PURE__*/React.createElement(ScrollArea, {
 }, list(ii => /*#__PURE__*/React.createElement(Block, {
   key: ii
 }, ii * i)), /*#__PURE__*/React.createElement("br", null))));
-both.displayName = "both";
-export const withOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Both.displayName = "Both";
+export const WithOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true,
   vertical: true
 }, /*#__PURE__*/React.createElement("div", {
@@ -67,4 +67,4 @@ export const withOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea
     background: `url('data:image/png;base64,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')`
   }
 }));
-withOuterBorder.displayName = "withOuterBorder";
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/modern/Zoom/Zoom.stories.js

@@ -32,18 +32,18 @@ const EXAMPLE_ELEMENT = /*#__PURE__*/React.createElement("div", {
 const TemplateElement = args => /*#__PURE__*/React.createElement(Zoom.Element, args);
 
 TemplateElement.displayName = "TemplateElement";
-export const elementActualSize = TemplateElement.bind({});
-elementActualSize.args = {
+export const ElementActualSize = TemplateElement.bind({});
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-export const elementZoomedIn = TemplateElement.bind({});
-elementZoomedIn.args = {
+export const ElementZoomedIn = TemplateElement.bind({});
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-export const elementZoomedOut = TemplateElement.bind({});
-elementZoomedOut.args = {
+export const ElementZoomedOut = TemplateElement.bind({});
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -79,34 +79,34 @@ const TemplateIFrame = args => {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-export const iFrameActualSize = TemplateIFrame.bind({});
-iFrameActualSize.args = {
+export const 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 const iFrameZoomedIn = TemplateIFrame.bind({});
-iFrameZoomedIn.args = {
+export const IFrameZoomedIn = TemplateIFrame.bind({});
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-export const iFrameZoomedOut = TemplateIFrame.bind({});
-iFrameZoomedOut.args = {
+export const IFrameZoomedOut = TemplateIFrame.bind({});
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/modern/bar/bar.js

@@ -7,19 +7,21 @@ const Side = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, ({
   left
 }) => left ? {
   '& > *': {
-    marginLeft: 15
+    marginLeft: 4
   }
 } : {}, ({
   right
 }) => right ? {
   marginLeft: 30,
   '& > *': {
-    marginRight: 15
+    marginRight: 4
   }
 } : {});
 Side.displayName = 'Side';

package/dist/modern/bar/button.js

@@ -4,6 +4,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';
 
 const ButtonOrLink = (_ref) => {
   let {
@@ -62,37 +64,59 @@ export const TabButton = styled(ButtonOrLink, {
 TabButton.displayName = 'TabButton';
 export const IconButton = styled(ButtonOrLink, {
   shouldForwardProp: isPropValid
-})(({
-  theme
-}) => ({
-  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
   }
 }), ({
   active,
   theme
 }) => active ? {
-  outline: '0 none',
-  borderBottomColor: theme.color.secondary
-} : {});
-IconButton.displayName = 'IconButton';
+  backgroundColor: theme.background.hoverable,
+  color: theme.color.secondary
+} : {}, ({
+  disabled,
+  theme
+}) => 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';
+const IconPlaceholder = styled.div(({
+  theme
+}) => ({
+  width: 14,
+  height: 14,
+  backgroundColor: theme.appBorderColor,
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
+}));
+const IconButtonSkeletonWrapper = styled.div(() => ({
+  padding: 5
+}));
+export const IconButtonSkeleton = () => /*#__PURE__*/React.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/React.createElement(IconPlaceholder, null));
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

package/dist/modern/bar/button.stories.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconButton, IconButtonSkeleton } from './button';
+import { Icons } from '../icon/icon';
+export default {
+  component: IconButton,
+  title: 'Basics/IconButton'
+};
+export const Loading = () => /*#__PURE__*/React.createElement(IconButtonSkeleton, null);
+Loading.displayName = "Loading";
+// eslint-disable-next-line no-underscore-dangle
+export const _IconButton = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "bookmark"
+}));
+_IconButton.displayName = "_IconButton";
+export const Active = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "beaker"
+}));
+Active.displayName = "Active";
+export const Disabled = () => /*#__PURE__*/React.createElement(IconButton, {
+  disabled: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "beaker"
+}));
+Disabled.displayName = "Disabled";
+export const WithText = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithText.displayName = "WithText";
+export const WithTextActive = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithTextActive.displayName = "WithTextActive";
+export const WithTextDisabled = () => /*#__PURE__*/React.createElement(IconButton, {
+  disabled: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithTextDisabled.displayName = "WithTextDisabled";

package/dist/modern/bar/separator.js

@@ -5,9 +5,11 @@ export const Separator = styled.span(({
   theme
 }) => ({
   width: 1,
-  height: 24,
+  height: 20,
   background: theme.appBorderColor,
-  marginTop: 8
+  marginTop: 10,
+  marginLeft: 6,
+  marginRight: 2
 }), ({
   force
 }) => force ? {} : {

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

@@ -6,6 +6,13 @@ import { ArgJsDoc } from './ArgJsDoc';
 import { ArgValue } from './ArgValue';
 import { ArgControl } from './ArgControl';
 import { codeCommon } from '../../typography/shared';
+export const argRowLoadingData = {
+  row: {
+    name: 'loading',
+    description: 'loading'
+  },
+  arg: 0
+};
 const Name = styled.span({
   fontWeight: 'bold'
 });
@@ -65,13 +72,14 @@ const StyledTd = styled.td(({
 export const ArgRow = props => {
   var _row$type;
 
+  // const isLoading = 'isLoading' in props;
   const {
     row,
     updateArgs,
     compact,
     expandable,
     initialExpandedArgs
-  } = props;
+  } = 'row' in props ? props : argRowLoadingData;
   const {
     name,
     description