@bigbinary/neeto-site-blocks 1.8.27 → 1.9.0

package/dist/index.js

@@ -4891,20 +4891,20 @@ var blendColors = function blendColors(_ref2) {
   // Generate the final blended color string in hex format
   return "#".concat((r << 16 | g << 8 | b).toString(16).padStart(6, "0"));
 };
-var validateUrl = function validateUrl(url) {
-  return url ? validateYouTubeUrl(url) || validateLoomUrl(url) || validateVimeoUrl(url) : false;
+var validateUrl = function validateUrl(url, autoPlay) {
+  return url ? validateYouTubeUrl(url, autoPlay) || validateLoomUrl(url, autoPlay) || validateVimeoUrl(url, autoPlay) : false;
 };
-var validateYouTubeUrl = function validateYouTubeUrl(url) {
+var validateYouTubeUrl = function validateYouTubeUrl(url, autoPlay) {
   var match = url.match(YOUTUBE_URL_REGEXP);
-  return match && "https://www.youtube.com/embed/".concat(match[5]);
+  return match && "https://www.youtube.com/embed/".concat(match[5]).concat(autoPlay ? "?autoplay=1" : "");
 };
-var validateVimeoUrl = function validateVimeoUrl(url) {
+var validateVimeoUrl = function validateVimeoUrl(url, autoPlay) {
   var match = url.match(VIMEO_URL_REGEXP);
-  return match && "https://player.vimeo.com/video/".concat(match[4], "?h=").concat(match[5]);
+  return match && "https://player.vimeo.com/video/".concat(match[4], "?h=").concat(match[5]).concat(autoPlay ? "&autoplay=1" : "");
 };
-var validateLoomUrl = function validateLoomUrl(url) {
+var validateLoomUrl = function validateLoomUrl(url, autoPlay) {
   var match = url.match(LOOM_URL_REGEXP);
-  return match && "https://www.loom.com/embed/".concat(match[4], "?t=").concat(match[5] || "");
+  return match && "https://www.loom.com/embed/".concat(match[4], "?t=").concat(match[5] || "").concat(autoPlay ? "&autoplay=1" : "");
 };
 var applyResponsiveClasses = function applyResponsiveClasses(_ref3) {
   var fieldValue = _ref3.fieldValue,
@@ -14717,7 +14717,7 @@ var withConditionalRender = function withConditionalRender(Component, condition)
   return ConditionalRender;
 };
 
-var _excluded$A = ["id", "disableButtonAndLinks", "wrapperClassName", "index"];
+var _excluded$A = ["id", "disableButtonAndLinks", "wrapperClassName", "index", "image"];
 var StyledImage = styled.img.attrs(function () {
   return {
     className: "hover:mix-blend-multiply"
@@ -14748,6 +14748,7 @@ var StyledImageWithWrapper = function StyledImageWithWrapper(_ref2) {
     disableButtonAndLinks = _ref2.disableButtonAndLinks,
     wrapperClassName = _ref2.wrapperClassName,
     index = _ref2.index,
+    image = _ref2.image,
     props = _objectWithoutProperties(_ref2, _excluded$A);
   var _useElementClick = useElementClick({
       id: id,
@@ -14759,7 +14760,13 @@ var StyledImageWithWrapper = function StyledImageWithWrapper(_ref2) {
       "neeto-site-highlight__element": disableButtonAndLinks
     }, wrapperClassName, wrapperClassName)),
     onClick: disableButtonAndLinks && handleImageClick
-  }, /*#__PURE__*/React__default.createElement(StyledImage, props));
+  }, /*#__PURE__*/React__default.createElement(StyledImage, _extends$2({
+    as: image !== null && image !== void 0 ? image : "img",
+    height: 0,
+    objectFit: "contain",
+    sizes: "100vw",
+    width: 0
+  }, props)));
 };
 var StyledImage$1 = withConditionalRender(StyledImageWithWrapper, prop("src"));
 
@@ -16219,7 +16226,7 @@ var useBreakpoints = function useBreakpoints(breakpointOverrides) {
 };
 var useBreakpoints$1 = useBreakpoints;
 
-var _excluded$v = ["isEmbedded", "src", "design", "videoUrl"];
+var _excluded$v = ["isEmbedded", "src", "design", "videoUrl", "autoPlay"];
 function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Media = function Media(_ref) {
@@ -16227,17 +16234,21 @@ var Media = function Media(_ref) {
     src = _ref.src,
     design = _ref.design,
     videoUrl = _ref.videoUrl,
+    autoPlay = _ref.autoPlay,
     otherProps = _objectWithoutProperties(_ref, _excluded$v);
   if (isEmbedded) {
     var _design$width;
-    return videoUrl && /*#__PURE__*/React__default.createElement(StyledWrapper, {
+    return videoUrl && /*#__PURE__*/React__default.createElement("div", {
+      className: "relative h-0 w-full overflow-hidden pb-[56.25%]"
+    }, /*#__PURE__*/React__default.createElement(StyledWrapper, {
       allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
       as: "iframe",
+      className: "absolute left-0 top-0 h-full w-full border-0",
       design: dissoc("width", design),
       height: "300px",
-      src: validateUrl(videoUrl),
+      src: validateUrl(videoUrl, autoPlay),
       width: "".concat((_design$width = design === null || design === void 0 ? void 0 : design.width) !== null && _design$width !== void 0 ? _design$width : "100", "%")
-    });
+    }));
   }
   return /*#__PURE__*/React__default.createElement(StyledImage$1, _objectSpread$i({
     design: design,
@@ -21308,7 +21319,7 @@ const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
 });
 SwiperSlide.displayName = 'SwiperSlide';
 
-var _excluded$r = ["configurations", "className", "id", "disableButtonAndLinks"];
+var _excluded$r = ["configurations", "className", "id", "disableButtonAndLinks", "image"];
 function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CardsInGridView = function CardsInGridView(_ref) {
@@ -21317,6 +21328,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     disableButtonAndLinks = _ref.disableButtonAndLinks,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$r);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -21359,6 +21371,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
       to: href
     }, otherProps), /*#__PURE__*/React__default.createElement(StyledImage$1, {
       disableButtonAndLinks: disableButtonAndLinks,
+      image: image,
       index: index,
       design: mergeRight(design.cardImage, style),
       id: "cards-in-grid-view-".concat(index, "-image"),
@@ -21585,7 +21598,7 @@ var CardsWithCustomizableGrid = function CardsWithCustomizableGrid(_ref) {
   }, button, otherProps)))));
 };
 
-var _excluded$p = ["configurations", "className", "id", "disableButtonAndLinks"];
+var _excluded$p = ["configurations", "className", "id", "disableButtonAndLinks", "image"];
 function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CardsWithImage = function CardsWithImage(_ref) {
@@ -21594,6 +21607,7 @@ var CardsWithImage = function CardsWithImage(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     disableButtonAndLinks = _ref.disableButtonAndLinks,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$p);
   var properties = configurations.properties,
     design = configurations.design;
@@ -21666,6 +21680,7 @@ var CardsWithImage = function CardsWithImage(_ref) {
       className: "absolute bottom-0 right-0 flex items-end justify-end"
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       disableButtonAndLinks: disableButtonAndLinks,
+      image: image,
       index: index,
       className: "!justify-self-end",
       design: design.cardImage,
@@ -39347,7 +39362,7 @@ var CtaWithEmailAction = function CtaWithEmailAction(_ref) {
   }, otherProps), promotionText));
 };
 
-var _excluded$m = ["configurations", "className", "id"];
+var _excluded$m = ["configurations", "className", "id", "image"];
 function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CtaWithLogo = function CtaWithLogo(_ref) {
@@ -39355,6 +39370,7 @@ var CtaWithLogo = function CtaWithLogo(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$m);
   var properties = configurations.properties,
     design = configurations.design;
@@ -39376,6 +39392,7 @@ var CtaWithLogo = function CtaWithLogo(_ref) {
     design: design.body,
     nestedClassName: baseClasses
   }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     alt: "logo",
     className: "col-span-10 col-start-2 mx-auto sm:col-span-2 sm:col-start-1",
     design: design.logo,
@@ -39416,15 +39433,17 @@ var Embed = function Embed(_ref) {
     enableAnimation = properties.enableAnimation;
   return /*#__PURE__*/React__default.createElement(BlockWrapper, {
     className: className,
-    design: design.body,
     enableAnimation: enableAnimation,
     id: id,
-    nestedClassName: "h-full"
-  }, /*#__PURE__*/React__default.createElement(Interweave, {
+    design: design.body,
+    nestedClassName: "h-full flex items-center justify-center"
+  }, isNotEmpty(content) ? /*#__PURE__*/React__default.createElement(Interweave, {
+    content: content,
     allowList: ["iframe"],
-    className: "ns-embed-block flex h-full w-full justify-center",
-    content: content
-  }));
+    className: "ns-embed-block relative flex h-0 w-full pb-[56.25%] lg:static lg:pb-0"
+  }) : /*#__PURE__*/React__default.createElement(Typography$1, {
+    className: "text-center font-semibold"
+  }, "No content to display"));
 };
 
 var _excluded$l = ["configurations", "className", "id"],
@@ -39609,7 +39628,7 @@ var FeatureWithBulletList = function FeatureWithBulletList(_ref) {
   }, otherProps), description)), /*#__PURE__*/React__default.createElement(BulletList, null));
 };
 
-var _excluded$j = ["configurations", "className", "id"];
+var _excluded$j = ["configurations", "className", "id", "image"];
 function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FeatureWithDetails = function FeatureWithDetails(_ref) {
@@ -39617,6 +39636,7 @@ var FeatureWithDetails = function FeatureWithDetails(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$j);
   var properties = configurations.properties,
     design = configurations.design;
@@ -39631,6 +39651,7 @@ var FeatureWithDetails = function FeatureWithDetails(_ref) {
     mediaPosition = _properties$media.position,
     isEmbedded = _properties$media.isEmbedded,
     videoUrl = _properties$media.videoUrl,
+    autoPlay = _properties$media.autoPlay,
     src = properties.backgroundImage.src;
   var mediaURL = isEmbedded ? videoUrl : imageUrl;
   var baseClasses = "grid grid-cols-12 items-center sm:gap-x-2 lg:gap-x-4 grid-flow-row-dense";
@@ -39694,6 +39715,8 @@ var FeatureWithDetails = function FeatureWithDetails(_ref) {
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: mediaBaseClasses
   }, /*#__PURE__*/React__default.createElement(Media, {
+    autoPlay: autoPlay,
+    image: image,
     isEmbedded: isEmbedded,
     videoUrl: videoUrl,
     design: design.media,
@@ -39704,12 +39727,13 @@ var FeatureWithDetails = function FeatureWithDetails(_ref) {
   })));
 };
 
-var _excluded$i = ["configurations", "className", "id"];
+var _excluded$i = ["configurations", "className", "id", "image"];
 var FeatureWithGrid = function FeatureWithGrid(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$i);
   var properties = configurations.properties,
     design = configurations.design;
@@ -39723,6 +39747,7 @@ var FeatureWithGrid = function FeatureWithGrid(_ref) {
     imageURL = _properties$media.src,
     isEmbedded = _properties$media.isEmbedded,
     videoUrl = _properties$media.videoUrl,
+    autoPlay = _properties$media.autoPlay,
     src = properties.backgroundImage.src;
   var baseClasses = "grid grid-cols-12 gap-4";
   var gridClasses = function gridClasses(index) {
@@ -39752,6 +39777,8 @@ var FeatureWithGrid = function FeatureWithGrid(_ref) {
     id: "feature-with-grid-description",
     style: design.description
   }, otherProps), description), /*#__PURE__*/React__default.createElement(Media, {
+    autoPlay: autoPlay,
+    image: image,
     isEmbedded: isEmbedded,
     videoUrl: videoUrl,
     className: "m-auto",
@@ -39771,6 +39798,7 @@ var FeatureWithGrid = function FeatureWithGrid(_ref) {
       className: gridClasses(index),
       key: getUniqueKey(featureTitle, featureDescription, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       index: index,
       alt: featureImageAlt,
       design: design.featureImage,
@@ -39794,12 +39822,13 @@ var FeatureWithGrid = function FeatureWithGrid(_ref) {
   }));
 };
 
-var _excluded$h = ["configurations", "className", "id"];
+var _excluded$h = ["configurations", "className", "id", "image"];
 var FeatureWithImage = function FeatureWithImage(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$h);
   var properties = configurations.properties,
     design = configurations.design;
@@ -39812,6 +39841,7 @@ var FeatureWithImage = function FeatureWithImage(_ref) {
     mediaPosition = _properties$media.position,
     isEmbedded = _properties$media.isEmbedded,
     videoUrl = _properties$media.videoUrl,
+    autoPlay = _properties$media.autoPlay,
     src = properties.backgroundImage.src;
   var mediaURL = isEmbedded ? videoUrl : imageUrl;
   var baseClasses = "grid grid-cols-12 items-center grid-flow-row-dense";
@@ -39845,6 +39875,8 @@ var FeatureWithImage = function FeatureWithImage(_ref) {
   }, otherProps), description)), /*#__PURE__*/React__default.createElement("div", {
     className: mediaBaseClasses
   }, /*#__PURE__*/React__default.createElement(Media, {
+    autoPlay: autoPlay,
+    image: image,
     isEmbedded: isEmbedded,
     videoUrl: videoUrl,
     design: design.media,
@@ -39908,12 +39940,13 @@ var FeatureWithJumboText = function FeatureWithJumboText(_ref) {
   }, otherProps), description)));
 };
 
-var _excluded$f = ["configurations", "className", "id"];
+var _excluded$f = ["configurations", "className", "id", "image"];
 var FeatureWithList = function FeatureWithList(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$f);
   var properties = configurations.properties,
     design = configurations.design;
@@ -39928,6 +39961,7 @@ var FeatureWithList = function FeatureWithList(_ref) {
     mediaPosition = _properties$media.position,
     isEmbedded = _properties$media.isEmbedded,
     videoUrl = _properties$media.videoUrl,
+    autoPlay = _properties$media.autoPlay,
     src = properties.backgroundImage.src;
   var mediaURL = isEmbedded ? videoUrl : imageURL;
   var baseClasses = "grid grid-cols-12 lg:gap-x-4 sm:gap-x-2 items-center grid-flow-row-dense";
@@ -39986,6 +40020,8 @@ var FeatureWithList = function FeatureWithList(_ref) {
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: mediaBaseClasses
   }, /*#__PURE__*/React__default.createElement(Media, {
+    autoPlay: autoPlay,
+    image: image,
     isEmbedded: isEmbedded,
     videoUrl: videoUrl,
     design: design.media,
@@ -39996,12 +40032,13 @@ var FeatureWithList = function FeatureWithList(_ref) {
   })));
 };
 
-var _excluded$e = ["configurations", "className", "id"];
+var _excluded$e = ["configurations", "className", "id", "image"];
 var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$e);
   var _useState = useState(configurations.properties.features[0].id),
     _useState2 = _slicedToArray(_useState, 2),
@@ -40111,6 +40148,8 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: imageBaseClasses
   }, /*#__PURE__*/React__default.createElement(Media, {
+    image: image,
+    autoPlay: features[selectedTabId - 1].media.autoPlay,
     design: design.media,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
     id: "feature-with-progress-bar-".concat(selectedTabId - 1, "-media"),
@@ -40121,7 +40160,7 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
   })));
 };
 
-var _excluded$d = ["configurations", "className", "id"];
+var _excluded$d = ["configurations", "className", "id", "image"];
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterClassic = function FooterClassic(_ref) {
@@ -40129,6 +40168,7 @@ var FooterClassic = function FooterClassic(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$d);
   var properties = configurations.properties,
     design = configurations.design;
@@ -40161,6 +40201,7 @@ var FooterClassic = function FooterClassic(_ref) {
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "col-span-12 sm:col-span-12 sm:mx-20 sm:flex sm:justify-between sm:gap-y-0"
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       design: design.logo,
       disableButtonAndLinks: otherProps.disableButtonAndLinks,
       id: "footer-classic-logo",
@@ -40212,6 +40253,7 @@ var FooterClassic = function FooterClassic(_ref) {
     design: design.body,
     nestedClassName: baseClasses
   }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
     id: "footer-classic-logo",
@@ -40259,7 +40301,7 @@ var FooterClassic = function FooterClassic(_ref) {
   }, otherProps), copyrightText));
 };
 
-var _excluded$c = ["configurations", "className", "id"];
+var _excluded$c = ["configurations", "className", "id", "image"];
 function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterWithIcons = function FooterWithIcons(_ref) {
@@ -40267,6 +40309,7 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$c);
   var properties = configurations.properties,
     design = configurations.design;
@@ -40290,6 +40333,7 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-12 grid grid-cols-8 gap-y-4 sm:col-span-7 sm:w-full sm:gap-x-4 lg:col-span-6"
   }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
     id: "footer-with-icons-logo",
@@ -40334,7 +40378,7 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
   }, otherProps), copyrightText));
 };
 
-var _excluded$b = ["configurations", "className", "id"];
+var _excluded$b = ["configurations", "className", "id", "image"];
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterWithLinks = function FooterWithLinks(_ref) {
@@ -40342,6 +40386,7 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$b);
   var properties = configurations.properties,
     design = configurations.design;
@@ -40369,6 +40414,7 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-x-2"
   }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
     id: "footer-with-links-logo",
@@ -42302,7 +42348,8 @@ var GalleryClassic = function GalleryClassic(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
-    disableButtonAndLinks = _ref.disableButtonAndLinks;
+    disableButtonAndLinks = _ref.disableButtonAndLinks,
+    image = _ref.image;
   var swiperRef = useRef(null);
   var properties = configurations.properties,
     design = configurations.design;
@@ -42378,6 +42425,7 @@ var GalleryClassic = function GalleryClassic(_ref) {
       key: getUniqueKey(src, title, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       disableButtonAndLinks: disableButtonAndLinks,
+      image: image,
       index: index,
       src: src,
       alt: caption,
@@ -42398,12 +42446,13 @@ var GalleryClassic = function GalleryClassic(_ref) {
   }));
 };
 
-var _excluded$a = ["configurations", "className", "id"];
+var _excluded$a = ["configurations", "className", "id", "image"];
 var GalleryWithAutoplay = function GalleryWithAutoplay(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$a);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42467,6 +42516,7 @@ var GalleryWithAutoplay = function GalleryWithAutoplay(_ref) {
       className: "swiper__wrapper",
       key: getUniqueKey(src, caption, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       index: index,
       src: src,
       alt: caption,
@@ -42503,6 +42553,7 @@ var GalleryWithAutoplay = function GalleryWithAutoplay(_ref) {
       key: getUniqueKey(src, title, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       alt: alt,
+      image: image,
       index: index,
       src: src,
       title: title,
@@ -42531,7 +42582,7 @@ var useElementVisible = function useElementVisible(ref) {
   return isIntersecting;
 };
 
-var _excluded$9 = ["configurations", "className", "currentPath", "id"];
+var _excluded$9 = ["configurations", "className", "currentPath", "id", "image"];
 function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithButtons = function HeaderWithButtons(_ref) {
@@ -42540,6 +42591,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     currentPath = _ref.currentPath,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$9);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42571,6 +42623,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
       "col-span-3 sm:col-span-4 sm:col-start-2": isNotEmpty(buttons)
     })
   }, otherProps), /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     className: "max-h-8 sm:max-h-10 lg:max-h-14",
     design: design.logo,
     src: properties.logo.src
@@ -42633,7 +42686,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
   }))));
 };
 
-var _excluded$8 = ["configurations", "className", "id"];
+var _excluded$8 = ["configurations", "className", "id", "image"];
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
@@ -42641,6 +42694,7 @@ var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$8);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42686,6 +42740,7 @@ var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
     className: "flex w-full gap-x-2",
     to: properties.logo.to
   }, otherProps), /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     className: "max-h-8 sm:max-h-10 lg:max-h-14",
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
@@ -42744,7 +42799,7 @@ var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
   })))));
 };
 
-var _excluded$7 = ["configurations", "className", "currentPath", "id"];
+var _excluded$7 = ["configurations", "className", "currentPath", "id", "image"];
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithIcons = function HeaderWithIcons(_ref) {
@@ -42753,6 +42808,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     currentPath = _ref.currentPath,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$7);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42792,6 +42848,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
     className: "col-span-6 col-start-4 m-auto flex max-h-8 justify-center sm:col-span-4 sm:col-start-5 sm:max-h-10 lg:col-span-3 lg:col-start-6 lg:max-h-14",
     to: properties.logo.to
   }, otherProps), /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
     id: "header-with-icons-logo",
@@ -42863,7 +42920,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
   })))));
 };
 
-var _excluded$6 = ["configurations", "className", "id", "currentPath"];
+var _excluded$6 = ["configurations", "className", "id", "currentPath", "image"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
@@ -42872,6 +42929,7 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     currentPath = _ref.currentPath,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$6);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42905,6 +42963,7 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
     className: "flex w-full gap-x-2",
     to: properties.logo.to
   }, otherProps), /*#__PURE__*/React__default.createElement(StyledImage$1, {
+    image: image,
     className: "max-h-8 sm:max-h-10 lg:max-h-14",
     design: design.logo,
     disableButtonAndLinks: otherProps.disableButtonAndLinks,
@@ -42978,7 +43037,7 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
   }))));
 };
 
-var _excluded$5 = ["configurations", "className", "id"];
+var _excluded$5 = ["configurations", "className", "id", "image"];
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeroWithCallToAction = function HeroWithCallToAction(_ref) {
@@ -42986,6 +43045,7 @@ var HeroWithCallToAction = function HeroWithCallToAction(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$5);
   var properties = configurations.properties,
     design = configurations.design;
@@ -42999,6 +43059,7 @@ var HeroWithCallToAction = function HeroWithCallToAction(_ref) {
     mediaPosition = _properties$media.position,
     isEmbedded = _properties$media.isEmbedded,
     videoUrl = _properties$media.videoUrl,
+    autoPlay = _properties$media.autoPlay,
     src = properties.backgroundImage.src;
   var mediaURL = isEmbedded ? videoUrl : imageURL;
   var baseClasses = "grid sm:gap-x-6 gap-y-6 grid-cols-12 items-center grid-flow-row-dense";
@@ -43059,6 +43120,8 @@ var HeroWithCallToAction = function HeroWithCallToAction(_ref) {
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: mediaBaseClasses
   }, /*#__PURE__*/React__default.createElement(Media, {
+    autoPlay: autoPlay,
+    image: image,
     isEmbedded: isEmbedded,
     videoUrl: videoUrl,
     design: design.media,
@@ -43068,7 +43131,7 @@ var HeroWithCallToAction = function HeroWithCallToAction(_ref) {
   })));
 };
 
-var _excluded$4 = ["configurations", "className", "id", "disableButtonAndLinks"];
+var _excluded$4 = ["configurations", "className", "id", "disableButtonAndLinks", "image"];
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeroWithGallery = function HeroWithGallery(_ref) {
@@ -43077,6 +43140,7 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     disableButtonAndLinks = _ref.disableButtonAndLinks,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43185,7 +43249,9 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
       }))
     }, /*#__PURE__*/React__default.createElement(Media, {
       disableButtonAndLinks: disableButtonAndLinks,
+      image: image,
       index: index,
+      autoPlay: media.autoPlay,
       design: design.media,
       id: "hero-with-gallery-slide-".concat(index, "-media"),
       isEmbedded: media.isEmbedded,
@@ -43252,7 +43318,8 @@ var LogoClouds = function LogoClouds(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
-    disableButtonAndLinks = _ref.disableButtonAndLinks;
+    disableButtonAndLinks = _ref.disableButtonAndLinks,
+    image = _ref.image;
   var properties = configurations.properties,
     design = configurations.design;
   var _properties$logos = properties.logos,
@@ -43301,6 +43368,7 @@ var LogoClouds = function LogoClouds(_ref) {
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       alt: alt,
       disableButtonAndLinks: disableButtonAndLinks,
+      image: image,
       index: index,
       src: src,
       title: title,
@@ -43516,7 +43584,8 @@ var Slides = function Slides(_ref) {
     id = _ref.id,
     disableButtonAndLinks = _ref.disableButtonAndLinks,
     pageUrl = _ref.pageUrl,
-    hostUrl = _ref.hostUrl;
+    hostUrl = _ref.hostUrl,
+    image = _ref.image;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     activeIndex = _useState2[0],
@@ -43557,6 +43626,7 @@ var Slides = function Slides(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "bottom-0 col-span-12 flex w-full justify-center sm:absolute sm:col-span-10 sm:col-start-2"
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       design: design.image,
       src: imageUrl
     }));
@@ -43633,7 +43703,7 @@ var Slides = function Slides(_ref) {
   }));
 };
 
-var _excluded$1 = ["configurations", "className", "id"];
+var _excluded$1 = ["configurations", "className", "id", "image"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TestimonialWithSlider = function TestimonialWithSlider(_ref) {
@@ -43641,6 +43711,7 @@ var TestimonialWithSlider = function TestimonialWithSlider(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43712,6 +43783,7 @@ var TestimonialWithSlider = function TestimonialWithSlider(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: imageClasses(imagePosition)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       index: index,
       src: src,
       className: "ns-testimonial-image-aspect-ratio object-cover",
@@ -43764,12 +43836,13 @@ var TestimonialWithSlider = function TestimonialWithSlider(_ref) {
   }, button, otherProps))));
 };
 
-var _excluded = ["configurations", "className", "id"];
+var _excluded = ["configurations", "className", "id", "image"];
 var TestimonialWithVerticalView = function TestimonialWithVerticalView(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var properties = configurations.properties,
     design = configurations.design;
@@ -43827,6 +43900,7 @@ var TestimonialWithVerticalView = function TestimonialWithVerticalView(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: imageClasses
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+      image: image,
       index: index,
       src: src,
       className: "ns-testimonial-image-aspect-ratio",