@storybook/components 6.4.0-beta.8 → 6.4.0-rc.10

package/dist/cjs/ActionBar/ActionBar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.manyItems = exports.singleItem = exports.default = void 0;
+exports.ManyItems = exports.SingleItem = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -34,7 +34,7 @@ var _default = {
 };
 exports.default = _default;
 
-var singleItem = function singleItem() {
+var SingleItem = function SingleItem() {
   return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
     actionItems: [{
       title: 'Clear',
@@ -43,10 +43,10 @@ var singleItem = function singleItem() {
   });
 };
 
-exports.singleItem = singleItem;
-singleItem.displayName = "singleItem";
+exports.SingleItem = SingleItem;
+SingleItem.displayName = "SingleItem";
 
-var manyItems = function manyItems() {
+var ManyItems = function ManyItems() {
   return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
     actionItems: [{
       title: 'Action string',
@@ -62,5 +62,5 @@ var manyItems = function manyItems() {
   });
 };
 
-exports.manyItems = manyItems;
-manyItems.displayName = "manyItems";
+exports.ManyItems = ManyItems;
+ManyItems.displayName = "ManyItems";

package/dist/cjs/ScrollArea/GlobalScrollAreaStyles.js

@@ -431,7 +431,7 @@ var getScrollAreaStyles = function getScrollAreaStyles(theme) {
       borderRadius: 10
     },
     '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-      background: theme.color.darker,
+      background: theme.color.mediumdark,
       opacity: 0.5
     },
     '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {

package/dist/cjs/ScrollArea/ScrollArea.stories.js

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withOuterBorder = exports.both = exports.horizontal = exports.vertical = exports.default = void 0;
+exports.WithOuterBorder = exports.Both = exports.Horizontal = exports.Vertical = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -74,7 +74,7 @@ var _default = {
 };
 exports.default = _default;
 
-var vertical = function vertical() {
+var Vertical = function Vertical() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     vertical: true
   }, list(function (i) {
@@ -84,10 +84,10 @@ var vertical = function vertical() {
   }));
 };
 
-exports.vertical = vertical;
-vertical.displayName = "vertical";
+exports.Vertical = Vertical;
+Vertical.displayName = "Vertical";
 
-var horizontal = function horizontal() {
+var Horizontal = function Horizontal() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true
   }, list(function (i) {
@@ -97,10 +97,10 @@ var horizontal = function horizontal() {
   }));
 };
 
-exports.horizontal = horizontal;
-horizontal.displayName = "horizontal";
+exports.Horizontal = Horizontal;
+Horizontal.displayName = "Horizontal";
 
-var both = function both() {
+var Both = function Both() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true,
     vertical: true
@@ -115,10 +115,10 @@ var both = function both() {
   }));
 };
 
-exports.both = both;
-both.displayName = "both";
+exports.Both = Both;
+Both.displayName = "Both";
 
-var withOuterBorder = function withOuterBorder() {
+var WithOuterBorder = function WithOuterBorder() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true,
     vertical: true
@@ -132,5 +132,5 @@ var withOuterBorder = function withOuterBorder() {
   }));
 };
 
-exports.withOuterBorder = withOuterBorder;
-withOuterBorder.displayName = "withOuterBorder";
+exports.WithOuterBorder = WithOuterBorder;
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/cjs/Zoom/Zoom.stories.js

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iFrameZoomedOut = exports.iFrameZoomedIn = exports.iFrameActualSize = exports.elementZoomedOut = exports.elementZoomedIn = exports.elementActualSize = exports.default = void 0;
+exports.IFrameZoomedOut = exports.IFrameZoomedIn = exports.IFrameActualSize = exports.ElementZoomedOut = exports.ElementZoomedIn = exports.ElementActualSize = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -87,21 +87,21 @@ var TemplateElement = function TemplateElement(args) {
 };
 
 TemplateElement.displayName = "TemplateElement";
-var elementActualSize = TemplateElement.bind({});
-exports.elementActualSize = elementActualSize;
-elementActualSize.args = {
+var ElementActualSize = TemplateElement.bind({});
+exports.ElementActualSize = ElementActualSize;
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-var elementZoomedIn = TemplateElement.bind({});
-exports.elementZoomedIn = elementZoomedIn;
-elementZoomedIn.args = {
+var ElementZoomedIn = TemplateElement.bind({});
+exports.ElementZoomedIn = ElementZoomedIn;
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-var elementZoomedOut = TemplateElement.bind({});
-exports.elementZoomedOut = elementZoomedOut;
-elementZoomedOut.args = {
+var ElementZoomedOut = TemplateElement.bind({});
+exports.ElementZoomedOut = ElementZoomedOut;
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -148,37 +148,37 @@ var TemplateIFrame = function TemplateIFrame(args) {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-var iFrameActualSize = TemplateIFrame.bind({});
-exports.iFrameActualSize = iFrameActualSize;
-iFrameActualSize.args = {
+var IFrameActualSize = TemplateIFrame.bind({});
+exports.IFrameActualSize = IFrameActualSize;
+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
   }
 };
-var iFrameZoomedIn = TemplateIFrame.bind({});
-exports.iFrameZoomedIn = iFrameZoomedIn;
-iFrameZoomedIn.args = {
+var IFrameZoomedIn = TemplateIFrame.bind({});
+exports.IFrameZoomedIn = IFrameZoomedIn;
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-var iFrameZoomedOut = TemplateIFrame.bind({});
-exports.iFrameZoomedOut = iFrameZoomedOut;
-iFrameZoomedOut.args = {
+var IFrameZoomedOut = TemplateIFrame.bind({});
+exports.IFrameZoomedOut = IFrameZoomedOut;
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/cjs/bar/bar.js

@@ -63,12 +63,14 @@ var Side = _theming.styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, function (_ref) {
   var left = _ref.left;
   return left ? {
     '& > *': {
-      marginLeft: 15
+      marginLeft: 4
     }
   } : {};
 }, function (_ref2) {
@@ -76,7 +78,7 @@ var Side = _theming.styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/cjs/bar/button.js

@@ -7,7 +7,7 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.TabButton = void 0;
+exports.IconButtonSkeleton = exports.IconButton = exports.TabButton = void 0;
 
 require("core-js/modules/es.object.keys.js");
 
@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _theming = require("@storybook/theming");
 
+var _polished = require("polished");
+
+var _core = require("@popperjs/core");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -81,40 +85,76 @@ exports.TabButton = TabButton;
 TabButton.displayName = 'TabButton';
 var IconButton = (0, _theming.styled)(ButtonOrLink, {
   shouldForwardProp: _theming.isPropValid
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function () {
   return {
-    display: 'inline-flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    height: 40,
-    background: 'none',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 4,
     color: 'inherit',
-    padding: 0,
     cursor: 'pointer',
-    // Icon Buttons may have text depending on user preferences.
-    // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-    fontWeight: 'bold',
+    display: 'inline-flex',
     fontSize: 13,
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    '&:hover, &:focus': {
-      outline: '0 none',
-      color: theme.color.secondary
-    },
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
-}, function (_ref5) {
-  var active = _ref5.active,
-      theme = _ref5.theme;
+}, function (_ref4) {
+  var active = _ref4.active,
+      theme = _ref4.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
+}, function (_ref5) {
+  var disabled = _ref5.disabled,
+      theme = _ref5.theme;
+  return disabled ? {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  } : {
+    '&:hover, &:focus-visible': {
+      background: (0, _polished.transparentize)(0.88, theme.color.secondary),
+      color: theme.color.secondary
+    },
+    '&:focus-visible': {
+      outline: _core.auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    }
+  };
 });
 exports.IconButton = IconButton;
-IconButton.displayName = 'IconButton';
+IconButton.displayName = 'IconButton';
+
+var IconPlaceholder = _theming.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 = _theming.styled.div(function () {
+  return {
+    marginTop: 6,
+    padding: 7,
+    height: 28
+  };
+});
+
+var IconButtonSkeleton = function IconButtonSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(IconPlaceholder, null));
+};
+
+exports.IconButtonSkeleton = IconButtonSkeleton;
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

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

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

package/dist/cjs/bar/separator.js

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

package/dist/cjs/blocks/ArgsTable/ArgsTable.js

@@ -21,7 +21,7 @@ require("core-js/modules/es.array.from.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArgsTable = exports.ArgsTableError = exports.TableWrapper = void 0;
+exports.ArgsTable = exports.argsTableLoadingData = exports.ArgsTableError = exports.TableWrapper = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -189,12 +189,25 @@ var TableWrapper = _theming.styled.table(function (_ref) {
       }
     }), _)
   };
+}, function (_ref3) {
+  var isLoading = _ref3.isLoading,
+      theme = _ref3.theme;
+  return isLoading ? {
+    'th span, td span, td button': {
+      display: 'inline',
+      backgroundColor: theme.appBorderColor,
+      animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
+      color: 'transparent',
+      boxShadow: 'none',
+      borderRadius: 0
+    }
+  } : {};
 });
 
 exports.TableWrapper = TableWrapper;
 
-var ResetButton = _theming.styled.button(function (_ref3) {
-  var theme = _ref3.theme;
+var ResetButton = _theming.styled.button(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     border: 0,
     borderRadius: '3em',
@@ -249,6 +262,34 @@ var sortFns = {
   none: undefined
 };
 
+var rowLoadingData = function rowLoadingData(key) {
+  return {
+    key: key,
+    name: 'propertyName',
+    description: 'This is a short description',
+    control: {
+      type: 'text'
+    },
+    table: {
+      type: {
+        summary: 'summary'
+      },
+      defaultValue: {
+        summary: 'defaultValue'
+      }
+    }
+  };
+};
+
+var argsTableLoadingData = {
+  rows: {
+    row1: rowLoadingData('row1'),
+    row2: rowLoadingData('row2'),
+    row3: rowLoadingData('row3')
+  }
+};
+exports.argsTableLoadingData = argsTableLoadingData;
+
 var groupRows = function groupRows(rows, sort) {
   var sections = {
     ungrouped: [],
@@ -256,14 +297,14 @@ var groupRows = function groupRows(rows, sort) {
     sections: {}
   };
   if (!rows) return sections;
-  Object.entries(rows).forEach(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        key = _ref5[0],
-        row = _ref5[1];
+  Object.entries(rows).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        row = _ref6[1];
 
-    var _ref6 = (row === null || row === void 0 ? void 0 : row.table) || {},
-        category = _ref6.category,
-        subcategory = _ref6.subcategory;
+    var _ref7 = (row === null || row === void 0 ? void 0 : row.table) || {},
+        category = _ref7.category,
+        subcategory = _ref7.subcategory;
 
     if (category) {
       var section = sections.sections[category] || {
@@ -327,27 +368,27 @@ var groupRows = function groupRows(rows, sort) {
 
 
 var ArgsTable = function ArgsTable(props) {
-  var _ref7 = props,
-      error = _ref7.error;
-
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error, "\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
+  if ('error' in props) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, props.error, "\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
       href: "http://storybook.js.org/docs/",
       target: "_blank",
       withArrow: true
     }, "Read the docs"));
   }
 
-  var _ref8 = props,
+  var updateArgs = props.updateArgs,
+      resetArgs = props.resetArgs,
+      compact = props.compact,
+      inAddonPanel = props.inAddonPanel,
+      initialExpandedArgs = props.initialExpandedArgs,
+      _props$sort = props.sort,
+      sort = _props$sort === void 0 ? 'none' : _props$sort;
+  var isLoading = ('isLoading' in props);
+
+  var _ref8 = 'rows' in props ? props : argsTableLoadingData,
       rows = _ref8.rows,
-      args = _ref8.args,
-      updateArgs = _ref8.updateArgs,
-      resetArgs = _ref8.resetArgs,
-      compact = _ref8.compact,
-      inAddonPanel = _ref8.inAddonPanel,
-      initialExpandedArgs = _ref8.initialExpandedArgs,
-      _ref8$sort = _ref8.sort,
-      sort = _ref8$sort === void 0 ? 'none' : _ref8$sort;
+      args = _ref8.args;
+
   var groups = groupRows((0, _pickBy.default)(rows, function (row) {
     var _row$table;
 
@@ -373,12 +414,14 @@ var ArgsTable = function ArgsTable(props) {
     initialExpandedArgs: initialExpandedArgs
   };
   return /*#__PURE__*/_react.default.createElement(_DocumentFormatting.ResetWrapper, null, /*#__PURE__*/_react.default.createElement(TableWrapper, {
+    "aria-hidden": isLoading,
     compact: compact,
     inAddonPanel: inAddonPanel,
+    isLoading: isLoading,
     className: "docblock-argstable"
   }, /*#__PURE__*/_react.default.createElement("thead", {
     className: "docblock-argstable-head"
-  }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Name"), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, "Description"), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, "Default"), updateArgs ? /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(ControlHeadingWrapper, null, "Control", ' ', resetArgs && /*#__PURE__*/_react.default.createElement(ResetButton, {
+  }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Name")), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Description")), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Default")), updateArgs ? /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(ControlHeadingWrapper, null, "Control", ' ', !isLoading && resetArgs && /*#__PURE__*/_react.default.createElement(ResetButton, {
     onClick: function onClick() {
       return resetArgs();
     },

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

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithDefaultExpandedArgs = exports.Empty = exports.Error = exports.AllControls = exports.SubsectionsOnly = exports.SectionsAndSubsections = exports.SectionsCompact = exports.Sections = exports.InAddonPanelWithWarning = exports.InAddonPanel = exports.Compact = exports.Normal = exports.default = void 0;
+exports.WithDefaultExpandedArgs = exports.Empty = exports.Error = exports.AllControls = exports.SubsectionsOnly = exports.SectionsAndSubsections = exports.SectionsCompact = exports.Sections = exports.InAddonPanelWithWarning = exports.InAddonPanel = exports.Compact = exports.Normal = exports.Loading = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -75,6 +75,11 @@ var Template = function Template(args) {
 };
 
 Template.displayName = "Template";
+var Loading = Template.bind({});
+exports.Loading = Loading;
+Loading.args = {
+  isLoading: true
+};
 var Normal = Template.bind({});
 exports.Normal = Normal;
 Normal.args = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NamedColors = exports.defaultStyle = exports.default = void 0;
+exports.NamedColors = exports.DefaultStyle = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,7 +17,7 @@ var _default = {
 };
 exports.default = _default;
 
-var defaultStyle = function defaultStyle() {
+var DefaultStyle = function DefaultStyle() {
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
     title: "theme.color.greyscale",
     subtitle: "Some of the greys",
@@ -41,8 +41,8 @@ var defaultStyle = function defaultStyle() {
   }));
 };
 
-exports.defaultStyle = defaultStyle;
-defaultStyle.displayName = "defaultStyle";
+exports.DefaultStyle = DefaultStyle;
+DefaultStyle.displayName = "DefaultStyle";
 
 var NamedColors = function NamedColors() {
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {