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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.error = exports.default = void 0;
+exports.Error = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,9 +17,9 @@ var _default = {
 };
 exports.default = _default;
 
-var error = function error() {
+var Error = function Error() {
   return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, "Generic error message");
 };
 
-exports.error = error;
-error.displayName = "error";
+exports.Error = Error;
+Error.displayName = "Error";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultStyle = exports.default = void 0;
+exports.DefaultStyle = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,7 +19,7 @@ var _default = {
 };
 exports.default = _default;
 
-var defaultStyle = function defaultStyle() {
+var DefaultStyle = function DefaultStyle() {
   return /*#__PURE__*/_react.default.createElement(_IconGallery.IconGallery, null, /*#__PURE__*/_react.default.createElement(_IconGallery.IconItem, {
     name: "add"
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
@@ -49,5 +49,5 @@ var defaultStyle = function defaultStyle() {
   })));
 };
 
-exports.defaultStyle = defaultStyle;
-defaultStyle.displayName = "defaultStyle";
+exports.DefaultStyle = DefaultStyle;
+DefaultStyle.displayName = "DefaultStyle";

package/dist/cjs/blocks/Preview.js

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Preview = void 0;
+exports.PreviewSkeleton = exports.Preview = void 0;
 
 require("regenerator-runtime/runtime.js");
 
@@ -67,6 +67,8 @@ var _ZoomContext = require("./ZoomContext");
 
 var _Zoom = require("../Zoom/Zoom");
 
+var _ = require(".");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -413,4 +415,13 @@ var Preview = function Preview(_ref8) {
 };
 
 exports.Preview = Preview;
-Preview.displayName = "Preview";
+Preview.displayName = "Preview";
+
+var PreviewSkeleton = function PreviewSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_.StorySkeleton, null));
+};
+
+exports.PreviewSkeleton = PreviewSkeleton;
+PreviewSkeleton.displayName = "PreviewSkeleton";

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

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.default = void 0;
+exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.Loading = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -58,6 +58,13 @@ var _default = {
 };
 exports.default = _default;
 
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.PreviewSkeleton, null);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
 var CodeCollapsed = function CodeCollapsed() {
   return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
     isExpanded: false,

package/dist/cjs/blocks/Source.js

@@ -51,23 +51,72 @@ exports.SourceError = SourceError;
   SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
 })(SourceError || (exports.SourceError = SourceError = {}));
 
+var SourceSkeletonWrapper = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    background: theme.background.content,
+    borderRadius: theme.appBorderRadius,
+    border: "1px solid ".concat(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'
+  };
+});
+
+var SourceSkeletonPlaceholder = _theming.styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
+    background: theme.appBorderColor,
+    height: 17,
+    marginTop: 1,
+    width: '60%',
+    '&:first-child': {
+      margin: 0
+    }
+  };
+});
+
+var SourceSkeleton = function SourceSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(SourceSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, null), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '80%'
+    }
+  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '30%'
+    }
+  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '80%'
+    }
+  }));
+};
+
+SourceSkeleton.displayName = "SourceSkeleton";
+
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
 var Source = function Source(props) {
-  var _ref2 = props,
-      error = _ref2.error;
+  var _ref4 = props,
+      isLoading = _ref4.isLoading,
+      error = _ref4.error;
+
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(SourceSkeleton, null);
+  }
 
   if (error) {
     return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error);
   }
 
-  var _ref3 = props,
-      language = _ref3.language,
-      code = _ref3.code,
-      dark = _ref3.dark,
-      format = _ref3.format,
-      rest = _objectWithoutProperties(_ref3, ["language", "code", "dark", "format"]);
+  var _ref5 = props,
+      language = _ref5.language,
+      code = _ref5.code,
+      dark = _ref5.dark,
+      format = _ref5.format,
+      rest = _objectWithoutProperties(_ref5, ["language", "code", "dark", "format"]);
 
   var syntaxHighlighter = /*#__PURE__*/_react.default.createElement(StyledSyntaxHighlighter, _extends({
     bordered: true,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.default = void 0;
+exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.Loading = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -16,6 +16,16 @@ var _default = {
   component: _Source.Source
 };
 exports.default = _default;
+
+var Loading = function Loading(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+Loading.args = {
+  isLoading: true
+};
 var jsxCode = "\n<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>\n  <SomeOtherComponent funcProp={(a) => a.id} />\n</MyComponent>\n";
 
 var JSX = function JSX(args) {

package/dist/cjs/blocks/Story.js

@@ -25,7 +25,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Story = exports.StoryError = void 0;
+exports.StorySkeleton = exports.Story = exports.StoryError = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
@@ -37,6 +37,8 @@ var _EmptyBlock = require("./EmptyBlock");
 
 var _ZoomContext = require("./ZoomContext");
 
+var _ = require("..");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -126,4 +128,11 @@ var Story = function Story(_ref4) {
   });
 };
 
-exports.Story = Story;
+exports.Story = Story;
+
+var StorySkeleton = function StorySkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_.Loader, null);
+};
+
+exports.StorySkeleton = StorySkeleton;
+StorySkeleton.displayName = "StorySkeleton";

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

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactHook = exports.Error = exports.Inline = exports.default = void 0;
+exports.ReactHook = exports.Error = exports.Inline = exports.Loading = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -83,8 +83,16 @@ var buttonHookFn = function buttonHookFn() {
 
 buttonHookFn.displayName = "buttonHookFn";
 
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement(_Story.StorySkeleton, null);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
 var Inline = function Inline() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     inline: true,
     storyFn: buttonFn,
     title: "hello button"
@@ -96,6 +104,7 @@ Inline.displayName = "Inline";
 
 var Error = function Error() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     error: _Story.StoryError.NO_STORY
   });
 };
@@ -105,6 +114,7 @@ Error.displayName = "Error";
 
 var ReactHook = function ReactHook() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     inline: true,
     storyFn: buttonHookFn,
     title: "hello button"

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withWeightText = exports.withFontFamily = exports.withFontWeight = exports.withFontSizes = exports.default = void 0;
+exports.WithWeightText = exports.WithFontFamily = exports.WithFontWeight = exports.WithFontSizes = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -20,36 +20,36 @@ var fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px']
 var fontWeight = 900;
 var fontFamily = 'monospace';
 
-var withFontSizes = function withFontSizes() {
+var WithFontSizes = function WithFontSizes() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes
   });
 };
 
-exports.withFontSizes = withFontSizes;
-withFontSizes.displayName = "withFontSizes";
+exports.WithFontSizes = WithFontSizes;
+WithFontSizes.displayName = "WithFontSizes";
 
-var withFontWeight = function withFontWeight() {
+var WithFontWeight = function WithFontWeight() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight
   });
 };
 
-exports.withFontWeight = withFontWeight;
-withFontWeight.displayName = "withFontWeight";
+exports.WithFontWeight = WithFontWeight;
+WithFontWeight.displayName = "WithFontWeight";
 
-var withFontFamily = function withFontFamily() {
+var WithFontFamily = function WithFontFamily() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontFamily: fontFamily
   });
 };
 
-exports.withFontFamily = withFontFamily;
-withFontFamily.displayName = "withFontFamily";
+exports.WithFontFamily = WithFontFamily;
+WithFontFamily.displayName = "WithFontFamily";
 
-var withWeightText = function withWeightText() {
+var WithWeightText = function WithWeightText() {
   return /*#__PURE__*/_react.default.createElement(_Typeset.Typeset, {
     fontSizes: fontSizes,
     fontWeight: fontWeight,
@@ -57,5 +57,5 @@ var withWeightText = function withWeightText() {
   });
 };
 
-exports.withWeightText = withWeightText;
-withWeightText.displayName = "withWeightText";
+exports.WithWeightText = WithWeightText;
+WithWeightText.displayName = "WithWeightText";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normal = exports.default = void 0;
+exports.Normal = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,11 +17,11 @@ var _default = {
 };
 exports.default = _default;
 
-var normal = function normal() {
+var Normal = function Normal() {
   return /*#__PURE__*/_react.default.createElement(_StorybookLogo.StorybookLogo, {
     alt: "Storybook logo"
   });
 };
 
-exports.normal = normal;
-normal.displayName = "normal";
+exports.Normal = Normal;
+Normal.displayName = "Normal";

package/dist/cjs/placeholder/placeholder.stories.js

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.twoChildren = exports.singleChild = exports.default = void 0;
+exports.TwoChildren = exports.SingleChild = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,14 +41,14 @@ var _default = {
 };
 exports.default = _default;
 
-var singleChild = function singleChild() {
+var SingleChild = function SingleChild() {
   return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, "This is a placeholder with single child, it's bolded");
 };
 
-exports.singleChild = singleChild;
-singleChild.displayName = "singleChild";
+exports.SingleChild = SingleChild;
+SingleChild.displayName = "SingleChild";
 
-var twoChildren = function twoChildren() {
+var TwoChildren = function TwoChildren() {
   return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: "title"
   }, "This has two children, the first bold"), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -60,5 +60,5 @@ var twoChildren = function twoChildren() {
   }, "link")));
 };
 
-exports.twoChildren = twoChildren;
-twoChildren.displayName = "twoChildren";
+exports.TwoChildren = TwoChildren;
+TwoChildren.displayName = "TwoChildren";

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

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

package/dist/esm/ActionBar/ActionBar.stories.js

@@ -20,7 +20,7 @@ export default {
     }, storyFn());
   }]
 };
-export var singleItem = function singleItem() {
+export var SingleItem = function SingleItem() {
   return /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: [{
       title: 'Clear',
@@ -28,8 +28,8 @@ export var singleItem = function singleItem() {
     }]
   });
 };
-singleItem.displayName = "singleItem";
-export var manyItems = function manyItems() {
+SingleItem.displayName = "SingleItem";
+export var ManyItems = function ManyItems() {
   return /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: [{
       title: 'Action string',
@@ -44,4 +44,4 @@ export var manyItems = function manyItems() {
     }]
   });
 };
-manyItems.displayName = "manyItems";
+ManyItems.displayName = "ManyItems";

package/dist/esm/ScrollArea/ScrollArea.stories.js

@@ -37,7 +37,7 @@ export default {
     return /*#__PURE__*/React.createElement(Wrapper, null, storyFn());
   }]
 };
-export var vertical = function vertical() {
+export var Vertical = function Vertical() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     vertical: true
   }, list(function (i) {
@@ -46,8 +46,8 @@ export var vertical = function vertical() {
     }, /*#__PURE__*/React.createElement(Block, null, i), /*#__PURE__*/React.createElement("br", null));
   }));
 };
-vertical.displayName = "vertical";
-export var horizontal = function horizontal() {
+Vertical.displayName = "Vertical";
+export var Horizontal = function Horizontal() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true
   }, list(function (i) {
@@ -56,8 +56,8 @@ export var horizontal = function horizontal() {
     }, i);
   }));
 };
-horizontal.displayName = "horizontal";
-export var both = function both() {
+Horizontal.displayName = "Horizontal";
+export var Both = function Both() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true,
     vertical: true
@@ -71,8 +71,8 @@ export var both = function both() {
     }), /*#__PURE__*/React.createElement("br", null));
   }));
 };
-both.displayName = "both";
-export var withOuterBorder = function withOuterBorder() {
+Both.displayName = "Both";
+export var WithOuterBorder = function WithOuterBorder() {
   return /*#__PURE__*/React.createElement(ScrollArea, {
     horizontal: true,
     vertical: true
@@ -85,4 +85,4 @@ export var withOuterBorder = function withOuterBorder() {
     }
   }));
 };
-withOuterBorder.displayName = "withOuterBorder";
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/esm/Zoom/Zoom.stories.js

@@ -57,18 +57,18 @@ var TemplateElement = function TemplateElement(args) {
 };
 
 TemplateElement.displayName = "TemplateElement";
-export var elementActualSize = TemplateElement.bind({});
-elementActualSize.args = {
+export var ElementActualSize = TemplateElement.bind({});
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-export var elementZoomedIn = TemplateElement.bind({});
-elementZoomedIn.args = {
+export var ElementZoomedIn = TemplateElement.bind({});
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-export var elementZoomedOut = TemplateElement.bind({});
-elementZoomedOut.args = {
+export var ElementZoomedOut = TemplateElement.bind({});
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -115,34 +115,34 @@ var TemplateIFrame = function TemplateIFrame(args) {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-export var iFrameActualSize = TemplateIFrame.bind({});
-iFrameActualSize.args = {
+export var 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 var iFrameZoomedIn = TemplateIFrame.bind({});
-iFrameZoomedIn.args = {
+export var IFrameZoomedIn = TemplateIFrame.bind({});
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-export var iFrameZoomedOut = TemplateIFrame.bind({});
-iFrameZoomedOut.args = {
+export var IFrameZoomedOut = TemplateIFrame.bind({});
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/esm/bar/button.js

@@ -116,4 +116,22 @@ export var IconButton = styled(ButtonOrLink, {
     }
   };
 });
-IconButton.displayName = 'IconButton';
+IconButton.displayName = 'IconButton';
+var IconPlaceholder = styled.div(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    width: 14,
+    height: 14,
+    backgroundColor: theme.appBorderColor,
+    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite")
+  };
+});
+var IconButtonSkeletonWrapper = styled.div(function () {
+  return {
+    padding: 5
+  };
+});
+export var IconButtonSkeleton = function IconButtonSkeleton() {
+  return /*#__PURE__*/React.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/React.createElement(IconPlaceholder, null));
+};
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

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

@@ -1,11 +1,15 @@
 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 var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement(IconButtonSkeleton, null);
+};
+Loading.displayName = "Loading";
+// eslint-disable-next-line no-underscore-dangle
 export var _IconButton = function _IconButton() {
   return /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
     icon: "bookmark"