@wix/editor-react-components 1.2449.0 → 1.2451.0

package/dist/site/components/chunks/index5.js

@@ -1,2372 +1,1465 @@
-import { g as getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import React__default from "react";
-var lib$3 = {};
-var htmlToDom = {};
-var domparser = {};
-var utilities$2 = {};
-var lib$2 = {};
-var lib$1 = {};
-var hasRequiredLib$3;
-function requireLib$3() {
-  if (hasRequiredLib$3) return lib$1;
-  hasRequiredLib$3 = 1;
-  (function(exports$1) {
-    Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.Doctype = exports$1.CDATA = exports$1.Tag = exports$1.Style = exports$1.Script = exports$1.Comment = exports$1.Directive = exports$1.Text = exports$1.Root = exports$1.isTag = exports$1.ElementType = void 0;
-    var ElementType;
-    (function(ElementType2) {
-      ElementType2["Root"] = "root";
-      ElementType2["Text"] = "text";
-      ElementType2["Directive"] = "directive";
-      ElementType2["Comment"] = "comment";
-      ElementType2["Script"] = "script";
-      ElementType2["Style"] = "style";
-      ElementType2["Tag"] = "tag";
-      ElementType2["CDATA"] = "cdata";
-      ElementType2["Doctype"] = "doctype";
-    })(ElementType = exports$1.ElementType || (exports$1.ElementType = {}));
-    function isTag(elem) {
-      return elem.type === ElementType.Tag || elem.type === ElementType.Script || elem.type === ElementType.Style;
-    }
-    exports$1.isTag = isTag;
-    exports$1.Root = ElementType.Root;
-    exports$1.Text = ElementType.Text;
-    exports$1.Directive = ElementType.Directive;
-    exports$1.Comment = ElementType.Comment;
-    exports$1.Script = ElementType.Script;
-    exports$1.Style = ElementType.Style;
-    exports$1.Tag = ElementType.Tag;
-    exports$1.CDATA = ElementType.CDATA;
-    exports$1.Doctype = ElementType.Doctype;
-  })(lib$1);
-  return lib$1;
-}
-var node = {};
-var hasRequiredNode;
-function requireNode() {
-  if (hasRequiredNode) return node;
-  hasRequiredNode = 1;
-  var __extends = node && node.__extends || /* @__PURE__ */ (function() {
-    var extendStatics = function(d, b) {
-      extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
-        d2.__proto__ = b2;
-      } || function(d2, b2) {
-        for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
-      };
-      return extendStatics(d, b);
-    };
-    return function(d, b) {
-      if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-      extendStatics(d, b);
-      function __() {
-        this.constructor = d;
-      }
-      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-  })();
-  var __assign = node && node.__assign || function() {
-    __assign = Object.assign || function(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  Object.defineProperty(node, "__esModule", { value: true });
-  node.cloneNode = node.hasChildren = node.isDocument = node.isDirective = node.isComment = node.isText = node.isCDATA = node.isTag = node.Element = node.Document = node.CDATA = node.NodeWithChildren = node.ProcessingInstruction = node.Comment = node.Text = node.DataNode = node.Node = void 0;
-  var domelementtype_1 = /* @__PURE__ */ requireLib$3();
-  var Node = (
-    /** @class */
-    (function() {
-      function Node2() {
-        this.parent = null;
-        this.prev = null;
-        this.next = null;
-        this.startIndex = null;
-        this.endIndex = null;
-      }
-      Object.defineProperty(Node2.prototype, "parentNode", {
-        // Read-write aliases for properties
-        /**
-         * Same as {@link parent}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.parent;
-        },
-        set: function(parent) {
-          this.parent = parent;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(Node2.prototype, "previousSibling", {
-        /**
-         * Same as {@link prev}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.prev;
-        },
-        set: function(prev) {
-          this.prev = prev;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(Node2.prototype, "nextSibling", {
-        /**
-         * Same as {@link next}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.next;
-        },
-        set: function(next) {
-          this.next = next;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Node2.prototype.cloneNode = function(recursive) {
-        if (recursive === void 0) {
-          recursive = false;
-        }
-        return cloneNode(this, recursive);
-      };
-      return Node2;
-    })()
-  );
-  node.Node = Node;
-  var DataNode = (
-    /** @class */
-    (function(_super) {
-      __extends(DataNode2, _super);
-      function DataNode2(data) {
-        var _this = _super.call(this) || this;
-        _this.data = data;
-        return _this;
-      }
-      Object.defineProperty(DataNode2.prototype, "nodeValue", {
-        /**
-         * Same as {@link data}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.data;
-        },
-        set: function(data) {
-          this.data = data;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return DataNode2;
-    })(Node)
-  );
-  node.DataNode = DataNode;
-  var Text = (
-    /** @class */
-    (function(_super) {
-      __extends(Text2, _super);
-      function Text2() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = domelementtype_1.ElementType.Text;
-        return _this;
-      }
-      Object.defineProperty(Text2.prototype, "nodeType", {
-        get: function() {
-          return 3;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return Text2;
-    })(DataNode)
-  );
-  node.Text = Text;
-  var Comment = (
-    /** @class */
-    (function(_super) {
-      __extends(Comment2, _super);
-      function Comment2() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = domelementtype_1.ElementType.Comment;
-        return _this;
-      }
-      Object.defineProperty(Comment2.prototype, "nodeType", {
-        get: function() {
-          return 8;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return Comment2;
-    })(DataNode)
-  );
-  node.Comment = Comment;
-  var ProcessingInstruction = (
-    /** @class */
-    (function(_super) {
-      __extends(ProcessingInstruction2, _super);
-      function ProcessingInstruction2(name, data) {
-        var _this = _super.call(this, data) || this;
-        _this.name = name;
-        _this.type = domelementtype_1.ElementType.Directive;
-        return _this;
-      }
-      Object.defineProperty(ProcessingInstruction2.prototype, "nodeType", {
-        get: function() {
-          return 1;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return ProcessingInstruction2;
-    })(DataNode)
-  );
-  node.ProcessingInstruction = ProcessingInstruction;
-  var NodeWithChildren = (
-    /** @class */
-    (function(_super) {
-      __extends(NodeWithChildren2, _super);
-      function NodeWithChildren2(children) {
-        var _this = _super.call(this) || this;
-        _this.children = children;
-        return _this;
-      }
-      Object.defineProperty(NodeWithChildren2.prototype, "firstChild", {
-        // Aliases
-        /** First child of the node. */
-        get: function() {
-          var _a;
-          return (_a = this.children[0]) !== null && _a !== void 0 ? _a : null;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(NodeWithChildren2.prototype, "lastChild", {
-        /** Last child of the node. */
-        get: function() {
-          return this.children.length > 0 ? this.children[this.children.length - 1] : null;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(NodeWithChildren2.prototype, "childNodes", {
-        /**
-         * Same as {@link children}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.children;
-        },
-        set: function(children) {
-          this.children = children;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return NodeWithChildren2;
-    })(Node)
-  );
-  node.NodeWithChildren = NodeWithChildren;
-  var CDATA = (
-    /** @class */
-    (function(_super) {
-      __extends(CDATA2, _super);
-      function CDATA2() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = domelementtype_1.ElementType.CDATA;
-        return _this;
-      }
-      Object.defineProperty(CDATA2.prototype, "nodeType", {
-        get: function() {
-          return 4;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return CDATA2;
-    })(NodeWithChildren)
-  );
-  node.CDATA = CDATA;
-  var Document = (
-    /** @class */
-    (function(_super) {
-      __extends(Document2, _super);
-      function Document2() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = domelementtype_1.ElementType.Root;
-        return _this;
-      }
-      Object.defineProperty(Document2.prototype, "nodeType", {
-        get: function() {
-          return 9;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return Document2;
-    })(NodeWithChildren)
-  );
-  node.Document = Document;
-  var Element = (
-    /** @class */
-    (function(_super) {
-      __extends(Element2, _super);
-      function Element2(name, attribs, children, type) {
-        if (children === void 0) {
-          children = [];
-        }
-        if (type === void 0) {
-          type = name === "script" ? domelementtype_1.ElementType.Script : name === "style" ? domelementtype_1.ElementType.Style : domelementtype_1.ElementType.Tag;
-        }
-        var _this = _super.call(this, children) || this;
-        _this.name = name;
-        _this.attribs = attribs;
-        _this.type = type;
-        return _this;
-      }
-      Object.defineProperty(Element2.prototype, "nodeType", {
-        get: function() {
-          return 1;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(Element2.prototype, "tagName", {
-        // DOM Level 1 aliases
-        /**
-         * Same as {@link name}.
-         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-         */
-        get: function() {
-          return this.name;
-        },
-        set: function(name) {
-          this.name = name;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(Element2.prototype, "attributes", {
-        get: function() {
-          var _this = this;
-          return Object.keys(this.attribs).map(function(name) {
-            var _a, _b;
-            return {
-              name,
-              value: _this.attribs[name],
-              namespace: (_a = _this["x-attribsNamespace"]) === null || _a === void 0 ? void 0 : _a[name],
-              prefix: (_b = _this["x-attribsPrefix"]) === null || _b === void 0 ? void 0 : _b[name]
-            };
-          });
-        },
-        enumerable: false,
-        configurable: true
-      });
-      return Element2;
-    })(NodeWithChildren)
-  );
-  node.Element = Element;
-  function isTag(node2) {
-    return (0, domelementtype_1.isTag)(node2);
-  }
-  node.isTag = isTag;
-  function isCDATA(node2) {
-    return node2.type === domelementtype_1.ElementType.CDATA;
-  }
-  node.isCDATA = isCDATA;
-  function isText(node2) {
-    return node2.type === domelementtype_1.ElementType.Text;
-  }
-  node.isText = isText;
-  function isComment(node2) {
-    return node2.type === domelementtype_1.ElementType.Comment;
-  }
-  node.isComment = isComment;
-  function isDirective(node2) {
-    return node2.type === domelementtype_1.ElementType.Directive;
-  }
-  node.isDirective = isDirective;
-  function isDocument(node2) {
-    return node2.type === domelementtype_1.ElementType.Root;
+const API_VERSION = "v1";
+const MAX_DEVICE_PIXEL_RATIO = 2;
+const DSKTP_MAX_BG_SITE_LEGACY_WIDTH = 1920;
+const DSKTP_MAX_BG_SITE_LEGACY_HEIGHT = 1920;
+const MOBILE_MAX_BG_SITE_LEGACY_WIDTH = 1e3;
+const MOBILE_MAX_BG_SITE_LEGACY_HEIGHT = 1e3;
+const fittingTypes = {
+  SCALE_TO_FILL: "fill",
+  SCALE_TO_FIT: "fit",
+  STRETCH: "stretch",
+  ORIGINAL_SIZE: "original_size",
+  TILE: "tile",
+  TILE_HORIZONTAL: "tile_horizontal",
+  TILE_VERTICAL: "tile_vertical",
+  FIT_AND_TILE: "fit_and_tile",
+  LEGACY_STRIP_TILE: "legacy_strip_tile",
+  LEGACY_STRIP_TILE_HORIZONTAL: "legacy_strip_tile_horizontal",
+  LEGACY_STRIP_TILE_VERTICAL: "legacy_strip_tile_vertical",
+  LEGACY_STRIP_SCALE_TO_FILL: "legacy_strip_fill",
+  LEGACY_STRIP_SCALE_TO_FIT: "legacy_strip_fit",
+  LEGACY_STRIP_FIT_AND_TILE: "legacy_strip_fit_and_tile",
+  LEGACY_STRIP_ORIGINAL_SIZE: "legacy_strip_original_size",
+  LEGACY_ORIGINAL_SIZE: "actual_size",
+  LEGACY_FIT_WIDTH: "fitWidth",
+  LEGACY_FIT_HEIGHT: "fitHeight",
+  LEGACY_FULL: "full",
+  LEGACY_BG_FIT_AND_TILE: "legacy_tile",
+  LEGACY_BG_FIT_AND_TILE_HORIZONTAL: "legacy_tile_horizontal",
+  LEGACY_BG_FIT_AND_TILE_VERTICAL: "legacy_tile_vertical",
+  LEGACY_BG_NORMAL: "legacy_normal"
+};
+const transformTypes = {
+  FIT: "fit",
+  FILL: "fill",
+  FILL_FOCAL: "fill_focal",
+  CROP: "crop",
+  LEGACY_CROP: "legacy_crop",
+  LEGACY_FILL: "legacy_fill"
+};
+const alignTypes = {
+  CENTER: "center",
+  TOP: "top",
+  TOP_LEFT: "top_left",
+  TOP_RIGHT: "top_right",
+  BOTTOM: "bottom",
+  BOTTOM_LEFT: "bottom_left",
+  BOTTOM_RIGHT: "bottom_right",
+  LEFT: "left",
+  RIGHT: "right"
+};
+const ALIGN_TYPE_TO_FOCAL_POINT = {
+  [alignTypes.CENTER]: { x: 0.5, y: 0.5 },
+  [alignTypes.TOP_LEFT]: { x: 0, y: 0 },
+  [alignTypes.TOP_RIGHT]: { x: 1, y: 0 },
+  [alignTypes.TOP]: { x: 0.5, y: 0 },
+  [alignTypes.BOTTOM_LEFT]: { x: 0, y: 1 },
+  [alignTypes.BOTTOM_RIGHT]: { x: 1, y: 1 },
+  [alignTypes.BOTTOM]: { x: 0.5, y: 1 },
+  [alignTypes.RIGHT]: { x: 1, y: 0.5 },
+  [alignTypes.LEFT]: { x: 0, y: 0.5 }
+};
+const alignTypesMap = {
+  center: "c",
+  top: "t",
+  top_left: "tl",
+  top_right: "tr",
+  bottom: "b",
+  bottom_left: "bl",
+  bottom_right: "br",
+  left: "l",
+  right: "r"
+};
+const htmlTag = {
+  BG: "bg",
+  SVG: "svg"
+};
+const upscaleMethods = {
+  AUTO: "auto",
+  CLASSIC: "classic",
+  SUPER: "super"
+};
+const upscaleMethodsValues = {
+  classic: 1,
+  super: 2
+};
+const defaultUSM = {
+  radius: "0.66",
+  amount: "1.00",
+  threshold: "0.01"
+};
+const emptyData = {
+  uri: "",
+  css: {
+    img: {},
+    container: {}
+  },
+  attr: {
+    img: {},
+    container: {}
+  },
+  transformed: false
+};
+const MAX_TRANSFORMED_IMAGE_WIDTH = 5e3;
+const MAX_TRANSFORMED_IMAGE_HEIGHT = 5e3;
+const SAFE_TRANSFORMED_AREA = MAX_TRANSFORMED_IMAGE_WIDTH * MAX_TRANSFORMED_IMAGE_HEIGHT;
+const SUPER_UPSCALE_MODELS = [1.5, 2, 4];
+const imageScaleDefaults = {
+  HIGH: {
+    size: 1400 * 1400,
+    quality: 90,
+    maxUpscale: 1
+  },
+  MEDIUM: {
+    size: 600 * 600,
+    quality: 85,
+    maxUpscale: 1
+  },
+  LOW: {
+    size: 400 * 400,
+    quality: 80,
+    maxUpscale: 1.2
+  },
+  TINY: {
+    size: 0,
+    quality: 80,
+    maxUpscale: 1.4
   }
-  node.isDocument = isDocument;
-  function hasChildren(node2) {
-    return Object.prototype.hasOwnProperty.call(node2, "children");
+};
+const imageQuality = {
+  HIGH: "HIGH",
+  MEDIUM: "MEDIUM",
+  LOW: "LOW",
+  TINY: "TINY"
+};
+const imageFilters = {
+  CONTRAST: "contrast",
+  BRIGHTNESS: "brightness",
+  SATURATION: "saturation",
+  HUE: "hue",
+  BLUR: "blur"
+};
+const fileType = {
+  JPG: "jpg",
+  JPEG: "jpeg",
+  JPE: "jpe",
+  PNG: "png",
+  WEBP: "webp",
+  WIX_ICO_MP: "wix_ico_mp",
+  WIX_MP: "wix_mp",
+  GIF: "gif",
+  AVIF: "avif",
+  UNRECOGNIZED: "unrecognized"
+};
+const encodingTypes = {
+  AVIF: "AVIF",
+  PAVIF: "PAVIF"
+};
+function template(strings, ...keys) {
+  return function(...values) {
+    const dict = values[values.length - 1] || {};
+    const result = [strings[0]];
+    keys.forEach(function(key, i) {
+      const value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join("");
+  };
+}
+function last(array) {
+  return array[array.length - 1];
+}
+const SUPPORTED_IMAGE_EXTENSIONS = [
+  fileType.PNG,
+  fileType.JPEG,
+  fileType.JPG,
+  fileType.JPE,
+  fileType.WIX_ICO_MP,
+  fileType.WIX_MP,
+  fileType.WEBP,
+  fileType.AVIF
+];
+const JPG_EXTENSIONS = [
+  fileType.JPEG,
+  fileType.JPG,
+  fileType.JPE
+];
+function isImageTypeSupported(uri) {
+  return SUPPORTED_IMAGE_EXTENSIONS.includes(getFileExtension(uri));
+}
+function isValidRequest(fittingType, src, target) {
+  return target && src && !isUrlEmptyOrNone(src.id) && Object.values(fittingTypes).includes(fittingType);
+}
+function canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform) {
+  const isAvifWebpFormat = isWEBP(uri) || isAVIF(uri);
+  if (!isAvifWebpFormat || !hasAnimation) {
+    return true;
   }
-  node.hasChildren = hasChildren;
-  function cloneNode(node2, recursive) {
-    if (recursive === void 0) {
-      recursive = false;
-    }
-    var result;
-    if (isText(node2)) {
-      result = new Text(node2.data);
-    } else if (isComment(node2)) {
-      result = new Comment(node2.data);
-    } else if (isTag(node2)) {
-      var children = recursive ? cloneChildren(node2.children) : [];
-      var clone_1 = new Element(node2.name, __assign({}, node2.attribs), children);
-      children.forEach(function(child) {
-        return child.parent = clone_1;
-      });
-      if (node2.namespace != null) {
-        clone_1.namespace = node2.namespace;
-      }
-      if (node2["x-attribsNamespace"]) {
-        clone_1["x-attribsNamespace"] = __assign({}, node2["x-attribsNamespace"]);
-      }
-      if (node2["x-attribsPrefix"]) {
-        clone_1["x-attribsPrefix"] = __assign({}, node2["x-attribsPrefix"]);
-      }
-      result = clone_1;
-    } else if (isCDATA(node2)) {
-      var children = recursive ? cloneChildren(node2.children) : [];
-      var clone_2 = new CDATA(children);
-      children.forEach(function(child) {
-        return child.parent = clone_2;
-      });
-      result = clone_2;
-    } else if (isDocument(node2)) {
-      var children = recursive ? cloneChildren(node2.children) : [];
-      var clone_3 = new Document(children);
-      children.forEach(function(child) {
-        return child.parent = clone_3;
-      });
-      if (node2["x-mode"]) {
-        clone_3["x-mode"] = node2["x-mode"];
-      }
-      result = clone_3;
-    } else if (isDirective(node2)) {
-      var instruction = new ProcessingInstruction(node2.name, node2.data);
-      if (node2["x-name"] != null) {
-        instruction["x-name"] = node2["x-name"];
-        instruction["x-publicId"] = node2["x-publicId"];
-        instruction["x-systemId"] = node2["x-systemId"];
-      }
-      result = instruction;
-    } else {
-      throw new Error("Not implemented yet: ".concat(node2.type));
-    }
-    result.startIndex = node2.startIndex;
-    result.endIndex = node2.endIndex;
-    if (node2.sourceCodeLocation != null) {
-      result.sourceCodeLocation = node2.sourceCodeLocation;
-    }
-    return result;
+  return allowAnimatedTransform;
+}
+function canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation) {
+  if (!isGIF(uri)) {
+    return false;
   }
-  node.cloneNode = cloneNode;
-  function cloneChildren(childs) {
-    var children = childs.map(function(child) {
-      return cloneNode(child, true);
-    });
-    for (var i = 1; i < children.length; i++) {
-      children[i].prev = children[i - 1];
-      children[i - 1].next = children[i];
-    }
-    return children;
+  return !!(allowAnimatedTransform || allowFullGIFTransformation);
+}
+function isImageTransformApplicable(uri, hasAnimation, allowAnimatedTransform, allowFullGIFTransformation) {
+  if (isExternalUrl(uri)) {
+    return false;
   }
-  return node;
-}
-var hasRequiredLib$2;
-function requireLib$2() {
-  if (hasRequiredLib$2) return lib$2;
-  hasRequiredLib$2 = 1;
-  (function(exports$1) {
-    var __createBinding = lib$2 && lib$2.__createBinding || (Object.create ? (function(o, m, k, k2) {
-      if (k2 === void 0) k2 = k;
-      var desc = Object.getOwnPropertyDescriptor(m, k);
-      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-        desc = { enumerable: true, get: function() {
-          return m[k];
-        } };
-      }
-      Object.defineProperty(o, k2, desc);
-    }) : (function(o, m, k, k2) {
-      if (k2 === void 0) k2 = k;
-      o[k2] = m[k];
-    }));
-    var __exportStar = lib$2 && lib$2.__exportStar || function(m, exports$12) {
-      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$12, p)) __createBinding(exports$12, m, p);
-    };
-    Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.DomHandler = void 0;
-    var domelementtype_1 = /* @__PURE__ */ requireLib$3();
-    var node_js_1 = /* @__PURE__ */ requireNode();
-    __exportStar(/* @__PURE__ */ requireNode(), exports$1);
-    var defaultOpts = {
-      withStartIndices: false,
-      withEndIndices: false,
-      xmlMode: false
-    };
-    var DomHandler = (
-      /** @class */
-      (function() {
-        function DomHandler2(callback, options, elementCB) {
-          this.dom = [];
-          this.root = new node_js_1.Document(this.dom);
-          this.done = false;
-          this.tagStack = [this.root];
-          this.lastNode = null;
-          this.parser = null;
-          if (typeof options === "function") {
-            elementCB = options;
-            options = defaultOpts;
-          }
-          if (typeof callback === "object") {
-            options = callback;
-            callback = void 0;
-          }
-          this.callback = callback !== null && callback !== void 0 ? callback : null;
-          this.options = options !== null && options !== void 0 ? options : defaultOpts;
-          this.elementCB = elementCB !== null && elementCB !== void 0 ? elementCB : null;
-        }
-        DomHandler2.prototype.onparserinit = function(parser) {
-          this.parser = parser;
-        };
-        DomHandler2.prototype.onreset = function() {
-          this.dom = [];
-          this.root = new node_js_1.Document(this.dom);
-          this.done = false;
-          this.tagStack = [this.root];
-          this.lastNode = null;
-          this.parser = null;
-        };
-        DomHandler2.prototype.onend = function() {
-          if (this.done)
-            return;
-          this.done = true;
-          this.parser = null;
-          this.handleCallback(null);
-        };
-        DomHandler2.prototype.onerror = function(error) {
-          this.handleCallback(error);
-        };
-        DomHandler2.prototype.onclosetag = function() {
-          this.lastNode = null;
-          var elem = this.tagStack.pop();
-          if (this.options.withEndIndices) {
-            elem.endIndex = this.parser.endIndex;
-          }
-          if (this.elementCB)
-            this.elementCB(elem);
-        };
-        DomHandler2.prototype.onopentag = function(name, attribs) {
-          var type = this.options.xmlMode ? domelementtype_1.ElementType.Tag : void 0;
-          var element = new node_js_1.Element(name, attribs, void 0, type);
-          this.addNode(element);
-          this.tagStack.push(element);
-        };
-        DomHandler2.prototype.ontext = function(data) {
-          var lastNode = this.lastNode;
-          if (lastNode && lastNode.type === domelementtype_1.ElementType.Text) {
-            lastNode.data += data;
-            if (this.options.withEndIndices) {
-              lastNode.endIndex = this.parser.endIndex;
-            }
-          } else {
-            var node2 = new node_js_1.Text(data);
-            this.addNode(node2);
-            this.lastNode = node2;
-          }
-        };
-        DomHandler2.prototype.oncomment = function(data) {
-          if (this.lastNode && this.lastNode.type === domelementtype_1.ElementType.Comment) {
-            this.lastNode.data += data;
-            return;
-          }
-          var node2 = new node_js_1.Comment(data);
-          this.addNode(node2);
-          this.lastNode = node2;
-        };
-        DomHandler2.prototype.oncommentend = function() {
-          this.lastNode = null;
-        };
-        DomHandler2.prototype.oncdatastart = function() {
-          var text = new node_js_1.Text("");
-          var node2 = new node_js_1.CDATA([text]);
-          this.addNode(node2);
-          text.parent = node2;
-          this.lastNode = text;
-        };
-        DomHandler2.prototype.oncdataend = function() {
-          this.lastNode = null;
-        };
-        DomHandler2.prototype.onprocessinginstruction = function(name, data) {
-          var node2 = new node_js_1.ProcessingInstruction(name, data);
-          this.addNode(node2);
-        };
-        DomHandler2.prototype.handleCallback = function(error) {
-          if (typeof this.callback === "function") {
-            this.callback(error, this.dom);
-          } else if (error) {
-            throw error;
-          }
-        };
-        DomHandler2.prototype.addNode = function(node2) {
-          var parent = this.tagStack[this.tagStack.length - 1];
-          var previousSibling = parent.children[parent.children.length - 1];
-          if (this.options.withStartIndices) {
-            node2.startIndex = this.parser.startIndex;
-          }
-          if (this.options.withEndIndices) {
-            node2.endIndex = this.parser.endIndex;
-          }
-          parent.children.push(node2);
-          if (previousSibling) {
-            node2.prev = previousSibling;
-            previousSibling.next = node2;
-          }
-          node2.parent = parent;
-          this.lastNode = null;
-        };
-        return DomHandler2;
-      })()
-    );
-    exports$1.DomHandler = DomHandler;
-    exports$1.default = DomHandler;
-  })(lib$2);
-  return lib$2;
-}
-var constants = {};
-var hasRequiredConstants;
-function requireConstants() {
-  if (hasRequiredConstants) return constants;
-  hasRequiredConstants = 1;
-  (function(exports$1) {
-    Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.CARRIAGE_RETURN_PLACEHOLDER_REGEX = exports$1.CARRIAGE_RETURN_PLACEHOLDER = exports$1.CARRIAGE_RETURN_REGEX = exports$1.CARRIAGE_RETURN = exports$1.CASE_SENSITIVE_TAG_NAMES_MAP = exports$1.CASE_SENSITIVE_TAG_NAMES = void 0;
-    exports$1.CASE_SENSITIVE_TAG_NAMES = [
-      "animateMotion",
-      "animateTransform",
-      "clipPath",
-      "feBlend",
-      "feColorMatrix",
-      "feComponentTransfer",
-      "feComposite",
-      "feConvolveMatrix",
-      "feDiffuseLighting",
-      "feDisplacementMap",
-      "feDropShadow",
-      "feFlood",
-      "feFuncA",
-      "feFuncB",
-      "feFuncG",
-      "feFuncR",
-      "feGaussianBlur",
-      "feImage",
-      "feMerge",
-      "feMergeNode",
-      "feMorphology",
-      "feOffset",
-      "fePointLight",
-      "feSpecularLighting",
-      "feSpotLight",
-      "feTile",
-      "feTurbulence",
-      "foreignObject",
-      "linearGradient",
-      "radialGradient",
-      "textPath"
-    ];
-    exports$1.CASE_SENSITIVE_TAG_NAMES_MAP = exports$1.CASE_SENSITIVE_TAG_NAMES.reduce(function(accumulator, tagName) {
-      accumulator[tagName.toLowerCase()] = tagName;
-      return accumulator;
-    }, {});
-    exports$1.CARRIAGE_RETURN = "\r";
-    exports$1.CARRIAGE_RETURN_REGEX = new RegExp(exports$1.CARRIAGE_RETURN, "g");
-    exports$1.CARRIAGE_RETURN_PLACEHOLDER = "__HTML_DOM_PARSER_CARRIAGE_RETURN_PLACEHOLDER_".concat(Date.now(), "__");
-    exports$1.CARRIAGE_RETURN_PLACEHOLDER_REGEX = new RegExp(exports$1.CARRIAGE_RETURN_PLACEHOLDER, "g");
-  })(constants);
-  return constants;
-}
-var hasRequiredUtilities$2;
-function requireUtilities$2() {
-  if (hasRequiredUtilities$2) return utilities$2;
-  hasRequiredUtilities$2 = 1;
-  Object.defineProperty(utilities$2, "__esModule", { value: true });
-  utilities$2.formatAttributes = formatAttributes;
-  utilities$2.escapeSpecialCharacters = escapeSpecialCharacters;
-  utilities$2.revertEscapedCharacters = revertEscapedCharacters;
-  utilities$2.formatDOM = formatDOM;
-  var domhandler_1 = /* @__PURE__ */ requireLib$2();
-  var constants_1 = requireConstants();
-  function getCaseSensitiveTagName(tagName) {
-    return constants_1.CASE_SENSITIVE_TAG_NAMES_MAP[tagName];
+  if (!canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform)) {
+    return false;
   }
-  function formatAttributes(attributes) {
-    var map = {};
-    var index = 0;
-    var attributesLength = attributes.length;
-    for (; index < attributesLength; index++) {
-      var attribute = attributes[index];
-      map[attribute.name] = attribute.value;
+  const isSupportedImageType = isImageTypeSupported(uri);
+  const isTransformableGif = canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation);
+  return isSupportedImageType || isTransformableGif;
+}
+function isJPG(uri) {
+  return JPG_EXTENSIONS.includes(getFileExtension(uri));
+}
+function isPNG(uri) {
+  return getFileExtension(uri) === fileType.PNG;
+}
+function isWEBP(uri) {
+  return getFileExtension(uri) === fileType.WEBP;
+}
+function isGIF(uri) {
+  return getFileExtension(uri) === fileType.GIF;
+}
+function isAVIF(uri) {
+  return getFileExtension(uri) === fileType.AVIF;
+}
+function isExternalUrl(url) {
+  return /(^https?)|(^data)|(^\/\/)/.test(url);
+}
+function isUrlEmptyOrNone(url) {
+  return !url || !url.trim() || url.toLowerCase() === "none";
+}
+function isSEOBot(options) {
+  return (options == null ? void 0 : options.isSEOBot) ?? false;
+}
+const ILLEGAL_CHARS = ["/", "\\", "?", "<", ">", "|", "“", ":", '"'].map(encodeURIComponent);
+const URL_SAFE_ILLEGAL_CHARS = ["\\.", "\\*"];
+const ILLEGAL_CHARS_REPLACEMENT = "_";
+function getFileName(uri, name) {
+  const beforeLeadingSlashRegexp = /\/(.*?)$/;
+  const fileExtensionRegexp = /\.([^.]*)$/;
+  const illegalCharsRegex = new RegExp(`(${ILLEGAL_CHARS.concat(URL_SAFE_ILLEGAL_CHARS).join("|")})`, "g");
+  if (name && name.length) {
+    let fileName2 = name;
+    const extension = name.match(fileExtensionRegexp);
+    if (extension && SUPPORTED_IMAGE_EXTENSIONS.includes(extension[1])) {
+      fileName2 = name.replace(fileExtensionRegexp, "");
     }
-    return map;
+    return encodeURIComponent(fileName2).replace(illegalCharsRegex, ILLEGAL_CHARS_REPLACEMENT);
   }
-  function formatTagName(tagName) {
-    tagName = tagName.toLowerCase();
-    var caseSensitiveTagName = getCaseSensitiveTagName(tagName);
-    if (caseSensitiveTagName) {
-      return caseSensitiveTagName;
-    }
-    return tagName;
+  const trimmed = uri.match(beforeLeadingSlashRegexp);
+  const fileName = trimmed ? trimmed[1] : uri;
+  return fileName.replace(fileExtensionRegexp, "");
+}
+function getFileType(uri) {
+  if (isJPG(uri)) {
+    return fileType.JPG;
+  } else if (isPNG(uri)) {
+    return fileType.PNG;
+  } else if (isWEBP(uri)) {
+    return fileType.WEBP;
+  } else if (isGIF(uri)) {
+    return fileType.GIF;
+  } else if (isAVIF(uri)) {
+    return fileType.AVIF;
   }
-  function escapeSpecialCharacters(html) {
-    return html.replace(constants_1.CARRIAGE_RETURN_REGEX, constants_1.CARRIAGE_RETURN_PLACEHOLDER);
+  return fileType.UNRECOGNIZED;
+}
+function getFileExtension(uri) {
+  const splitURI = /[.]([^.]+)$/.exec(uri);
+  return (splitURI && /[.]([^.]+)$/.exec(uri)[1] || "").toLowerCase();
+}
+function getFitScaleFactor(sWidth, sHeight, dWidth, dHeight) {
+  return Math.min(dWidth / sWidth, dHeight / sHeight);
+}
+function getFillScaleFactor(sWidth, sHeight, dWidth, dHeight) {
+  return Math.max(dWidth / sWidth, dHeight / sHeight);
+}
+function getScaleFactor(sWidth, sHeight, dWidth, dHeight, transformType) {
+  let scaleFactor;
+  if (transformType === transformTypes.FILL) {
+    scaleFactor = getFillScaleFactor(sWidth, sHeight, dWidth, dHeight);
+  } else if (transformType === transformTypes.FIT) {
+    scaleFactor = getFitScaleFactor(sWidth, sHeight, dWidth, dHeight);
+  } else {
+    scaleFactor = 1;
   }
-  function revertEscapedCharacters(text) {
-    return text.replace(constants_1.CARRIAGE_RETURN_PLACEHOLDER_REGEX, constants_1.CARRIAGE_RETURN);
+  return scaleFactor;
+}
+function getSafeTransformData(sWidth, sHeight, dWidth, dHeight, transformType) {
+  let scaleFactor;
+  let width = dWidth;
+  let height = dHeight;
+  scaleFactor = getScaleFactor(sWidth, sHeight, dWidth, dHeight, transformType);
+  if (transformType === transformTypes.FIT) {
+    width = sWidth * scaleFactor;
+    height = sHeight * scaleFactor;
   }
-  function formatDOM(nodes, parent, directive) {
-    if (parent === void 0) {
-      parent = null;
-    }
-    var domNodes = [];
-    var current;
-    var index = 0;
-    var nodesLength = nodes.length;
-    for (; index < nodesLength; index++) {
-      var node2 = nodes[index];
-      switch (node2.nodeType) {
-        case 1: {
-          var tagName = formatTagName(node2.nodeName);
-          current = new domhandler_1.Element(tagName, formatAttributes(node2.attributes));
-          current.children = formatDOM(
-            // template children are on content
-            tagName === "template" ? node2.content.childNodes : node2.childNodes,
-            current
-          );
-          break;
-        }
-        case 3:
-          current = new domhandler_1.Text(revertEscapedCharacters(node2.nodeValue));
-          break;
-        case 8:
-          current = new domhandler_1.Comment(node2.nodeValue);
-          break;
-        default:
-          continue;
-      }
-      var prev = domNodes[index - 1] || null;
-      if (prev) {
-        prev.next = current;
-      }
-      current.parent = parent;
-      current.prev = prev;
-      current.next = null;
-      domNodes.push(current);
-    }
-    if (directive) {
-      current = new domhandler_1.ProcessingInstruction(directive.substring(0, directive.indexOf(" ")).toLowerCase(), directive);
-      current.next = domNodes[0] || null;
-      current.parent = parent;
-      domNodes.unshift(current);
-      if (domNodes[1]) {
-        domNodes[1].prev = domNodes[0];
-      }
-    }
-    return domNodes;
+  if (width && height && width * height > SAFE_TRANSFORMED_AREA) {
+    const dimensionScaleFactor = Math.sqrt(SAFE_TRANSFORMED_AREA / (width * height));
+    width *= dimensionScaleFactor;
+    height *= dimensionScaleFactor;
+    scaleFactor = getScaleFactor(sWidth, sHeight, width, height, transformType);
   }
-  return utilities$2;
-}
-var hasRequiredDomparser;
-function requireDomparser() {
-  if (hasRequiredDomparser) return domparser;
-  hasRequiredDomparser = 1;
-  Object.defineProperty(domparser, "__esModule", { value: true });
-  domparser.default = domparser$1;
-  var utilities_1 = requireUtilities$2();
-  var HTML = "html";
-  var HEAD = "head";
-  var BODY = "body";
-  var FIRST_TAG_REGEX = /<([a-zA-Z]+[0-9]?)/;
-  var HEAD_TAG_REGEX = /<head[^]*>/i;
-  var BODY_TAG_REGEX = /<body[^]*>/i;
-  var parseFromDocument = function(html, tagName) {
-    throw new Error("This browser does not support `document.implementation.createHTMLDocument`");
+  return {
+    scaleFactor,
+    width,
+    height
   };
-  var parseFromString = function(html, tagName) {
-    throw new Error("This browser does not support `DOMParser.prototype.parseFromString`");
+}
+function getTransformData(sWidth, sHeight, transformType, target, dpr, upscaleMethod) {
+  sWidth = sWidth || target.width;
+  sHeight = sHeight || target.height;
+  const { scaleFactor, width, height } = getSafeTransformData(sWidth, sHeight, target.width * dpr, target.height * dpr, transformType);
+  return getOptimizedTransformData(sWidth, sHeight, width, height, upscaleMethod, scaleFactor, transformType);
+}
+function getFocalPointFrom9GridAlignment(alignment = alignTypes.CENTER) {
+  return ALIGN_TYPE_TO_FOCAL_POINT[alignment];
+}
+function getAlignedRect(sRect, dRect, sFP, alignment) {
+  const fp = getFocalPoint(sFP) || getFocalPointFrom9GridAlignment(alignment);
+  const x = Math.max(0, Math.min(sRect.width - dRect.width, fp.x * sRect.width - dRect.width / 2));
+  const y = Math.max(0, Math.min(sRect.height - dRect.height, fp.y * sRect.height - dRect.height / 2));
+  return {
+    x,
+    y,
+    width: Math.min(sRect.width, dRect.width),
+    height: Math.min(sRect.height, dRect.height)
   };
-  var DOMParser = typeof window === "object" && window.DOMParser;
-  if (typeof DOMParser === "function") {
-    var domParser_1 = new DOMParser();
-    var mimeType_1 = "text/html";
-    parseFromString = function(html, tagName) {
-      if (tagName) {
-        html = "<".concat(tagName, ">").concat(html, "</").concat(tagName, ">");
-      }
-      return domParser_1.parseFromString(html, mimeType_1);
+}
+function getOverlappingRect(sRect, dRect) {
+  const width = Math.max(0, Math.min(sRect.width, dRect.x + dRect.width) - Math.max(0, dRect.x));
+  const height = Math.max(0, Math.min(sRect.height, dRect.y + dRect.height) - Math.max(0, dRect.y));
+  const isValidRect = width && height && (sRect.width !== width || sRect.height !== height);
+  return isValidRect ? {
+    x: Math.max(0, dRect.x),
+    y: Math.max(0, dRect.y),
+    width,
+    height
+  } : null;
+}
+function getDevicePixelRatio(target) {
+  return Math.min(target.pixelAspectRatio || 1, MAX_DEVICE_PIXEL_RATIO);
+}
+function getAlignment(target) {
+  return target.alignment && alignTypesMap[target.alignment] || alignTypesMap[alignTypes.CENTER];
+}
+function getFocalPoint(focalPoint) {
+  let fp;
+  if (focalPoint && typeof focalPoint.x === "number" && !isNaN(focalPoint.x) && typeof focalPoint.y === "number" && !isNaN(focalPoint.y)) {
+    fp = {
+      x: roundToFixed(Math.max(0, Math.min(100, focalPoint.x)) / 100, 2),
+      y: roundToFixed(Math.max(0, Math.min(100, focalPoint.y)) / 100, 2)
     };
-    parseFromDocument = parseFromString;
   }
-  if (typeof document === "object" && document.implementation) {
-    var htmlDocument_1 = document.implementation.createHTMLDocument();
-    parseFromDocument = function(html, tagName) {
-      if (tagName) {
-        var element = htmlDocument_1.documentElement.querySelector(tagName);
-        if (element) {
-          element.innerHTML = html;
-        }
-        return htmlDocument_1;
-      }
-      htmlDocument_1.documentElement.innerHTML = html;
-      return htmlDocument_1;
-    };
+  return fp;
+}
+function getPreferredImageQuality(imageWidth, imageHeight) {
+  return imageScaleDefaults[getImageQualityKey(imageWidth, imageHeight)].quality;
+}
+function getClassicScaleData(sWidth, sHeight) {
+  const imageKey = getImageQualityKey(sWidth, sHeight);
+  return {
+    optimizedScaleFactor: imageScaleDefaults[imageKey].maxUpscale,
+    upscaleMethodValue: upscaleMethodsValues.classic,
+    forceUSM: false
+  };
+}
+function getAutoScaleData(sWidth, sHeight) {
+  const imageKey = getImageQualityKey(sWidth, sHeight);
+  return {
+    optimizedScaleFactor: imageScaleDefaults[imageKey].maxUpscale,
+    upscaleMethodValue: upscaleMethodsValues.classic,
+    forceUSM: false
+  };
+}
+function getSuperScaleData(scaleFactor) {
+  return {
+    optimizedScaleFactor: last(SUPER_UPSCALE_MODELS),
+    upscaleMethodValue: upscaleMethodsValues.super,
+    forceUSM: !(SUPER_UPSCALE_MODELS.includes(scaleFactor) || scaleFactor > last(SUPER_UPSCALE_MODELS))
+  };
+}
+function getOptimizedScaleData(sWidth, sHeight, scaleFactor, upscaleMethod) {
+  if (upscaleMethod === "auto") {
+    return getAutoScaleData(sWidth, sHeight);
+  } else if (upscaleMethod === "super") {
+    return getSuperScaleData(scaleFactor);
   }
-  var template = typeof document === "object" && document.createElement("template");
-  var parseFromTemplate;
-  if (template && template.content) {
-    parseFromTemplate = function(html) {
-      template.innerHTML = html;
-      return template.content.childNodes;
+  return getClassicScaleData(sWidth, sHeight);
+}
+function getOptimizedTransformData(sWidth, sHeight, tWidth, tHeight, upscaleMethod, scaleFactor, transformType) {
+  const { optimizedScaleFactor, upscaleMethodValue, forceUSM } = getOptimizedScaleData(sWidth, sHeight, scaleFactor, upscaleMethod);
+  let width = tWidth;
+  let height = tHeight;
+  if (scaleFactor <= optimizedScaleFactor) {
+    return {
+      width,
+      height,
+      scaleFactor,
+      upscaleMethodValue,
+      forceUSM,
+      cssUpscaleNeeded: false
     };
   }
-  function domparser$1(html) {
-    var _a, _b;
-    html = (0, utilities_1.escapeSpecialCharacters)(html);
-    var match = html.match(FIRST_TAG_REGEX);
-    var firstTagName = match && match[1] ? match[1].toLowerCase() : "";
-    switch (firstTagName) {
-      case HTML: {
-        var doc = parseFromString(html);
-        if (!HEAD_TAG_REGEX.test(html)) {
-          var element = doc.querySelector(HEAD);
-          (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(element);
-        }
-        if (!BODY_TAG_REGEX.test(html)) {
-          var element = doc.querySelector(BODY);
-          (_b = element === null || element === void 0 ? void 0 : element.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(element);
-        }
-        return doc.querySelectorAll(HTML);
-      }
-      case HEAD:
-      case BODY: {
-        var elements = parseFromDocument(html).querySelectorAll(firstTagName);
-        if (BODY_TAG_REGEX.test(html) && HEAD_TAG_REGEX.test(html)) {
-          return elements[0].parentNode.childNodes;
-        }
-        return elements;
-      }
-      // low-level tag or text
-      default: {
-        if (parseFromTemplate) {
-          return parseFromTemplate(html);
-        }
-        var element = parseFromDocument(html, BODY).querySelector(BODY);
-        return element.childNodes;
-      }
-    }
+  switch (transformType) {
+    case transformTypes.FILL:
+      width = tWidth * (optimizedScaleFactor / scaleFactor);
+      height = tHeight * (optimizedScaleFactor / scaleFactor);
+      break;
+    case transformTypes.FIT:
+      width = sWidth * optimizedScaleFactor;
+      height = sHeight * optimizedScaleFactor;
+      break;
   }
-  return domparser;
-}
-var hasRequiredHtmlToDom;
-function requireHtmlToDom() {
-  if (hasRequiredHtmlToDom) return htmlToDom;
-  hasRequiredHtmlToDom = 1;
-  var __importDefault = htmlToDom && htmlToDom.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
+  return {
+    width,
+    height,
+    scaleFactor: optimizedScaleFactor,
+    upscaleMethodValue,
+    forceUSM,
+    cssUpscaleNeeded: true
   };
-  Object.defineProperty(htmlToDom, "__esModule", { value: true });
-  htmlToDom.default = HTMLDOMParser;
-  var domparser_1 = __importDefault(requireDomparser());
-  var utilities_1 = requireUtilities$2();
-  var DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/;
-  function HTMLDOMParser(html) {
-    if (typeof html !== "string") {
-      throw new TypeError("First argument must be a string");
-    }
-    if (!html) {
-      return [];
-    }
-    var match = html.match(DIRECTIVE_REGEX);
-    var directive = match ? match[1] : void 0;
-    return (0, utilities_1.formatDOM)((0, domparser_1.default)(html), null, directive);
+}
+function getImageQualityKey(imageWidth, imageHeight) {
+  const size = imageWidth * imageHeight;
+  if (size > imageScaleDefaults[imageQuality.HIGH].size) {
+    return imageQuality.HIGH;
+  } else if (size > imageScaleDefaults[imageQuality.MEDIUM].size) {
+    return imageQuality.MEDIUM;
+  } else if (size > imageScaleDefaults[imageQuality.LOW].size) {
+    return imageQuality.LOW;
   }
-  return htmlToDom;
-}
-var attributesToProps = {};
-var lib = {};
-var possibleStandardNamesOptimized = {};
-var hasRequiredPossibleStandardNamesOptimized;
-function requirePossibleStandardNamesOptimized() {
-  if (hasRequiredPossibleStandardNamesOptimized) return possibleStandardNamesOptimized;
-  hasRequiredPossibleStandardNamesOptimized = 1;
-  var SAME = 0;
-  possibleStandardNamesOptimized.SAME = SAME;
-  var CAMELCASE = 1;
-  possibleStandardNamesOptimized.CAMELCASE = CAMELCASE;
-  possibleStandardNamesOptimized.possibleStandardNames = {
-    accept: 0,
-    acceptCharset: 1,
-    "accept-charset": "acceptCharset",
-    accessKey: 1,
-    action: 0,
-    allowFullScreen: 1,
-    alt: 0,
-    as: 0,
-    async: 0,
-    autoCapitalize: 1,
-    autoComplete: 1,
-    autoCorrect: 1,
-    autoFocus: 1,
-    autoPlay: 1,
-    autoSave: 1,
-    capture: 0,
-    cellPadding: 1,
-    cellSpacing: 1,
-    challenge: 0,
-    charSet: 1,
-    checked: 0,
-    children: 0,
-    cite: 0,
-    class: "className",
-    classID: 1,
-    className: 1,
-    cols: 0,
-    colSpan: 1,
-    content: 0,
-    contentEditable: 1,
-    contextMenu: 1,
-    controls: 0,
-    controlsList: 1,
-    coords: 0,
-    crossOrigin: 1,
-    dangerouslySetInnerHTML: 1,
-    data: 0,
-    dateTime: 1,
-    default: 0,
-    defaultChecked: 1,
-    defaultValue: 1,
-    defer: 0,
-    dir: 0,
-    disabled: 0,
-    disablePictureInPicture: 1,
-    disableRemotePlayback: 1,
-    download: 0,
-    draggable: 0,
-    encType: 1,
-    enterKeyHint: 1,
-    for: "htmlFor",
-    form: 0,
-    formMethod: 1,
-    formAction: 1,
-    formEncType: 1,
-    formNoValidate: 1,
-    formTarget: 1,
-    frameBorder: 1,
-    headers: 0,
-    height: 0,
-    hidden: 0,
-    high: 0,
-    href: 0,
-    hrefLang: 1,
-    htmlFor: 1,
-    httpEquiv: 1,
-    "http-equiv": "httpEquiv",
-    icon: 0,
-    id: 0,
-    innerHTML: 1,
-    inputMode: 1,
-    integrity: 0,
-    is: 0,
-    itemID: 1,
-    itemProp: 1,
-    itemRef: 1,
-    itemScope: 1,
-    itemType: 1,
-    keyParams: 1,
-    keyType: 1,
-    kind: 0,
-    label: 0,
-    lang: 0,
-    list: 0,
-    loop: 0,
-    low: 0,
-    manifest: 0,
-    marginWidth: 1,
-    marginHeight: 1,
-    max: 0,
-    maxLength: 1,
-    media: 0,
-    mediaGroup: 1,
-    method: 0,
-    min: 0,
-    minLength: 1,
-    multiple: 0,
-    muted: 0,
-    name: 0,
-    noModule: 1,
-    nonce: 0,
-    noValidate: 1,
-    open: 0,
-    optimum: 0,
-    pattern: 0,
-    placeholder: 0,
-    playsInline: 1,
-    poster: 0,
-    preload: 0,
-    profile: 0,
-    radioGroup: 1,
-    readOnly: 1,
-    referrerPolicy: 1,
-    rel: 0,
-    required: 0,
-    reversed: 0,
-    role: 0,
-    rows: 0,
-    rowSpan: 1,
-    sandbox: 0,
-    scope: 0,
-    scoped: 0,
-    scrolling: 0,
-    seamless: 0,
-    selected: 0,
-    shape: 0,
-    size: 0,
-    sizes: 0,
-    span: 0,
-    spellCheck: 1,
-    src: 0,
-    srcDoc: 1,
-    srcLang: 1,
-    srcSet: 1,
-    start: 0,
-    step: 0,
-    style: 0,
-    summary: 0,
-    tabIndex: 1,
-    target: 0,
-    title: 0,
-    type: 0,
-    useMap: 1,
-    value: 0,
-    width: 0,
-    wmode: 0,
-    wrap: 0,
-    about: 0,
-    accentHeight: 1,
-    "accent-height": "accentHeight",
-    accumulate: 0,
-    additive: 0,
-    alignmentBaseline: 1,
-    "alignment-baseline": "alignmentBaseline",
-    allowReorder: 1,
-    alphabetic: 0,
-    amplitude: 0,
-    arabicForm: 1,
-    "arabic-form": "arabicForm",
-    ascent: 0,
-    attributeName: 1,
-    attributeType: 1,
-    autoReverse: 1,
-    azimuth: 0,
-    baseFrequency: 1,
-    baselineShift: 1,
-    "baseline-shift": "baselineShift",
-    baseProfile: 1,
-    bbox: 0,
-    begin: 0,
-    bias: 0,
-    by: 0,
-    calcMode: 1,
-    capHeight: 1,
-    "cap-height": "capHeight",
-    clip: 0,
-    clipPath: 1,
-    "clip-path": "clipPath",
-    clipPathUnits: 1,
-    clipRule: 1,
-    "clip-rule": "clipRule",
-    color: 0,
-    colorInterpolation: 1,
-    "color-interpolation": "colorInterpolation",
-    colorInterpolationFilters: 1,
-    "color-interpolation-filters": "colorInterpolationFilters",
-    colorProfile: 1,
-    "color-profile": "colorProfile",
-    colorRendering: 1,
-    "color-rendering": "colorRendering",
-    contentScriptType: 1,
-    contentStyleType: 1,
-    cursor: 0,
-    cx: 0,
-    cy: 0,
-    d: 0,
-    datatype: 0,
-    decelerate: 0,
-    descent: 0,
-    diffuseConstant: 1,
-    direction: 0,
-    display: 0,
-    divisor: 0,
-    dominantBaseline: 1,
-    "dominant-baseline": "dominantBaseline",
-    dur: 0,
-    dx: 0,
-    dy: 0,
-    edgeMode: 1,
-    elevation: 0,
-    enableBackground: 1,
-    "enable-background": "enableBackground",
-    end: 0,
-    exponent: 0,
-    externalResourcesRequired: 1,
-    fill: 0,
-    fillOpacity: 1,
-    "fill-opacity": "fillOpacity",
-    fillRule: 1,
-    "fill-rule": "fillRule",
-    filter: 0,
-    filterRes: 1,
-    filterUnits: 1,
-    floodOpacity: 1,
-    "flood-opacity": "floodOpacity",
-    floodColor: 1,
-    "flood-color": "floodColor",
-    focusable: 0,
-    fontFamily: 1,
-    "font-family": "fontFamily",
-    fontSize: 1,
-    "font-size": "fontSize",
-    fontSizeAdjust: 1,
-    "font-size-adjust": "fontSizeAdjust",
-    fontStretch: 1,
-    "font-stretch": "fontStretch",
-    fontStyle: 1,
-    "font-style": "fontStyle",
-    fontVariant: 1,
-    "font-variant": "fontVariant",
-    fontWeight: 1,
-    "font-weight": "fontWeight",
-    format: 0,
-    from: 0,
-    fx: 0,
-    fy: 0,
-    g1: 0,
-    g2: 0,
-    glyphName: 1,
-    "glyph-name": "glyphName",
-    glyphOrientationHorizontal: 1,
-    "glyph-orientation-horizontal": "glyphOrientationHorizontal",
-    glyphOrientationVertical: 1,
-    "glyph-orientation-vertical": "glyphOrientationVertical",
-    glyphRef: 1,
-    gradientTransform: 1,
-    gradientUnits: 1,
-    hanging: 0,
-    horizAdvX: 1,
-    "horiz-adv-x": "horizAdvX",
-    horizOriginX: 1,
-    "horiz-origin-x": "horizOriginX",
-    ideographic: 0,
-    imageRendering: 1,
-    "image-rendering": "imageRendering",
-    in2: 0,
-    in: 0,
-    inlist: 0,
-    intercept: 0,
-    k1: 0,
-    k2: 0,
-    k3: 0,
-    k4: 0,
-    k: 0,
-    kernelMatrix: 1,
-    kernelUnitLength: 1,
-    kerning: 0,
-    keyPoints: 1,
-    keySplines: 1,
-    keyTimes: 1,
-    lengthAdjust: 1,
-    letterSpacing: 1,
-    "letter-spacing": "letterSpacing",
-    lightingColor: 1,
-    "lighting-color": "lightingColor",
-    limitingConeAngle: 1,
-    local: 0,
-    markerEnd: 1,
-    "marker-end": "markerEnd",
-    markerHeight: 1,
-    markerMid: 1,
-    "marker-mid": "markerMid",
-    markerStart: 1,
-    "marker-start": "markerStart",
-    markerUnits: 1,
-    markerWidth: 1,
-    mask: 0,
-    maskContentUnits: 1,
-    maskUnits: 1,
-    mathematical: 0,
-    mode: 0,
-    numOctaves: 1,
-    offset: 0,
-    opacity: 0,
-    operator: 0,
-    order: 0,
-    orient: 0,
-    orientation: 0,
-    origin: 0,
-    overflow: 0,
-    overlinePosition: 1,
-    "overline-position": "overlinePosition",
-    overlineThickness: 1,
-    "overline-thickness": "overlineThickness",
-    paintOrder: 1,
-    "paint-order": "paintOrder",
-    panose1: 0,
-    "panose-1": "panose1",
-    pathLength: 1,
-    patternContentUnits: 1,
-    patternTransform: 1,
-    patternUnits: 1,
-    pointerEvents: 1,
-    "pointer-events": "pointerEvents",
-    points: 0,
-    pointsAtX: 1,
-    pointsAtY: 1,
-    pointsAtZ: 1,
-    prefix: 0,
-    preserveAlpha: 1,
-    preserveAspectRatio: 1,
-    primitiveUnits: 1,
-    property: 0,
-    r: 0,
-    radius: 0,
-    refX: 1,
-    refY: 1,
-    renderingIntent: 1,
-    "rendering-intent": "renderingIntent",
-    repeatCount: 1,
-    repeatDur: 1,
-    requiredExtensions: 1,
-    requiredFeatures: 1,
-    resource: 0,
-    restart: 0,
-    result: 0,
-    results: 0,
-    rotate: 0,
-    rx: 0,
-    ry: 0,
-    scale: 0,
-    security: 0,
-    seed: 0,
-    shapeRendering: 1,
-    "shape-rendering": "shapeRendering",
-    slope: 0,
-    spacing: 0,
-    specularConstant: 1,
-    specularExponent: 1,
-    speed: 0,
-    spreadMethod: 1,
-    startOffset: 1,
-    stdDeviation: 1,
-    stemh: 0,
-    stemv: 0,
-    stitchTiles: 1,
-    stopColor: 1,
-    "stop-color": "stopColor",
-    stopOpacity: 1,
-    "stop-opacity": "stopOpacity",
-    strikethroughPosition: 1,
-    "strikethrough-position": "strikethroughPosition",
-    strikethroughThickness: 1,
-    "strikethrough-thickness": "strikethroughThickness",
-    string: 0,
-    stroke: 0,
-    strokeDasharray: 1,
-    "stroke-dasharray": "strokeDasharray",
-    strokeDashoffset: 1,
-    "stroke-dashoffset": "strokeDashoffset",
-    strokeLinecap: 1,
-    "stroke-linecap": "strokeLinecap",
-    strokeLinejoin: 1,
-    "stroke-linejoin": "strokeLinejoin",
-    strokeMiterlimit: 1,
-    "stroke-miterlimit": "strokeMiterlimit",
-    strokeWidth: 1,
-    "stroke-width": "strokeWidth",
-    strokeOpacity: 1,
-    "stroke-opacity": "strokeOpacity",
-    suppressContentEditableWarning: 1,
-    suppressHydrationWarning: 1,
-    surfaceScale: 1,
-    systemLanguage: 1,
-    tableValues: 1,
-    targetX: 1,
-    targetY: 1,
-    textAnchor: 1,
-    "text-anchor": "textAnchor",
-    textDecoration: 1,
-    "text-decoration": "textDecoration",
-    textLength: 1,
-    textRendering: 1,
-    "text-rendering": "textRendering",
-    to: 0,
-    transform: 0,
-    typeof: 0,
-    u1: 0,
-    u2: 0,
-    underlinePosition: 1,
-    "underline-position": "underlinePosition",
-    underlineThickness: 1,
-    "underline-thickness": "underlineThickness",
-    unicode: 0,
-    unicodeBidi: 1,
-    "unicode-bidi": "unicodeBidi",
-    unicodeRange: 1,
-    "unicode-range": "unicodeRange",
-    unitsPerEm: 1,
-    "units-per-em": "unitsPerEm",
-    unselectable: 0,
-    vAlphabetic: 1,
-    "v-alphabetic": "vAlphabetic",
-    values: 0,
-    vectorEffect: 1,
-    "vector-effect": "vectorEffect",
-    version: 0,
-    vertAdvY: 1,
-    "vert-adv-y": "vertAdvY",
-    vertOriginX: 1,
-    "vert-origin-x": "vertOriginX",
-    vertOriginY: 1,
-    "vert-origin-y": "vertOriginY",
-    vHanging: 1,
-    "v-hanging": "vHanging",
-    vIdeographic: 1,
-    "v-ideographic": "vIdeographic",
-    viewBox: 1,
-    viewTarget: 1,
-    visibility: 0,
-    vMathematical: 1,
-    "v-mathematical": "vMathematical",
-    vocab: 0,
-    widths: 0,
-    wordSpacing: 1,
-    "word-spacing": "wordSpacing",
-    writingMode: 1,
-    "writing-mode": "writingMode",
-    x1: 0,
-    x2: 0,
-    x: 0,
-    xChannelSelector: 1,
-    xHeight: 1,
-    "x-height": "xHeight",
-    xlinkActuate: 1,
-    "xlink:actuate": "xlinkActuate",
-    xlinkArcrole: 1,
-    "xlink:arcrole": "xlinkArcrole",
-    xlinkHref: 1,
-    "xlink:href": "xlinkHref",
-    xlinkRole: 1,
-    "xlink:role": "xlinkRole",
-    xlinkShow: 1,
-    "xlink:show": "xlinkShow",
-    xlinkTitle: 1,
-    "xlink:title": "xlinkTitle",
-    xlinkType: 1,
-    "xlink:type": "xlinkType",
-    xmlBase: 1,
-    "xml:base": "xmlBase",
-    xmlLang: 1,
-    "xml:lang": "xmlLang",
-    xmlns: 0,
-    "xml:space": "xmlSpace",
-    xmlnsXlink: 1,
-    "xmlns:xlink": "xmlnsXlink",
-    xmlSpace: 1,
-    y1: 0,
-    y2: 0,
-    y: 0,
-    yChannelSelector: 1,
-    z: 0,
-    zoomAndPan: 1
+  return imageQuality.TINY;
+}
+function getDimension(sWidth, sHeight, tWidth, tHeight, transformType) {
+  const scaleFactor = getScaleFactor(sWidth, sHeight, tWidth, tHeight, transformType);
+  return {
+    width: Math.round(sWidth * scaleFactor),
+    height: Math.round(sHeight * scaleFactor)
   };
-  return possibleStandardNamesOptimized;
-}
-var hasRequiredLib$1;
-function requireLib$1() {
-  if (hasRequiredLib$1) return lib;
-  hasRequiredLib$1 = 1;
-  const RESERVED = 0;
-  const STRING = 1;
-  const BOOLEANISH_STRING = 2;
-  const BOOLEAN = 3;
-  const OVERLOADED_BOOLEAN = 4;
-  const NUMERIC = 5;
-  const POSITIVE_NUMERIC = 6;
-  function getPropertyInfo(name) {
-    return properties.hasOwnProperty(name) ? properties[name] : null;
+}
+function roundToFixed(value, precision) {
+  const truncatePrecision = Math.pow(10, precision);
+  return (value * truncatePrecision / truncatePrecision).toFixed(precision);
+}
+function getUpscaleString(options) {
+  if (!options || !options.upscaleMethod) {
+    return upscaleMethods.AUTO;
   }
-  function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
-    this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
-    this.attributeName = attributeName;
-    this.attributeNamespace = attributeNamespace;
-    this.mustUseProperty = mustUseProperty;
-    this.propertyName = name;
-    this.type = type;
-    this.sanitizeURL = sanitizeURL;
-    this.removeEmptyString = removeEmptyString;
+  return upscaleMethods[options.upscaleMethod.toUpperCase()] || upscaleMethods.AUTO;
+}
+function imageIsAnimated(uri, hasAnimation) {
+  const isAvifWebpFormat = isWEBP(uri) || isAVIF(uri);
+  return getFileExtension(uri) === fileType.GIF || isAvifWebpFormat && hasAnimation;
+}
+const globalFeaturesSupportObj = {
+  /**
+   * @type {object<boolean>}
+   */
+  isMobile: false
+};
+const getFeature = function(feature) {
+  return globalFeaturesSupportObj[feature];
+};
+const setFeature = function(feature, value) {
+  globalFeaturesSupportObj[feature] = value;
+};
+function populateGlobalFeatureSupport() {
+  if (typeof window !== "undefined" && typeof navigator !== "undefined") {
+    const isSmallScreen = window.matchMedia && window.matchMedia("(max-width: 767px)").matches;
+    const isMobileAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    setFeature("isMobile", isSmallScreen && isMobileAgent);
   }
-  const properties = {};
-  const reservedProps = [
-    "children",
-    "dangerouslySetInnerHTML",
-    // TODO: This prevents the assignment of defaultValue to regular
-    // elements (not just inputs). Now that ReactDOMInput assigns to the
-    // defaultValue property -- do we need this?
-    "defaultValue",
-    "defaultChecked",
-    "innerHTML",
-    "suppressContentEditableWarning",
-    "suppressHydrationWarning",
-    "style"
-  ];
-  reservedProps.forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      RESERVED,
-      false,
-      // mustUseProperty
-      name,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    ["acceptCharset", "accept-charset"],
-    ["className", "class"],
-    ["htmlFor", "for"],
-    ["httpEquiv", "http-equiv"]
-  ].forEach(([name, attributeName]) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  ["contentEditable", "draggable", "spellCheck", "value"].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      BOOLEANISH_STRING,
-      false,
-      // mustUseProperty
-      name.toLowerCase(),
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "autoReverse",
-    "externalResourcesRequired",
-    "focusable",
-    "preserveAlpha"
-  ].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      BOOLEANISH_STRING,
-      false,
-      // mustUseProperty
-      name,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "allowFullScreen",
-    "async",
-    // Note: there is a special case that prevents it from being written to the DOM
-    // on the client side because the browsers are inconsistent. Instead we call focus().
-    "autoFocus",
-    "autoPlay",
-    "controls",
-    "default",
-    "defer",
-    "disabled",
-    "disablePictureInPicture",
-    "disableRemotePlayback",
-    "formNoValidate",
-    "hidden",
-    "loop",
-    "noModule",
-    "noValidate",
-    "open",
-    "playsInline",
-    "readOnly",
-    "required",
-    "reversed",
-    "scoped",
-    "seamless",
-    // Microdata
-    "itemScope"
-  ].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      BOOLEAN,
-      false,
-      // mustUseProperty
-      name.toLowerCase(),
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "checked",
-    // Note: `option.selected` is not updated if `select.multiple` is
-    // disabled with `removeAttribute`. We have special logic for handling this.
-    "multiple",
-    "muted",
-    "selected"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      BOOLEAN,
-      true,
-      // mustUseProperty
-      name,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "capture",
-    "download"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      OVERLOADED_BOOLEAN,
-      false,
-      // mustUseProperty
-      name,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "cols",
-    "rows",
-    "size",
-    "span"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      POSITIVE_NUMERIC,
-      false,
-      // mustUseProperty
-      name,
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  ["rowSpan", "start"].forEach((name) => {
-    properties[name] = new PropertyInfoRecord(
-      name,
-      NUMERIC,
-      false,
-      // mustUseProperty
-      name.toLowerCase(),
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  const CAMELIZE = /[\-\:]([a-z])/g;
-  const capitalize = (token) => token[1].toUpperCase();
-  [
-    "accent-height",
-    "alignment-baseline",
-    "arabic-form",
-    "baseline-shift",
-    "cap-height",
-    "clip-path",
-    "clip-rule",
-    "color-interpolation",
-    "color-interpolation-filters",
-    "color-profile",
-    "color-rendering",
-    "dominant-baseline",
-    "enable-background",
-    "fill-opacity",
-    "fill-rule",
-    "flood-color",
-    "flood-opacity",
-    "font-family",
-    "font-size",
-    "font-size-adjust",
-    "font-stretch",
-    "font-style",
-    "font-variant",
-    "font-weight",
-    "glyph-name",
-    "glyph-orientation-horizontal",
-    "glyph-orientation-vertical",
-    "horiz-adv-x",
-    "horiz-origin-x",
-    "image-rendering",
-    "letter-spacing",
-    "lighting-color",
-    "marker-end",
-    "marker-mid",
-    "marker-start",
-    "overline-position",
-    "overline-thickness",
-    "paint-order",
-    "panose-1",
-    "pointer-events",
-    "rendering-intent",
-    "shape-rendering",
-    "stop-color",
-    "stop-opacity",
-    "strikethrough-position",
-    "strikethrough-thickness",
-    "stroke-dasharray",
-    "stroke-dashoffset",
-    "stroke-linecap",
-    "stroke-linejoin",
-    "stroke-miterlimit",
-    "stroke-opacity",
-    "stroke-width",
-    "text-anchor",
-    "text-decoration",
-    "text-rendering",
-    "underline-position",
-    "underline-thickness",
-    "unicode-bidi",
-    "unicode-range",
-    "units-per-em",
-    "v-alphabetic",
-    "v-hanging",
-    "v-ideographic",
-    "v-mathematical",
-    "vector-effect",
-    "vert-adv-y",
-    "vert-origin-x",
-    "vert-origin-y",
-    "word-spacing",
-    "writing-mode",
-    "xmlns:xlink",
-    "x-height"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((attributeName) => {
-    const name = attributeName.replace(CAMELIZE, capitalize);
-    properties[name] = new PropertyInfoRecord(
-      name,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName,
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "xlink:actuate",
-    "xlink:arcrole",
-    "xlink:role",
-    "xlink:show",
-    "xlink:title",
-    "xlink:type"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((attributeName) => {
-    const name = attributeName.replace(CAMELIZE, capitalize);
-    properties[name] = new PropertyInfoRecord(
-      name,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName,
-      "http://www.w3.org/1999/xlink",
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  [
-    "xml:base",
-    "xml:lang",
-    "xml:space"
-    // NOTE: if you add a camelCased prop to this list,
-    // you'll need to set attributeName to name.toLowerCase()
-    // instead in the assignment below.
-  ].forEach((attributeName) => {
-    const name = attributeName.replace(CAMELIZE, capitalize);
-    properties[name] = new PropertyInfoRecord(
-      name,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName,
-      "http://www.w3.org/XML/1998/namespace",
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  ["tabIndex", "crossOrigin"].forEach((attributeName) => {
-    properties[attributeName] = new PropertyInfoRecord(
-      attributeName,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName.toLowerCase(),
-      // attributeName
-      null,
-      // attributeNamespace
-      false,
-      // sanitizeURL
-      false
-      // removeEmptyString
-    );
-  });
-  const xlinkHref = "xlinkHref";
-  properties[xlinkHref] = new PropertyInfoRecord(
-    "xlinkHref",
-    STRING,
-    false,
-    // mustUseProperty
-    "xlink:href",
-    "http://www.w3.org/1999/xlink",
-    true,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-  ["src", "href", "action", "formAction"].forEach((attributeName) => {
-    properties[attributeName] = new PropertyInfoRecord(
-      attributeName,
-      STRING,
-      false,
-      // mustUseProperty
-      attributeName.toLowerCase(),
-      // attributeName
-      null,
-      // attributeNamespace
-      true,
-      // sanitizeURL
-      true
-      // removeEmptyString
-    );
-  });
-  const {
-    CAMELCASE,
-    SAME,
-    possibleStandardNames: possibleStandardNamesOptimized2
-  } = requirePossibleStandardNamesOptimized();
-  const ATTRIBUTE_NAME_START_CHAR = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
-  const ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
-  const isCustomAttribute = RegExp.prototype.test.bind(
-    // eslint-disable-next-line no-misleading-character-class
-    new RegExp("^(data|aria)-[" + ATTRIBUTE_NAME_CHAR + "]*$")
-  );
-  const possibleStandardNames = Object.keys(
-    possibleStandardNamesOptimized2
-  ).reduce((accumulator, standardName) => {
-    const propName = possibleStandardNamesOptimized2[standardName];
-    if (propName === SAME) {
-      accumulator[standardName] = standardName;
-    } else if (propName === CAMELCASE) {
-      accumulator[standardName.toLowerCase()] = standardName;
-    } else {
-      accumulator[standardName] = propName;
-    }
-    return accumulator;
-  }, {});
-  lib.BOOLEAN = BOOLEAN;
-  lib.BOOLEANISH_STRING = BOOLEANISH_STRING;
-  lib.NUMERIC = NUMERIC;
-  lib.OVERLOADED_BOOLEAN = OVERLOADED_BOOLEAN;
-  lib.POSITIVE_NUMERIC = POSITIVE_NUMERIC;
-  lib.RESERVED = RESERVED;
-  lib.STRING = STRING;
-  lib.getPropertyInfo = getPropertyInfo;
-  lib.isCustomAttribute = isCustomAttribute;
-  lib.possibleStandardNames = possibleStandardNames;
-  return lib;
-}
-var utilities$1 = {};
-var cjs$2 = {};
-var cjs$1;
-var hasRequiredCjs$2;
-function requireCjs$2() {
-  if (hasRequiredCjs$2) return cjs$1;
-  hasRequiredCjs$2 = 1;
-  var COMMENT_REGEX = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
-  var NEWLINE_REGEX = /\n/g;
-  var WHITESPACE_REGEX = /^\s*/;
-  var PROPERTY_REGEX = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/;
-  var COLON_REGEX = /^:\s*/;
-  var VALUE_REGEX = /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/;
-  var SEMICOLON_REGEX = /^[;\s]*/;
-  var TRIM_REGEX = /^\s+|\s+$/g;
-  var NEWLINE = "\n";
-  var FORWARD_SLASH = "/";
-  var ASTERISK = "*";
-  var EMPTY_STRING = "";
-  var TYPE_COMMENT = "comment";
-  var TYPE_DECLARATION = "declaration";
-  function index(style, options) {
-    if (typeof style !== "string") {
-      throw new TypeError("First argument must be a string");
-    }
-    if (!style) return [];
-    options = options || {};
-    var lineno = 1;
-    var column = 1;
-    function updatePosition(str) {
-      var lines = str.match(NEWLINE_REGEX);
-      if (lines) lineno += lines.length;
-      var i = str.lastIndexOf(NEWLINE);
-      column = ~i ? str.length - i : column + str.length;
-    }
-    function position() {
-      var start = { line: lineno, column };
-      return function(node2) {
-        node2.position = new Position(start);
-        whitespace();
-        return node2;
-      };
-    }
-    function Position(start) {
-      this.start = start;
-      this.end = { line: lineno, column };
-      this.source = options.source;
-    }
-    Position.prototype.content = style;
-    function error(msg) {
-      var err = new Error(
-        options.source + ":" + lineno + ":" + column + ": " + msg
-      );
-      err.reason = msg;
-      err.filename = options.source;
-      err.line = lineno;
-      err.column = column;
-      err.source = style;
-      if (options.silent) ;
-      else {
-        throw err;
-      }
+}
+function getCSS$1(transformsObj, target) {
+  const attributes = {
+    css: {
+      container: {}
     }
-    function match(re) {
-      var m = re.exec(style);
-      if (!m) return;
-      var str = m[0];
-      updatePosition(str);
-      style = style.slice(str.length);
-      return m;
+  };
+  const { css } = attributes;
+  const { fittingType } = transformsObj;
+  switch (fittingType) {
+    case fittingTypes.ORIGINAL_SIZE:
+    case fittingTypes.LEGACY_ORIGINAL_SIZE:
+    case fittingTypes.LEGACY_STRIP_ORIGINAL_SIZE:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "no-repeat";
+      break;
+    case fittingTypes.SCALE_TO_FIT:
+    case fittingTypes.LEGACY_STRIP_SCALE_TO_FIT:
+      css.container.backgroundSize = "contain";
+      css.container.backgroundRepeat = "no-repeat";
+      break;
+    case fittingTypes.STRETCH:
+      css.container.backgroundSize = "100% 100%";
+      css.container.backgroundRepeat = "no-repeat";
+      break;
+    case fittingTypes.SCALE_TO_FILL:
+    case fittingTypes.LEGACY_STRIP_SCALE_TO_FILL:
+      css.container.backgroundSize = "cover";
+      css.container.backgroundRepeat = "no-repeat";
+      break;
+    case fittingTypes.TILE_HORIZONTAL:
+    case fittingTypes.LEGACY_STRIP_TILE_HORIZONTAL:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat-x";
+      break;
+    case fittingTypes.TILE_VERTICAL:
+    case fittingTypes.LEGACY_STRIP_TILE_VERTICAL:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat-y";
+      break;
+    case fittingTypes.TILE:
+    case fittingTypes.LEGACY_STRIP_TILE:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat";
+      break;
+    case fittingTypes.LEGACY_STRIP_FIT_AND_TILE:
+      css.container.backgroundSize = "contain";
+      css.container.backgroundRepeat = "repeat";
+      break;
+    case fittingTypes.FIT_AND_TILE:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat";
+      break;
+    // Legacy old editor bg types.
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat";
+      break;
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat-x";
+      break;
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "repeat-y";
+      break;
+    case fittingTypes.LEGACY_BG_NORMAL:
+      css.container.backgroundSize = "auto";
+      css.container.backgroundRepeat = "no-repeat";
+      break;
+  }
+  switch (target.alignment) {
+    case alignTypes.CENTER:
+      css.container.backgroundPosition = "center center";
+      break;
+    case alignTypes.LEFT:
+      css.container.backgroundPosition = "left center";
+      break;
+    case alignTypes.RIGHT:
+      css.container.backgroundPosition = "right center";
+      break;
+    case alignTypes.TOP:
+      css.container.backgroundPosition = "center top";
+      break;
+    case alignTypes.BOTTOM:
+      css.container.backgroundPosition = "center bottom";
+      break;
+    case alignTypes.TOP_RIGHT:
+      css.container.backgroundPosition = "right top";
+      break;
+    case alignTypes.TOP_LEFT:
+      css.container.backgroundPosition = "left top";
+      break;
+    case alignTypes.BOTTOM_RIGHT:
+      css.container.backgroundPosition = "right bottom";
+      break;
+    case alignTypes.BOTTOM_LEFT:
+      css.container.backgroundPosition = "left bottom";
+      break;
+  }
+  return attributes;
+}
+function alignTypeToPosition(verticalMiddle, horizontalMiddle, target) {
+  return {
+    [alignTypes.TOP_LEFT]: { top: 0, left: 0 },
+    [alignTypes.TOP_RIGHT]: { top: 0, right: 0 },
+    [alignTypes.TOP]: { top: 0, left: horizontalMiddle },
+    [alignTypes.BOTTOM_LEFT]: { bottom: 0, left: 0 },
+    [alignTypes.BOTTOM_RIGHT]: { bottom: 0, right: 0 },
+    [alignTypes.BOTTOM]: { bottom: 0, left: horizontalMiddle },
+    [alignTypes.RIGHT]: { top: verticalMiddle, right: 0 },
+    [alignTypes.LEFT]: { top: verticalMiddle, left: 0 },
+    [alignTypes.CENTER]: {
+      width: target.width,
+      height: target.height,
+      objectFit: "none"
     }
-    function whitespace() {
-      match(WHITESPACE_REGEX);
+  };
+}
+const alignTypeToPositionStr = {
+  [alignTypes.CENTER]: "center",
+  [alignTypes.TOP]: "top",
+  [alignTypes.TOP_LEFT]: "top left",
+  [alignTypes.TOP_RIGHT]: "top right",
+  [alignTypes.BOTTOM]: "bottom",
+  [alignTypes.BOTTOM_LEFT]: "bottom left",
+  [alignTypes.BOTTOM_RIGHT]: "bottom right",
+  [alignTypes.LEFT]: "left",
+  [alignTypes.RIGHT]: "right"
+};
+const aligmentDefaults = {
+  position: "absolute",
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+  left: "auto"
+};
+function getCSS(transformsObj, target) {
+  const attributes = {
+    css: {
+      container: {},
+      img: {}
     }
-    function comments(rules) {
-      var c;
-      rules = rules || [];
-      while (c = comment()) {
-        if (c !== false) {
-          rules.push(c);
-        }
+  };
+  const { css } = attributes;
+  const { fittingType } = transformsObj;
+  const alignType = target.alignment;
+  css.container.position = "relative";
+  switch (fittingType) {
+    case fittingTypes.ORIGINAL_SIZE:
+    case fittingTypes.LEGACY_ORIGINAL_SIZE:
+      if (transformsObj.parts && transformsObj.parts.length) {
+        css.img.width = transformsObj.parts[0].width;
+        css.img.height = transformsObj.parts[0].height;
+      } else {
+        css.img.width = transformsObj.src.width;
+        css.img.height = transformsObj.src.height;
       }
-      return rules;
+      break;
+    case fittingTypes.SCALE_TO_FIT:
+    case fittingTypes.LEGACY_FIT_WIDTH:
+    case fittingTypes.LEGACY_FIT_HEIGHT:
+    case fittingTypes.LEGACY_FULL:
+      css.img.width = target.width;
+      css.img.height = target.height;
+      css.img.objectFit = "contain";
+      css.img.objectPosition = alignTypeToPositionStr[alignType] || "unset";
+      break;
+    // BG_NORMAL is a sitebackground legacy for original size fitting type.
+    // target width and height were modified in transform.js
+    case fittingTypes.LEGACY_BG_NORMAL:
+      css.img.width = "100%";
+      css.img.height = "100%";
+      css.img.objectFit = "none";
+      css.img.objectPosition = alignTypeToPositionStr[alignType] || "unset";
+      break;
+    case fittingTypes.STRETCH:
+      css.img.width = target.width;
+      css.img.height = target.height;
+      css.img.objectFit = "fill";
+      break;
+    case fittingTypes.SCALE_TO_FILL:
+      css.img.width = target.width;
+      css.img.height = target.height;
+      css.img.objectFit = "cover";
+      break;
+  }
+  if (typeof css.img.width === "number" && typeof css.img.height === "number" && (css.img.width !== target.width || css.img.height !== target.height)) {
+    const verticalMiddle = Math.round((target.height - css.img.height) / 2);
+    const horizontalMiddle = Math.round((target.width - css.img.width) / 2);
+    Object.assign(css.img, aligmentDefaults, alignTypeToPosition(verticalMiddle, horizontalMiddle, target)[alignType]);
+  }
+  return attributes;
+}
+function getSvgAttr(transformsObj, target) {
+  const attributes = {
+    css: {
+      container: {}
+    },
+    attr: {
+      container: {},
+      img: {}
     }
-    function comment() {
-      var pos = position();
-      if (FORWARD_SLASH != style.charAt(0) || ASTERISK != style.charAt(1)) return;
-      var i = 2;
-      while (EMPTY_STRING != style.charAt(i) && (ASTERISK != style.charAt(i) || FORWARD_SLASH != style.charAt(i + 1))) {
-        ++i;
+  };
+  const { css, attr } = attributes;
+  const { fittingType } = transformsObj;
+  const alignType = target.alignment;
+  const { width: sourceWidth, height: sourceHeight } = transformsObj.src;
+  let imageScale;
+  css.container.position = "relative";
+  switch (fittingType) {
+    case fittingTypes.ORIGINAL_SIZE:
+    case fittingTypes.LEGACY_ORIGINAL_SIZE:
+    case fittingTypes.TILE:
+      if (transformsObj.parts && transformsObj.parts.length) {
+        attr.img.width = transformsObj.parts[0].width;
+        attr.img.height = transformsObj.parts[0].height;
+      } else {
+        attr.img.width = sourceWidth;
+        attr.img.height = sourceHeight;
       }
-      i += 2;
-      if (EMPTY_STRING === style.charAt(i - 1)) {
-        return error("End of comment missing");
+      attr.img.preserveAspectRatio = "xMidYMid slice";
+      break;
+    case fittingTypes.SCALE_TO_FIT:
+    case fittingTypes.LEGACY_FIT_WIDTH:
+    case fittingTypes.LEGACY_FIT_HEIGHT:
+    case fittingTypes.LEGACY_FULL:
+      attr.img.width = "100%";
+      attr.img.height = "100%";
+      attr.img.transform = "";
+      attr.img.preserveAspectRatio = "";
+      break;
+    case fittingTypes.STRETCH:
+      attr.img.width = target.width;
+      attr.img.height = target.height;
+      attr.img.x = 0;
+      attr.img.y = 0;
+      attr.img.transform = "";
+      attr.img.preserveAspectRatio = "none";
+      break;
+    case fittingTypes.SCALE_TO_FILL:
+      if (!isImageTransformApplicable(transformsObj.src.id)) {
+        imageScale = getDimension(sourceWidth, sourceHeight, target.width, target.height, transformTypes.FILL);
+        attr.img.width = imageScale.width;
+        attr.img.height = imageScale.height;
+      } else {
+        attr.img.width = target.width;
+        attr.img.height = target.height;
       }
-      var str = style.slice(2, i - 2);
-      column += 2;
-      updatePosition(str);
-      style = style.slice(i);
-      column += 2;
-      return pos({
-        type: TYPE_COMMENT,
-        comment: str
-      });
-    }
-    function declaration() {
-      var pos = position();
-      var prop = match(PROPERTY_REGEX);
-      if (!prop) return;
-      comment();
-      if (!match(COLON_REGEX)) return error("property missing ':'");
-      var val = match(VALUE_REGEX);
-      var ret = pos({
-        type: TYPE_DECLARATION,
-        property: trim(prop[0].replace(COMMENT_REGEX, EMPTY_STRING)),
-        value: val ? trim(val[0].replace(COMMENT_REGEX, EMPTY_STRING)) : EMPTY_STRING
-      });
-      match(SEMICOLON_REGEX);
-      return ret;
+      attr.img.x = 0;
+      attr.img.y = 0;
+      attr.img.transform = "";
+      attr.img.preserveAspectRatio = "xMidYMid slice";
+      break;
+  }
+  if (typeof attr.img.width === "number" && typeof attr.img.height === "number" && (attr.img.width !== target.width || attr.img.height !== target.height)) {
+    let x = 0;
+    let y = 0;
+    let right;
+    let bottom;
+    if (fittingType === fittingTypes.TILE) {
+      right = target.width % attr.img.width;
+      bottom = target.height % attr.img.height;
+    } else {
+      right = target.width - attr.img.width;
+      bottom = target.height - attr.img.height;
     }
-    function declarations() {
-      var decls = [];
-      comments(decls);
-      var decl;
-      while (decl = declaration()) {
-        if (decl !== false) {
-          decls.push(decl);
-          comments(decls);
-        }
-      }
-      return decls;
+    const center = Math.round(right / 2);
+    const middle = Math.round(bottom / 2);
+    switch (alignType) {
+      case alignTypes.TOP_LEFT:
+        x = 0;
+        y = 0;
+        break;
+      case alignTypes.TOP:
+        x = center;
+        y = 0;
+        break;
+      case alignTypes.TOP_RIGHT:
+        x = right;
+        y = 0;
+        break;
+      case alignTypes.LEFT:
+        x = 0;
+        y = middle;
+        break;
+      case alignTypes.CENTER:
+        x = center;
+        y = middle;
+        break;
+      case alignTypes.RIGHT:
+        x = right;
+        y = middle;
+        break;
+      case alignTypes.BOTTOM_LEFT:
+        x = 0;
+        y = bottom;
+        break;
+      case alignTypes.BOTTOM:
+        x = center;
+        y = bottom;
+        break;
+      case alignTypes.BOTTOM_RIGHT:
+        x = right;
+        y = bottom;
+        break;
     }
-    whitespace();
-    return declarations();
+    attr.img.x = x;
+    attr.img.y = y;
   }
-  function trim(str) {
-    return str ? str.replace(TRIM_REGEX, EMPTY_STRING) : EMPTY_STRING;
+  attr.container.width = target.width;
+  attr.container.height = target.height;
+  attr.container.viewBox = [0, 0, target.width, target.height].join(" ");
+  return attributes;
+}
+function getAttributes(transformsObj, target) {
+  let attributesGetter;
+  if (target.htmlTag === htmlTag.BG) {
+    attributesGetter = getCSS$1;
+  } else if (target.htmlTag === htmlTag.SVG) {
+    attributesGetter = getSvgAttr;
+  } else {
+    attributesGetter = getCSS;
   }
-  cjs$1 = index;
-  return cjs$1;
-}
-var hasRequiredCjs$1;
-function requireCjs$1() {
-  if (hasRequiredCjs$1) return cjs$2;
-  hasRequiredCjs$1 = 1;
-  var __importDefault = cjs$2 && cjs$2.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
-  };
-  Object.defineProperty(cjs$2, "__esModule", { value: true });
-  cjs$2.default = StyleToObject;
-  const inline_style_parser_1 = __importDefault(requireCjs$2());
-  function StyleToObject(style, iterator) {
-    let styleObject = null;
-    if (!style || typeof style !== "string") {
-      return styleObject;
+  return attributesGetter(transformsObj, target);
+}
+function isMobile() {
+  return getFeature("isMobile");
+}
+function setTransformParts(transformsObj, src, target) {
+  let rect;
+  if (src.crop) {
+    rect = getOverlappingRect(src, src.crop);
+    if (rect) {
+      transformsObj.src.width = rect.width;
+      transformsObj.src.height = rect.height;
+      transformsObj.src.isCropped = true;
+      transformsObj.parts.push(getCropPart(rect));
     }
-    const declarations = (0, inline_style_parser_1.default)(style);
-    const hasIterator = typeof iterator === "function";
-    declarations.forEach((declaration) => {
-      if (declaration.type !== "declaration") {
-        return;
-      }
-      const { property, value } = declaration;
-      if (hasIterator) {
-        iterator(property, value, declaration);
-      } else if (value) {
-        styleObject = styleObject || {};
-        styleObject[property] = value;
+  }
+  switch (transformsObj.fittingType) {
+    case fittingTypes.SCALE_TO_FIT:
+    case fittingTypes.LEGACY_FIT_WIDTH:
+    case fittingTypes.LEGACY_FIT_HEIGHT:
+    case fittingTypes.LEGACY_FULL:
+    case fittingTypes.FIT_AND_TILE:
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE:
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
+    case fittingTypes.LEGACY_BG_NORMAL:
+      transformsObj.parts.push(getFitPart(transformsObj, target));
+      break;
+    case fittingTypes.SCALE_TO_FILL:
+      transformsObj.parts.push(getFillPart(transformsObj, target));
+      break;
+    case fittingTypes.STRETCH:
+      transformsObj.parts.push(getStretchPart(transformsObj, target));
+      break;
+    case fittingTypes.TILE_HORIZONTAL:
+    case fittingTypes.TILE_VERTICAL:
+    case fittingTypes.TILE:
+    case fittingTypes.LEGACY_ORIGINAL_SIZE:
+    case fittingTypes.ORIGINAL_SIZE:
+      rect = getAlignedRect(transformsObj.src, target, transformsObj.focalPoint, target.alignment);
+      if (transformsObj.src.isCropped) {
+        Object.assign(transformsObj.parts[0], rect);
+        transformsObj.src.width = rect.width;
+        transformsObj.src.height = rect.height;
+      } else {
+        transformsObj.parts.push(getCropPart(rect));
       }
-    });
-    return styleObject;
+      break;
+    // ---------------------------------------------------------------------------------------
+    // handles a legacy bug on bgImageStrip, background html tag
+    // component Full Width Strip stored incorrect image source width and height
+    // ---------------------------------------------------------------------------------------
+    case fittingTypes.LEGACY_STRIP_TILE_HORIZONTAL:
+    case fittingTypes.LEGACY_STRIP_TILE_VERTICAL:
+    case fittingTypes.LEGACY_STRIP_TILE:
+    case fittingTypes.LEGACY_STRIP_ORIGINAL_SIZE:
+      transformsObj.parts.push(getLegacyCropPart(target));
+      break;
+    case fittingTypes.LEGACY_STRIP_SCALE_TO_FIT:
+    case fittingTypes.LEGACY_STRIP_FIT_AND_TILE:
+      transformsObj.parts.push(getLegacyFitPart(target));
+      break;
+    case fittingTypes.LEGACY_STRIP_SCALE_TO_FILL:
+      transformsObj.parts.push(getLegacyFillPart(target));
+      break;
   }
-  return cjs$2;
-}
-var utilities = {};
-var hasRequiredUtilities$1;
-function requireUtilities$1() {
-  if (hasRequiredUtilities$1) return utilities;
-  hasRequiredUtilities$1 = 1;
-  Object.defineProperty(utilities, "__esModule", { value: true });
-  utilities.camelCase = void 0;
-  var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9_-]+$/;
-  var HYPHEN_REGEX = /-([a-z])/g;
-  var NO_HYPHEN_REGEX = /^[^-]+$/;
-  var VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o|khtml)-/;
-  var MS_VENDOR_PREFIX_REGEX = /^-(ms)-/;
-  var skipCamelCase = function(property) {
-    return !property || NO_HYPHEN_REGEX.test(property) || CUSTOM_PROPERTY_REGEX.test(property);
+}
+function getFitPart(transformsObj, target) {
+  const transformedData = getTransformData(transformsObj.src.width, transformsObj.src.height, transformTypes.FIT, target, transformsObj.devicePixelRatio, transformsObj.upscaleMethod);
+  const isMissingSrcDimensions = !transformsObj.src.width || !transformsObj.src.height;
+  const transformType = isMissingSrcDimensions ? transformTypes.FIT : transformTypes.FILL;
+  return {
+    transformType,
+    width: Math.round(transformedData.width),
+    height: Math.round(transformedData.height),
+    alignment: alignTypesMap.center,
+    upscale: transformedData.scaleFactor > 1,
+    forceUSM: transformedData.forceUSM,
+    scaleFactor: transformedData.scaleFactor,
+    cssUpscaleNeeded: transformedData.cssUpscaleNeeded,
+    upscaleMethodValue: transformedData.upscaleMethodValue
+  };
+}
+function getFillPart(transformsObj, target) {
+  const transformedData = getTransformData(transformsObj.src.width, transformsObj.src.height, transformTypes.FILL, target, transformsObj.devicePixelRatio, transformsObj.upscaleMethod);
+  const focalPoint = getFocalPoint(transformsObj.focalPoint);
+  const transformType = focalPoint ? transformTypes.FILL_FOCAL : transformTypes.FILL;
+  return {
+    transformType,
+    width: Math.round(transformedData.width),
+    height: Math.round(transformedData.height),
+    alignment: getAlignment(target),
+    focalPointX: focalPoint && focalPoint.x,
+    focalPointY: focalPoint && focalPoint.y,
+    upscale: transformedData.scaleFactor > 1,
+    forceUSM: transformedData.forceUSM,
+    scaleFactor: transformedData.scaleFactor,
+    cssUpscaleNeeded: transformedData.cssUpscaleNeeded,
+    upscaleMethodValue: transformedData.upscaleMethodValue
   };
-  var capitalize = function(match, character) {
-    return character.toUpperCase();
+}
+function getStretchPart(transformsObj, target) {
+  const scaleFactor = getScaleFactor(transformsObj.src.width, transformsObj.src.height, target.width, target.height, transformTypes.FILL);
+  const clonedTarget = { ...target };
+  clonedTarget.width = transformsObj.src.width * scaleFactor;
+  clonedTarget.height = transformsObj.src.height * scaleFactor;
+  return getFitPart(transformsObj, clonedTarget);
+}
+function getCropPart(rect) {
+  return {
+    transformType: transformTypes.CROP,
+    x: Math.round(rect.x),
+    y: Math.round(rect.y),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+    upscale: false,
+    forceUSM: false,
+    scaleFactor: 1,
+    cssUpscaleNeeded: false
   };
-  var trimHyphen = function(match, prefix) {
-    return "".concat(prefix, "-");
+}
+function getLegacyFitPart(target) {
+  return {
+    transformType: transformTypes.FIT,
+    width: Math.round(target.width),
+    height: Math.round(target.height),
+    upscale: false,
+    forceUSM: true,
+    scaleFactor: 1,
+    cssUpscaleNeeded: false
   };
-  var camelCase = function(property, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    if (skipCamelCase(property)) {
-      return property;
-    }
-    property = property.toLowerCase();
-    if (options.reactCompat) {
-      property = property.replace(MS_VENDOR_PREFIX_REGEX, trimHyphen);
-    } else {
-      property = property.replace(VENDOR_PREFIX_REGEX, trimHyphen);
-    }
-    return property.replace(HYPHEN_REGEX, capitalize);
+}
+function getLegacyFillPart(target) {
+  return {
+    transformType: transformTypes.LEGACY_FILL,
+    width: Math.round(target.width),
+    height: Math.round(target.height),
+    alignment: getAlignment(target),
+    upscale: false,
+    forceUSM: true,
+    scaleFactor: 1,
+    cssUpscaleNeeded: false
   };
-  utilities.camelCase = camelCase;
-  return utilities;
-}
-var cjs;
-var hasRequiredCjs;
-function requireCjs() {
-  if (hasRequiredCjs) return cjs;
-  hasRequiredCjs = 1;
-  var __importDefault = cjs && cjs.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
+}
+function getLegacyCropPart(target) {
+  return {
+    transformType: transformTypes.LEGACY_CROP,
+    width: Math.round(target.width),
+    height: Math.round(target.height),
+    alignment: getAlignment(target),
+    upscale: false,
+    forceUSM: false,
+    scaleFactor: 1,
+    cssUpscaleNeeded: false
   };
-  var style_to_object_1 = __importDefault(requireCjs$1());
-  var utilities_1 = requireUtilities$1();
-  function StyleToJS(style, options) {
-    var output = {};
-    if (!style || typeof style !== "string") {
-      return output;
-    }
-    (0, style_to_object_1.default)(style, function(property, value) {
-      if (property && value) {
-        output[(0, utilities_1.camelCase)(property, options)] = value;
-      }
-    });
-    return output;
+}
+function setTransformOptions(transformsObj, options) {
+  options = options || {};
+  transformsObj.quality = getQuality(transformsObj, options);
+  transformsObj.progressive = getProgressive(options);
+  transformsObj.watermark = getWatermark(options);
+  transformsObj.autoEncode = options.autoEncode ?? true;
+  transformsObj.encoding = options == null ? void 0 : options.encoding;
+  transformsObj.unsharpMask = getUnsharpMask(transformsObj, options);
+  transformsObj.filters = getFilters(options);
+}
+function getWatermark(options) {
+  return options.watermark;
+}
+function getProgressive(options) {
+  return options.progressive !== false;
+}
+function getQuality(transformsObj, options) {
+  const isPNG2 = transformsObj.fileType === fileType.PNG;
+  const isJPG2 = transformsObj.fileType === fileType.JPG;
+  const isWEBP2 = transformsObj.fileType === fileType.WEBP;
+  const isAVIF2 = transformsObj.fileType === fileType.AVIF;
+  const isQualitySupported = isJPG2 || isPNG2 || isWEBP2 || isAVIF2;
+  if (isQualitySupported) {
+    const transformData = last(transformsObj.parts);
+    const defaultQuality = getPreferredImageQuality(transformData.width, transformData.height);
+    let quality = options.quality && options.quality >= 5 && options.quality <= 90 ? options.quality : defaultQuality;
+    quality = isPNG2 ? quality + 5 : quality;
+    return quality;
   }
-  StyleToJS.default = StyleToJS;
-  cjs = StyleToJS;
-  return cjs;
-}
-var hasRequiredUtilities;
-function requireUtilities() {
-  if (hasRequiredUtilities) return utilities$1;
-  hasRequiredUtilities = 1;
-  (function(exports$1) {
-    var __importDefault = utilities$1 && utilities$1.__importDefault || function(mod) {
-      return mod && mod.__esModule ? mod : { "default": mod };
-    };
-    Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.returnFirstArg = exports$1.canTextBeChildOfNode = exports$1.ELEMENTS_WITH_NO_TEXT_CHILDREN = exports$1.PRESERVE_CUSTOM_ATTRIBUTES = void 0;
-    exports$1.isCustomComponent = isCustomComponent;
-    exports$1.setStyleProp = setStyleProp;
-    var react_1 = React__default;
-    var style_to_js_1 = __importDefault(requireCjs());
-    var RESERVED_SVG_MATHML_ELEMENTS = /* @__PURE__ */ new Set([
-      "annotation-xml",
-      "color-profile",
-      "font-face",
-      "font-face-src",
-      "font-face-uri",
-      "font-face-format",
-      "font-face-name",
-      "missing-glyph"
-    ]);
-    function isCustomComponent(tagName, props) {
-      if (!tagName.includes("-")) {
-        return Boolean(props && typeof props.is === "string");
-      }
-      if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
-        return false;
-      }
-      return true;
-    }
-    var styleOptions = {
-      reactCompat: true
-    };
-    function setStyleProp(style, props) {
-      if (typeof style !== "string") {
-        return;
-      }
-      if (!style.trim()) {
-        props.style = {};
-        return;
-      }
-      try {
-        props.style = (0, style_to_js_1.default)(style, styleOptions);
-      } catch (error) {
-        props.style = {};
-      }
-    }
-    exports$1.PRESERVE_CUSTOM_ATTRIBUTES = Number(react_1.version.split(".")[0]) >= 16;
-    exports$1.ELEMENTS_WITH_NO_TEXT_CHILDREN = /* @__PURE__ */ new Set([
-      "tr",
-      "tbody",
-      "thead",
-      "tfoot",
-      "colgroup",
-      "table",
-      "head",
-      "html",
-      "frameset"
-    ]);
-    var canTextBeChildOfNode = function(node2) {
-      return !exports$1.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node2.name);
-    };
-    exports$1.canTextBeChildOfNode = canTextBeChildOfNode;
-    var returnFirstArg = function(arg) {
-      return arg;
+  return 0;
+}
+function getFilters(options) {
+  const filterOptions = options.filters || {};
+  const filters = {};
+  if (isValidImageFilter(filterOptions[imageFilters.CONTRAST], -100, 100)) {
+    filters[imageFilters.CONTRAST] = filterOptions[imageFilters.CONTRAST];
+  }
+  if (isValidImageFilter(filterOptions[imageFilters.BRIGHTNESS], -100, 100)) {
+    filters[imageFilters.BRIGHTNESS] = filterOptions[imageFilters.BRIGHTNESS];
+  }
+  if (isValidImageFilter(filterOptions[imageFilters.SATURATION], -100, 100)) {
+    filters[imageFilters.SATURATION] = filterOptions[imageFilters.SATURATION];
+  }
+  if (isValidImageFilter(filterOptions[imageFilters.HUE], -180, 180)) {
+    filters[imageFilters.HUE] = filterOptions[imageFilters.HUE];
+  }
+  if (isValidImageFilter(filterOptions[imageFilters.BLUR], 0, 100)) {
+    filters[imageFilters.BLUR] = filterOptions[imageFilters.BLUR];
+  }
+  return filters;
+}
+function isValidImageFilter(filterValue, minValue, maxValue) {
+  return typeof filterValue === "number" && !isNaN(filterValue) && filterValue !== 0 && filterValue >= minValue && filterValue <= maxValue;
+}
+function getUnsharpMask(transformsObj, options) {
+  var _a, _b, _c;
+  if (isUSMValid(options.unsharpMask)) {
+    return {
+      radius: roundToFixed((_a = options.unsharpMask) == null ? void 0 : _a.radius, 2),
+      amount: roundToFixed((_b = options.unsharpMask) == null ? void 0 : _b.amount, 2),
+      threshold: roundToFixed((_c = options.unsharpMask) == null ? void 0 : _c.threshold, 2)
     };
-    exports$1.returnFirstArg = returnFirstArg;
-  })(utilities$1);
-  return utilities$1;
-}
-var hasRequiredAttributesToProps;
-function requireAttributesToProps() {
-  if (hasRequiredAttributesToProps) return attributesToProps;
-  hasRequiredAttributesToProps = 1;
-  Object.defineProperty(attributesToProps, "__esModule", { value: true });
-  attributesToProps.default = attributesToProps$1;
-  var react_property_1 = requireLib$1();
-  var utilities_1 = requireUtilities();
-  var UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
-  var UNCONTROLLED_COMPONENT_NAMES = ["input", "select", "textarea"];
-  var valueOnlyInputs = {
-    reset: true,
-    submit: true
+  } else if (!isZeroUSM(options.unsharpMask) && isUSMNeeded(transformsObj)) {
+    return defaultUSM;
+  }
+  return;
+}
+function isUSMNeeded(transformsObj) {
+  const transformPart = last(transformsObj.parts);
+  const upscale = transformPart.scaleFactor >= 1;
+  return !upscale || transformPart.forceUSM || transformPart.transformType === transformTypes.FIT;
+}
+function isUSMValid(usm) {
+  usm = usm || {};
+  const radius = typeof usm.radius === "number" && !isNaN(usm.radius) && usm.radius >= 0.1 && usm.radius <= 500;
+  const amount = typeof usm.amount === "number" && !isNaN(usm.amount) && usm.amount >= 0 && usm.amount <= 10;
+  const threshold = typeof usm.threshold === "number" && !isNaN(usm.threshold) && usm.threshold >= 0 && usm.threshold <= 255;
+  return radius && amount && threshold;
+}
+function isZeroUSM(usm) {
+  usm = usm || {};
+  return typeof usm.radius === "number" && !isNaN(usm.radius) && usm.radius === 0 && typeof usm.amount === "number" && !isNaN(usm.amount) && usm.amount === 0 && typeof usm.threshold === "number" && !isNaN(usm.threshold) && usm.threshold === 0;
+}
+function getTransform(fittingType, src, target, options) {
+  const _isSEOBot = isSEOBot(options);
+  const fileType2 = getFileType(src.id);
+  const fileName = getFileName(src.id, src.name);
+  const devicePixelRatio = _isSEOBot ? 1 : getDevicePixelRatio(target);
+  const fileExtension = getFileExtension(src.id);
+  const preferredExtension = fileExtension;
+  const canTransformImage = isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation);
+  const transformsObj = {
+    fileName,
+    fileExtension,
+    fileType: fileType2,
+    fittingType,
+    preferredExtension,
+    src: {
+      id: src.id,
+      width: src.width,
+      height: src.height,
+      isCropped: false,
+      isAnimated: imageIsAnimated(src.id, options == null ? void 0 : options.hasAnimation)
+    },
+    focalPoint: {
+      x: src.focalPoint && src.focalPoint.x,
+      y: src.focalPoint && src.focalPoint.y
+    },
+    parts: [],
+    // options - general
+    devicePixelRatio,
+    quality: 0,
+    upscaleMethod: getUpscaleString(options),
+    progressive: true,
+    watermark: "",
+    unsharpMask: {},
+    filters: {},
+    transformed: canTransformImage,
+    allowFullGIFTransformation: options == null ? void 0 : options.allowFullGIFTransformation,
+    isPlaceholderFlow: options == null ? void 0 : options.isPlaceholderFlow
   };
-  function attributesToProps$1(attributes, nodeName) {
-    if (attributes === void 0) {
-      attributes = {};
-    }
-    var props = {};
-    var isInputValueOnly = Boolean(attributes.type && valueOnlyInputs[attributes.type]);
-    for (var attributeName in attributes) {
-      var attributeValue = attributes[attributeName];
-      if ((0, react_property_1.isCustomAttribute)(attributeName)) {
-        props[attributeName] = attributeValue;
-        continue;
-      }
-      var attributeNameLowerCased = attributeName.toLowerCase();
-      var propName = getPropName(attributeNameLowerCased);
-      if (propName) {
-        var propertyInfo = (0, react_property_1.getPropertyInfo)(propName);
-        if (UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) && UNCONTROLLED_COMPONENT_NAMES.includes(nodeName) && !isInputValueOnly) {
-          propName = getPropName("default" + attributeNameLowerCased);
+  if (canTransformImage) {
+    setTransformParts(transformsObj, src, target);
+    setTransformOptions(transformsObj, options);
+  }
+  return transformsObj;
+}
+function getTarget(fittingType, src, target) {
+  const targetObj = { ...target };
+  const _isMobile = isMobile();
+  switch (fittingType) {
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE:
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
+    case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
+    case fittingTypes.LEGACY_BG_NORMAL:
+      const maxBGSiteLegacyWidth = _isMobile ? MOBILE_MAX_BG_SITE_LEGACY_WIDTH : DSKTP_MAX_BG_SITE_LEGACY_WIDTH;
+      const maxBGSiteLegacyHeight = _isMobile ? MOBILE_MAX_BG_SITE_LEGACY_HEIGHT : DSKTP_MAX_BG_SITE_LEGACY_HEIGHT;
+      targetObj.width = Math.min(maxBGSiteLegacyWidth, src.width);
+      targetObj.height = Math.min(maxBGSiteLegacyHeight, Math.round(targetObj.width / (src.width / src.height)));
+      targetObj.pixelAspectRatio = 1;
+  }
+  return targetObj;
+}
+const fitTemplate = template`fit/w_${"width"},h_${"height"}`;
+const fillTemplate = template`fill/w_${"width"},h_${"height"},al_${"alignment"}`;
+const fillFocalTemplate = template`fill/w_${"width"},h_${"height"},fp_${"focalPointX"}_${"focalPointY"}`;
+const cropTemplate = template`crop/x_${"x"},y_${"y"},w_${"width"},h_${"height"}`;
+const legacyCropTemplate = template`crop/w_${"width"},h_${"height"},al_${"alignment"}`;
+const legacyFillTemplate = template`fill/w_${"width"},h_${"height"},al_${"alignment"}`;
+const upscaleTemplate = template`,lg_${"upscaleMethodValue"}`;
+const qualityTemplate = template`,q_${"quality"}`;
+const qualityAutoTemplate = template`,quality_auto`;
+const unSharpMaskTemplate = template`,usm_${"radius"}_${"amount"}_${"threshold"}`;
+const nonProgressiveTemplate = template`,bl`;
+const watermarkTemplate = template`,wm_${"watermark"}`;
+const filterTemplatesMap = {
+  [imageFilters.CONTRAST]: template`,con_${"contrast"}`,
+  [imageFilters.BRIGHTNESS]: template`,br_${"brightness"}`,
+  [imageFilters.SATURATION]: template`,sat_${"saturation"}`,
+  [imageFilters.HUE]: template`,hue_${"hue"}`,
+  [imageFilters.BLUR]: template`,blur_${"blur"}`
+};
+const autoEncodeTemplate = template`,enc_auto`;
+const AVIFEncodeTemplate = template`,enc_avif`;
+const pAVIFEncodeTemplate = template`,enc_pavif`;
+const animatedTransformTemplate = template`,pstr`;
+const animatedGIFTransformTemplate = template`,anm_all`;
+function getImageURI(transformsObj) {
+  var _a;
+  const transformsObjStrArr = [];
+  transformsObj.parts.forEach((transformPart) => {
+    switch (transformPart.transformType) {
+      case transformTypes.CROP:
+        transformsObjStrArr.push(cropTemplate(transformPart));
+        break;
+      case transformTypes.LEGACY_CROP:
+        transformsObjStrArr.push(legacyCropTemplate(transformPart));
+        break;
+      case transformTypes.LEGACY_FILL:
+        let legacyFillStr = legacyFillTemplate(transformPart);
+        if (transformPart.upscale) {
+          legacyFillStr += upscaleTemplate(transformPart);
         }
-        props[propName] = attributeValue;
-        switch (propertyInfo && propertyInfo.type) {
-          case react_property_1.BOOLEAN:
-            props[propName] = true;
-            break;
-          case react_property_1.OVERLOADED_BOOLEAN:
-            if (attributeValue === "") {
-              props[propName] = true;
-            }
-            break;
+        transformsObjStrArr.push(legacyFillStr);
+        break;
+      case transformTypes.FIT:
+        let fitStr = fitTemplate(transformPart);
+        if (transformPart.upscale) {
+          fitStr += upscaleTemplate(transformPart);
         }
-        continue;
-      }
-      if (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES) {
-        props[attributeName] = attributeValue;
-      }
+        transformsObjStrArr.push(fitStr);
+        break;
+      case transformTypes.FILL:
+        let fillStr = fillTemplate(transformPart);
+        if (transformPart.upscale) {
+          fillStr += upscaleTemplate(transformPart);
+        }
+        transformsObjStrArr.push(fillStr);
+        break;
+      case transformTypes.FILL_FOCAL:
+        let fillFocalStr = fillFocalTemplate(transformPart);
+        if (transformPart.upscale) {
+          fillFocalStr += upscaleTemplate(transformPart);
+        }
+        transformsObjStrArr.push(fillFocalStr);
+        break;
     }
-    (0, utilities_1.setStyleProp)(attributes.style, props);
-    return props;
+  });
+  let transformsStr = transformsObjStrArr.join("/");
+  if (transformsObj.quality) {
+    transformsStr += qualityTemplate(transformsObj);
   }
-  function getPropName(attributeName) {
-    return react_property_1.possibleStandardNames[attributeName];
+  if (transformsObj.unsharpMask) {
+    transformsStr += unSharpMaskTemplate(transformsObj.unsharpMask);
   }
-  return attributesToProps;
-}
-var domToReact = {};
-var hasRequiredDomToReact;
-function requireDomToReact() {
-  if (hasRequiredDomToReact) return domToReact;
-  hasRequiredDomToReact = 1;
-  var __importDefault = domToReact && domToReact.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
-  };
-  Object.defineProperty(domToReact, "__esModule", { value: true });
-  domToReact.default = domToReact$1;
-  var react_1 = React__default;
-  var attributes_to_props_1 = __importDefault(requireAttributesToProps());
-  var utilities_1 = requireUtilities();
-  var React = {
-    cloneElement: react_1.cloneElement,
-    createElement: react_1.createElement,
-    isValidElement: react_1.isValidElement
-  };
-  function domToReact$1(nodes, options) {
-    if (options === void 0) {
-      options = {};
+  if (!transformsObj.progressive) {
+    transformsStr += nonProgressiveTemplate(transformsObj);
+  }
+  if (transformsObj.watermark) {
+    transformsStr += watermarkTemplate(transformsObj);
+  }
+  if (transformsObj.filters) {
+    transformsStr += Object.keys(transformsObj.filters).map((filterName) => filterTemplatesMap[filterName](transformsObj.filters)).join("");
+  }
+  if (transformsObj.fileType !== fileType.GIF) {
+    if (transformsObj.encoding === encodingTypes.AVIF) {
+      transformsStr += AVIFEncodeTemplate(transformsObj);
+      transformsStr += qualityAutoTemplate(transformsObj);
+    } else if (transformsObj.encoding === encodingTypes.PAVIF) {
+      transformsStr += pAVIFEncodeTemplate(transformsObj);
+      transformsStr += qualityAutoTemplate(transformsObj);
+    } else if (transformsObj.autoEncode) {
+      transformsStr += autoEncodeTemplate(transformsObj);
     }
-    var reactElements = [];
-    var hasReplace = typeof options.replace === "function";
-    var transform = options.transform || utilities_1.returnFirstArg;
-    var _a = options.library || React, cloneElement = _a.cloneElement, createElement = _a.createElement, isValidElement = _a.isValidElement;
-    var nodesLength = nodes.length;
-    for (var index = 0; index < nodesLength; index++) {
-      var node2 = nodes[index];
-      if (hasReplace) {
-        var replaceElement = options.replace(node2, index);
-        if (isValidElement(replaceElement)) {
-          if (nodesLength > 1) {
-            replaceElement = cloneElement(replaceElement, {
-              key: replaceElement.key || index
-            });
-          }
-          reactElements.push(transform(replaceElement, node2, index));
-          continue;
-        }
-      }
-      if (node2.type === "text") {
-        var isWhitespace = !node2.data.trim().length;
-        if (isWhitespace && node2.parent && !(0, utilities_1.canTextBeChildOfNode)(node2.parent)) {
-          continue;
-        }
-        if (options.trim && isWhitespace) {
-          continue;
-        }
-        reactElements.push(transform(node2.data, node2, index));
-        continue;
-      }
-      var element = node2;
-      var props = {};
-      if (skipAttributesToProps(element)) {
-        (0, utilities_1.setStyleProp)(element.attribs.style, element.attribs);
-        props = element.attribs;
-      } else if (element.attribs) {
-        props = (0, attributes_to_props_1.default)(element.attribs, element.name);
-      }
-      var children = void 0;
-      switch (node2.type) {
-        case "script":
-        case "style":
-          if (node2.children[0]) {
-            props.dangerouslySetInnerHTML = {
-              __html: node2.children[0].data
-            };
-          }
-          break;
-        case "tag":
-          if (node2.name === "textarea" && node2.children[0]) {
-            props.defaultValue = node2.children[0].data;
-          } else if (node2.children && node2.children.length) {
-            children = domToReact$1(node2.children, options);
-          }
-          break;
-        // skip all other cases (e.g., comment)
-        default:
-          continue;
-      }
-      if (nodesLength > 1) {
-        props.key = index;
-      }
-      reactElements.push(transform(createElement(node2.name, props, children), node2, index));
+  }
+  if (((_a = transformsObj.src) == null ? void 0 : _a.isAnimated) && transformsObj.transformed) {
+    const isGif = isGIF(transformsObj.src.id);
+    const isPlaceholderFlow = transformsObj.isPlaceholderFlow === true;
+    const allowFullGIFTransformation = transformsObj.allowFullGIFTransformation === true;
+    if (isPlaceholderFlow) {
+      transformsStr += animatedTransformTemplate(transformsObj);
+    } else if (isGif && allowFullGIFTransformation) {
+      transformsStr += animatedGIFTransformTemplate(transformsObj);
     }
-    return reactElements.length === 1 ? reactElements[0] : reactElements;
   }
-  function skipAttributesToProps(node2) {
-    return utilities_1.PRESERVE_CUSTOM_ATTRIBUTES && node2.type === "tag" && (0, utilities_1.isCustomComponent)(node2.name, node2.attribs);
+  return `${transformsObj.src.id}/${API_VERSION}/${transformsStr}/${transformsObj.fileName}.${transformsObj.preferredExtension}`;
+}
+function getURI(fittingType, src, target, options = {}, transformObj) {
+  if (isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation)) {
+    if ((isWEBP(src.id) || isAVIF(src.id)) && !options.allowWebpAvifTransforms) {
+      const { alignment, ...transformTarget } = target;
+      src.focalPoint = { x: void 0, y: void 0 };
+      src == null ? true : delete src.crop;
+      transformObj = getTransform(fittingType, src, transformTarget, options);
+    } else {
+      transformObj = transformObj || getTransform(fittingType, src, target, options);
+    }
+    return getImageURI(transformObj);
+  }
+  return src.id;
+}
+function getSrcset(fittingType, src, target, options, data) {
+  const dpr = target.pixelAspectRatio || 1;
+  return {
+    dpr: [
+      `${dpr === 1 ? data.uri : getURI(fittingType, src, {
+        ...target,
+        pixelAspectRatio: 1
+      }, options)} 1x`,
+      `${dpr === 2 ? data.uri : getURI(fittingType, src, {
+        ...target,
+        pixelAspectRatio: 2
+      }, options)} 2x`
+    ]
+  };
+}
+const ALIGN_TYPE_TO_POSITION = {
+  [alignTypes.CENTER]: "50% 50%",
+  [alignTypes.TOP_LEFT]: "0% 0%",
+  [alignTypes.TOP_RIGHT]: "100% 0%",
+  [alignTypes.TOP]: "50% 0%",
+  [alignTypes.BOTTOM_LEFT]: "0% 100%",
+  [alignTypes.BOTTOM_RIGHT]: "100% 100%",
+  [alignTypes.BOTTOM]: "50% 100%",
+  [alignTypes.RIGHT]: "100% 50%",
+  [alignTypes.LEFT]: "0% 50%"
+};
+const POSITION_TO_ALIGN_TYPE = Object.entries(ALIGN_TYPE_TO_POSITION).reduce((acc, [align, position]) => {
+  acc[position] = align;
+  return acc;
+}, {});
+const TILE_FITTING_TYPES = [
+  fittingTypes.TILE,
+  fittingTypes.TILE_HORIZONTAL,
+  fittingTypes.TILE_VERTICAL,
+  fittingTypes.LEGACY_BG_FIT_AND_TILE,
+  fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL,
+  fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL
+];
+const NON_SCALING_FITTING_TYPES = [
+  fittingTypes.LEGACY_ORIGINAL_SIZE,
+  fittingTypes.ORIGINAL_SIZE,
+  fittingTypes.LEGACY_BG_NORMAL
+];
+function getIsFakeTile(fittingType, src, { width: targetWidth, height: targetHeight }) {
+  return fittingType === fittingTypes.TILE && src.width > targetWidth && src.height > targetHeight;
+}
+function getScaledDimensions(fittingType, src, { width, height }, isSEOBot2 = false) {
+  if (isSEOBot2) {
+    return { width, height };
+  }
+  const isScalable = !NON_SCALING_FITTING_TYPES.includes(fittingType);
+  const isFakeTile = getIsFakeTile(fittingType, src, { width, height });
+  const isTile = !isFakeTile && TILE_FITTING_TYPES.includes(fittingType);
+  const _width = isTile ? src.width : width;
+  const _height = isTile ? src.height : height;
+  const scaleFactor = isScalable ? getScaleFactorByWidth(_width, isPNG(src.id)) : 1;
+  return {
+    width: isFakeTile ? 1920 : _width * scaleFactor,
+    height: _height * scaleFactor
+  };
+}
+function getConvertedFitting(fittingType, isFakeTile) {
+  const isTile = TILE_FITTING_TYPES.includes(fittingType) && !isFakeTile;
+  const isFill = fittingType === fittingTypes.SCALE_TO_FILL;
+  return isFill || isTile ? fittingTypes.SCALE_TO_FIT : fittingType;
+}
+function validateTargetDimensions(src, { width, height }) {
+  if (!width || !height) {
+    const _width = width || Math.min(980, src.width);
+    const heightRatio = _width / src.width;
+    return {
+      width: _width,
+      height: height || src.height * heightRatio
+    };
+  }
+  return { width, height };
+}
+function getScaleFactorByWidth(width, isHighQuality) {
+  if (width > 900) {
+    return isHighQuality ? 0.05 : 0.15;
+  } else if (width > 500) {
+    return isHighQuality ? 0.1 : 0.18;
+  } else if (width > 200) {
+    return 0.25;
+  }
+  return 1;
+}
+function getBlurValue(width, fittingType, isSEOBot2) {
+  if (isSEOBot2) {
+    return 0;
+  }
+  if (TILE_FITTING_TYPES.includes(fittingType)) {
+    return 1;
   }
-  return domToReact;
-}
-var hasRequiredLib;
-function requireLib() {
-  if (hasRequiredLib) return lib$3;
-  hasRequiredLib = 1;
-  (function(exports$1) {
-    var __importDefault = lib$3 && lib$3.__importDefault || function(mod) {
-      return mod && mod.__esModule ? mod : { "default": mod };
+  if (width > 200) {
+    return 2;
+  }
+  return 3;
+}
+function getCSSOverrides(fittingType, src, target, alignment = "center") {
+  const returnValue = {
+    img: {},
+    container: {}
+  };
+  if (fittingType === fittingTypes.SCALE_TO_FILL) {
+    const alignTypeFromFocalPoint = src.focalPoint && convertFocalPointToAlignType(src.focalPoint);
+    const alignType = alignTypeFromFocalPoint || alignment;
+    if (src.focalPoint && !alignTypeFromFocalPoint) {
+      returnValue.img = {
+        objectPosition: convertFillFocalToPosition(src, target, src.focalPoint)
+      };
+    } else {
+      returnValue.img = {
+        objectPosition: ALIGN_TYPE_TO_POSITION[alignType]
+      };
+    }
+  } else if ([fittingTypes.LEGACY_ORIGINAL_SIZE, fittingTypes.ORIGINAL_SIZE].includes(fittingType)) {
+    returnValue.img = {
+      objectFit: "none",
+      top: "auto",
+      left: "auto",
+      right: "auto",
+      bottom: "auto"
     };
-    Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.htmlToDOM = exports$1.domToReact = exports$1.attributesToProps = exports$1.Text = exports$1.ProcessingInstruction = exports$1.Element = exports$1.Comment = void 0;
-    exports$1.default = HTMLReactParser2;
-    var html_dom_parser_1 = __importDefault(requireHtmlToDom());
-    exports$1.htmlToDOM = html_dom_parser_1.default;
-    var attributes_to_props_1 = __importDefault(requireAttributesToProps());
-    exports$1.attributesToProps = attributes_to_props_1.default;
-    var dom_to_react_1 = __importDefault(requireDomToReact());
-    exports$1.domToReact = dom_to_react_1.default;
-    var domhandler_1 = /* @__PURE__ */ requireLib$2();
-    Object.defineProperty(exports$1, "Comment", { enumerable: true, get: function() {
-      return domhandler_1.Comment;
-    } });
-    Object.defineProperty(exports$1, "Element", { enumerable: true, get: function() {
-      return domhandler_1.Element;
-    } });
-    Object.defineProperty(exports$1, "ProcessingInstruction", { enumerable: true, get: function() {
-      return domhandler_1.ProcessingInstruction;
-    } });
-    Object.defineProperty(exports$1, "Text", { enumerable: true, get: function() {
-      return domhandler_1.Text;
-    } });
-    var domParserOptions = { lowerCaseAttributeNames: false };
-    function HTMLReactParser2(html, options) {
-      if (typeof html !== "string") {
-        throw new TypeError("First argument must be a string");
-      }
-      if (!html) {
-        return [];
-      }
-      return (0, dom_to_react_1.default)((0, html_dom_parser_1.default)(html, (options === null || options === void 0 ? void 0 : options.htmlparser2) || domParserOptions), options);
+  } else if (TILE_FITTING_TYPES.includes(fittingType)) {
+    returnValue.container = {
+      backgroundSize: `${src.width}px ${src.height}px`
+    };
+  }
+  return returnValue;
+}
+function convertFocalPointToAlignType(focalPoint) {
+  const position = `${focalPoint.x}% ${focalPoint.y}%`;
+  return POSITION_TO_ALIGN_TYPE[position] || "";
+}
+function convertFillFocalToPosition(src, target, focalPoint) {
+  const { width: sW, height: sH } = src;
+  const { width: tW, height: tH } = target;
+  const { x: fpX, y: fpY } = focalPoint;
+  if (!tW || !tH) {
+    return `${fpX}% ${fpY}%`;
+  }
+  const fillScaleFactor = Math.max(tW / sW, tH / sH);
+  const imgScaledW = sW * fillScaleFactor;
+  const imgScaledH = sH * fillScaleFactor;
+  const x = Math.max(0, Math.min(imgScaledW - tW, imgScaledW * (fpX / 100) - tW / 2));
+  const y = Math.max(0, Math.min(imgScaledH - tH, imgScaledH * (fpY / 100) - tH / 2));
+  const posX = x && Math.floor(x / (imgScaledW - tW) * 100);
+  const posY = y && Math.floor(y / (imgScaledH - tH) * 100);
+  return `${posX}% ${posY}%`;
+}
+const PLACEHOLDER_IMG_CSS_OVERRIDES = { width: "100%", height: "100%" };
+function getPlaceholder(fittingType, src, target, options = {}) {
+  const { autoEncode = true, isSEOBot: isSEOBot2, shouldLoadHQImage, hasAnimation, allowAnimatedTransform, encoding } = options;
+  if (!isValidRequest(fittingType, src, target)) {
+    return emptyData;
+  }
+  const IS_IN_PLACEHOLDER_FLOW = true;
+  const shouldAllowAnimatedTransformInPlaceholder = allowAnimatedTransform ?? IS_IN_PLACEHOLDER_FLOW;
+  const canTransformImage = isImageTransformApplicable(src.id, hasAnimation, shouldAllowAnimatedTransformInPlaceholder);
+  if (!canTransformImage || shouldLoadHQImage) {
+    return getData(fittingType, src, target, {
+      ...options,
+      autoEncode,
+      useSrcset: canTransformImage
+    });
+  }
+  const newTarget = {
+    ...target,
+    ...validateTargetDimensions(src, target)
+  };
+  const { alignment, htmlTag: htmlTag2 } = newTarget;
+  const isFakeTile = getIsFakeTile(fittingType, src, newTarget);
+  const scaledDimensions = getScaledDimensions(fittingType, src, newTarget, isSEOBot2);
+  const blur = getBlurValue(newTarget.width, fittingType, isSEOBot2);
+  const convertedFittingType = getConvertedFitting(fittingType, isFakeTile);
+  const overrideCSS = getCSSOverrides(fittingType, src, target, alignment);
+  const { uri } = getData(convertedFittingType, src, {
+    ...scaledDimensions,
+    alignment,
+    htmlTag: htmlTag2
+  }, {
+    autoEncode,
+    filters: blur ? { blur } : {},
+    hasAnimation,
+    allowAnimatedTransform: shouldAllowAnimatedTransformInPlaceholder,
+    encoding,
+    isPlaceholderFlow: IS_IN_PLACEHOLDER_FLOW
+  });
+  const { attr = {}, css } = getData(fittingType, src, {
+    ...newTarget,
+    alignment,
+    htmlTag: htmlTag2
+  }, {});
+  css.img = css.img || {};
+  css.container = css.container || {};
+  Object.assign(css.img, overrideCSS.img, PLACEHOLDER_IMG_CSS_OVERRIDES);
+  Object.assign(css.container, overrideCSS.container);
+  return { uri, css, attr, transformed: true };
+}
+function getData(fittingType, src, target, options) {
+  let data = {};
+  if (isValidRequest(fittingType, src, target)) {
+    const targetObj = getTarget(fittingType, src, target);
+    const transformObj = getTransform(fittingType, src, targetObj, options);
+    data.uri = getURI(fittingType, src, targetObj, options, transformObj);
+    if (options == null ? void 0 : options.useSrcset) {
+      data.srcset = getSrcset(fittingType, src, targetObj, options, data);
     }
-  })(lib$3);
-  return lib$3;
+    Object.assign(data, getAttributes(transformObj, targetObj), {
+      transformed: transformObj.transformed
+    });
+  } else {
+    data = emptyData;
+  }
+  return data;
 }
-var libExports = requireLib();
-const HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
-const parse = HTMLReactParser.default || HTMLReactParser;
+const wixStaticWithMedia = "https://static.wixstatic.com/media/";
+populateGlobalFeatureSupport();
+populateGlobalFeatureSupport();
+const STATIC_MEDIA_URL = wixStaticWithMedia;
+const imageKit = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  STATIC_MEDIA_URL,
+  alignTypes,
+  fileType,
+  fittingTypes,
+  getData,
+  getFileExtension,
+  getPlaceholder,
+  htmlTag,
+  isWEBP,
+  populateGlobalFeatureSupport,
+  upscaleMethods
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  libExports as l,
-  parse as p
+  STATIC_MEDIA_URL as S,
+  getData as a,
+  getFileExtension as b,
+  alignTypes as c,
+  fittingTypes as d,
+  fileType as f,
+  getPlaceholder as g,
+  imageKit as i
 };