next-cloudinary 1.12.3 → 2.0.1

package/dist/next-cloudinary.module.js

@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react';
 import Image from 'next/image';
-import { Cloudinary } from '@cloudinary/url-gen';
+import { getPublicId, getTransformations } from '@cloudinary-util/util';
+import { constructCloudinaryUrl, transformationPlugins } from '@cloudinary-util/url-loader';
 import nextPkg from 'next/package.json';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Head from 'next/head';
@@ -33,849 +34,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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";
@@ -887,6 +47,8 @@ var scripts = {
 	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 = {
@@ -918,6 +80,14 @@ var pkg = {
 	peerDependencies: peerDependencies
 };
 
+var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+var NEXT_CLOUDINARY_VERSION = pkg.version;
+var NEXT_VERSION = nextPkg.version;
+
+/**
+ * createPlaceholderUrl
+ */
+
 /**
  * pollForProcessingImage
  */
@@ -970,95 +140,10 @@ var pollForProcessingImage = function pollForProcessingImage(options) {
     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 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.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');
@@ -1075,7 +160,17 @@ function createPlaceholderUrl(_ref4) {
       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: ''
+    }
   });
 }
 
@@ -1101,7 +196,17 @@ function cloudinaryLoader(_ref) {
   }
   return 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: ''
+    }
   });
 }
 
@@ -1122,7 +227,7 @@ var CldImage = function CldImage(props) {
       return Promise.reject(e);
     }
   };
-  var CLD_OPTIONS = ['deliveryType'];
+  var CLD_OPTIONS = ['deliveryType', 'preserveTransformations'];
   transformationPlugins.forEach(function (_ref) {
     var _ref$props = _ref.props,
       props = _ref$props === void 0 ? [] : _ref$props;
@@ -1133,7 +238,6 @@ var CldImage = function CldImage(props) {
       CLD_OPTIONS.push(prop);
     });
   });
-  // Construct the base Image component props by filtering out Cloudinary-specific props
   var imageProps = {
     alt: props.alt,
     src: props.src
@@ -1149,11 +253,10 @@ var CldImage = function CldImage(props) {
   var _useState = 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.
@@ -1165,7 +268,15 @@ var CldImage = function CldImage(props) {
   //
   // 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 = getPublicId(props.src);
+      } catch (e) {}
+    }
+    if (!publicId) {
+      publicId = props.src;
+    }
     imageProps.blurDataURL = createPlaceholderUrl({
       src: publicId,
       placeholder: props.placeholder
@@ -1174,10 +285,16 @@ var CldImage = function CldImage(props) {
       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 = getTransformations(props.src);
+      cldOptions.rawTransformations = [].concat(transformations.flat(), props.rawTransformations || []);
+    } catch (e) {
+      console.warn("Failed to preserve transformations: " + e.message);
+    }
   }
   return /*#__PURE__*/jsx(Image, _extends({}, imageProps, {
     loader: function loader(loaderOptions) {
@@ -1201,14 +318,26 @@ var CldOgImage = function CldOgImage(_ref) {
     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
+    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
@@ -1373,5 +502,5 @@ var CldUploadButton = function CldUploadButton(_ref) {
   });
 };
 
-export { CldImage, CldOgImage, CldUploadButton, CldUploadWidget, cloudinaryLoader, constructCloudinaryUrl, effects, position, primary, text };
+export { CldImage, CldOgImage, CldUploadButton, CldUploadWidget, cloudinaryLoader };
 //# sourceMappingURL=next-cloudinary.module.js.map