@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/esm/Loader/Loader.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { PureLoader as Loader } from './Loader';
+
+var withBackground = function withBackground(storyFn) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      background: 'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      height: '50vh',
+      width: '100vw',
+      background: 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)'
+    }
+  }), storyFn());
+};
+
+withBackground.displayName = "withBackground";
+export default {
+  title: 'Basics/Loader'
+};
+export var InfiniteState = function InfiniteState() {
+  return /*#__PURE__*/React.createElement(Loader, {
+    role: "progressbar"
+  });
+};
+InfiniteState.displayName = "InfiniteState";
+InfiniteState.decorators = [withBackground];
+export var SizeAdjusted = function SizeAdjusted() {
+  return /*#__PURE__*/React.createElement(Loader, {
+    size: 64,
+    role: "progressbar"
+  });
+};
+SizeAdjusted.displayName = "SizeAdjusted";
+SizeAdjusted.decorators = [withBackground];
+export var ProgressBar = function ProgressBar() {
+  return /*#__PURE__*/React.createElement(Loader, {
+    progress: {
+      value: 0.3,
+      message: 'Building',
+      modules: {
+        complete: 500,
+        total: 1337
+      }
+    }
+  });
+};
+ProgressBar.displayName = "ProgressBar";
+export var ProgressError = function ProgressError() {
+  return /*#__PURE__*/React.createElement(Loader, {
+    error: new Error('Connection closed')
+  });
+};
+ProgressError.displayName = "ProgressError";

package/dist/esm/ScrollArea/GlobalScrollAreaStyles.js

@@ -0,0 +1,461 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import React from 'react';
+import { Global, keyframes } from '@storybook/theming';
+var hsResizeObserverDummyAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["0%{z-index:0}to{z-index:-1}"])));
+export var getScrollAreaStyles = function getScrollAreaStyles(theme) {
+  return {
+    'html.os-html, html.os-html>.os-host': {
+      display: 'block',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      height: '100%!important',
+      width: '100%!important',
+      minWidth: '100%!important',
+      minHeight: '100%!important',
+      margin: '0!important',
+      position: 'absolute!important'
+    },
+    'html.os-html>.os-host>.os-padding': {
+      position: 'absolute'
+    },
+    'body.os-dragging, body.os-dragging *': {
+      cursor: 'default'
+    },
+    '.os-host, .os-host-textarea': {
+      position: 'relative',
+      overflow: 'visible!important',
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      justifyContent: 'flex-start',
+      alignContent: 'flex-start',
+      alignItems: 'flex-start'
+    },
+    '.os-host-flexbox': {
+      overflow: 'hidden!important',
+      display: 'flex'
+    },
+    '.os-host-flexbox>.os-size-auto-observer': {
+      height: 'inherit!important'
+    },
+    '.os-host-flexbox>.os-content-glue': {
+      flexGrow: 1,
+      flexShrink: 0
+    },
+    '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': {
+      minHeight: 0,
+      minWidth: 0,
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto'
+    },
+    '#os-dummy-scrollbar-size': {
+      position: 'fixed',
+      opacity: 0,
+      visibility: 'hidden',
+      overflow: 'scroll',
+      height: 500,
+      width: 500
+    },
+    '#os-dummy-scrollbar-size>div': {
+      width: '200%',
+      height: '200%',
+      margin: 10
+    },
+    '#os-dummy-scrollbar-size, .os-viewport': {},
+    '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport': {
+      scrollbarWidth: 'none!important'
+    },
+    '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner': {
+      display: 'none!important',
+      width: '0!important',
+      height: '0!important',
+      visibility: 'hidden!important',
+      background: '0 0!important'
+    },
+    '.os-content-glue': {
+      boxSizing: 'inherit',
+      maxHeight: '100%',
+      maxWidth: '100%',
+      width: '100%',
+      pointerEvents: 'none'
+    },
+    '.os-padding': {
+      boxSizing: 'inherit',
+      direction: 'inherit',
+      position: 'absolute',
+      overflow: 'visible',
+      padding: 0,
+      margin: 0,
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      width: 'auto!important',
+      height: 'auto!important',
+      zIndex: 1
+    },
+    '.os-host-overflow>.os-padding': {
+      overflow: 'hidden'
+    },
+    '.os-viewport': {
+      direction: 'inherit!important',
+      boxSizing: 'inherit!important',
+      resize: 'none!important',
+      outline: '0!important',
+      position: 'absolute',
+      overflow: 'hidden',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      padding: 0,
+      margin: 0
+    },
+    '.os-content-arrange': {
+      position: 'absolute',
+      zIndex: -1,
+      minHeight: 1,
+      minWidth: 1,
+      pointerEvents: 'none'
+    },
+    '.os-content': {
+      direction: 'inherit',
+      boxSizing: 'border-box!important',
+      position: 'relative',
+      display: 'block',
+      height: '100%',
+      width: '100%',
+      visibility: 'visible'
+    },
+    '.os-content:before, .os-content:after': {
+      content: "''",
+      display: 'table',
+      width: 0,
+      height: 0,
+      lineHeight: 0,
+      fontSize: 0
+    },
+    '.os-content>.os-textarea': {
+      boxSizing: 'border-box!important',
+      direction: 'inherit!important',
+      background: '0 0!important',
+      outline: '0 transparent!important',
+      overflow: 'hidden!important',
+      position: 'absolute!important',
+      display: 'block!important',
+      top: '0!important',
+      left: '0!important',
+      margin: '0!important',
+      borderRadius: '0!important',
+      float: 'none!important',
+      filter: 'none!important',
+      border: '0!important',
+      resize: 'none!important',
+      transform: 'none!important',
+      maxWidth: 'none!important',
+      maxHeight: 'none!important',
+      boxShadow: 'none!important',
+      perspective: 'none!important',
+      opacity: '1!important',
+      zIndex: '1!important',
+      clip: 'auto!important',
+      verticalAlign: 'baseline!important',
+      padding: 0
+    },
+    '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': {
+      right: '0!important'
+    },
+    '.os-content>.os-textarea-cover': {
+      zIndex: -1,
+      pointerEvents: 'none'
+    },
+    '.os-content>.os-textarea[wrap=off]': {
+      whiteSpace: 'pre!important',
+      margin: '0!important'
+    },
+    '.os-text-inherit': {
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      fontStyle: 'inherit',
+      fontVariant: 'inherit',
+      textTransform: 'inherit',
+      textDecoration: 'inherit',
+      textIndent: 'inherit',
+      textAlign: 'inherit',
+      textShadow: 'inherit',
+      textOverflow: 'inherit',
+      letterSpacing: 'inherit',
+      wordSpacing: 'inherit',
+      lineHeight: 'inherit',
+      unicodeBidi: 'inherit',
+      direction: 'inherit',
+      color: 'inherit',
+      cursor: 'text'
+    },
+    '.os-resize-observer, .os-resize-observer-host': {
+      boxSizing: 'inherit',
+      display: 'block',
+      opacity: 0,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      overflow: 'hidden',
+      pointerEvents: 'none',
+      zIndex: -1
+    },
+    '.os-resize-observer-host': {
+      padding: 'inherit',
+      border: 'inherit',
+      borderColor: 'transparent',
+      borderStyle: 'solid',
+      boxSizing: 'border-box'
+    },
+    '.os-resize-observer-host:after': {
+      content: "''"
+    },
+    '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': {
+      height: '200%',
+      width: '200%',
+      padding: 'inherit',
+      border: 'inherit',
+      margin: 0,
+      display: 'block',
+      boxSizing: 'content-box'
+    },
+    '.os-resize-observer.observed, object.os-resize-observer': {
+      boxSizing: 'border-box!important'
+    },
+    '.os-size-auto-observer': {
+      boxSizing: 'inherit!important',
+      height: '100%',
+      width: 'inherit',
+      maxWidth: 1,
+      position: 'relative',
+      float: 'left',
+      maxHeight: 1,
+      overflow: 'hidden',
+      zIndex: -1,
+      padding: 0,
+      margin: 0,
+      pointerEvents: 'none',
+      flexGrow: 'inherit',
+      flexShrink: 0,
+      flexBasis: 0
+    },
+    '.os-size-auto-observer>.os-resize-observer': {
+      width: '1000%',
+      height: '1000%',
+      minHeight: 1,
+      minWidth: 1
+    },
+    '.os-resize-observer-item': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      overflow: 'hidden',
+      zIndex: -1,
+      opacity: 0,
+      direction: 'ltr!important',
+      flex: 'none!important'
+    },
+    '.os-resize-observer-item-final': {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      transition: 'none!important',
+      flex: 'none!important'
+    },
+    '.os-resize-observer': {
+      animationDuration: '.001s',
+      animationName: "".concat(hsResizeObserverDummyAnimation)
+    },
+    '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': {
+      transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s'
+    },
+    'html.os-html>.os-host>.os-scrollbar': {
+      position: 'absolute',
+      zIndex: 999999
+    },
+    '.os-scrollbar, .os-scrollbar-corner': {
+      position: 'absolute',
+      opacity: 1,
+      zIndex: 1
+    },
+    '.os-scrollbar-corner': {
+      bottom: 0,
+      right: 0,
+      height: 10,
+      width: 10,
+      backgroundColor: 'transparent'
+    },
+    '.os-scrollbar': {
+      pointerEvents: 'none',
+      padding: 2,
+      boxSizing: 'border-box',
+      background: 0
+    },
+    '.os-scrollbar-track': {
+      pointerEvents: 'auto',
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+      padding: '0!important',
+      border: '0!important'
+    },
+    '.os-scrollbar-handle': {
+      pointerEvents: 'auto',
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    },
+    '.os-scrollbar-handle-off, .os-scrollbar-track-off': {
+      pointerEvents: 'none'
+    },
+    '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': {
+      pointerEvents: 'none!important'
+    },
+    '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': {
+      opacity: '0!important'
+    },
+    '.os-scrollbar-horizontal': {
+      bottom: 0,
+      left: 0,
+      right: 10,
+      height: 10
+    },
+    '.os-scrollbar-vertical': {
+      top: 0,
+      right: 0,
+      bottom: 10,
+      width: 10
+    },
+    '.os-host-rtl>.os-scrollbar-horizontal': {
+      right: 0
+    },
+    '.os-host-rtl>.os-scrollbar-vertical': {
+      right: 'auto',
+      left: 0
+    },
+    '.os-host-rtl>.os-scrollbar-corner': {
+      right: 'auto',
+      left: 0
+    },
+    '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner': {
+      opacity: 0,
+      visibility: 'hidden',
+      pointerEvents: 'none'
+    },
+    '.os-scrollbar-corner-resize-both': {
+      cursor: 'nwse-resize'
+    },
+    '.os-host-rtl>.os-scrollbar-corner-resize-both': {
+      cursor: 'nesw-resize'
+    },
+    '.os-scrollbar-corner-resize-horizontal': {
+      cursor: 'ew-resize'
+    },
+    '.os-scrollbar-corner-resize-vertical': {
+      cursor: 'ns-resize'
+    },
+    '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': {
+      cursor: 'default'
+    },
+    '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': {
+      top: 0,
+      bottom: 0
+    },
+    '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal': {
+      right: 0,
+      left: 0
+    },
+    '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': {
+      opacity: '1!important',
+      visibility: 'visible!important'
+    },
+    '.os-scrollbar-corner.os-scrollbar-corner-resize': {
+      backgroundImage: 'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '100% 100%',
+      pointerEvents: 'auto!important'
+    },
+    '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': {
+      transform: 'scale(-1,1)'
+    },
+    '.os-host-overflow': {
+      overflow: 'hidden!important'
+    },
+    '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': {
+      left: 10,
+      right: 0
+    },
+    '.os-scrollbar.os-scrollbar-unusable': {
+      background: 0
+    },
+    '.os-scrollbar>.os-scrollbar-track': {
+      background: 0
+    },
+    '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': {
+      minWidth: 30
+    },
+    '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': {
+      minHeight: 30
+    },
+    '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
+      transition: 'background-color .3s'
+    },
+    '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': {
+      borderRadius: 10
+    },
+    '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
+      background: theme.color.mediumdark,
+      opacity: 0.5
+    },
+    '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {
+      opacity: 0.6
+    },
+    '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before': {
+      content: "''",
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      display: 'block'
+    },
+    '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before': {
+      display: 'none'
+    },
+    '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
+      top: -6,
+      bottom: -2
+    },
+    '.os-scrollbar-vertical .os-scrollbar-handle:before': {
+      left: -6,
+      right: -2
+    },
+    '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': {
+      right: -6,
+      left: -2
+    }
+  };
+};
+
+var GlobalScrollAreaStyles = function GlobalScrollAreaStyles() {
+  return /*#__PURE__*/React.createElement(Global, {
+    styles: getScrollAreaStyles
+  });
+};
+
+GlobalScrollAreaStyles.displayName = "GlobalScrollAreaStyles";
+export default GlobalScrollAreaStyles;

package/dist/esm/ScrollArea/OverlayScrollbars.js

@@ -0,0 +1,102 @@
+import "core-js/modules/es.regexp.constructor.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import OverlayScrollbars from 'overlayscrollbars';
+
+/**
+ * Using overlayscrollbars-react component results use the esm modules
+ * which doesn't go through babel leading to IE 11 uncompatibility
+ * A PR is submitted that may fix this:
+ * https://github.com/KingSora/OverlayScrollbars/pull/218
+ * */
+export var OverlayScrollbarsComponent = function OverlayScrollbarsComponent(_ref) {
+  var _ref$options = _ref.options,
+      options = _ref$options === void 0 ? {} : _ref$options,
+      extensions = _ref.extensions,
+      className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["options", "extensions", "className", "children"]);
+
+  var osTargetRef = React.useRef();
+  var osInstance = React.useRef();
+  React.useEffect(function () {
+    osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
+    mergeHostClassNames(osInstance.current, className);
+    return function () {
+      if (OverlayScrollbars.valid(osInstance.current)) {
+        osInstance.current.destroy();
+        osInstance.current = null;
+      }
+    };
+  }, []);
+  React.useEffect(function () {
+    if (OverlayScrollbars.valid(osInstance.current)) {
+      osInstance.current.options(options);
+    }
+  }, [options]);
+  React.useEffect(function () {
+    if (OverlayScrollbars.valid(osInstance.current)) {
+      mergeHostClassNames(osInstance.current, className);
+    }
+  }, [className]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "os-host"
+  }, rest, {
+    ref: osTargetRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "os-resize-observer-host"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "os-padding"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-viewport"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-content"
+  }, children))), /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar os-scrollbar-horizontal "
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar-handle"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar os-scrollbar-vertical"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar-handle"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "os-scrollbar-corner"
+  }));
+};
+OverlayScrollbarsComponent.displayName = "OverlayScrollbarsComponent";
+
+function mergeHostClassNames(osInstance, className) {
+  if (OverlayScrollbars.valid(osInstance)) {
+    var _osInstance$getElemen = osInstance.getElements(),
+        host = _osInstance$getElemen.host;
+
+    var regex = new RegExp("(^os-host([-_].+|)$)|".concat(osInstance.options().className.replace(/\s/g, '$|'), "$"), 'g');
+    var osClassNames = host.className.split(' ').filter(function (name) {
+      return name.match(regex);
+    }).join(' ');
+    host.className = "".concat(osClassNames, " ").concat(className || '');
+  }
+}
+
+export default OverlayScrollbarsComponent;

package/dist/esm/ScrollArea/ScrollArea.js

@@ -0,0 +1,58 @@
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+import React, { Suspense } from 'react';
+import { styled } from '@storybook/theming';
+var GlobalScrollAreaStyles = /*#__PURE__*/React.lazy(function () {
+  return import('./GlobalScrollAreaStyles');
+});
+var OverlayScrollbars = /*#__PURE__*/React.lazy(function () {
+  return import('./OverlayScrollbars');
+});
+
+var Scroller = function Scroller(_ref) {
+  var horizontal = _ref.horizontal,
+      vertical = _ref.vertical,
+      props = _objectWithoutProperties(_ref, ["horizontal", "vertical"]);
+
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", props)
+  }, /*#__PURE__*/React.createElement(GlobalScrollAreaStyles, null), /*#__PURE__*/React.createElement(OverlayScrollbars, _extends({
+    options: {
+      scrollbars: {
+        autoHide: 'leave'
+      }
+    }
+  }, props)));
+};
+
+Scroller.displayName = "Scroller";
+export var ScrollArea = styled(Scroller)(function (_ref2) {
+  var vertical = _ref2.vertical;
+  return !vertical ? {
+    overflowY: 'hidden'
+  } : {
+    overflowY: 'auto',
+    height: '100%'
+  };
+}, function (_ref3) {
+  var horizontal = _ref3.horizontal;
+  return !horizontal ? {
+    overflowX: 'hidden'
+  } : {
+    overflowX: 'auto',
+    width: '100%'
+  };
+});
+ScrollArea.defaultProps = {
+  horizontal: false,
+  vertical: false
+};