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

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

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

package/dist/modern/ActionBar/ActionBar.stories.js

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

package/dist/modern/ScrollArea/ScrollArea.stories.js

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

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

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

package/dist/modern/bar/button.js

@@ -106,4 +106,17 @@ export const IconButton = styled(ButtonOrLink, {
     outline: 'none'
   }
 });
-IconButton.displayName = 'IconButton';
+IconButton.displayName = 'IconButton';
+const IconPlaceholder = styled.div(({
+  theme
+}) => ({
+  width: 14,
+  height: 14,
+  backgroundColor: theme.appBorderColor,
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
+}));
+const IconButtonSkeletonWrapper = styled.div(() => ({
+  padding: 5
+}));
+export const IconButtonSkeleton = () => /*#__PURE__*/React.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/React.createElement(IconPlaceholder, null));
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { IconButton } from './button';
+import { IconButton, IconButtonSkeleton } from './button';
 import { Icons } from '../icon/icon';
 export default {
   component: IconButton,
   title: 'Basics/IconButton'
-}; // eslint-disable-next-line no-underscore-dangle
-
+};
+export const Loading = () => /*#__PURE__*/React.createElement(IconButtonSkeleton, null);
+Loading.displayName = "Loading";
+// eslint-disable-next-line no-underscore-dangle
 export const _IconButton = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
   icon: "bookmark"
 }));

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

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

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 };