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

package/dist/modern/ScrollArea/GlobalScrollAreaStyles.js

@@ -0,0 +1,450 @@
+import React from 'react';
+import { Global, keyframes } from '@storybook/theming';
+const hsResizeObserverDummyAnimation = keyframes`0%{z-index:0}to{z-index:-1}`;
+export const getScrollAreaStyles = theme => ({
+  '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: `${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
+  }
+});
+
+const GlobalScrollAreaStyles = () => /*#__PURE__*/React.createElement(Global, {
+  styles: getScrollAreaStyles
+});
+
+GlobalScrollAreaStyles.displayName = "GlobalScrollAreaStyles";
+export default GlobalScrollAreaStyles;

package/dist/modern/ScrollArea/OverlayScrollbars.js

@@ -0,0 +1,86 @@
+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 _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 const OverlayScrollbarsComponent = (_ref) => {
+  let {
+    options = {},
+    extensions,
+    className,
+    children
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["options", "extensions", "className", "children"]);
+
+  const osTargetRef = React.useRef();
+  const osInstance = React.useRef();
+  React.useEffect(() => {
+    osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
+    mergeHostClassNames(osInstance.current, className);
+    return () => {
+      if (OverlayScrollbars.valid(osInstance.current)) {
+        osInstance.current.destroy();
+        osInstance.current = null;
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    if (OverlayScrollbars.valid(osInstance.current)) {
+      osInstance.current.options(options);
+    }
+  }, [options]);
+  React.useEffect(() => {
+    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)) {
+    const {
+      host
+    } = osInstance.getElements();
+    const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, '$|')}$`, 'g');
+    const osClassNames = host.className.split(' ').filter(name => name.match(regex)).join(' ');
+    host.className = `${osClassNames} ${className || ''}`;
+  }
+}
+
+export default OverlayScrollbarsComponent;

package/dist/modern/ScrollArea/ScrollArea.js

@@ -0,0 +1,43 @@
+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 _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, { Suspense } from 'react';
+import { styled } from '@storybook/theming';
+const GlobalScrollAreaStyles = /*#__PURE__*/React.lazy(() => import('./GlobalScrollAreaStyles'));
+const OverlayScrollbars = /*#__PURE__*/React.lazy(() => import('./OverlayScrollbars'));
+
+const Scroller = (_ref) => {
+  let props = _objectWithoutPropertiesLoose(_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 const ScrollArea = styled(Scroller)(({
+  vertical
+}) => !vertical ? {
+  overflowY: 'hidden'
+} : {
+  overflowY: 'auto',
+  height: '100%'
+}, ({
+  horizontal
+}) => !horizontal ? {
+  overflowX: 'hidden'
+} : {
+  overflowX: 'auto',
+  width: '100%'
+});
+ScrollArea.defaultProps = {
+  horizontal: false,
+  vertical: false
+};

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

@@ -0,0 +1,70 @@
+import React, { Fragment } from 'react';
+import { styled } from '@storybook/theming';
+import { ScrollArea } from './ScrollArea';
+const Block = styled.span({
+  display: 'inline-block',
+  height: 40,
+  width: 40,
+  marginTop: 5,
+  marginRight: 5,
+  background: 'silver',
+  lineHeight: '40px',
+  textAlign: 'center',
+  fontSize: 9
+});
+const Wrapper = styled.div({
+  whiteSpace: 'nowrap',
+  lineHeight: '0px',
+  width: 500,
+  height: 500,
+  overflow: 'hidden'
+});
+
+const list = filler => {
+  const data = []; // eslint-disable-next-line no-plusplus
+
+  for (let i = 0; i < 20; i++) {
+    data.push(filler(i));
+  }
+
+  return data;
+};
+
+export default {
+  component: ScrollArea,
+  title: 'Basics/ScrollArea',
+  decorators: [storyFn => /*#__PURE__*/React.createElement(Wrapper, null, storyFn())]
+};
+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, {
+  horizontal: true
+}, list(i => /*#__PURE__*/React.createElement(Block, {
+  key: i
+}, i)));
+horizontal.displayName = "horizontal";
+export const both = () => /*#__PURE__*/React.createElement(ScrollArea, {
+  horizontal: true,
+  vertical: true
+}, list(i => /*#__PURE__*/React.createElement(Fragment, {
+  key: i
+}, 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, {
+  horizontal: true,
+  vertical: true
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: 2000,
+    height: 2000,
+    border: '10px solid orangered',
+    background: `url('data:image/png;base64,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')`
+  }
+}));
+withOuterBorder.displayName = "withOuterBorder";

package/dist/modern/Zoom/Zoom.js

@@ -0,0 +1,17 @@
+import global from 'global';
+import { ZoomElement as Element } from './ZoomElement';
+import { ZoomIFrame as IFrame } from './ZoomIFrame';
+const {
+  window: globalWindow
+} = global;
+export const browserSupportsCssZoom = () => {
+  try {
+    return globalWindow.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
+  } catch (error) {
+    return false;
+  }
+};
+export const Zoom = {
+  Element,
+  IFrame
+};