@comicrelief/component-library 7.21.0 → 7.22.1

package/dist/components/Molecules/Promo/Promo.js

@@ -7,28 +7,86 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PromoVideo = _interopRequireDefault(require("./_PromoVideo"));
+
+var _breakpoint = require("../../../theme/shared/breakpoint");
 
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _Promo = require("./Promo.style");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Promo = function Promo(_ref) {
-  var copyFirst = _ref.copyFirst,
+  var copyLeft = _ref.copyLeft,
       backgroundColor = _ref.backgroundColor,
       imageLow = _ref.imageLow,
       imageSet = _ref.imageSet,
       image = _ref.image,
       imageAltText = _ref.imageAltText,
       children = _ref.children,
-      position = _ref.position;
-  var hasImage = imageSet || false;
+      position = _ref.position,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      poster = _ref.poster,
+      mobilePoster = _ref.mobilePoster,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+      videoSrc = _ref.videoSrc,
+      mobileVideoSrc = _ref.mobileVideoSrc,
+      behindTextGradient = _ref.behindTextGradient,
+      blackPlayButton = _ref.blackPlayButton;
+
+  // Store the appropriate prop in state, dependent on the breakpoint
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      thisVideoSrc = _useState2[0],
+      setThisVideoSrc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      thisPoster = _useState4[0],
+      setThisPoster = _useState4[1]; // Let either field define this, just in case
+
+
+  var hasVideo = Boolean(videoSrc || mobileVideoSrc); // A 'video-y' Promo will override and ignore any 'non-Video' images;
+  // none of these fields are required so we have to handle them accordingly:
+
+  var hasImage = Boolean(imageSet && !hasVideo); // Runs on initial load:
+
+  (0, _react.useEffect)(function () {
+    if (hasVideo) {
+      // Checks size on load ONLY; don't want to mess about with listeners:
+      var isDesktop = window.innerWidth >= _breakpoint.sizes.nav; // 1024+ px
+
+      var currentPoster;
+      var currentSrc; // If we've got both desktop AND mobile videos, let the
+      // *current* screen width define which video src to use:
+
+      if (videoSrc && mobileVideoSrc) {
+        currentSrc = isDesktop ? videoSrc : mobileVideoSrc;
+        currentPoster = isDesktop ? poster : mobilePoster;
+      } else {
+        // Else, pick whatever we DO actually have:
+        currentSrc = videoSrc || mobileVideoSrc;
+        currentPoster = poster || mobilePoster;
+      }
+
+      setThisVideoSrc(currentSrc);
+      setThisPoster(currentPoster);
+    }
+  }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
   return /*#__PURE__*/_react.default.createElement(_Promo.Container, {
     backgroundColor: backgroundColor,
     position: position
-  }, hasImage && /*#__PURE__*/_react.default.createElement(_Promo.Media, {
-    imageRight: copyFirst
-  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Promo.Media, {
+    imageRight: copyLeft
+  }, hasImage && !hasVideo && /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: imageSet,
@@ -36,22 +94,46 @@ var Promo = function Promo(_ref) {
     objectFit: "cover",
     width: "100%",
     height: "100%"
-  })), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
-    copyFirst: copyFirst
+  }), hasVideo && thisVideoSrc && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PromoVideo.default, {
+    copyLeft: copyLeft,
+    behindTextGradient: behindTextGradient,
+    blackPlayButton: blackPlayButton,
+    thisVideoSrc: thisVideoSrc,
+    thisPoster: thisPoster,
+    showPosterAfterPlaying: showPosterAfterPlaying,
+    autoPlay: autoPlay,
+    loop: loop
+  }))), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
+    copyLeft: copyLeft
+  }, /*#__PURE__*/_react.default.createElement(_Promo.Gradient, {
+    hasVideo: hasVideo,
+    behindTextGradient: behindTextGradient,
+    copyLeft: copyLeft
   }, /*#__PURE__*/_react.default.createElement(_Promo.Copy, {
-    position: position
-  }, children)));
+    position: position,
+    hasVideo: hasVideo,
+    behindTextGradient: behindTextGradient
+  }, children))));
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
-  position: 'none'
+  position: 'none',
+  autoPlay: true,
+  loop: true,
+  poster: null,
+  mobilePoster: null,
+  videoSrc: null,
+  mobileVideoSrc: null,
+  showPosterAfterPlaying: true,
+  behindTextGradient: 'none',
+  blackPlayButton: false
 };
 var _default = Promo;
 exports.default = _default;

package/dist/components/Molecules/Promo/Promo.md

@@ -14,8 +14,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
-  hasOverlay={true}
+  copyLeft={true}
   position="upper"
 >
   <Text
@@ -50,8 +49,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
-  hasOverlay={true}
+  copyLeft={true}
   position="end"
 >
   <Text
@@ -86,8 +84,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
-  hasOverlay={true}
+  copyLeft={true}
   position="lower"
 >
   <Text
@@ -122,8 +119,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
-  hasOverlay={true}
+  copyLeft={true}
 >
   <Text
     tag="h1"
@@ -149,3 +145,251 @@ import Link from '../../Atoms/Link/Link';
 </Promo>
 </div>
 ```
+
+Promo w/Video
+
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png';
+const videoSrc =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
+
+<div>
+<Text tag="h2" size="xl" color="black">
+  Promo Upper w/Video (autoplay and loop, black text gradient overlay)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  position="upper"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoplay={true}
+  behindTextGradient='black'
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo End w/Video (loop only, no text gradient overlay)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  position="end"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo Lower w/Video (autoplay only, white text gradient overlay)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  position="lower"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={true}
+  behindTextGradient='white'
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, no text gradient overlay, copy right aligned)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={false}
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, different videos and posters for mobile and desktop)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  videoSrc={videoSrc}
+  mobileVideoSrc={mobileVideoSrc}
+  poster={poster}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  behindTextGradient='white'
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, mobile-only video and poster, black play button)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  mobileVideoSrc={mobileVideoSrc}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  behindTextGradient='white'
+  blackPlayButton={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    One-Line Special
+  </Text>
+</Promo>
+
+</div>
+```

package/dist/components/Molecules/Promo/Promo.style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
+exports.Gradient = exports.Video = exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -42,9 +42,9 @@ exports.Container = Container;
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Wrapper",
   componentId: "sc-kk4nna-1"
-})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
-  var copyFirst = _ref5.copyFirst;
-  return !copyFirst && 'justify-content: flex-end';
+})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;position:relative;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
+  var copyLeft = _ref5.copyLeft;
+  return !copyLeft && 'justify-content: flex-end';
 }, (0, _size.media)('medium'));
 
 exports.Wrapper = Wrapper;
@@ -52,7 +52,7 @@ exports.Wrapper = Wrapper;
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
+})(["width:100%;padding:", " ", " ", ";", ";", "{width:100%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
   var position = _ref6.position;
   return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
 });
@@ -64,4 +64,29 @@ var Media = _styledComponents.default.div.withConfig({
   componentId: "sc-kk4nna-3"
 })(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('medium'));
 
-exports.Media = Media;
+exports.Media = Media;
+
+var Video = _styledComponents.default.video.attrs(function () {
+  return {
+    playsInline: true
+  };
+}).withConfig({
+  displayName: "Promostyle__Video",
+  componentId: "sc-kk4nna-4"
+})(["width:100%;height:100%;object-fit:cover;"]);
+
+exports.Video = Video;
+
+var Gradient = _styledComponents.default.div.withConfig({
+  displayName: "Promostyle__Gradient",
+  componentId: "sc-kk4nna-5"
+})(["width:100%;height:100%;display:flex;align-items:center;", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], (0, _size.media)('medium'), function (_ref7) {
+  var copyLeft = _ref7.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["left:auto;right:0;"]);
+}, function (_ref8) {
+  var hasVideo = _ref8.hasVideo,
+      behindTextGradient = _ref8.behindTextGradient;
+  return hasVideo !== false && behindTextGradient !== 'none' && (0, _styledComponents.css)(["overflow:hidden;background-color:", ";box-shadow:0px 0px 50px 60px ", ";"], behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)', behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)');
+});
+
+exports.Gradient = Gradient;

package/dist/components/Molecules/Promo/Promo.test.js

@@ -22,7 +22,7 @@ it('renders Promo correctly', function () {
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,
     imageAltText: "",
-    copyFirst: false
+    copyLeft: false
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h1",
     color: "white",
@@ -46,7 +46,7 @@ it('renders Promo correctly end position', function () {
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,
     imageAltText: "",
-    copyFirst: false,
+    copyLeft: false,
     position: "end"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h1",

package/dist/components/Molecules/Promo/_ProgressRing.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PromoVideoButton = require("./_PromoVideoButton.style");
+
+var _excluded = ["videoProgress"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ProgressRing = function ProgressRing(_ref) {
+  var videoProgress = _ref.videoProgress,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var thisStroke = 4;
+  var thisRadius = 28;
+  var initNormRadius = thisRadius - thisStroke * 2;
+  var thisCircumference = initNormRadius * 2 * Math.PI;
+
+  var _useState = (0, _react.useState)(initNormRadius * 2 * Math.PI),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      thisDashOffset = _useState2[0],
+      setThisDashOffset = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var offset = thisCircumference - videoProgress / 100 * thisCircumference;
+    setThisDashOffset(offset);
+  }, [videoProgress, thisCircumference]);
+  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingWrapper, {
+    videoProgress: videoProgress
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingSVG, {
+    height: thisRadius * 2,
+    width: thisRadius * 2
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingCircle, Object.assign({
+    strokeDasharray: "".concat(thisCircumference, " ").concat(thisCircumference),
+    strokeDashOffsetStyle: thisDashOffset,
+    strokeWidth: "".concat(thisStroke),
+    r: "".concat(initNormRadius),
+    cx: "".concat(thisRadius),
+    cy: "".concat(thisRadius)
+  }, rest))));
+};
+
+var _default = ProgressRing;
+exports.default = _default;