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

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

@@ -15,6 +15,10 @@ Template.displayName = "Template";
 const baseArgs = {
   updateArgs: action('updateArgs')
 };
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
 export const String = Template.bind({});
 String.args = Object.assign({}, baseArgs, {
   row: {

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

@@ -6,7 +6,7 @@ import pickBy from 'lodash/pickBy';
 import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { Icons } from '../../icon/icon';
-import { ArgRow } from './ArgRow';
+import { ArgRow, argRowLoadingData } from './ArgRow';
 import { SectionRow } from './SectionRow';
 import { EmptyBlock } from '../EmptyBlock';
 import { Link } from '../../typography/link/link';
@@ -184,6 +184,13 @@ const sortFns = {
   },
   none: undefined
 };
+export const argTableLoadingData = {
+  rows: {
+    row1: argRowLoadingData.row,
+    row2: argRowLoadingData.row,
+    row3: argRowLoadingData.row
+  }
+};
 
 const groupRows = (rows, sort) => {
   const sections = {
@@ -251,25 +258,100 @@ const groupRows = (rows, sort) => {
   };
   return sorted;
 };
+
+const SkeletonHeader = styled.div(({
+  theme
+}) => ({
+  alignContent: 'stretch',
+  display: 'flex',
+  gap: 16,
+  marginTop: 25,
+  padding: '10px 20px',
+  div: {
+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+    background: theme.appBorderColor,
+    flexShrink: 0,
+    height: 20,
+    '&:first-child, &:nth-child(4)': {
+      width: '20%'
+    },
+    '&:nth-child(2)': {
+      width: '30%'
+    },
+    '&:nth-child(3)': {
+      flexGrow: 1
+    },
+    '&:last-child': {
+      width: 30
+    },
+    '@media ( max-width: 500px )': {
+      '&:nth-child( n + 4 )': {
+        display: 'none'
+      }
+    }
+  }
+}));
+const SkeletonBody = styled.div(({
+  theme
+}) => ({
+  background: theme.background.content,
+  boxShadow: theme.base === 'light' ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
+          ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px` : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
+          ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
+  borderRadius: theme.appBorderRadius,
+  '> div': {
+    alignContent: 'stretch',
+    borderTopColor: theme.base === 'light' ? darken(0.1, theme.background.content) : lighten(0.05, theme.background.content),
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    display: 'flex',
+    gap: 16,
+    padding: 20,
+    '&:first-child': {
+      borderTop: 0
+    }
+  },
+  '> div div': {
+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+    background: theme.appBorderColor,
+    flexShrink: 0,
+    height: 20,
+    '&:first-child': {
+      width: '20%'
+    },
+    '&:nth-child(2)': {
+      width: '30%'
+    },
+    '&:nth-child(3)': {
+      flexGrow: 1
+    },
+    '&:last-child': {
+      width: 'calc(20% + 47px)',
+      '@media ( max-width: 500px )': {
+        display: 'none'
+      }
+    }
+  }
+}));
+
+const Skeleton = () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SkeletonHeader, null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement(SkeletonBody, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null))));
+
+Skeleton.displayName = "Skeleton";
+
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
  */
-
-
 export const ArgsTable = props => {
-  const {
-    error
-  } = props;
-
-  if (error) {
-    return /*#__PURE__*/React.createElement(EmptyBlock, null, error, "\xA0", /*#__PURE__*/React.createElement(Link, {
+  if ('error' in props) {
+    return /*#__PURE__*/React.createElement(EmptyBlock, null, props.error, "\xA0", /*#__PURE__*/React.createElement(Link, {
       href: "http://storybook.js.org/docs/",
       target: "_blank",
       withArrow: true
     }, "Read the docs"));
   }
 
+  const isLoading = ('isLoading' in props);
   const {
     rows,
     args,
@@ -279,7 +361,12 @@ export const ArgsTable = props => {
     inAddonPanel,
     initialExpandedArgs,
     sort = 'none'
-  } = props;
+  } = 'rows' in props ? props : argTableLoadingData;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Skeleton, null);
+  }
+
   const groups = groupRows(pickBy(rows, row => {
     var _row$table;
 
@@ -310,13 +397,13 @@ export const ArgsTable = props => {
     className: "docblock-argstable"
   }, /*#__PURE__*/React.createElement("thead", {
     className: "docblock-argstable-head"
-  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), compact ? null : /*#__PURE__*/React.createElement("th", null, "Description"), compact ? null : /*#__PURE__*/React.createElement("th", null, "Default"), updateArgs ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(ControlHeadingWrapper, null, "Control", ' ', resetArgs && /*#__PURE__*/React.createElement(ResetButton, {
+  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), compact || /*#__PURE__*/React.createElement("th", null, "Description"), compact || /*#__PURE__*/React.createElement("th", null, "Default"), updateArgs && /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(ControlHeadingWrapper, null, "Control", ' ', resetArgs && /*#__PURE__*/React.createElement(ResetButton, {
     onClick: () => resetArgs(),
     title: "Reset controls"
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "undo",
     "aria-hidden": true
-  })))) : null)), /*#__PURE__*/React.createElement("tbody", {
+  })))), null)), /*#__PURE__*/React.createElement("tbody", {
     className: "docblock-argstable-body"
   }, groups.ungrouped.map(row => /*#__PURE__*/React.createElement(ArgRow, _extends({
     key: row.key,

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

@@ -31,6 +31,10 @@ const longEnumType = ArgRow.LongEnum.args.row;
 const Template = args => /*#__PURE__*/React.createElement(ArgsTable, args);
 
 Template.displayName = "Template";
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
 export const Normal = Template.bind({});
 Normal.args = {
   rows: {

package/dist/modern/blocks/ColorPalette.stories.js

@@ -4,7 +4,7 @@ export default {
   title: 'Docs/ColorPalette',
   component: ColorPalette
 };
-export const defaultStyle = () => /*#__PURE__*/React.createElement(ColorPalette, null, /*#__PURE__*/React.createElement(ColorItem, {
+export const DefaultStyle = () => /*#__PURE__*/React.createElement(ColorPalette, null, /*#__PURE__*/React.createElement(ColorItem, {
   title: "theme.color.greyscale",
   subtitle: "Some of the greys",
   colors: ['#FFFFFF', '#F8F8F8', '#F3F3F3']
@@ -25,7 +25,7 @@ export const defaultStyle = () => /*#__PURE__*/React.createElement(ColorPalette,
   subtitle: "Grayscale",
   colors: ['linear-gradient(to right,white,black)']
 }));
-defaultStyle.displayName = "defaultStyle";
+DefaultStyle.displayName = "DefaultStyle";
 export const NamedColors = () => /*#__PURE__*/React.createElement(ColorPalette, null, /*#__PURE__*/React.createElement(ColorItem, {
   title: "theme.color.greyscale",
   subtitle: "Some of the greys",

package/dist/modern/blocks/DocsPage.stories.js

@@ -16,7 +16,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "11oe0k1",
   styles: "ul,ol{list-style:none;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ibG9ja3MvRG9jc1BhZ2Uuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvYmxvY2tzL0RvY3NQYWdlLnN0b3JpZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEdsb2JhbCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IFRpdGxlLCBTdWJ0aXRsZSwgRG9jc1BhZ2VXcmFwcGVyIH0gZnJvbSAnLi9Eb2NzUGFnZSc7XG5pbXBvcnQgeyBBcmdzVGFibGUsIFNvdXJjZSwgRGVzY3JpcHRpb24gfSBmcm9tICcuL2luZGV4JztcbmltcG9ydCAqIGFzIFN0b3J5IGZyb20gJy4vU3Rvcnkuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBQcmV2aWV3IGZyb20gJy4vUHJldmlldy5zdG9yaWVzJztcbmltcG9ydCAqIGFzIGFyZ3NUYWJsZSBmcm9tICcuL0FyZ3NUYWJsZS9BcmdzVGFibGUuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBzb3VyY2UgZnJvbSAnLi9Tb3VyY2Uuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBkZXNjcmlwdGlvbiBmcm9tICcuL0Rlc2NyaXB0aW9uLnN0b3JpZXMnO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHRpdGxlOiAnRG9jcy9Eb2NzUGFnZScsXG4gIGNvbXBvbmVudDogRG9jc1BhZ2VXcmFwcGVyLFxuICAvLyBUaGUgZ29hbCBvZiB0aGlzIGRlY29yYXRvciBpcyB0byBtaW1pYyBzb21lIENTUyByZXNldC5cbiAgLy8gTGlrZSBUYWlsd2luZCBDU1Mgb3IgQnVsbWEgZG8sIGZvciBleGFtcGxlLlxuICBkZWNvcmF0b3JzOiBbXG4gICAgKHN0b3J5Rm4pID0+IChcbiAgICAgIDw+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIHVsLFxuICAgICAgICAgICAgb2wge1xuICAgICAgICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+XG4gICAgPFN1YnRpdGxlPlxuICAgICAgV2hhdCB0aGUgRG9jc1BhZ2UgbG9va3MgbGlrZS4gTWVhbnQgdG8gYmUgUUFlZCBpbiBDYW52YXMgdGFiIG5vdCBpbiBEb2NzIHRhYi5cbiAgICA8L1N1YnRpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IEVtcHR5ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxTdG9yeS5FcnJvciAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5FcnJvci5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Tb3VyY2VVbmF2YWlsYWJsZS5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBOb1RleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm5vIHRleHQ8L1RpdGxlPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPlNlbnNvcml1bTwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5UZXh0LmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTWFya2Rvd24gPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm1hcmtkb3duPC9UaXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLk1hcmtkb3duLmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ibG9ja3MvRG9jc1BhZ2Uuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvYmxvY2tzL0RvY3NQYWdlLnN0b3JpZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEdsb2JhbCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IFRpdGxlLCBTdWJ0aXRsZSwgRG9jc1BhZ2VXcmFwcGVyIH0gZnJvbSAnLi9Eb2NzUGFnZSc7XG5pbXBvcnQgeyBBcmdzVGFibGUsIFNvdXJjZSwgRGVzY3JpcHRpb24gfSBmcm9tICcuL2luZGV4JztcbmltcG9ydCAqIGFzIFN0b3J5IGZyb20gJy4vU3Rvcnkuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBQcmV2aWV3IGZyb20gJy4vUHJldmlldy5zdG9yaWVzJztcbmltcG9ydCAqIGFzIGFyZ3NUYWJsZSBmcm9tICcuL0FyZ3NUYWJsZS9BcmdzVGFibGUuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBzb3VyY2UgZnJvbSAnLi9Tb3VyY2Uuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBkZXNjcmlwdGlvbiBmcm9tICcuL0Rlc2NyaXB0aW9uLnN0b3JpZXMnO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHRpdGxlOiAnRG9jcy9Eb2NzUGFnZScsXG4gIGNvbXBvbmVudDogRG9jc1BhZ2VXcmFwcGVyLFxuICAvLyBUaGUgZ29hbCBvZiB0aGlzIGRlY29yYXRvciBpcyB0byBtaW1pYyBzb21lIENTUyByZXNldC5cbiAgLy8gTGlrZSBUYWlsd2luZCBDU1Mgb3IgQnVsbWEgZG8sIGZvciBleGFtcGxlLlxuICBkZWNvcmF0b3JzOiBbXG4gICAgKHN0b3J5Rm4pID0+IChcbiAgICAgIDw+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIHVsLFxuICAgICAgICAgICAgb2wge1xuICAgICAgICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgTG9hZGluZyA9ICgpID0+IChcbiAgPERvY3NQYWdlV3JhcHBlcj5cbiAgICA8VGl0bGU+RG9jc1BhZ2U8L1RpdGxlPlxuICAgIDxTdWJ0aXRsZT5cbiAgICAgIFdoYXQgdGhlIERvY3NQYWdlIGxvb2tzIGxpa2UuIE1lYW50IHRvIGJlIFFBZWQgaW4gQ2FudmFzIHRhYiBub3QgaW4gRG9jcyB0YWIuXG4gICAgPC9TdWJ0aXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLlRleHQuYXJnc30gLz5cbiAgICA8UHJldmlldy5Mb2FkaW5nIC8+XG4gICAgPGFyZ3NUYWJsZS5Mb2FkaW5nIC8+XG4gICAgPFNvdXJjZSB7Li4uc291cmNlLkxvYWRpbmcuYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+XG4gICAgPFN1YnRpdGxlPlxuICAgICAgV2hhdCB0aGUgRG9jc1BhZ2UgbG9va3MgbGlrZS4gTWVhbnQgdG8gYmUgUUFlZCBpbiBDYW52YXMgdGFiIG5vdCBpbiBEb2NzIHRhYi5cbiAgICA8L1N1YnRpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IEVtcHR5ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxTdG9yeS5FcnJvciAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5FcnJvci5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Tb3VyY2VVbmF2YWlsYWJsZS5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBOb1RleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm5vIHRleHQ8L1RpdGxlPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPlNlbnNvcml1bTwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5UZXh0LmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTWFya2Rvd24gPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm1hcmtkb3duPC9UaXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLk1hcmtkb3duLmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -32,6 +32,8 @@ export default {
     layout: 'fullscreen'
   }
 };
+export const Loading = () => /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "DocsPage"), /*#__PURE__*/React.createElement(Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/React.createElement(Description, description.Text.args), /*#__PURE__*/React.createElement(Preview.Loading, null), /*#__PURE__*/React.createElement(argsTable.Loading, null), /*#__PURE__*/React.createElement(Source, source.Loading.args));
+Loading.displayName = "Loading";
 export const WithSubtitle = () => /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "DocsPage"), /*#__PURE__*/React.createElement(Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/React.createElement(Description, description.Text.args), /*#__PURE__*/React.createElement(Preview.Single, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Normal.args), /*#__PURE__*/React.createElement(Source, source.JSX.args));
 WithSubtitle.displayName = "WithSubtitle";
 export const Empty = () => /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Story.Error, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Error.args), /*#__PURE__*/React.createElement(Source, source.SourceUnavailable.args));

package/dist/modern/blocks/EmptyBlock.stories.js

@@ -4,5 +4,5 @@ export default {
   title: 'Docs/EmptyBlock',
   component: EmptyBlock
 };
-export const error = () => /*#__PURE__*/React.createElement(EmptyBlock, null, "Generic error message");
-error.displayName = "error";
+export const Error = () => /*#__PURE__*/React.createElement(EmptyBlock, null, "Generic error message");
+Error.displayName = "Error";

package/dist/modern/blocks/IconGallery.stories.js

@@ -5,7 +5,7 @@ export default {
   title: 'Docs/IconGallery',
   component: IconGallery
 };
-export const defaultStyle = () => /*#__PURE__*/React.createElement(IconGallery, null, /*#__PURE__*/React.createElement(IconItem, {
+export const DefaultStyle = () => /*#__PURE__*/React.createElement(IconGallery, null, /*#__PURE__*/React.createElement(IconItem, {
   name: "add"
 }, /*#__PURE__*/React.createElement(ExampleIcon, {
   icon: "add"
@@ -32,4 +32,4 @@ export const defaultStyle = () => /*#__PURE__*/React.createElement(IconGallery,
   src: "https://place-hold.it/50x50",
   alt: "example"
 })));
-defaultStyle.displayName = "defaultStyle";
+DefaultStyle.displayName = "DefaultStyle";

package/dist/modern/blocks/Preview.js

@@ -14,6 +14,7 @@ import { ActionBar } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
 import { ZoomContext } from './ZoomContext';
 import { Zoom } from '../Zoom/Zoom';
+import { StorySkeleton } from '.';
 const ChildrenContainer = styled.div(({
   isColumn,
   columns,
@@ -177,7 +178,7 @@ const getLayout = children => {
  */
 
 
-const Preview = (_ref) => {
+export const Preview = (_ref) => {
   let {
     isColumn,
     columns,
@@ -257,6 +258,8 @@ const Preview = (_ref) => {
     actionItems: actionItems
   }))), withSource && expanded && source);
 };
-
 Preview.displayName = "Preview";
-export { Preview };
+export const PreviewSkeleton = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(StorySkeleton, null));
+PreviewSkeleton.displayName = "PreviewSkeleton";

package/dist/modern/blocks/Preview.stories.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import global from 'global';
 import { Spaced } from '../spaced/Spaced';
-import { Preview } from './Preview';
+import { Preview, PreviewSkeleton } from './Preview';
 import { Story } from './Story';
 import { Button } from '../Button/Button';
 import * as Source from './Source.stories';
@@ -15,6 +15,8 @@ export default {
   title: 'Docs/Preview',
   component: Preview
 };
+export const Loading = () => /*#__PURE__*/React.createElement(PreviewSkeleton, null);
+Loading.displayName = "Loading";
 export const CodeCollapsed = () => /*#__PURE__*/React.createElement(Preview, {
   isExpanded: false,
   withSource: Source.JSX.args

package/dist/modern/blocks/Source.js

@@ -27,14 +27,58 @@ export let SourceError;
   SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
 })(SourceError || (SourceError = {}));
 
+const SourceSkeletonWrapper = styled.div(({
+  theme
+}) => ({
+  background: theme.background.content,
+  borderRadius: theme.appBorderRadius,
+  border: `1px solid ${theme.appBorderColor}`,
+  boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+  margin: '25px 0 40px',
+  padding: '20px 20px 20px 22px'
+}));
+const SourceSkeletonPlaceholder = styled.div(({
+  theme
+}) => ({
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+  background: theme.appBorderColor,
+  height: 17,
+  marginTop: 1,
+  width: '60%',
+  '&:first-child': {
+    margin: 0
+  }
+}));
+
+const SourceSkeleton = () => /*#__PURE__*/React.createElement(SourceSkeletonWrapper, null, /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, null), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
+  style: {
+    width: '80%'
+  }
+}), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
+  style: {
+    width: '30%'
+  }
+}), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
+  style: {
+    width: '80%'
+  }
+}));
+
+SourceSkeleton.displayName = "SourceSkeleton";
+
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
 const Source = props => {
   const {
+    isLoading,
     error
   } = props;
 
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(SourceSkeleton, null);
+  }
+
   if (error) {
     return /*#__PURE__*/React.createElement(EmptyBlock, null, error);
   }

package/dist/modern/blocks/Source.stories.js

@@ -4,6 +4,11 @@ export default {
   title: 'Docs/Source',
   component: Source
 };
+export const Loading = args => /*#__PURE__*/React.createElement(Source, args);
+Loading.displayName = "Loading";
+Loading.args = {
+  isLoading: true
+};
 const jsxCode = `
 <MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
   <SomeOtherComponent funcProp={(a) => a.id} />

package/dist/modern/blocks/Story.js

@@ -4,6 +4,7 @@ import React, { createElement, Fragment } from 'react';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
+import { Loader } from '..';
 const BASE_URL = 'iframe.html';
 export let StoryError;
 /** error message for Story with null storyFn
@@ -82,4 +83,7 @@ const Story = (_ref) => {
   });
 };
 
-export { Story };
+const StorySkeleton = () => /*#__PURE__*/React.createElement(Loader, null);
+
+StorySkeleton.displayName = "StorySkeleton";
+export { Story, StorySkeleton };

package/dist/modern/blocks/Story.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Story, StoryError } from './Story';
+import { Story, StorySkeleton, StoryError } from './Story';
 import { Button } from '../Button/Button';
 export default {
   title: 'Docs/Story',
@@ -21,17 +21,22 @@ const buttonHookFn = () => {
 };
 
 buttonHookFn.displayName = "buttonHookFn";
+export const Loading = () => /*#__PURE__*/React.createElement(StorySkeleton, null);
+Loading.displayName = "Loading";
 export const Inline = () => /*#__PURE__*/React.createElement(Story, {
+  id: "id",
   inline: true,
   storyFn: buttonFn,
   title: "hello button"
 });
 Inline.displayName = "Inline";
 export const Error = () => /*#__PURE__*/React.createElement(Story, {
+  id: "id",
   error: StoryError.NO_STORY
 });
 Error.displayName = "Error";
 export const ReactHook = () => /*#__PURE__*/React.createElement(Story, {
+  id: "id",
   inline: true,
   storyFn: buttonHookFn,
   title: "hello button"

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

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

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

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

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/placeholder/placeholder.stories.js

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

package/dist/modern/tabs/tabs.js

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

package/dist/modern/tooltip/TooltipNote.js

@@ -15,7 +15,7 @@ const Note = styled.div(({
   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
 }));
 export const TooltipNote = (_ref) => {

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/DocumentWrapper.stories.js

@@ -10,9 +10,9 @@ export default {
     }
   }, storyFn())]
 };
-export const withMarkdown = () => /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement(MarkdownSample, null));
-withMarkdown.displayName = "withMarkdown";
-export const withDOM = () => /*#__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", {
+export const WithMarkdown = () => /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement(MarkdownSample, null));
+WithMarkdown.displayName = "WithMarkdown";
+export const WithDOM = () => /*#__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", {
   style: {
@@ -61,4 +61,4 @@ export const withDOM = () => /*#__PURE__*/React.createElement(DocumentWrapper, n
   alt: "Stormtroopocat",
   title: "The Stormtroopocat"
 })));
-withDOM.displayName = "withDOM";
+WithDOM.displayName = "WithDOM";

package/dist/modern/typography/link/link.js

@@ -155,7 +155,7 @@ export const Link = (_ref) => {
       rest = _objectWithoutPropertiesLoose(_ref, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
 
   return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
-    onClick: cancel ? e => cancelled(e, onClick) : onClick,
+    onClick: onClick && cancel ? e => cancelled(e, onClick) : onClick,
     className: className
   }), /*#__PURE__*/React.createElement(LinkInner, {
     withArrow: withArrow,
@@ -169,7 +169,7 @@ Link.defaultProps = {
   cancel: true,
   className: undefined,
   style: undefined,
-  onClick: () => {},
+  onClick: undefined,
   withArrow: false,
   containsIcon: false
 };