@storybook/components 6.4.0-beta.2 → 6.4.0-beta.23

package/dist/cjs/ScrollArea/GlobalScrollAreaStyles.js

@@ -431,7 +431,7 @@ 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/cjs/bar/bar.js

@@ -63,12 +63,14 @@ var Side = _theming.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) {
@@ -76,7 +78,7 @@ var Side = _theming.styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/cjs/bar/button.js

@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _theming = require("@storybook/theming");
 
+var _polished = require("polished");
+
+var _core = require("@popperjs/core");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -84,36 +88,40 @@ var IconButton = (0, _theming.styled)(ButtonOrLink, {
 })(function (_ref4) {
   var theme = _ref4.theme;
   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',
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
+    '&:hover, &:focus-visible': {
+      background: (0, _polished.transparentize)(0.88, theme.color.secondary),
       color: theme.color.secondary
     },
+    '&:focus-visible': {
+      outline: _core.auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    },
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
 }, function (_ref5) {
   var active = _ref5.active,
       theme = _ref5.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
 });
 exports.IconButton = IconButton;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithTextActive = exports.WithText = exports.Active = exports._IconButton = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("./button");
+
+var _icon = require("../icon/icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  component: _button.IconButton,
+  title: 'Basics/IconButton'
+};
+exports.default = _default;
+
+var _IconButton = function _IconButton() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "bookmark"
+  }));
+};
+
+exports._IconButton = _IconButton;
+_IconButton.displayName = "_IconButton";
+
+var Active = function Active() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "beaker"
+  }));
+};
+
+exports.Active = Active;
+Active.displayName = "Active";
+
+var WithText = function WithText() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithText = WithText;
+WithText.displayName = "WithText";
+
+var WithTextActive = function WithTextActive() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithTextActive = WithTextActive;
+WithTextActive.displayName = "WithTextActive";

package/dist/cjs/bar/separator.js

@@ -37,9 +37,11 @@ var Separator = _theming.styled.span(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 1,
-    height: 24,
+    height: 20,
     background: theme.appBorderColor,
-    marginTop: 8
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 2
   };
 }, function (_ref2) {
   var force = _ref2.force;

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/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/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/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/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,
@@ -71,36 +73,40 @@ export var IconButton = styled(ButtonOrLink, {
 })(function (_ref4) {
   var theme = _ref4.theme;
   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',
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
+    '&: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'
+    },
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
 }, function (_ref5) {
   var active = _ref5.active,
       theme = _ref5.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
 });
 IconButton.displayName = 'IconButton';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconButton } from './button';
+import { Icons } from '../icon/icon';
+export default {
+  component: IconButton,
+  title: 'Basics/IconButton'
+};
+export var _IconButton = function _IconButton() {
+  return /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+    icon: "bookmark"
+  }));
+};
+_IconButton.displayName = "_IconButton";
+export var Active = function Active() {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    active: true
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "beaker"
+  }));
+};
+Active.displayName = "Active";
+export var WithText = function WithText() {
+  return /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+WithText.displayName = "WithText";
+export var WithTextActive = function WithTextActive() {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    active: true
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+WithTextActive.displayName = "WithTextActive";

package/dist/esm/bar/separator.js

@@ -4,9 +4,11 @@ export var Separator = styled.span(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 1,
-    height: 24,
+    height: 20,
     background: theme.appBorderColor,
-    marginTop: 8
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 2
   };
 }, function (_ref2) {
   var force = _ref2.force;

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/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/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/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': {