@comicrelief/component-library 7.24.0 → 7.24.2

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

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,126 +13,176 @@ var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _videoPlayIcon = _interopRequireDefault(require("./assets/video--play-icon.svg"));
 var _videoPlayIcon__hover = _interopRequireDefault(require("./assets/video--play-icon__hover.svg"));
 var _loader = _interopRequireDefault(require("./assets/loader.svg"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var Container = exports.Container = _styledComponents.default.div.withConfig({
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Container",
   componentId: "sc-86zg20-0"
-})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
-}, (0, _size.media)('small'), function (_ref2) {
-  var copyFirst = _ref2.copyFirst;
+}, (0, _size.media)('small'), _ref2 => {
+  let {
+    copyFirst
+  } = _ref2;
   return copyFirst === true ? 'row-reverse' : 'row';
-}, function (_ref3) {
-  var landscapeVideo = _ref3.landscapeVideo,
-    hasVideo = _ref3.hasVideo,
-    fullImage = _ref3.fullImage;
+}, _ref3 => {
+  let {
+    landscapeVideo,
+    hasVideo,
+    fullImage
+  } = _ref3;
   return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
-}, function (_ref4) {
-  var copyFirst = _ref4.copyFirst;
+}, _ref4 => {
+  let {
+    copyFirst
+  } = _ref4;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, function (_ref5) {
-  var isPlaying = _ref5.isPlaying;
+}, _ref5 => {
+  let {
+    isPlaying
+  } = _ref5;
   return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
 });
-var Copy = exports.Copy = _styledComponents.default.div.withConfig({
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:", ";", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";"], (0, _zIndex.default)('low'), function (_ref6) {
-  var hasVideo = _ref6.hasVideo,
-    fullImage = _ref6.fullImage;
+})(["width:100%;", ";", ";padding:", ";", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref6 => {
+  let {
+    hasVideo,
+    fullImage
+  } = _ref6;
   return hasVideo === true && fullImage === true ? 'display: none;' : null;
-}, (0, _spacing.default)('l'), (0, _size.media)('small'), function (_ref7) {
-  var vhFull = _ref7.vhFull,
-    fullImage = _ref7.fullImage;
+}, (0, _spacing.default)('l'), (0, _size.media)('small'), _ref7 => {
+  let {
+    vhFull,
+    fullImage
+  } = _ref7;
   return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
-}, function (_ref8) {
-  var hasVideo = _ref8.hasVideo,
-    fullImage = _ref8.fullImage;
+}, _ref8 => {
+  let {
+    hasVideo,
+    fullImage
+  } = _ref8;
   return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
-}, (0, _spacing.default)('xl'), function (props) {
-  return props.fullImage && (0, _styledComponents.css)(["", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], (0, _size.media)('small'), props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null);
-}, function (props) {
-  return props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], function (_ref9) {
-    var theme = _ref9.theme;
-    return theme.breakpoint('small');
-  }) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], function (_ref10) {
-    var theme = _ref10.theme;
-    return theme.breakpoint('small');
-  }, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md'));
-});
-var Media = exports.Media = _styledComponents.default.div.withConfig({
+}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], (0, _size.media)('small'), props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoint('small');
+}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.breakpoint('small');
+}, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
+const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"
-})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";", "{padding-bottom:", ";}"], function (_ref11) {
-  var fullImage = _ref11.fullImage;
+})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";", "{padding-bottom:", ";}"], _ref11 => {
+  let {
+    fullImage
+  } = _ref11;
   return fullImage ? 'height: 200px;' : 'height: 280px;';
-}, function (_ref12) {
-  var theme = _ref12.theme;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.breakpoint('small');
-}, function (_ref13) {
-  var fullImage = _ref13.fullImage;
+}, _ref13 => {
+  let {
+    fullImage
+  } = _ref13;
   return fullImage ? '100%' : '50%';
-}, function (_ref14) {
-  var fullImage = _ref14.fullImage;
+}, _ref14 => {
+  let {
+    fullImage
+  } = _ref14;
   return fullImage ? 'min-height: 500px;' : null;
-}, function (_ref15) {
-  var vhFull = _ref15.vhFull,
-    fullImage = _ref15.fullImage;
+}, _ref15 => {
+  let {
+    vhFull,
+    fullImage
+  } = _ref15;
   return vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null;
-}, function (_ref16) {
-  var doubleImage = _ref16.doubleImage;
+}, _ref16 => {
+  let {
+    doubleImage
+  } = _ref16;
   return doubleImage && 'display: flex; flex-direction: column';
-}, function (_ref17) {
-  var hasVideo = _ref17.hasVideo;
+}, _ref17 => {
+  let {
+    hasVideo
+  } = _ref17;
   return hasVideo ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;' : null;
-}, (0, _size.media)('small'), function (_ref18) {
-  var landscapeVideo = _ref18.landscapeVideo,
-    hasVideo = _ref18.hasVideo;
+}, (0, _size.media)('small'), _ref18 => {
+  let {
+    landscapeVideo,
+    hasVideo
+  } = _ref18;
   return landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;';
 });
-var PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
+const PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
   displayName: "SingleMessagestyle__PlayButton",
   componentId: "sc-86zg20-3"
-})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}", "{background-size:100px;}"], (0, _zIndex.default)('medium'), function (_ref19) {
-  var isBuffering = _ref19.isBuffering;
+})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref19 => {
+  let {
+    isBuffering
+  } = _ref19;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon.default, ")");
-}, function (_ref20) {
-  var copyFirst = _ref20.copyFirst;
+}, _ref20 => {
+  let {
+    copyFirst
+  } = _ref20;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, function (_ref21) {
-  var isPlaying = _ref21.isPlaying;
+}, _ref21 => {
+  let {
+    isPlaying
+  } = _ref21;
   return isPlaying ? 'none' : 'block';
-}, function (_ref22) {
-  var isBuffering = _ref22.isBuffering;
+}, _ref22 => {
+  let {
+    isBuffering
+  } = _ref22;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon__hover.default, ")");
 }, (0, _size.media)('small'));
-var Image = exports.Image = _styledComponents.default.div.withConfig({
+const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Image",
   componentId: "sc-86zg20-4"
-})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], function (_ref23) {
-  var theme = _ref23.theme;
+})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref23 => {
+  let {
+    theme
+  } = _ref23;
   return theme.breakpoint('small');
-}, function (_ref24) {
-  var fullImage = _ref24.fullImage,
-    vhFull = _ref24.vhFull;
+}, _ref24 => {
+  let {
+    fullImage,
+    vhFull
+  } = _ref24;
   return fullImage || vhFull ? 'absolute' : null;
-}, function (_ref25) {
-  var doubleImage = _ref25.doubleImage;
+}, _ref25 => {
+  let {
+    doubleImage
+  } = _ref25;
   return doubleImage && 'height: 50%';
-}, function (_ref26) {
-  var isPlaying = _ref26.isPlaying;
+}, _ref26 => {
+  let {
+    isPlaying
+  } = _ref26;
   return isPlaying ? (0, _zIndex.default)('base') : (0, _zIndex.default)('low');
-}, function (_ref27) {
-  var hasVideo = _ref27.hasVideo;
+}, _ref27 => {
+  let {
+    hasVideo
+  } = _ref27;
   return hasVideo ? 'position: absolute; top: 0; left: 0;' : null;
 });
-var VideoWrapper = exports.VideoWrapper = _styledComponents.default.div.withConfig({
+const VideoWrapper = exports.VideoWrapper = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__VideoWrapper",
   componentId: "sc-86zg20-5"
-})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], function (_ref28) {
-  var isPlaying = _ref28.isPlaying;
+})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref28 => {
+  let {
+    isPlaying
+  } = _ref28;
   return isPlaying ? (0, _zIndex.default)('medium') : (0, _zIndex.default)('base');
 });

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
@@ -8,8 +8,8 @@ var _SingleMessage = _interopRequireDefault(require("./SingleMessage"));
 var _data = require("../../../styleguide/data/data");
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
-it('renders Single Message with Image correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with Image correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
     imageSet: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -29,8 +29,8 @@ it('renders Single Message with Image correctly', function () {
   }, "CTA"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Single Message with no Image correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with no Image correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
     copyFirst: false
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -40,8 +40,8 @@ it('renders Single Message with no Image correctly', function () {
   }, "\u201CThe creativity that goes into helping people have a better life is extraordinary.\u201D"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Single Message with full width correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with full width correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
     imageSet: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -62,8 +62,8 @@ it('renders Single Message with full width correctly', function () {
   }, "CTA"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Single Message with full width image and no text correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with full width image and no text correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
     imageSet: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -73,8 +73,8 @@ it('renders Single Message with full width image and no text correctly', functio
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Single Message with 100% vertical height image correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with 100% vertical height image correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
     imageLow: _data.defaultData.imageLow,
     imageSet: _data.defaultData.images,
@@ -88,8 +88,8 @@ it('renders Single Message with 100% vertical height image correctly', function
   }, "\u201CThe creativity that goes into helping people have a better life is extraordinary.\u201D"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders Single Message with double image correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
+it('renders Single Message with double image correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "yellow",
     imageLow: _data.defaultData.imageLow,
     imageSet: _data.defaultData.images,

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _reactModal = _interopRequireDefault(require("react-modal"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
@@ -14,35 +13,29 @@ var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 var _index = require("../../Atoms/Icons/index");
 var _SingleMessageDs = require("./SingleMessageDs.style");
 var _play = _interopRequireDefault(require("./assets/play.png"));
-var _excluded = ["backgroundColor", "imageLeft", "imageLow", "images", "image", "imageAltText", "height", "width", "subtitle", "children", "link", "linkLabel", "ctaBgColor", "target", "linkIcon", "youTubeId"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var SingleMessageDs = function SingleMessageDs(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    imageLeft = _ref.imageLeft,
-    imageLow = _ref.imageLow,
-    images = _ref.images,
-    image = _ref.image,
-    imageAltText = _ref.imageAltText,
-    height = _ref.height,
-    width = _ref.width,
-    subtitle = _ref.subtitle,
-    children = _ref.children,
-    link = _ref.link,
-    linkLabel = _ref.linkLabel,
-    ctaBgColor = _ref.ctaBgColor,
-    target = _ref.target,
-    linkIcon = _ref.linkIcon,
-    youTubeId = _ref.youTubeId,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var closeModal = function closeModal() {
-    return setIsOpen(false);
-  };
-  var Media = /*#__PURE__*/_react.default.createElement(_SingleMessageDs.Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+const SingleMessageDs = _ref => {
+  let {
+    backgroundColor,
+    imageLeft,
+    imageLow,
+    images,
+    image,
+    imageAltText,
+    height,
+    width,
+    subtitle,
+    children,
+    link,
+    linkLabel,
+    ctaBgColor,
+    target,
+    linkIcon,
+    youTubeId,
+    ...rest
+  } = _ref;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const closeModal = () => setIsOpen(false);
+  const Media = /*#__PURE__*/_react.default.createElement(_SingleMessageDs.Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: images,
@@ -51,7 +44,7 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
     width: width,
     height: height
   }));
-  var hasLink = function hasLink() {
+  const hasLink = () => {
     if (imageLow && link) {
       return /*#__PURE__*/_react.default.createElement(_SingleMessageDs.MediaLink, Object.assign({
         imageLeft: imageLeft,
@@ -71,7 +64,7 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
         target: target,
         "data-image-cta-copy": linkLabel
       }, rest, {
-        onClick: function onClick(e) {
+        onClick: e => {
           setIsOpen(true);
           e.preventDefault();
         }
@@ -85,9 +78,9 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
     }
     return null;
   };
-  var icon = linkIcon || (target === 'blank' ? /*#__PURE__*/_react.default.createElement(_index.External, null) : /*#__PURE__*/_react.default.createElement(_index.Internal, null));
-  var external = target === 'blank' ? 'noopener' : null;
-  var videoStyle = {
+  const icon = linkIcon || (target === 'blank' ? /*#__PURE__*/_react.default.createElement(_index.External, null) : /*#__PURE__*/_react.default.createElement(_index.Internal, null));
+  const external = target === 'blank' ? 'noopener' : null;
+  const videoStyle = {
     overlay: {
       position: 'fixed',
       top: 0,
@@ -143,9 +136,7 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
     isOpen: isOpen,
     onRequestClose: closeModal,
     contentLabel: "Example Modal",
-    parentSelector: function parentSelector() {
-      return document.querySelector('body');
-    },
+    parentSelector: () => document.querySelector('body'),
     style: videoStyle
   }, /*#__PURE__*/_react.default.createElement(_SingleMessageDs.CloseButton, {
     type: "button",