next-cloudinary 1.12.3 → 2.0.1

package/dist/next-cloudinary.modern.mjs

@@ -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,865 +34,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
-const cropsWithZoom = ['crop', 'thumb'];
-const props$7 = ['crop', 'gravity', 'zoom'];
-function plugin$7({
-  cldImage,
-  options
-} = {}) {
-  const overrides = {};
-  const {
-    width,
-    height,
-    widthResize,
-    crop = 'limit'
-  } = options;
-  let 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
-
-const primary = {
-  aspectRatio: {
-    qualifier: 'ar'
-  },
-  crop: {
-    qualifier: 'c'
-  },
-  gravity: {
-    qualifier: 'g'
-  },
-  height: {
-    qualifier: 'h'
-  },
-  width: {
-    qualifier: 'w'
-  }
-};
-const position = {
-  angle: {
-    qualifier: 'a'
-  },
-  gravity: {
-    qualifier: 'g'
-  },
-  x: {
-    qualifier: 'x'
-  },
-  y: {
-    qualifier: 'y'
-  }
-};
-const 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
-  }
-};
-const 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'
-  }
-};
-const flags = {
-  relative: {
-    prefix: 'fl',
-    qualifier: 'relative',
-    location: 'primary'
-  }
-};
-
-/**
- * constructTransformation
- */
-
-function constructTransformation({
-  prefix,
-  qualifier,
-  value
-}) {
-  let 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) {
-    const regex = new RegExp("(https?)://(res.cloudinary.com)/([^/]+)/(image|video|raw)/(upload|authenticated)/(.*)/(v[0-9]+)/(.+)(?:.[a-z]{3})?", "gi");
-    const groups = regex.exec(src);
-    const transformationStr = groups.slice(1).find(i => i.includes("_"));
-    if (transformationStr) {
-      return transformationStr.split(",").join("/").split("/");
-    } else {
-      return [];
-    }
-  }
-  return [];
-}
-
-const props$6 = [...Object.keys(effects), 'effects'];
-function plugin$6({
-  cldImage,
-  options
-} = {}) {
-  // Handle any top-level effect props
-
-  constructTransformationString({
-    effects: effects,
-    options
-  }).filter(t => !!t).forEach(transformation => 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(effectsSet => {
-      const transformationString = constructTransformationString({
-        effects: effects,
-        options: effectsSet
-      }).filter(t => !!t).join(',');
-      cldImage.effect(transformationString);
-    });
-  }
-  function constructTransformationString({
-    effects,
-    options
-  }) {
-    return Object.keys(effects).map(key => {
-      const {
-        prefix,
-        qualifier
-      } = effects[key];
-      return constructTransformation({
-        qualifier,
-        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');
-  }
-}
-
-const _excluded$3 = ["publicId", "url", "position", "text", "effects", "appliedEffects"];
-const props$5 = ['text', 'overlays'];
-const DEFAULT_TEXT_OPTIONS = {
-  color: 'black',
-  fontFamily: 'Arial',
-  fontSize: 200,
-  fontWeight: 'bold'
-};
-function plugin$5({
-  cldImage,
-  options
-} = {}) {
-  const {
-    text: text$1,
-    overlays = []
-  } = options;
-  const type = 'overlay';
-  const 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(_ref) {
-    let {
-        publicId,
-        url,
-        position: position$1,
-        text: text$1,
-        effects: layerEffects = [],
-        appliedEffects = []
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-    const hasPublicId = typeof publicId === 'string';
-    const hasUrl = typeof url === 'string';
-    const hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
-    const 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
-
-    let 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
-
-    const primary$1 = [];
-    const applied = [];
-
-    // Gemeral options
-
-    Object.keys(options).forEach(key => {
-      if (!primary[key]) return;
-      const {
-        qualifier
-      } = primary[key];
-      const transformation = constructTransformation({
-        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(effect => {
-      Object.keys(effect).forEach(key => {
-        const {
-          qualifier,
-          prefix
-        } = primary[key] || effects[key] || {};
-        const transformation = constructTransformation({
-          qualifier,
-          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(effect => {
-      Object.keys(effect).forEach(key => {
-        const {
-          qualifier,
-          prefix
-        } = primary[key] || effects[key] || {};
-        const transformation = constructTransformation({
-          qualifier,
-          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
-        });
-      }
-      const textTransformations = [];
-      Object.keys(text$1).forEach(key => {
-        if (!text[key]) return;
-        const {
-          qualifier,
-          location
-        } = text[key];
-        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(key => {
-        if (!position[key]) return;
-        const {
-          qualifier
-        } = position[key];
-        const transformation = constructTransformation({
-          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
-};
-
-const props$4 = ['transformations'];
-function plugin$4({
-  cldImage,
-  options
-} = {}) {
-  let {
-    transformations = []
-  } = options;
-  if (!Array.isArray(transformations)) {
-    transformations = [transformations];
-  }
-  transformations.forEach(transformation => {
-    cldImage.addTransformation(`t_${transformation}`);
-  });
-}
-
-var namedTransformationsPlugin = {
-  __proto__: null,
-  props: props$4,
-  plugin: plugin$4
-};
-
-const props$3 = ['rawTransformations'];
-function plugin$3({
-  cldImage,
-  options
-} = {}) {
-  const {
-    rawTransformations = []
-  } = options;
-  rawTransformations.forEach(transformation => {
-    cldImage.addTransformation(transformation);
-  });
-}
-
-var rawTransformationsPlugin = {
-  __proto__: null,
-  props: props$3,
-  plugin: plugin$3
-};
-
-const props$2 = ['removeBackground'];
-function plugin$2({
-  cldImage,
-  options
-} = {}) {
-  const {
-    removeBackground = false
-  } = options;
-  if (removeBackground) {
-    cldImage.effect('e_background_removal');
-  }
-}
-
-var removeBackgroundPlugin = {
-  __proto__: null,
-  props: props$2,
-  plugin: plugin$2
-};
-
-const _excluded$2 = ["publicId", "type", "position", "text", "effects", "flags"];
-const props$1 = ['underlay', 'underlays'];
-function plugin$1({
-  cldImage,
-  options
-} = {}) {
-  const {
-    underlay,
-    underlays = []
-  } = options;
-  const typeQualifier = 'u';
-  if (Array.isArray(underlays)) {
-    underlays.forEach(applyUnderlay);
-  }
-  if (typeof underlay === 'string') {
-    const underlayOptions = {
-      publicId: underlay,
-      crop: 'fill',
-      width: '1.0',
-      height: '1.0',
-      flags: ['relative']
-    };
-    applyUnderlay(underlayOptions);
-  }
-
-  /**
-   * applyUnderlay
-   */
-
-  function applyUnderlay(_ref) {
-    let {
-        publicId,
-        type,
-        position: position$1,
-        effects: layerEffects = [],
-        flags: flags$1 = []
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-    const hasPublicId = typeof publicId === 'string';
-    const 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
-
-    let layerTransformation = `${typeQualifier}_${publicId.replace(/\//g, ':')}`;
-
-    // Begin organizing transformations based on what it is and the location
-    // it needs to be placed in the URL
-
-    const primary$1 = [];
-    const applied = [];
-
-    // Gemeral options
-
-    Object.keys(options).forEach(key => {
-      if (!primary[key]) return;
-      const {
-        qualifier
-      } = primary[key];
-      primary$1.push(`${qualifier}_${options[key]}`);
-    });
-
-    // Layer effects
-
-    layerEffects.forEach(effect => {
-      Object.keys(effect).forEach(key => {
-        if (!primary[key]) return;
-        const {
-          qualifier
-        } = primary[key];
-        primary$1.push(`${qualifier}_${effect[key]}`);
-      });
-    });
-
-    // Positioning
-
-    if (hasPosition) {
-      Object.keys(position$1).forEach(key => {
-        if (!position[key]) return;
-        const {
-          qualifier
-        } = position[key];
-        applied.push(`${qualifier}_${position$1[key]}`);
-      });
-    }
-
-    // Positioning
-
-    flags$1.forEach(key => {
-      if (!flags[key]) return;
-      const {
-        qualifier,
-        prefix
-      } = flags[key];
-      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
-};
-
-const props = ['zoompan'];
-function plugin({
-  cldImage,
-  options
-} = {}) {
-  const {
-    zoompan = false
-  } = options;
-  const 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') {
-    let zoompanEffect = 'e_zoompan';
-    if (typeof zoompan.options === 'string') {
-      zoompanEffect = `${zoompanEffect}${zoompan.options}`;
-    }
-    cldImage.effect(zoompanEffect);
-    let 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
-};
-
-const 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";
@@ -903,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 = {
@@ -934,97 +80,16 @@ var pkg = {
 	peerDependencies: peerDependencies
 };
 
-const 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];
-let cld;
-/**
- * constructCloudinaryUrl
- */
-function constructCloudinaryUrl({
-  options,
-  config
-}) {
-  if (!cld) {
-    cld = new Cloudinary(_extends({
-      cloud: {
-        cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-      }
-    }, config));
-  }
-  const publicId = getPublicId(options == null ? void 0 : options.src);
-  const cldImage = cld.image(publicId);
-  transformationPlugins.forEach(({
-    plugin
-  }) => {
-    // @ts-ignore
-    const {
-      options: pluginOptions
-    } = plugin({
-      cldImage,
-      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) {
-    const {
-      width,
-      crop = 'scale'
-    } = options.resize;
-    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')) {
-    const regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-    const regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-    const withTransformations = src.match(regexWithTransformations);
-    const 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;
-}
+const NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+const NEXT_CLOUDINARY_VERSION = pkg.version;
+const NEXT_VERSION = nextPkg.version;
+
 /**
  * createPlaceholderUrl
  */
 function createPlaceholderUrl({
   src,
-  placeholder = true,
-  config
+  placeholder = true
 }) {
   const rawTransformations = [];
   if (placeholder === 'grayscale') {
@@ -1042,7 +107,17 @@ function createPlaceholderUrl({
       quality: 1,
       rawTransformations
     },
-    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: ''
+    }
   });
 }
 /**
@@ -1093,12 +168,22 @@ function cloudinaryLoader({
   }
   return constructCloudinaryUrl({
     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: ''
+    }
   });
 }
 
 const CldImage = props => {
-  const CLD_OPTIONS = ['deliveryType'];
+  const CLD_OPTIONS = ['deliveryType', 'preserveTransformations'];
   transformationPlugins.forEach(({
     props: _props = []
   }) => {
@@ -1109,7 +194,6 @@ const CldImage = props => {
       CLD_OPTIONS.push(prop);
     });
   });
-  // Construct the base Image component props by filtering out Cloudinary-specific props
   const imageProps = {
     alt: props.alt,
     src: props.src
@@ -1117,11 +201,10 @@ const CldImage = props => {
   Object.keys(props).filter(key => !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
   const defaultImgKey = Object.keys(imageProps).map(key => `${key}:${imageProps[key]}`).join(';');
   const [imgKey, setImgKey] = useState(defaultImgKey);
-  // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
   const cldOptions = {};
   CLD_OPTIONS.forEach(key => {
     if (props[key]) {
-      cldOptions[key] = props[key];
+      cldOptions[key] = props[key] || undefined;
     }
   });
   // If we see a placeholder option, configure a Cloudinary-based URL.
@@ -1133,7 +216,15 @@ const CldImage = props => {
   //
   // https://nextjs.org/docs/api-reference/next/image#blurdataurl
   if (imageProps.placeholder) {
-    const publicId = getPublicId(props.src);
+    let 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
@@ -1142,10 +233,16 @@ const CldImage = props => {
       imageProps.placeholder = 'blur';
     }
   }
-  if (props.src && props.preserveTransformations) {
-    const transformations = getTransformations(props.src, props.preserveTransformations);
-    const rawTransformations = imageProps.rawTransformations ? [...imageProps.rawTransformations] : [];
-    imageProps.rawTransformations = [...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 {
+      const transformations = getTransformations(props.src);
+      cldOptions.rawTransformations = [...transformations.flat(), ...(props.rawTransformations || [])];
+    } catch (e) {
+      console.warn(`Failed to preserve transformations: ${e.message}`);
+    }
   }
   /**
    * handleOnError
@@ -1179,14 +276,26 @@ const CldOgImage = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const 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
   });
   const ogImageUrl = 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
@@ -1352,5 +461,5 @@ const CldUploadButton = _ref => {
   });
 };
 
-export { CldImage, CldOgImage, CldUploadButton, CldUploadWidget, cloudinaryLoader, constructCloudinaryUrl, effects, position, primary, text };
+export { CldImage, CldOgImage, CldUploadButton, CldUploadWidget, cloudinaryLoader };
 //# sourceMappingURL=next-cloudinary.modern.mjs.map