next-cloudinary 0.3.0 → 0.4.1

package/dist/next-cloudinary.js

@@ -15,31 +15,26 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -47,23 +42,19 @@ var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
 var props$6 = ['crop', 'gravity'];
 function plugin$6(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var width = options.width,
-      height = options.height,
-      _options$crop = options.crop,
-      crop = _options$crop === void 0 ? 'limit' : _options$crop;
+    height = options.height,
+    _options$crop = options.crop,
+    crop = _options$crop === void 0 ? 'limit' : _options$crop;
   var 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, fill, lfill, fill_pad or thumb. Not applying gravity.');
@@ -71,7 +62,6 @@ function plugin$6(_temp) {
       transformationString = transformationString + ",g_" + options.gravity;
     }
   }
-
   cldImage.resize(transformationString);
 }
 
@@ -132,13 +122,11 @@ var props$5 = params.map(function (param) {
 });
 function plugin$5(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   params.forEach(function (key) {
     var prop = key.prop || key;
     var effect = key.effect || key;
-
     if (options[prop] === true) {
       cldImage.effect("e_" + effect);
     } else if (typeof options[prop] === 'string') {
@@ -154,6 +142,7 @@ var effectsPlugin = {
 };
 
 // aspectRatio
+
 var primary = {
   aspectRatio: {
     qualifier: 'ar'
@@ -217,19 +206,16 @@ var DEFAULT_TEXT_OPTIONS = {
 };
 function plugin$4(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var text$1 = options.text,
-      _options$overlays = options.overlays,
-      overlays = _options$overlays === void 0 ? [] : _options$overlays;
+    _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, {
@@ -241,48 +227,51 @@ function plugin$4(_temp) {
       text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
     });
   }
+
   /**
    * applyOverlay
    */
 
-
   function applyOverlay(_ref2) {
     var publicId = _ref2.publicId,
-        position$1 = _ref2.position,
-        text$1 = _ref2.text,
-        _ref2$effects = _ref2.effects,
-        layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
-        options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-
+      position$1 = _ref2.position,
+      text$1 = _ref2.text,
+      _ref2$effects = _ref2.effects,
+      layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
+      options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
     var hasPublicId = typeof publicId === 'string';
     var hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
     var hasPosition = typeof position$1 === 'object';
-
     if (!hasPublicId && !hasText) {
       console.warn("An " + type + " is missing Public ID or Text");
       return;
-    } // Start to construct the transformation string using text or the public ID
-    // if it's image-based
+    }
 
+    // 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 {
       layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
-    } // Begin organizing transformations based on what it is and the location
-    // it needs to be placed in the 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
+    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
+    });
+
+    // Layer effects
 
     layerEffects.forEach(function (effect) {
       Object.keys(effect).forEach(function (key) {
@@ -290,7 +279,9 @@ function plugin$4(_temp) {
         var qualifier = primary[key].qualifier;
         primary$1.push(qualifier + "_" + effect[key]);
       });
-    }); // Text styling
+    });
+
+    // Text styling
 
     if (hasText) {
       if (typeof text$1 === 'string') {
@@ -298,14 +289,12 @@ function plugin$4(_temp) {
           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;
-
+          qualifier = _qualifiersText$key.qualifier,
+          location = _qualifiersText$key.location;
         if (location === 'primary') {
           primary$1.push(qualifier + "_" + text$1[key]);
         } else {
@@ -313,8 +302,9 @@ function plugin$4(_temp) {
         }
       });
       layerTransformation = layerTransformation + ":" + textTransformations.join('_') + ":" + text$1.text;
-    } // Positioning
+    }
 
+    // Positioning
 
     if (hasPosition) {
       Object.keys(position$1).forEach(function (key) {
@@ -322,17 +312,20 @@ function plugin$4(_temp) {
         var qualifier = position[key].qualifier;
         applied.push(qualifier + "_" + position$1[key]);
       });
-    } // Add all primary transformations
+    }
 
+    // Add all primary transformations
 
-    layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
+    layerTransformation = layerTransformation + "," + primary$1.join(',');
 
-    layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
+    // 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
+    }
 
+    // Finally add it to the image
 
     cldImage.addTransformation(layerTransformation);
   }
@@ -348,11 +341,10 @@ var overlaysPlugin = {
 var props$3 = ['rawTransformations'];
 function plugin$3(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var _options$rawTransform = options.rawTransformations,
-      rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
+    rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
   rawTransformations.forEach(function (transformation) {
     cldImage.addTransformation(transformation);
   });
@@ -367,12 +359,10 @@ var rawTransformationsPlugin = {
 var props$2 = ['removeBackground'];
 function plugin$2(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var _options$removeBackgr = options.removeBackground,
-      removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
-
+    removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
   if (removeBackground) {
     cldImage.effect('e_background_removal');
   }
@@ -388,68 +378,67 @@ var _excluded$2 = ["publicId", "type", "position", "text", "effects"];
 var props$1 = ['underlay', 'underlays'];
 function plugin$1(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var underlay = options.underlay,
-      _options$underlays = options.underlays,
-      underlays = _options$underlays === void 0 ? [] : _options$underlays;
+    _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'
     };
-
     if (options.width) {
       underlayOptions.width = options.width;
     }
-
     if (options.height) {
       underlayOptions.height = options.height;
     }
-
     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,
-        options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-
+      type = _ref2.type,
+      position$1 = _ref2.position,
+      _ref2$effects = _ref2.effects,
+      layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
+      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
+    }
+
+    // Start to construct the transformation string using text or the public ID
     // if it's image-based
 
+    var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
 
-    var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':'); // Begin organizing transformations based on what it is and the location
+    // 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
+    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
+    });
+
+    // Layer effects
 
     layerEffects.forEach(function (effect) {
       Object.keys(effect).forEach(function (key) {
@@ -457,7 +446,9 @@ function plugin$1(_temp) {
         var qualifier = primary[key].qualifier;
         primary$1.push(qualifier + "_" + effect[key]);
       });
-    }); // Positioning
+    });
+
+    // Positioning
 
     if (hasPosition) {
       Object.keys(position$1).forEach(function (key) {
@@ -465,17 +456,20 @@ function plugin$1(_temp) {
         var qualifier = position[key].qualifier;
         applied.push(qualifier + "_" + position$1[key]);
       });
-    } // Add all primary transformations
+    }
 
+    // Add all primary transformations
 
-    layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
+    layerTransformation = layerTransformation + "," + primary$1.join(',');
 
-    layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
+    // 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
+    }
 
+    // Finally add it to the image
 
     cldImage.addTransformation(layerTransformation);
   }
@@ -490,13 +484,11 @@ var underlaysPlugin = {
 var props = ['zoompan'];
 function plugin(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-
+    cldImage = _ref.cldImage,
+    options = _ref.options;
   var _options$zoompan = options.zoompan,
-      zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
+    zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
   var overrides = {};
-
   if (zoompan === true) {
     cldImage.effect('e_zoompan');
   } else if (typeof zoompan === 'string') {
@@ -508,29 +500,23 @@ function plugin(_temp) {
     }
   } 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
   };
@@ -542,19 +528,22 @@ var zoompanPlugin = {
   plugin: plugin
 };
 
-var transformationPlugins = [// Background Removal must always come first
-removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin, // Raw transformations needs to be last simply to make sure
+var transformationPlugins = [
+// Background Removal must always come first
+removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, 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;
-
+    config = _ref.config;
   if (!cld) {
     cld = new urlGen.Cloudinary(_extends({
       cloud: {
@@ -566,24 +555,22 @@ function constructCloudinaryUrl(_ref) {
       }
     }, config));
   }
-
   var publicId = getPublicId(options.src);
   var cldImage = cld.image(publicId);
   transformationPlugins.forEach(function (_ref2) {
     var plugin = _ref2.plugin;
-
     var _ref3 = plugin({
-      cldImage: cldImage,
-      options: options
-    }) || {},
-        pluginOptions = _ref3.options;
-
+        cldImage: cldImage,
+        options: options
+      }) || {},
+      pluginOptions = _ref3.options;
     if (pluginOptions != null && pluginOptions.format) {
       options.format = pluginOptions.format;
     }
   });
   return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
 }
+
 /**
  * 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.
@@ -597,13 +584,11 @@ 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) {
@@ -612,30 +597,27 @@ function getPublicId(src) {
       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;
+    _ref4$placeholder = _ref4.placeholder,
+    placeholder = _ref4$placeholder === void 0 ? true : _ref4$placeholder,
+    config = _ref4.config;
   var rawTransformations = [];
-
   if (placeholder === 'grayscale') {
     rawTransformations.push('e_grayscale');
   }
-
   if (typeof placeholder === 'string' && placeholder.includes('color:')) {
     var color = placeholder.split(':').splice(1).join(':');
     rawTransformations.push('e_grayscale');
     rawTransformations.push("e_colorize:60,co_" + color);
   }
-
   return constructCloudinaryUrl({
     options: {
       src: src,
@@ -651,7 +633,6 @@ function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
   if (cldConfig === void 0) {
     cldConfig = {};
   }
-
   return constructCloudinaryUrl({
     options: _extends({}, defaultOptions, cldOptions),
     config: cldConfig
@@ -662,29 +643,34 @@ var CldImage = function CldImage(props) {
   var CLD_OPTIONS = [];
   transformationPlugins.forEach(function (_ref) {
     var _ref$props = _ref.props,
-        props = _ref$props === void 0 ? [] : _ref$props;
+      props = _ref$props === void 0 ? [] : _ref$props;
     props.forEach(function (prop) {
       if (CLD_OPTIONS.includes(prop)) {
         throw new Error("Option " + prop + " already exists!");
       }
-
       CLD_OPTIONS.push(prop);
     });
-  }); // Construct the base Image component props by filtering out Cloudinary-specific props
+  });
+
+  // Construct the base Image component props by filtering out Cloudinary-specific props
 
   var imageProps = {};
   Object.keys(props).filter(function (key) {
     return !CLD_OPTIONS.includes(key);
   }).forEach(function (key) {
     return imageProps[key] = props[key];
-  }); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
+  });
+
+  // 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];
     }
-  }); // If we see a placeholder option, configure a Cloudinary-based URL.
+  });
+
+  // If we see a placeholder option, configure a Cloudinary-based URL.
   // The resulting image will always be blurred per Next.js, so we're
   // limited on options for placeholders.
   //
@@ -699,12 +685,10 @@ var CldImage = function CldImage(props) {
       src: publicId,
       placeholder: props.placeholder
     });
-
     if (imageProps.placeholder !== 'blur') {
       imageProps.placeholder = 'blur';
     }
   }
-
   return /*#__PURE__*/jsxRuntime.jsx(Image__default["default"], _extends({}, imageProps, {
     loader: function loader(options) {
       return cloudinaryLoader(_extends({}, imageProps, {
@@ -718,23 +702,22 @@ var _excluded$1 = ["excludeTags", "twitterTitle"];
 var IMAGE_WIDTH = 2400;
 var IMAGE_HEIGHT = 1200;
 var TWITTER_CARD = 'summary_large_image';
-
 var CldOgImage = function CldOgImage(_ref) {
   var _ref$excludeTags = _ref.excludeTags,
-      excludeTags = _ref$excludeTags === void 0 ? [] : _ref$excludeTags,
-      twitterTitle = _ref.twitterTitle,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+    excludeTags = _ref$excludeTags === void 0 ? [] : _ref$excludeTags,
+    twitterTitle = _ref.twitterTitle,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var options = _extends({}, props, {
     width: props.width || IMAGE_WIDTH,
     height: props.height || IMAGE_HEIGHT,
     crop: props.crop || 'fill',
     gravity: props.gravity || 'center'
   });
-
   var ogImageUrl = constructCloudinaryUrl({
     options: options
-  }); // We need to include the tags within the Next.js Head component rather than
+  });
+
+  // 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
 
   return /*#__PURE__*/jsxRuntime.jsxs(Head__default["default"], {
@@ -768,12 +751,13 @@ var CldOgImage = function CldOgImage(_ref) {
 
 var CldUploadWidget = function CldUploadWidget(_ref) {
   var children = _ref.children,
-      onUpload = _ref.onUpload,
-      options = _ref.options,
-      signed = _ref.signed,
-      signatureEndpoint = _ref.signatureEndpoint;
+    onUpload = _ref.onUpload,
+    options = _ref.options,
+    signed = _ref.signed,
+    signatureEndpoint = _ref.signatureEndpoint;
   var cloudinary = react.useRef();
   var widget = react.useRef();
+
   /**
    * generateSignature
    * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
@@ -792,28 +776,27 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
       callback(signature);
     });
   }
+
   /**
    * createWidget
    * @description Creates a new instance of the Cloudinary widget and stores in a ref
    */
 
-
   function createWidget() {
     var _cloudinary$current;
-
     // When creating a signed upload, you need to provide both your Cloudinary API Key
     // as well as a signature generator function that will sign any paramters
     // either on page load or during the upload process. Read more about signed uploads at:
     // https://cloudinary.com/documentation/upload_widget#signed_uploads
+
     var totalOptions = _extends({}, options, !!signed && {
       uploadSignature: generateSignature
-    }); // no need for apiSecret because of api/sign-cloudinary-params
-
+    });
 
+    // no need for apiSecret because of api/sign-cloudinary-params
     if (signed && !totalOptions.apiKey) {
       return new Error("Signed Upload needs apiKey!");
     }
-
     return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(totalOptions, function (error, result) {
       // The callback is a bit more chatty than failed or success so
       // only trigger when one of those are the case. You can additionally
@@ -824,29 +807,27 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
       }
     });
   }
+
   /**
    * open
    * @description When triggered, uses the current widget instance to open the upload modal
    */
 
-
   function open() {
     if (!(widget != null && widget.current)) {
       widget.current = createWidget();
     }
-
     (widget == null ? void 0 : widget.current) && widget.current.open();
   }
+
   /**
    * handleOnLoad
    * @description Stores the Cloudinary window instance to a ref when the widget script loads
    */
 
-
   function handleOnLoad() {
     cloudinary.current = window.cloudinary;
   }
-
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [children({
       cloudinary: cloudinary.current,
@@ -864,14 +845,12 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
 };
 
 var _excluded = ["onUpload", "options", "signed", "label", "children"];
-
 var CldUploadButton = function CldUploadButton(_ref) {
   var onUpload = _ref.onUpload,
-      options = _ref.options,
-      signed = _ref.signed,
-      _children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    options = _ref.options,
+    signed = _ref.signed,
+    _children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(CldUploadWidget, {
       signed: signed,
@@ -880,12 +859,10 @@ var CldUploadButton = function CldUploadButton(_ref) {
       signatureEndpoint: signed != null ? signed : props.signatureEndpoint,
       children: function children(_ref2) {
         var open = _ref2.open;
-
         function handleOnClick(e) {
           e.preventDefault();
           open();
         }
-
         return /*#__PURE__*/jsxRuntime.jsx("button", _extends({
           onClick: handleOnClick
         }, props, {