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

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

package/dist/modern/icon/icons.js

@@ -111,6 +111,8 @@ export const 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/modern/typography/DocumentFormatting.js

@@ -342,6 +342,10 @@ const DefaultCodeBlock = styled.code(({
   verticalAlign: 'baseline',
   color: 'inherit'
 }), codeCommon);
+const isInlineCodeRegex = /[\n\r]/g;
+
+const isReactChildString = child => typeof child === 'string';
+
 export const Code = (_ref2) => {
   var _language$;
 
@@ -352,12 +356,13 @@ export const Code = (_ref2) => {
       props = _objectWithoutPropertiesLoose(_ref2, ["className", "children"]);
 
   const language = (className || '').match(/lang-(\S+)/);
-  const isInlineCode = !children.match(/[\n\r]/g);
+  const childrenArray = React.Children.toArray(children);
+  const isInlineCode = !childrenArray.filter(isReactChildString).some(child => child.match(isInlineCodeRegex));
 
   if (isInlineCode) {
     return /*#__PURE__*/React.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({

package/dist/modern/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/ts3.4/ScrollArea/GlobalScrollAreaStyles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Theme, CSSObject } from '@storybook/theming';
 export declare const getScrollAreaStyles: (theme: Theme) => CSSObject;
 declare const GlobalScrollAreaStyles: () => JSX.Element;

package/dist/ts3.4/blocks/ArgsTable/NoControlsWarning.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const NoControlsWarning: () => JSX.Element;

package/dist/ts3.4/blocks/EmptyBlock.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const EmptyBlock: (props: any) => JSX.Element;

package/dist/ts3.4/icon/icons.d.ts

@@ -110,6 +110,8 @@ export declare const icons: {
     playback: string;
     stop: string;
     stopalt: string;
+    rewind: string;
+    fastforward: string;
     email: string;
     link: string;
     paperclip: string;

package/dist/ts3.9/ScrollArea/GlobalScrollAreaStyles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Theme, CSSObject } from '@storybook/theming';
 export declare const getScrollAreaStyles: (theme: Theme) => CSSObject;
 declare const GlobalScrollAreaStyles: () => JSX.Element;

package/dist/ts3.9/blocks/ArgsTable/NoControlsWarning.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const NoControlsWarning: () => JSX.Element;

package/dist/ts3.9/blocks/EmptyBlock.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const EmptyBlock: (props: any) => JSX.Element;

package/dist/ts3.9/icon/icons.d.ts

@@ -110,6 +110,8 @@ export declare const icons: {
     playback: string;
     stop: string;
     stopalt: string;
+    rewind: string;
+    fastforward: string;
     email: string;
     link: string;
     paperclip: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-beta.2",
+  "version": "6.4.0-beta.20",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-beta.2",
-    "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/theming": "6.4.0-beta.2",
+    "@storybook/client-logger": "6.4.0-beta.20",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/theming": "6.4.0-beta.20",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3358e1e90c4e46dfd28e7ab822d5d20579463186",
+  "gitHead": "1a9315fd39f7e4abcdf3eb839dc29aedce346e01",
   "sbmodern": "dist/modern/index.js"
 }

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

@@ -1,130 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _react2 = require("@storybook/react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Info = _theming.styled.div({
-  marginBottom: '3rem'
-});
-
-var Heading1 = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontSize: theme.typography.size.l3
-  };
-});
-
-var Heading2 = _theming.styled.div(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.typography.size.l2
-  };
-});
-
-var Heading3 = _theming.styled.div(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    fontSize: theme.typography.size.l1
-  };
-});
-
-var Heading4 = _theming.styled.div(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-
-var Heading5 = _theming.styled.div(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-
-var Heading6 = _theming.styled.div(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    fontSize: theme.typography.size.m1
-  };
-});
-
-var Heading7 = _theming.styled.div(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-
-var Heading8 = _theming.styled.div(function (_ref8) {
-  var theme = _ref8.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-
-var Heading9 = _theming.styled.div(function (_ref9) {
-  var theme = _ref9.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-
-var HeadingWrapper = _theming.styled.div(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    fontWeight: theme.typography.weight.black,
-    '> *': {
-      marginBottom: '1rem'
-    }
-  };
-});
-
-var Type1 = _theming.styled.div(function (_ref11) {
-  var theme = _ref11.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-
-var Type2 = _theming.styled.div(function (_ref12) {
-  var theme = _ref12.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-
-var Type3 = _theming.styled.div(function (_ref13) {
-  var theme = _ref13.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-
-var TypeWrapper = _theming.styled.div({
-  '> *': {
-    marginBottom: '1rem'
-  }
-});
-
-var Wrapper = _theming.styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  '> *': {
-    flex: 1,
-    paddingRight: 40
-  }
-});
-
-var Page = _theming.styled.div({
-  padding: '3rem'
-});
-
-(0, _react2.storiesOf)('Basics/typography', module).add('all', function () {
-  return /*#__PURE__*/_react.default.createElement(Page, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Code font:"), " ", /*#__PURE__*/_react.default.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(HeadingWrapper, null, /*#__PURE__*/_react.default.createElement(Heading1, null, "48 heading"), /*#__PURE__*/_react.default.createElement(Heading2, null, "40 heading"), /*#__PURE__*/_react.default.createElement(Heading3, null, "32 heading"), /*#__PURE__*/_react.default.createElement(Heading4, null, "28 heading"), /*#__PURE__*/_react.default.createElement(Heading5, null, "24 heading"), /*#__PURE__*/_react.default.createElement(Heading6, null, "20 heading"), /*#__PURE__*/_react.default.createElement(Heading7, null, "16 heading"), /*#__PURE__*/_react.default.createElement(Heading8, null, "14 heading"), /*#__PURE__*/_react.default.createElement(Heading9, null, "12 heading")), /*#__PURE__*/_react.default.createElement(TypeWrapper, null, /*#__PURE__*/_react.default.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog"))));
-});

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

@@ -1,106 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-var Info = styled.div({
-  marginBottom: '3rem'
-});
-var Heading1 = styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontSize: theme.typography.size.l3
-  };
-});
-var Heading2 = styled.div(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.typography.size.l2
-  };
-});
-var Heading3 = styled.div(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    fontSize: theme.typography.size.l1
-  };
-});
-var Heading4 = styled.div(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-var Heading5 = styled.div(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-var Heading6 = styled.div(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    fontSize: theme.typography.size.m1
-  };
-});
-var Heading7 = styled.div(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-var Heading8 = styled.div(function (_ref8) {
-  var theme = _ref8.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-var Heading9 = styled.div(function (_ref9) {
-  var theme = _ref9.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-var HeadingWrapper = styled.div(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    fontWeight: theme.typography.weight.black,
-    '> *': {
-      marginBottom: '1rem'
-    }
-  };
-});
-var Type1 = styled.div(function (_ref11) {
-  var theme = _ref11.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-var Type2 = styled.div(function (_ref12) {
-  var theme = _ref12.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-var Type3 = styled.div(function (_ref13) {
-  var theme = _ref13.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-var TypeWrapper = styled.div({
-  '> *': {
-    marginBottom: '1rem'
-  }
-});
-var Wrapper = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  '> *': {
-    flex: 1,
-    paddingRight: 40
-  }
-});
-var Page = styled.div({
-  padding: '3rem'
-});
-storiesOf('Basics/typography', module).add('all', function () {
-  return /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Code font:"), " ", /*#__PURE__*/React.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(HeadingWrapper, null, /*#__PURE__*/React.createElement(Heading1, null, "48 heading"), /*#__PURE__*/React.createElement(Heading2, null, "40 heading"), /*#__PURE__*/React.createElement(Heading3, null, "32 heading"), /*#__PURE__*/React.createElement(Heading4, null, "28 heading"), /*#__PURE__*/React.createElement(Heading5, null, "24 heading"), /*#__PURE__*/React.createElement(Heading6, null, "20 heading"), /*#__PURE__*/React.createElement(Heading7, null, "16 heading"), /*#__PURE__*/React.createElement(Heading8, null, "14 heading"), /*#__PURE__*/React.createElement(Heading9, null, "12 heading")), /*#__PURE__*/React.createElement(TypeWrapper, null, /*#__PURE__*/React.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog"))));
-});

package/dist/modern/typography/typography.stories.js

@@ -1,91 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-const Info = styled.div({
-  marginBottom: '3rem'
-});
-const Heading1 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.l3
-}));
-const Heading2 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.l2
-}));
-const Heading3 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.l1
-}));
-const Heading4 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.m3
-}));
-const Heading5 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.m3
-}));
-const Heading6 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.m1
-}));
-const Heading7 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s3
-}));
-const Heading8 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s2
-}));
-const Heading9 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s1
-}));
-const HeadingWrapper = styled.div(({
-  theme
-}) => ({
-  fontWeight: theme.typography.weight.black,
-  '> *': {
-    marginBottom: '1rem'
-  }
-}));
-const Type1 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s3
-}));
-const Type2 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s2
-}));
-const Type3 = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s1
-}));
-const TypeWrapper = styled.div({
-  '> *': {
-    marginBottom: '1rem'
-  }
-});
-const Wrapper = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  '> *': {
-    flex: 1,
-    paddingRight: 40
-  }
-});
-const Page = styled.div({
-  padding: '3rem'
-});
-storiesOf('Basics/typography', module).add('all', () => /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Code font:"), " ", /*#__PURE__*/React.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(HeadingWrapper, null, /*#__PURE__*/React.createElement(Heading1, null, "48 heading"), /*#__PURE__*/React.createElement(Heading2, null, "40 heading"), /*#__PURE__*/React.createElement(Heading3, null, "32 heading"), /*#__PURE__*/React.createElement(Heading4, null, "28 heading"), /*#__PURE__*/React.createElement(Heading5, null, "24 heading"), /*#__PURE__*/React.createElement(Heading6, null, "20 heading"), /*#__PURE__*/React.createElement(Heading7, null, "16 heading"), /*#__PURE__*/React.createElement(Heading8, null, "14 heading"), /*#__PURE__*/React.createElement(Heading9, null, "12 heading")), /*#__PURE__*/React.createElement(TypeWrapper, null, /*#__PURE__*/React.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog")))));