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

package/dist/esm/Button/Button.js

@@ -0,0 +1,239 @@
+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.string.small.js";
+import "core-js/modules/es.string.bold.js";
+import "core-js/modules/es.object.assign.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 React, { forwardRef } from 'react';
+import { styled } from '@storybook/theming';
+import { darken, lighten, rgba, transparentize } from 'polished';
+var ButtonWrapper = styled.button(function (_ref) {
+  var small = _ref.small,
+      theme = _ref.theme;
+  return {
+    border: 0,
+    borderRadius: '3em',
+    cursor: 'pointer',
+    display: 'inline-block',
+    overflow: 'hidden',
+    padding: small ? '8px 16px' : '13px 20px',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transition: 'all 150ms ease-out',
+    transform: 'translate3d(0,0,0)',
+    verticalAlign: 'top',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    opacity: 1,
+    margin: 0,
+    background: 'transparent',
+    fontSize: "".concat(small ? theme.typography.size.s1 : theme.typography.size.s2 - 1, "px"),
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
+    svg: {
+      display: 'inline-block',
+      height: small ? 14 : 16,
+      width: small ? 14 : 16,
+      verticalAlign: 'top',
+      marginRight: small ? 4 : 6,
+      marginTop: small ? -1 : -2,
+      marginBottom: small ? -1 : -2,
+
+      /* Necessary for js mouse events to not glitch out when hovering on svgs */
+      pointerEvents: 'none',
+      path: {
+        fill: 'currentColor'
+      }
+    }
+  };
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? {
+    cursor: 'not-allowed !important',
+    opacity: 0.5,
+    '&:hover': {
+      transform: 'none'
+    }
+  } : {};
+}, function (_ref3) {
+  var containsIcon = _ref3.containsIcon,
+      small = _ref3.small;
+  return containsIcon ? Object.assign({
+    svg: {
+      display: 'block',
+      margin: 0
+    }
+  }, small ? {
+    padding: 9
+  } : {
+    padding: 12
+  }) : {};
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      primary = _ref4.primary,
+      secondary = _ref4.secondary,
+      gray = _ref4.gray;
+  var color;
+
+  if (gray) {
+    color = theme.color.medium;
+  } else if (secondary) {
+    color = theme.color.secondary;
+  } else if (primary) {
+    color = theme.color.primary;
+  }
+
+  return color ? {
+    background: color,
+    color: gray ? theme.color.darkest : theme.color.lightest,
+    '&:hover': {
+      background: darken(0.05, color)
+    },
+    '&:active': {
+      boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'
+    },
+    '&:focus': {
+      boxShadow: "".concat(rgba(color, 1), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat(rgba(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      tertiary = _ref5.tertiary,
+      inForm = _ref5.inForm,
+      small = _ref5.small;
+  return tertiary ? Object.assign({
+    background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
+    color: theme.input.color,
+    boxShadow: "".concat(theme.input.border, " 0 0 0 1px inset"),
+    borderRadius: theme.input.borderRadius
+  }, inForm && small ? {
+    padding: '10px 16px'
+  } : {}, {
+    '&:hover': Object.assign({
+      background: theme.base === 'light' ? darken(0.05, theme.input.background) : lighten(0.05, theme.input.background)
+    }, inForm ? {} : {
+      boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'
+    }),
+    '&:active': {
+      background: theme.input.background
+    },
+    '&:focus': {
+      boxShadow: "".concat(rgba(theme.color.secondary, 1), " 0 0 0 1px inset"),
+      outline: 'none'
+    }
+  }) : {};
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      outline = _ref6.outline;
+  return outline ? {
+    boxShadow: "".concat(transparentize(0.8, theme.color.defaultText), " 0 0 0 1px inset"),
+    color: transparentize(0.3, theme.color.defaultText),
+    background: 'transparent',
+    '&:hover, &:focus': {
+      boxShadow: "".concat(transparentize(0.5, theme.color.defaultText), " 0 0 0 1px inset"),
+      outline: 'none'
+    },
+    '&:active': {
+      boxShadow: "".concat(transparentize(0.5, theme.color.defaultText), " 0 0 0 2px inset"),
+      color: transparentize(0, theme.color.defaultText)
+    }
+  } : {};
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      outline = _ref7.outline,
+      primary = _ref7.primary;
+  var color = theme.color.primary;
+  return outline && primary ? {
+    boxShadow: "".concat(color, " 0 0 0 1px inset"),
+    color: color,
+    'svg path': {
+      fill: color
+    },
+    '&:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      background: 'transparent'
+    },
+    '&:active': {
+      background: color,
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      color: theme.color.tertiary
+    },
+    '&:focus': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.4), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      outline = _ref8.outline,
+      primary = _ref8.primary,
+      secondary = _ref8.secondary;
+  var color;
+
+  if (secondary) {
+    color = theme.color.secondary;
+  } else if (primary) {
+    color = theme.color.primary;
+  }
+
+  return outline && color ? {
+    boxShadow: "".concat(color, " 0 0 0 1px inset"),
+    color: color,
+    'svg path': {
+      fill: color
+    },
+    '&:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      background: 'transparent'
+    },
+    '&:active': {
+      background: color,
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      color: theme.color.tertiary
+    },
+    '&:focus': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.4), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+});
+var ButtonLink = ButtonWrapper.withComponent('a', {
+  target: "ex9hp6v0",
+  label: "ButtonLink"
+});
+export var Button = Object.assign( /*#__PURE__*/forwardRef(function (_ref9, ref) {
+  var isLink = _ref9.isLink,
+      children = _ref9.children,
+      props = _objectWithoutProperties(_ref9, ["isLink", "children"]);
+
+  if (isLink) {
+    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, props, {
+      ref: ref
+    }), children);
+  }
+
+  return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({}, props, {
+    ref: ref
+  }), children);
+}), {
+  defaultProps: {
+    isLink: false
+  }
+});

package/dist/esm/Button/Button.stories.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
+import { Form } from '../form/index';
+var FormButton = Form.Button;
+storiesOf('Basics/Button', module).add('all buttons', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Button that is used for forms"), /*#__PURE__*/React.createElement(FormButton, null, "Form.Button"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Buttons that are used for everything else"), /*#__PURE__*/React.createElement(Button, {
+    primary: true
+  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
+    secondary: true
+  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    containsIcon: true,
+    title: "link"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "link"
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
+    outline: true
+  }, "Outline"), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    primary: true
+  }, "Outline primary"), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    secondary: true
+  }, "Outline secondary"), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    disabled: true
+  }, "Disabled"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    small: true
+  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true
+  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
+    gray: true,
+    small: true
+  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    small: true
+  }, "Outline"), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    disabled: true,
+    small: true
+  }, "Disabled"), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    small: true,
+    containsIcon: true,
+    title: "link"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "link"
+  })), /*#__PURE__*/React.createElement(Button, {
+    outline: true,
+    small: true
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "link"
+  }), "Link"), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    small: true,
+    isLink: true,
+    href: "#"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "link"
+  }), " Link"));
+});

package/dist/esm/Colors/SideBySide.js

@@ -0,0 +1,15 @@
+import { styled } from '@storybook/theming';
+export var SideBySide = styled.div({
+  display: 'grid',
+  gridColumnGap: 30,
+  gridTemplateColumns: '1fr 1fr',
+  position: 'absolute',
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  top: 0,
+  left: 0,
+  '& > *': {
+    padding: 20
+  }
+});

package/dist/esm/Colors/colorpalette.stories.mdx

@@ -0,0 +1,125 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
+
+import { SideBySide } from './SideBySide';
+
+<Meta title="Basics/ColorPalette" />
+
+<SideBySide>
+  <div style={{background: '#202020' }}>
+<ThemeProvider theme={ensure(themes.dark)}>
+
+Dark theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).color).map(([k, v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce(
+            (acc, [key, value]) =>
+              typeof value === 'string' &&
+              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
+                ? { ...acc, [key]: value }
+                : acc,
+            {}
+          )}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Dark theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </ThemeProvider></div>
+  <div styles={{ background: '#eeeeee'}}>
+
+Light theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).color).map(([k, v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce(
+            (acc, [key, value]) =>
+              typeof value === 'string' &&
+              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
+                ? { ...acc, [key]: value }
+                : acc,
+            {}
+          )}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Light theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </div>
+</SideBySide>

package/dist/esm/Loader/Loader.js

@@ -0,0 +1,223 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.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 "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+var _templateObject;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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); }
+
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.concat.js";
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import global from 'global';
+import { transparentize } from 'polished';
+import React, { useEffect, useState } from 'react';
+import { styled, keyframes } from '@storybook/theming';
+import { Icons } from '../icon/icon';
+import { rotate360 } from '../shared/animation';
+var EventSource = global.EventSource,
+    CONFIG_TYPE = global.CONFIG_TYPE;
+var LoaderWrapper = styled.div(function (_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size;
+  return {
+    borderRadius: '50%',
+    cursor: 'progress',
+    display: 'inline-block',
+    overflow: 'hidden',
+    position: 'absolute',
+    transition: 'all 200ms ease-out',
+    verticalAlign: 'top',
+    top: '50%',
+    left: '50%',
+    marginTop: -(size / 2),
+    marginLeft: -(size / 2),
+    height: size,
+    width: size,
+    zIndex: 4,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'rgba(97, 97, 97, 0.29)',
+    borderTopColor: 'rgb(100,100,100)',
+    animation: "".concat(rotate360, " 0.7s linear infinite"),
+    mixBlendMode: 'difference'
+  };
+});
+var ProgressWrapper = styled.div({
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%'
+});
+var ProgressTrack = styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    position: 'relative',
+    width: '80%',
+    marginBottom: '0.75rem',
+    maxWidth: 300,
+    height: 5,
+    borderRadius: 5,
+    background: transparentize(0.8, theme.color.secondary),
+    overflow: 'hidden',
+    cursor: 'progress'
+  };
+});
+var ProgressBar = styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    background: theme.color.secondary
+  };
+});
+var ProgressMessage = styled.div(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    minHeight: '2em',
+    fontSize: "".concat(theme.typography.size.s1, "px"),
+    color: theme.barTextColor
+  };
+});
+var ErrorIcon = styled(Icons)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    width: 20,
+    height: 20,
+    marginBottom: '0.5rem',
+    color: theme.color.mediumdark
+  };
+});
+var ellipsis = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { content: \"...\" }\n  33% { content: \".\" }\n  66% { content: \"..\" }\n  to { content: \"...\" }\n"])));
+var Ellipsis = styled.span({
+  '&::after': {
+    content: "'...'",
+    animation: "".concat(ellipsis, " 1s linear infinite"),
+    animationDelay: '1s',
+    display: 'inline-block',
+    width: '1em',
+    height: 'auto'
+  }
+});
+export var PureLoader = function PureLoader(_ref6) {
+  var progress = _ref6.progress,
+      error = _ref6.error,
+      size = _ref6.size,
+      props = _objectWithoutProperties(_ref6, ["progress", "error", "size"]);
+
+  if (error) {
+    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
+      "aria-label": error.toString(),
+      "aria-live": "polite",
+      role: "status"
+    }, props), /*#__PURE__*/React.createElement(ErrorIcon, {
+      icon: "lightningoff"
+    }), /*#__PURE__*/React.createElement(ProgressMessage, null, error.message));
+  }
+
+  if (progress) {
+    var value = progress.value,
+        modules = progress.modules;
+    var message = progress.message;
+    if (modules) message += " ".concat(modules.complete, " / ").concat(modules.total, " modules");
+    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
+      "aria-label": "Content is loading...",
+      "aria-live": "polite",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": value * 100,
+      "aria-valuetext": message,
+      role: "progressbar"
+    }, props), /*#__PURE__*/React.createElement(ProgressTrack, null, /*#__PURE__*/React.createElement(ProgressBar, {
+      style: {
+        width: "".concat(value * 100, "%")
+      }
+    })), /*#__PURE__*/React.createElement(ProgressMessage, null, message, value < 1 && /*#__PURE__*/React.createElement(Ellipsis, {
+      key: message
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(LoaderWrapper, _extends({
+    "aria-label": "Content is loading...",
+    "aria-live": "polite",
+    role: "status",
+    size: size
+  }, props));
+};
+PureLoader.displayName = "PureLoader";
+export var Loader = function Loader(props) {
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  useEffect(function () {
+    // Don't listen for progress updates in static builds
+    // Event source is not defined in IE 11
+    if (CONFIG_TYPE !== 'DEVELOPMENT' || !EventSource) return undefined;
+    var eventSource = new EventSource('/progress');
+    var lastProgress;
+
+    eventSource.onmessage = function (event) {
+      try {
+        lastProgress = JSON.parse(event.data);
+        setProgress(lastProgress);
+      } catch (e) {
+        setError(e);
+        eventSource.close();
+      }
+    };
+
+    eventSource.onerror = function () {
+      if (lastProgress && lastProgress.value !== 1) setError(new Error('Connection closed'));
+      eventSource.close();
+    };
+
+    return function () {
+      return eventSource.close();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(PureLoader, _extends({
+    progress: progress,
+    error: error
+  }, props));
+};
+Loader.displayName = "Loader";