next-cloudinary 1.12.3 → 2.0.1

package/dist/next-cloudinary.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('next/image'), require('@cloudinary/url-gen'), require('next/package.json'), require('react/jsx-runtime'), require('next/head'), require('next/script')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'next/image', '@cloudinary/url-gen', 'next/package.json', 'react/jsx-runtime', 'next/head', 'next/script'], factory) :
-  (global = global || self, factory(global.nextCloudinary = {}, global.react, global.Image, global.urlGen, global.nextPkg, global.jsxRuntime, global.Head, global.Script));
-})(this, (function (exports, react, Image, urlGen, nextPkg, jsxRuntime, Head, Script) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('next/image'), require('@cloudinary-util/util'), require('@cloudinary-util/url-loader'), require('next/package.json'), require('react/jsx-runtime'), require('next/head'), require('next/script')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'next/image', '@cloudinary-util/util', '@cloudinary-util/url-loader', 'next/package.json', 'react/jsx-runtime', 'next/head', 'next/script'], factory) :
+  (global = global || self, factory(global.nextCloudinary = {}, global.react, global.Image, global.util, global.urlLoader, global.nextPkg, global.jsxRuntime, global.Head, global.Script));
+})(this, (function (exports, react, Image, util, urlLoader, nextPkg, jsxRuntime, Head, Script) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
@@ -37,849 +37,8 @@
     return target;
   }
 
-  var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
-  var cropsWithZoom = ['crop', 'thumb'];
-  var props$7 = ['crop', 'gravity', 'zoom'];
-  function plugin$7(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var overrides = {};
-    var width = options.width,
-      height = options.height,
-      widthResize = options.widthResize,
-      _options$crop = options.crop,
-      crop = _options$crop === void 0 ? 'limit' : _options$crop;
-    var transformationString = '';
-    if (width) {
-      transformationString = "c_" + crop + ",w_" + width;
-    }
-    if (!options.gravity && cropsGravityAuto.includes(crop)) {
-      options.gravity = 'auto';
-    }
-    if (!['limit'].includes(crop)) {
-      transformationString = transformationString + ",h_" + height;
-    }
-    if (options.gravity) {
-      if (options.gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
-        console.warn("Auto gravity can only be used with crop modes: " + cropsGravityAuto.join(', ') + ". Not applying gravity.");
-      } else {
-        transformationString = transformationString + ",g_" + options.gravity;
-      }
-    }
-    if (options.zoom) {
-      if (options.zoom === 'auto' && !cropsWithZoom.includes(crop)) {
-        console.warn("Zoom can only be used with crop modes: " + cropsWithZoom.join(', ') + ". Not applying zoom.");
-      } else {
-        transformationString = transformationString + ",z_" + options.zoom;
-      }
-    }
-    cldImage.effect(transformationString);
-
-    // If we have a resize width that's smaller than the user-defined width, we want to give the
-    // ability to perform a final resize on the image without impacting any of the effects like text
-    // overlays that may depend on the size to work properly
-
-    if (typeof widthResize === 'number' && widthResize < width) {
-      overrides.width = widthResize;
-    }
-    return {
-      options: overrides
-    };
-  }
-
-  var croppingPlugin = {
-    __proto__: null,
-    props: props$7,
-    plugin: plugin$7
-  };
-
-  // aspectRatio
-
-  var primary = {
-    aspectRatio: {
-      qualifier: 'ar'
-    },
-    crop: {
-      qualifier: 'c'
-    },
-    gravity: {
-      qualifier: 'g'
-    },
-    height: {
-      qualifier: 'h'
-    },
-    width: {
-      qualifier: 'w'
-    }
-  };
-  var position = {
-    angle: {
-      qualifier: 'a'
-    },
-    gravity: {
-      qualifier: 'g'
-    },
-    x: {
-      qualifier: 'x'
-    },
-    y: {
-      qualifier: 'y'
-    }
-  };
-  var text = {
-    alignment: {
-      qualifier: 'alignment'
-    },
-    border: {
-      qualifier: 'bo',
-      location: 'primary'
-    },
-    color: {
-      qualifier: 'co',
-      location: 'primary'
-    },
-    fontFamily: {
-      qualifier: false
-    },
-    fontSize: {
-      qualifier: false
-    },
-    fontWeight: {
-      qualifier: false
-    },
-    letterSpacing: {
-      qualifier: 'letter_spacing'
-    },
-    lineSpacing: {
-      qualifier: 'line_spacing'
-    },
-    stroke: {
-      qualifier: 'self'
-    },
-    textDecoration: {
-      qualifier: false
-    }
-  };
-  var effects = {
-    art: {
-      prefix: 'e',
-      qualifier: 'art'
-    },
-    autoBrightness: {
-      prefix: 'e',
-      qualifier: 'auto_brightness'
-    },
-    autoColor: {
-      prefix: 'e',
-      qualifier: 'auto_color'
-    },
-    autoContrast: {
-      prefix: 'e',
-      qualifier: 'auto_contrast'
-    },
-    assistColorblind: {
-      prefix: 'e',
-      qualifier: 'assist_colorblind'
-    },
-    background: {
-      qualifier: 'b'
-    },
-    blackwhite: {
-      prefix: 'e',
-      qualifier: 'blackwhite'
-    },
-    blur: {
-      prefix: 'e',
-      qualifier: 'blur'
-    },
-    blurFaces: {
-      prefix: 'e',
-      qualifier: 'blur_faces'
-    },
-    blurRegion: {
-      prefix: 'e',
-      qualifier: 'blur_region'
-    },
-    border: {
-      qualifier: 'bo'
-    },
-    brightness: {
-      prefix: 'e',
-      qualifier: 'brightness'
-    },
-    brightnessHSB: {
-      prefix: 'e',
-      qualifier: 'brightness_hsb'
-    },
-    cartoonify: {
-      prefix: 'e',
-      qualifier: 'cartoonify'
-    },
-    color: {
-      qualifier: 'co'
-    },
-    colorize: {
-      prefix: 'e',
-      qualifier: 'colorize'
-    },
-    contrast: {
-      prefix: 'e',
-      qualifier: 'contrast'
-    },
-    distort: {
-      prefix: 'e',
-      qualifier: 'distort'
-    },
-    fillLight: {
-      prefix: 'e',
-      qualifier: 'fill_light'
-    },
-    gamma: {
-      prefix: 'e',
-      qualifier: 'gamma'
-    },
-    gradientFade: {
-      prefix: 'e',
-      qualifier: 'gradient_fade'
-    },
-    grayscale: {
-      prefix: 'e',
-      qualifier: 'grayscale'
-    },
-    improve: {
-      prefix: 'e',
-      qualifier: 'improve'
-    },
-    multiply: {
-      prefix: 'e',
-      qualifier: 'multiply'
-    },
-    negate: {
-      prefix: 'e',
-      qualifier: 'negate'
-    },
-    oilPaint: {
-      prefix: 'e',
-      qualifier: 'oil_paint'
-    },
-    opacity: {
-      qualifier: 'o'
-    },
-    outline: {
-      prefix: 'e',
-      qualifier: 'outline'
-    },
-    overlay: {
-      prefix: 'e',
-      qualifier: 'overlay'
-    },
-    pixelate: {
-      prefix: 'e',
-      qualifier: 'pixelate'
-    },
-    pixelateFaces: {
-      prefix: 'e',
-      qualifier: 'pixelate_faces'
-    },
-    pixelateRegion: {
-      prefix: 'e',
-      qualifier: 'pixelate_region'
-    },
-    redeye: {
-      prefix: 'e',
-      qualifier: 'redeye'
-    },
-    replaceColor: {
-      prefix: 'e',
-      qualifier: 'replace_color'
-    },
-    saturation: {
-      prefix: 'e',
-      qualifier: 'saturation'
-    },
-    screen: {
-      prefix: 'e',
-      qualifier: 'screen'
-    },
-    sepia: {
-      prefix: 'e',
-      qualifier: 'sepia'
-    },
-    shadow: {
-      prefix: 'e',
-      qualifier: 'shadow'
-    },
-    sharpen: {
-      prefix: 'e',
-      qualifier: 'sharpen'
-    },
-    shear: {
-      prefix: 'e',
-      qualifier: 'shear'
-    },
-    simulateColorblind: {
-      prefix: 'e',
-      qualifier: 'simulate_colorblind'
-    },
-    tint: {
-      prefix: 'e',
-      qualifier: 'tint'
-    },
-    unsharpMask: {
-      prefix: 'e',
-      qualifier: 'unsharp_mask'
-    },
-    vectorize: {
-      prefix: 'e',
-      qualifier: 'vectorize'
-    },
-    vibrance: {
-      prefix: 'e',
-      qualifier: 'vibrance'
-    },
-    vignette: {
-      prefix: 'e',
-      qualifier: 'vignette'
-    }
-  };
-  var flags = {
-    relative: {
-      prefix: 'fl',
-      qualifier: 'relative',
-      location: 'primary'
-    }
-  };
-
-  /**
-   * constructTransformation
-   */
-
-  function constructTransformation(_ref) {
-    var prefix = _ref.prefix,
-      qualifier = _ref.qualifier,
-      value = _ref.value;
-    var transformation = '';
-    if (prefix) {
-      transformation = prefix + "_";
-    }
-    if (value === true || value === 'true') {
-      return "" + transformation + qualifier;
-    }
-    if (typeof value === 'string' || typeof value === 'number') {
-      if (prefix) {
-        return "" + transformation + qualifier + ":" + value;
-      } else {
-        return qualifier + "_" + value;
-      }
-    }
-  }
-
-  /**
-   * Retrieves the transformations added to a cloudiary image url. If no transformation is recognized it returns an empty array.
-   *
-   * @param {string} src The cloudiary url.
-   *
-   * @return {array} The array of transformations
-   */
-
-  function getTransformations(src, preserveTransformations) {
-    if (typeof src !== "string") {
-      throw new Error("Invalid src of type " + typeof src);
-    }
-    if (src.includes("res.cloudinary.com") && preserveTransformations) {
-      var regex = new RegExp("(https?)://(res.cloudinary.com)/([^/]+)/(image|video|raw)/(upload|authenticated)/(.*)/(v[0-9]+)/(.+)(?:.[a-z]{3})?", "gi");
-      var groups = regex.exec(src);
-      var transformationStr = groups.slice(1).find(function (i) {
-        return i.includes("_");
-      });
-      if (transformationStr) {
-        return transformationStr.split(",").join("/").split("/");
-      } else {
-        return [];
-      }
-    }
-    return [];
-  }
-
-  var props$6 = [].concat(Object.keys(effects), ['effects']);
-  function plugin$6(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    // Handle any top-level effect props
-
-    constructTransformationString({
-      effects: effects,
-      options: options
-    }).filter(function (t) {
-      return !!t;
-    }).forEach(function (transformation) {
-      return cldImage.effect(transformation);
-    });
-
-    // If we're passing in an effects prop explicitly, treat it as an array of
-    // effects that we need to process
-
-    if (Array.isArray(options.effects)) {
-      options.effects.forEach(function (effectsSet) {
-        var transformationString = constructTransformationString({
-          effects: effects,
-          options: effectsSet
-        }).filter(function (t) {
-          return !!t;
-        }).join(',');
-        cldImage.effect(transformationString);
-      });
-    }
-    function constructTransformationString(_ref2) {
-      var effects = _ref2.effects,
-        options = _ref2.options;
-      return Object.keys(effects).map(function (key) {
-        var _effects$key = effects[key],
-          prefix = _effects$key.prefix,
-          qualifier = _effects$key.qualifier;
-        return constructTransformation({
-          qualifier: qualifier,
-          prefix: prefix,
-          value: options[key]
-        });
-      });
-    }
-  }
-
-  var effectsPlugin = {
-    __proto__: null,
-    props: props$6,
-    plugin: plugin$6
-  };
-
-  /**
-   * encodeBase64
-   */
-
-  function encodeBase64(value) {
-    if (typeof btoa === 'function') {
-      return btoa(value);
-    }
-    if (typeof Buffer !== 'undefined') {
-      return Buffer.from(value).toString('base64');
-    }
-  }
-
-  var _excluded$3 = ["publicId", "url", "position", "text", "effects", "appliedEffects"];
-  var props$5 = ['text', 'overlays'];
-  var DEFAULT_TEXT_OPTIONS = {
-    color: 'black',
-    fontFamily: 'Arial',
-    fontSize: 200,
-    fontWeight: 'bold'
-  };
-  function plugin$5(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var text$1 = options.text,
-      _options$overlays = options.overlays,
-      overlays = _options$overlays === void 0 ? [] : _options$overlays;
-    var type = 'overlay';
-    var typeQualifier = 'l';
-    if (Array.isArray(overlays)) {
-      overlays.forEach(applyOverlay);
-    }
-    if (typeof text$1 === 'string') {
-      applyOverlay({
-        text: _extends({}, DEFAULT_TEXT_OPTIONS, {
-          text: text$1
-        })
-      });
-    } else if (typeof text$1 === 'object') {
-      applyOverlay({
-        text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
-      });
-    }
-
-    /**
-     * applyOverlay
-     */
-
-    function applyOverlay(_ref2) {
-      var publicId = _ref2.publicId,
-        url = _ref2.url,
-        position$1 = _ref2.position,
-        text$1 = _ref2.text,
-        _ref2$effects = _ref2.effects,
-        layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
-        _ref2$appliedEffects = _ref2.appliedEffects,
-        appliedEffects = _ref2$appliedEffects === void 0 ? [] : _ref2$appliedEffects,
-        options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-      var hasPublicId = typeof publicId === 'string';
-      var hasUrl = typeof url === 'string';
-      var hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
-      var hasPosition = typeof position$1 === 'object';
-      if (!hasPublicId && !hasUrl && !hasText) {
-        console.warn("An " + type + " is missing Public ID, URL, or Text");
-        return;
-      }
-
-      // Start to construct the transformation string using text or the public ID
-      // if it's image-based
-
-      var layerTransformation;
-      if (hasText) {
-        layerTransformation = typeQualifier + "_text";
-      } else if (hasPublicId) {
-        layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
-      } else if (hasUrl) {
-        layerTransformation = typeQualifier + "_fetch:" + encodeBase64(url);
-      }
-
-      // Begin organizing transformations based on what it is and the location
-      // it needs to be placed in the URL
-
-      var primary$1 = [];
-      var applied = [];
-
-      // Gemeral options
-
-      Object.keys(options).forEach(function (key) {
-        if (!primary[key]) return;
-        var qualifier = primary[key].qualifier;
-        var transformation = constructTransformation({
-          qualifier: qualifier,
-          value: options[key]
-        });
-        primary$1.push(transformation);
-      });
-
-      // Layer effects
-      // For layer effects we allow both the standard effects to be applied as well
-      // as the primary ones like width and height as those can be used to modify
-      // the layer after it's created
-
-      layerEffects.forEach(function (effect) {
-        Object.keys(effect).forEach(function (key) {
-          var _ref3 = primary[key] || effects[key] || {},
-            qualifier = _ref3.qualifier,
-            prefix = _ref3.prefix;
-          var transformation = constructTransformation({
-            qualifier: qualifier,
-            prefix: prefix,
-            value: effect[key]
-          });
-          primary$1.push(transformation);
-        });
-      });
-
-      // Applied Layer effects
-      // Similar to layer effects but they get appended to an additional transformation
-      // along with fl_layer_applied
-
-      appliedEffects.forEach(function (effect) {
-        Object.keys(effect).forEach(function (key) {
-          var _ref4 = primary[key] || effects[key] || {},
-            qualifier = _ref4.qualifier,
-            prefix = _ref4.prefix;
-          var transformation = constructTransformation({
-            qualifier: qualifier,
-            prefix: prefix,
-            value: effect[key]
-          });
-          applied.push(transformation);
-        });
-      });
-
-      // Text styling
-
-      if (hasText) {
-        if (typeof text$1 === 'string') {
-          text$1 = _extends({}, DEFAULT_TEXT_OPTIONS, {
-            text: text$1
-          });
-        }
-        var textTransformations = [];
-        Object.keys(text$1).forEach(function (key) {
-          if (!text[key]) return;
-          var _qualifiersText$key = text[key],
-            qualifier = _qualifiersText$key.qualifier,
-            location = _qualifiersText$key.location;
-          if (location === 'primary') {
-            primary$1.push(qualifier + "_" + text$1[key]);
-          } else if (qualifier === 'self') {
-            textTransformations.push(key);
-          } else if (qualifier) {
-            textTransformations.push(qualifier + "_" + text$1[key]);
-          } else {
-            textTransformations.push(text$1[key]);
-          }
-        });
-        layerTransformation = layerTransformation + ":" + textTransformations.join('_') + ":" + text$1.text;
-      }
-
-      // Positioning
-
-      if (hasPosition) {
-        Object.keys(position$1).forEach(function (key) {
-          if (!position[key]) return;
-          var qualifier = position[key].qualifier;
-          var transformation = constructTransformation({
-            qualifier: qualifier,
-            value: position$1[key]
-          });
-          applied.push(transformation);
-        });
-      }
-
-      // Add all primary transformations
-
-      if (primary$1.length > 0) {
-        layerTransformation = layerTransformation + "," + primary$1.join(',');
-      }
-
-      // Add all applied transformations
-
-      layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
-      if (applied.length > 0) {
-        layerTransformation = layerTransformation + "," + applied.join(',');
-      }
-
-      // Finally add it to the image
-
-      cldImage.addTransformation(layerTransformation);
-    }
-  }
-
-  var overlaysPlugin = {
-    __proto__: null,
-    props: props$5,
-    DEFAULT_TEXT_OPTIONS: DEFAULT_TEXT_OPTIONS,
-    plugin: plugin$5
-  };
-
-  var props$4 = ['transformations'];
-  function plugin$4(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var _options$transformati = options.transformations,
-      transformations = _options$transformati === void 0 ? [] : _options$transformati;
-    if (!Array.isArray(transformations)) {
-      transformations = [transformations];
-    }
-    transformations.forEach(function (transformation) {
-      cldImage.addTransformation("t_" + transformation);
-    });
-  }
-
-  var namedTransformationsPlugin = {
-    __proto__: null,
-    props: props$4,
-    plugin: plugin$4
-  };
-
-  var props$3 = ['rawTransformations'];
-  function plugin$3(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var _options$rawTransform = options.rawTransformations,
-      rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
-    rawTransformations.forEach(function (transformation) {
-      cldImage.addTransformation(transformation);
-    });
-  }
-
-  var rawTransformationsPlugin = {
-    __proto__: null,
-    props: props$3,
-    plugin: plugin$3
-  };
-
-  var props$2 = ['removeBackground'];
-  function plugin$2(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var _options$removeBackgr = options.removeBackground,
-      removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
-    if (removeBackground) {
-      cldImage.effect('e_background_removal');
-    }
-  }
-
-  var removeBackgroundPlugin = {
-    __proto__: null,
-    props: props$2,
-    plugin: plugin$2
-  };
-
-  var _excluded$2 = ["publicId", "type", "position", "text", "effects", "flags"];
-  var props$1 = ['underlay', 'underlays'];
-  function plugin$1(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var underlay = options.underlay,
-      _options$underlays = options.underlays,
-      underlays = _options$underlays === void 0 ? [] : _options$underlays;
-    var typeQualifier = 'u';
-    if (Array.isArray(underlays)) {
-      underlays.forEach(applyUnderlay);
-    }
-    if (typeof underlay === 'string') {
-      var underlayOptions = {
-        publicId: underlay,
-        crop: 'fill',
-        width: '1.0',
-        height: '1.0',
-        flags: ['relative']
-      };
-      applyUnderlay(underlayOptions);
-    }
-
-    /**
-     * applyUnderlay
-     */
-
-    function applyUnderlay(_ref2) {
-      var publicId = _ref2.publicId,
-        type = _ref2.type,
-        position$1 = _ref2.position,
-        _ref2$effects = _ref2.effects,
-        layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
-        _ref2$flags = _ref2.flags,
-        flags$1 = _ref2$flags === void 0 ? [] : _ref2$flags,
-        options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-      var hasPublicId = typeof publicId === 'string';
-      var hasPosition = typeof position$1 === 'object';
-      if (!hasPublicId) {
-        console.warn("An " + type + " is missing a Public ID");
-        return;
-      }
-
-      // Start to construct the transformation string using text or the public ID
-      // if it's image-based
-
-      var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
-
-      // Begin organizing transformations based on what it is and the location
-      // it needs to be placed in the URL
-
-      var primary$1 = [];
-      var applied = [];
-
-      // Gemeral options
-
-      Object.keys(options).forEach(function (key) {
-        if (!primary[key]) return;
-        var qualifier = primary[key].qualifier;
-        primary$1.push(qualifier + "_" + options[key]);
-      });
-
-      // Layer effects
-
-      layerEffects.forEach(function (effect) {
-        Object.keys(effect).forEach(function (key) {
-          if (!primary[key]) return;
-          var qualifier = primary[key].qualifier;
-          primary$1.push(qualifier + "_" + effect[key]);
-        });
-      });
-
-      // Positioning
-
-      if (hasPosition) {
-        Object.keys(position$1).forEach(function (key) {
-          if (!position[key]) return;
-          var qualifier = position[key].qualifier;
-          applied.push(qualifier + "_" + position$1[key]);
-        });
-      }
-
-      // Positioning
-
-      flags$1.forEach(function (key) {
-        if (!flags[key]) return;
-        var _qualifiersFlags$key = flags[key],
-          qualifier = _qualifiersFlags$key.qualifier,
-          prefix = _qualifiersFlags$key.prefix;
-        primary$1.push(prefix + "_" + qualifier);
-      });
-
-      // Add all primary transformations
-
-      layerTransformation = layerTransformation + "," + primary$1.join(',');
-
-      // Add all applied transformations
-
-      layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
-      if (applied.length > 0) {
-        layerTransformation = layerTransformation + "," + applied.join(',');
-      }
-
-      // Finally add it to the image
-
-      cldImage.addTransformation(layerTransformation);
-    }
-  }
-
-  var underlaysPlugin = {
-    __proto__: null,
-    props: props$1,
-    plugin: plugin$1
-  };
-
-  var props = ['zoompan'];
-  function plugin(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    var _options$zoompan = options.zoompan,
-      zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
-    var overrides = {};
-    if (zoompan === true) {
-      cldImage.effect('e_zoompan');
-    } else if (typeof zoompan === 'string') {
-      if (zoompan === 'loop') {
-        cldImage.effect('e_zoompan');
-        cldImage.effect('e_loop');
-      } else {
-        cldImage.effect("e_zoompan:" + zoompan);
-      }
-    } else if (typeof zoompan === 'object') {
-      var zoompanEffect = 'e_zoompan';
-      if (typeof zoompan.options === 'string') {
-        zoompanEffect = "" + zoompanEffect + zoompan.options;
-      }
-      cldImage.effect(zoompanEffect);
-      var loopEffect;
-      if (zoompan.loop === true) {
-        loopEffect = 'e_loop';
-      } else if (typeof zoompan.loop === 'string') {
-        loopEffect = "e_loop" + zoompan.loop;
-      }
-      if (loopEffect) {
-        cldImage.effect(loopEffect);
-      }
-    }
-    if (zoompan !== false) {
-      overrides.format = 'gif';
-    }
-    return {
-      options: overrides
-    };
-  }
-
-  var zoompanPlugin = {
-    __proto__: null,
-    props: props,
-    plugin: plugin
-  };
-
-  var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
-
   var name = "next-cloudinary";
-  var version = "1.12.3";
+  var version = "2.0.1";
   var main = "dist/next-cloudinary.umd.js";
   var module = "dist/next-cloudinary.module.js";
   var source = "src/index.ts";
@@ -891,6 +50,8 @@
   	test: "jest"
   };
   var dependencies = {
+  	"@cloudinary-util/url-loader": "^1.2.4",
+  	"@cloudinary-util/util": "^1.2.0",
   	"@cloudinary/url-gen": "^1.8.6"
   };
   var devDependencies = {
@@ -922,6 +83,14 @@
   	peerDependencies: peerDependencies
   };
 
+  var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+  var NEXT_CLOUDINARY_VERSION = pkg.version;
+  var NEXT_VERSION = nextPkg__default["default"].version;
+
+  /**
+   * createPlaceholderUrl
+   */
+
   /**
    * pollForProcessingImage
    */
@@ -974,95 +143,10 @@
       return Promise.reject(e);
     }
   };
-  var transformationPlugins = [
-  // Background Removal must always come first
-  removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
-  // Raw transformations needs to be last simply to make sure
-  // it's always expected to applied the same way
-  rawTransformationsPlugin];
-  var cld;
-  /**
-   * constructCloudinaryUrl
-   */
-  function constructCloudinaryUrl(_ref) {
-    var options = _ref.options,
-      config = _ref.config;
-    if (!cld) {
-      cld = new urlGen.Cloudinary(_extends({
-        cloud: {
-          cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-        }
-      }, config));
-    }
-    var publicId = getPublicId(options == null ? void 0 : options.src);
-    var cldImage = cld.image(publicId);
-    transformationPlugins.forEach(function (_ref2) {
-      var plugin = _ref2.plugin;
-      // @ts-ignore
-      var _ref3 = plugin({
-          cldImage: cldImage,
-          options: options
-        }) || {},
-        pluginOptions = _ref3.options;
-      if (pluginOptions != null && pluginOptions.format && options) {
-        options.format = pluginOptions.format;
-      }
-      if (pluginOptions != null && pluginOptions.width && options) {
-        options.resize = {
-          width: pluginOptions == null ? void 0 : pluginOptions.width
-        };
-      }
-    });
-    if (options != null && options.resize) {
-      var _options$resize = options.resize,
-        width = _options$resize.width,
-        _options$resize$crop = _options$resize.crop,
-        crop = _options$resize$crop === void 0 ? 'scale' : _options$resize$crop;
-      cldImage.effect("c_" + crop + ",w_" + width);
-    }
-    return cldImage.setDeliveryType((options == null ? void 0 : options.deliveryType) || 'upload').format((options == null ? void 0 : options.format) || 'auto').delivery("q_" + ((options == null ? void 0 : options.quality) || 'auto')).toURL({
-      trackedAnalytics: {
-        sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
-        sdkSemver: pkg.version,
-        techVersion: nextPkg__default["default"].version
-      }
-    });
-  }
-  /**
-   * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
-   * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
-   *
-   * @param {string} src The cloudiary url or public id.
-   *
-   * @return {string} The images public id
-   */
-  function getPublicId(src) {
-    if (typeof src !== 'string') {
-      throw new Error("Invalid src of type " + typeof src);
-    }
-    if (src.includes('res.cloudinary.com')) {
-      var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-      var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-      var withTransformations = src.match(regexWithTransformations);
-      var withoutTransformations = src.match(regexWithoutTransformations);
-      if (withTransformations) {
-        return withTransformations[withTransformations.length - 1];
-      } else if (withoutTransformations) {
-        return withoutTransformations[withoutTransformations.length - 1];
-      } else {
-        console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
-      }
-    }
-    return src;
-  }
-  /**
-   * createPlaceholderUrl
-   */
-  function createPlaceholderUrl(_ref4) {
-    var src = _ref4.src,
-      _ref4$placeholder = _ref4.placeholder,
-      placeholder = _ref4$placeholder === void 0 ? true : _ref4$placeholder,
-      config = _ref4.config;
+  function createPlaceholderUrl(_ref) {
+    var src = _ref.src,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder;
     var rawTransformations = [];
     if (placeholder === 'grayscale') {
       rawTransformations.push('e_grayscale');
@@ -1072,14 +156,24 @@
       rawTransformations.push('e_grayscale');
       rawTransformations.push("e_colorize:60,co_" + color);
     }
-    return constructCloudinaryUrl({
+    return urlLoader.constructCloudinaryUrl({
       options: {
         src: src,
         width: 100,
         quality: 1,
         rawTransformations: rawTransformations
       },
-      config: config
+      config: {
+        cloud: {
+          cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+        }
+      },
+      analytics: {
+        sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+        sdkSemver: NEXT_CLOUDINARY_VERSION,
+        techVersion: NEXT_VERSION,
+        feature: ''
+      }
     });
   }
 
@@ -1103,9 +197,19 @@
       options.widthResize = loaderOptions.width;
       options.heightResize = Math.round(options.height * multiplier);
     }
-    return constructCloudinaryUrl({
+    return urlLoader.constructCloudinaryUrl({
       options: options,
-      config: cldConfig
+      config: _extends({
+        cloud: {
+          cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+        }
+      }, cldConfig),
+      analytics: {
+        sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+        sdkSemver: NEXT_CLOUDINARY_VERSION,
+        techVersion: NEXT_VERSION,
+        feature: ''
+      }
     });
   }
 
@@ -1126,8 +230,8 @@
         return Promise.reject(e);
       }
     };
-    var CLD_OPTIONS = ['deliveryType'];
-    transformationPlugins.forEach(function (_ref) {
+    var CLD_OPTIONS = ['deliveryType', 'preserveTransformations'];
+    urlLoader.transformationPlugins.forEach(function (_ref) {
       var _ref$props = _ref.props,
         props = _ref$props === void 0 ? [] : _ref$props;
       props.forEach(function (prop) {
@@ -1137,7 +241,6 @@
         CLD_OPTIONS.push(prop);
       });
     });
-    // Construct the base Image component props by filtering out Cloudinary-specific props
     var imageProps = {
       alt: props.alt,
       src: props.src
@@ -1153,11 +256,10 @@
     var _useState = react.useState(defaultImgKey),
       imgKey = _useState[0],
       setImgKey = _useState[1];
-    // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
     var cldOptions = {};
     CLD_OPTIONS.forEach(function (key) {
       if (props[key]) {
-        cldOptions[key] = props[key];
+        cldOptions[key] = props[key] || undefined;
       }
     });
     // If we see a placeholder option, configure a Cloudinary-based URL.
@@ -1169,7 +271,15 @@
     //
     // https://nextjs.org/docs/api-reference/next/image#blurdataurl
     if (imageProps.placeholder) {
-      var publicId = getPublicId(props.src);
+      var publicId;
+      if (props.src.startsWith('https://')) {
+        try {
+          publicId = util.getPublicId(props.src);
+        } catch (e) {}
+      }
+      if (!publicId) {
+        publicId = props.src;
+      }
       imageProps.blurDataURL = createPlaceholderUrl({
         src: publicId,
         placeholder: props.placeholder
@@ -1178,10 +288,16 @@
         imageProps.placeholder = 'blur';
       }
     }
-    if (props.src && props.preserveTransformations) {
-      var transformations = getTransformations(props.src, props.preserveTransformations);
-      var rawTransformations = imageProps.rawTransformations ? [].concat(imageProps.rawTransformations) : [];
-      imageProps.rawTransformations = [].concat(rawTransformations, transformations);
+    // Try to preserve the original transformations from the Cloudinary URL passed in
+    // to the component. This only works if the URL has a version number on it and otherwise
+    // will fail to load
+    if (props.preserveTransformations) {
+      try {
+        var transformations = util.getTransformations(props.src);
+        cldOptions.rawTransformations = [].concat(transformations.flat(), props.rawTransformations || []);
+      } catch (e) {
+        console.warn("Failed to preserve transformations: " + e.message);
+      }
     }
     return /*#__PURE__*/jsxRuntime.jsx(Image__default["default"], _extends({}, imageProps, {
       loader: function loader(loaderOptions) {
@@ -1205,14 +321,26 @@
       twitterTitle = _ref.twitterTitle,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     var options = _extends({}, props, {
-      width: props.width || IMAGE_WIDTH,
-      height: props.height || IMAGE_HEIGHT,
+      alt: props.alt,
       crop: props.crop || 'fill',
       gravity: props.gravity || 'center',
-      alt: props.alt
+      height: props.height || IMAGE_HEIGHT,
+      src: props.src,
+      width: props.width || IMAGE_WIDTH
     });
-    var ogImageUrl = constructCloudinaryUrl({
-      options: options
+    var ogImageUrl = urlLoader.constructCloudinaryUrl({
+      options: options,
+      config: {
+        cloud: {
+          cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+        }
+      },
+      analytics: {
+        sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+        sdkSemver: NEXT_CLOUDINARY_VERSION,
+        techVersion: NEXT_VERSION,
+        feature: ''
+      }
     });
     // We need to include the tags within the Next.js Head component rather than
     // direcly adding them inside of the Head otherwise we get unexpected results
@@ -1382,11 +510,6 @@
   exports.CldUploadButton = CldUploadButton;
   exports.CldUploadWidget = CldUploadWidget;
   exports.cloudinaryLoader = cloudinaryLoader;
-  exports.constructCloudinaryUrl = constructCloudinaryUrl;
-  exports.effects = effects;
-  exports.position = position;
-  exports.primary = primary;
-  exports.text = text;
 
 }));
 //# sourceMappingURL=next-cloudinary.umd.js.map