next-cloudinary 6.13.0 → 7.0.0-beta.1

package/dist/cloudinary-9437f0ad.esm.js

@@ -0,0 +1,131 @@
+import nextPkg from 'next/package.json';
+
+var pkg = {
+	name: "next-cloudinary",
+	version: "7.0.0-beta.1",
+	license: "MIT",
+	main: "dist/next-cloudinary.cjs.js",
+	module: "dist/next-cloudinary.esm.js",
+	exports: {
+		".": {
+			types: {
+				"import": "./dist/next-cloudinary.cjs.mjs",
+				"default": "./dist/next-cloudinary.cjs.js"
+			},
+			module: "./dist/next-cloudinary.esm.js",
+			"import": "./dist/next-cloudinary.cjs.mjs",
+			"default": "./dist/next-cloudinary.cjs.js"
+		},
+		"./package.json": "./package.json",
+		"./cld-video-player.css": "./dist/cld-video-player.css",
+		"./dist/cld-video-player.css": "./dist/cld-video-player.css",
+		"./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+		"./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+		"./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+		"./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+	},
+	types: "./dist/next-cloudinary.cjs.d.ts",
+	scripts: {
+		build: "preconstruct build && tsx scripts/copy-assets.ts",
+		dev: "preconstruct watch",
+		prepublishOnly: "cp ../README.md . && cp ../LICENSE . && pnpm build",
+		postpublish: "rm ./README.md && rm ./LICENSE",
+		test: "vitest run",
+		"test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" pnpm build && cd tests/nextjs-app && pnpm build",
+		"test:watch": "vitest"
+	},
+	dependencies: {
+		"@cloudinary-util/types": "1.5.8",
+		"@cloudinary-util/url-loader": "5.10.3",
+		"@cloudinary-util/util": "^3.3.2"
+	},
+	devDependencies: {
+		"@babel/core": "^7.25.2",
+		"@babel/preset-env": "^7.25.4",
+		"@babel/preset-react": "^7.24.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"@tsconfig/recommended": "^1.0.7",
+		"@types/node": "^22.0.2",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		dotenv: "^16.4.5",
+		mkdirp: "^3.0.1",
+		tsx: "^4.19.1",
+		typescript: "^5.5.4",
+		vitest: "^2.0.5"
+	},
+	peerDependencies: {
+		next: "^12 || ^13 || ^14 || >=15.0.0-rc",
+		react: "^17 || ^18 || >=19.0.0-beta"
+	},
+	preconstruct: {
+		exports: {
+			importConditionDefaultExport: "default",
+			extra: {
+				"./cld-video-player.css": "./dist/cld-video-player.css",
+				"./dist/cld-video-player.css": "./dist/cld-video-player.css",
+				"./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+				"./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+				"./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+				"./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+			}
+		},
+		___experimentalFlags_WILL_CHANGE_IN_PATCH: {
+			importsConditions: true
+		}
+	}
+};
+
+const NEXT_CLOUDINARY_ANALYTICS_PRODUCT_ID = 'A';
+const NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+const NEXT_VERSION = normalizeVersion(nextPkg.version);
+const NEXT_CLOUDINARY_VERSION = normalizeVersion(pkg.version);
+function normalizeVersion(version) {
+  let normalized = version;
+  if (normalized.includes('-')) {
+    normalized = normalized.split('-')[0];
+  }
+  return normalized;
+}
+
+/**
+ * getCloudinaryConfig
+ */
+
+function getCloudinaryConfig(config) {
+  const cloudName = config?.cloud?.cloudName ?? process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
+  if (!cloudName) {
+    throw new Error('A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.');
+  }
+  const apiKey = config?.cloud?.apiKey ?? process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY;
+  const secureDistribution = config?.url?.secureDistribution ?? process.env.NEXT_PUBLIC_CLOUDINARY_SECURE_DISTRIBUTION;
+  const privateCdn = config?.url?.privateCdn ?? process.env.NEXT_PUBLIC_CLOUDINARY_PRIVATE_CDN;
+  return Object.assign({
+    cloud: {
+      ...config?.cloud,
+      apiKey,
+      cloudName
+    },
+    url: {
+      ...config?.url,
+      secureDistribution,
+      privateCdn
+    }
+  }, config);
+}
+
+/**
+ * getCloudinaryAnalytics
+ */
+
+function getCloudinaryAnalytics(analytics) {
+  return Object.assign({
+    product: NEXT_CLOUDINARY_ANALYTICS_PRODUCT_ID,
+    sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+    sdkSemver: NEXT_CLOUDINARY_VERSION,
+    techVersion: NEXT_VERSION,
+    feature: ''
+  }, analytics);
+}
+
+export { getCloudinaryAnalytics as a, getCloudinaryConfig as g };

package/dist/cloudinary-loader-1863f0f4.esm.js

@@ -0,0 +1,59 @@
+import { constructCloudinaryUrl } from '@cloudinary-util/url-loader';
+import { g as getCloudinaryConfig, a as getCloudinaryAnalytics } from './cloudinary-9437f0ad.esm.js';
+
+/**
+ * getCldImageUrl
+ */
+
+function getCldImageUrl(options, config, analytics) {
+  return constructCloudinaryUrl({
+    options,
+    config: getCloudinaryConfig(config),
+    analytics: getCloudinaryAnalytics(analytics)
+  });
+}
+
+function cloudinaryLoader({
+  loaderOptions,
+  imageProps,
+  cldOptions,
+  cldConfig = {}
+}) {
+  const options = {
+    ...imageProps,
+    ...cldOptions
+  };
+  options.width = typeof options.width === 'string' ? parseInt(options.width) : options.width;
+  options.height = typeof options.height === 'string' ? parseInt(options.height) : options.height;
+
+  // // The loader options are used to create dynamic sizing when working with responsive images
+  // // so these should override the default options collected from the props alone if
+  // // the results are different. While we don't always use the height in the loader logic,
+  // // we always pass it here, as the usage is determined later based on cropping.js
+
+  if (typeof loaderOptions?.width === 'number' && typeof options.width === 'number' && loaderOptions.width !== options.width) {
+    const multiplier = loaderOptions.width / options.width;
+    options.width = loaderOptions.width;
+
+    // The height may change based off of the value passed through via the loader options
+    // In an example where the user sizes is 800x600, but the loader is passing in 400
+    // due to responsive sizing, we want to ensure we're using a height that will
+    // resolve to the same aspect ratio
+
+    if (typeof options.height === 'number') {
+      options.height = Math.floor(options.height * multiplier);
+    }
+  } else if (typeof loaderOptions?.width === 'number' && typeof options?.width !== 'number') {
+    // If we don't have a width on the options object, this may mean that the component is using
+    // the fill option: https://nextjs.org/docs/pages/api-reference/components/image#fill
+    // The Fill option does not allow someone to pass in a width or a height
+    // If this is the case, we still need to define a width for sizing optimization but also
+    // for responsive sizing to take effect, so we can utilize the loader width for the base width
+    options.width = loaderOptions?.width;
+  }
+
+  // @ts-ignore
+  return getCldImageUrl(options, cldConfig);
+}
+
+export { cloudinaryLoader as c, getCldImageUrl as g };

package/dist/cloudinary-loader-80d421f0.cjs.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var urlLoader = require('@cloudinary-util/url-loader');
+var cloudinary = require('./cloudinary-1cbbab64.cjs.js');
+
+/**
+ * getCldImageUrl
+ */
+
+function getCldImageUrl(options, config, analytics) {
+  return urlLoader.constructCloudinaryUrl({
+    options,
+    config: cloudinary.getCloudinaryConfig(config),
+    analytics: cloudinary.getCloudinaryAnalytics(analytics)
+  });
+}
+
+function cloudinaryLoader({
+  loaderOptions,
+  imageProps,
+  cldOptions,
+  cldConfig = {}
+}) {
+  const options = {
+    ...imageProps,
+    ...cldOptions
+  };
+  options.width = typeof options.width === 'string' ? parseInt(options.width) : options.width;
+  options.height = typeof options.height === 'string' ? parseInt(options.height) : options.height;
+
+  // // The loader options are used to create dynamic sizing when working with responsive images
+  // // so these should override the default options collected from the props alone if
+  // // the results are different. While we don't always use the height in the loader logic,
+  // // we always pass it here, as the usage is determined later based on cropping.js
+
+  if (typeof loaderOptions?.width === 'number' && typeof options.width === 'number' && loaderOptions.width !== options.width) {
+    const multiplier = loaderOptions.width / options.width;
+    options.width = loaderOptions.width;
+
+    // The height may change based off of the value passed through via the loader options
+    // In an example where the user sizes is 800x600, but the loader is passing in 400
+    // due to responsive sizing, we want to ensure we're using a height that will
+    // resolve to the same aspect ratio
+
+    if (typeof options.height === 'number') {
+      options.height = Math.floor(options.height * multiplier);
+    }
+  } else if (typeof loaderOptions?.width === 'number' && typeof options?.width !== 'number') {
+    // If we don't have a width on the options object, this may mean that the component is using
+    // the fill option: https://nextjs.org/docs/pages/api-reference/components/image#fill
+    // The Fill option does not allow someone to pass in a width or a height
+    // If this is the case, we still need to define a width for sizing optimization but also
+    // for responsive sizing to take effect, so we can utilize the loader width for the base width
+    options.width = loaderOptions?.width;
+  }
+
+  // @ts-ignore
+  return getCldImageUrl(options, cldConfig);
+}
+
+exports.cloudinaryLoader = cloudinaryLoader;
+exports.getCldImageUrl = getCldImageUrl;

package/dist/next-cloudinary.cjs.d.mts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV4dC1jbG91ZGluYXJ5LmNqcy5kLm10cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/next-cloudinary.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV4dC1jbG91ZGluYXJ5LmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/next-cloudinary.cjs.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CldImage = require('./CldImage-68dff3e6.cjs.js');
+var Head = require('next/head');
+var cloudinaryLoader = require('./cloudinary-loader-80d421f0.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var CldUploadButton = require('./CldUploadButton-db9b095b.cjs.js');
+var CldUploadWidget = require('./CldUploadWidget-e39838cc.cjs.js');
+var CldVideoPlayer = require('./CldVideoPlayer-49ac4380.cjs.js');
+var urlLoader = require('@cloudinary-util/url-loader');
+var cloudinary = require('./cloudinary-1cbbab64.cjs.js');
+require('next/package.json');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var CldImage__default = /*#__PURE__*/_interopDefault(CldImage);
+var Head__default = /*#__PURE__*/_interopDefault(Head);
+var CldUploadButton__default = /*#__PURE__*/_interopDefault(CldUploadButton);
+var CldUploadWidget__default = /*#__PURE__*/_interopDefault(CldUploadWidget);
+var CldVideoPlayer__default = /*#__PURE__*/_interopDefault(CldVideoPlayer);
+
+const OG_IMAGE_WIDTH = 1200;
+const OG_IMAGE_HEIGHT = 627;
+
+/**
+ * getCldImageUrl
+ */
+
+function getCldOgImageUrl(options) {
+  return cloudinaryLoader.getCldImageUrl({
+    ...options,
+    format: options.format || 'jpg',
+    width: options.width || OG_IMAGE_WIDTH,
+    height: options.height || OG_IMAGE_HEIGHT,
+    crop: options.crop || {
+      type: 'fill',
+      gravity: 'center',
+      source: true
+    }
+  });
+}
+
+const TWITTER_CARD = 'summary_large_image';
+const CldOgImage = ({
+  excludeTags = [],
+  twitterTitle,
+  keys = {},
+  ...props
+}) => {
+  const {
+    alt
+  } = props;
+
+  // We need to separately handle the width and the height to allow our user to pass in
+  // a custom value, but also we need to know this at the component level so that we can
+  // use it when rendering the meta tags
+
+  let {
+    width = OG_IMAGE_WIDTH,
+    height = OG_IMAGE_HEIGHT
+  } = props;
+
+  // Normalize the width and height
+
+  width = typeof width === 'string' ? parseInt(width) : width;
+  height = typeof height === 'string' ? parseInt(height) : height;
+
+  // Render the final URLs. We use two different format versions to deliver
+  // webp for Twitter as it supports it (and we can control with tags) where
+  // other platforms may not support webp, so we deliver jpg
+
+  const ogImageUrl = getCldOgImageUrl({
+    ...props,
+    width,
+    height
+  });
+  const twitterImageUrl = getCldOgImageUrl({
+    ...props,
+    width,
+    height,
+    format: props.format || 'webp'
+  });
+  const metaKeys = {
+    'og:image': 'og-image',
+    'og:image:secure_url': 'og-image-secureurl',
+    'og:image:width': 'og-image-width',
+    'og:image:height': 'og-image-height',
+    'og:image:alt': 'og-image-alt',
+    'twitter:title': 'twitter-title',
+    'twitter:card': 'twitter-card',
+    'twitter:image': 'twitter-image',
+    ...keys
+  };
+
+  // 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"], {
+    children: [/*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "og:image",
+      content: ogImageUrl
+    }, metaKeys['og:image']), /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "og:image:secure_url",
+      content: ogImageUrl
+    }, metaKeys['og:image:secure_url']), /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "og:image:width",
+      content: `${width}`
+    }, metaKeys['og:image:width']), /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "og:image:height",
+      content: `${height}`
+    }, metaKeys['og:image:height']), alt && /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "og:image:alt",
+      content: alt
+    }, metaKeys['og:image:alt']), !excludeTags.includes('twitter:title') && /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "twitter:title",
+      content: twitterTitle || ' '
+    }, metaKeys['twitter:title']), /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "twitter:card",
+      content: TWITTER_CARD
+    }, metaKeys['twitter:card']), /*#__PURE__*/jsxRuntime.jsx("meta", {
+      property: "twitter:image",
+      content: twitterImageUrl
+    }, metaKeys['twitter:image'])]
+  });
+};
+
+/**
+ * getCldVideoUrl
+ */
+
+function getCldVideoUrl(options, config, analytics) {
+  return urlLoader.constructCloudinaryUrl({
+    options: {
+      assetType: 'video',
+      format: 'auto:video',
+      ...options
+    },
+    config: cloudinary.getCloudinaryConfig(config),
+    analytics: cloudinary.getCloudinaryAnalytics(analytics)
+  });
+}
+
+Object.defineProperty(exports, 'CldImage', {
+  enumerable: true,
+  get: function () { return CldImage__default["default"]; }
+});
+exports.cloudinaryLoader = cloudinaryLoader.cloudinaryLoader;
+exports.getCldImageUrl = cloudinaryLoader.getCldImageUrl;
+Object.defineProperty(exports, 'CldUploadButton', {
+  enumerable: true,
+  get: function () { return CldUploadButton__default["default"]; }
+});
+Object.defineProperty(exports, 'CldUploadWidget', {
+  enumerable: true,
+  get: function () { return CldUploadWidget__default["default"]; }
+});
+Object.defineProperty(exports, 'CldVideoPlayer', {
+  enumerable: true,
+  get: function () { return CldVideoPlayer__default["default"]; }
+});
+exports.CldOgImage = CldOgImage;
+exports.getCldOgImageUrl = getCldOgImageUrl;
+exports.getCldVideoUrl = getCldVideoUrl;

package/dist/next-cloudinary.cjs.mjs

@@ -0,0 +1,11 @@
+export {
+  CldImage,
+  CldOgImage,
+  CldUploadButton,
+  CldUploadWidget,
+  CldVideoPlayer,
+  cloudinaryLoader,
+  getCldImageUrl,
+  getCldOgImageUrl,
+  getCldVideoUrl
+} from "./next-cloudinary.cjs.js";

package/dist/next-cloudinary.esm.js

@@ -0,0 +1,134 @@
+export { default as CldImage } from './CldImage-4b579fe8.esm.js';
+import Head from 'next/head';
+import { g as getCldImageUrl } from './cloudinary-loader-1863f0f4.esm.js';
+export { c as cloudinaryLoader, g as getCldImageUrl } from './cloudinary-loader-1863f0f4.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+export { default as CldUploadButton } from './CldUploadButton-196b419b.esm.js';
+export { default as CldUploadWidget } from './CldUploadWidget-a9c04a78.esm.js';
+export { default as CldVideoPlayer } from './CldVideoPlayer-7b1734a7.esm.js';
+import { constructCloudinaryUrl } from '@cloudinary-util/url-loader';
+import { g as getCloudinaryConfig, a as getCloudinaryAnalytics } from './cloudinary-9437f0ad.esm.js';
+import 'next/package.json';
+
+const OG_IMAGE_WIDTH = 1200;
+const OG_IMAGE_HEIGHT = 627;
+
+/**
+ * getCldImageUrl
+ */
+
+function getCldOgImageUrl(options) {
+  return getCldImageUrl({
+    ...options,
+    format: options.format || 'jpg',
+    width: options.width || OG_IMAGE_WIDTH,
+    height: options.height || OG_IMAGE_HEIGHT,
+    crop: options.crop || {
+      type: 'fill',
+      gravity: 'center',
+      source: true
+    }
+  });
+}
+
+const TWITTER_CARD = 'summary_large_image';
+const CldOgImage = ({
+  excludeTags = [],
+  twitterTitle,
+  keys = {},
+  ...props
+}) => {
+  const {
+    alt
+  } = props;
+
+  // We need to separately handle the width and the height to allow our user to pass in
+  // a custom value, but also we need to know this at the component level so that we can
+  // use it when rendering the meta tags
+
+  let {
+    width = OG_IMAGE_WIDTH,
+    height = OG_IMAGE_HEIGHT
+  } = props;
+
+  // Normalize the width and height
+
+  width = typeof width === 'string' ? parseInt(width) : width;
+  height = typeof height === 'string' ? parseInt(height) : height;
+
+  // Render the final URLs. We use two different format versions to deliver
+  // webp for Twitter as it supports it (and we can control with tags) where
+  // other platforms may not support webp, so we deliver jpg
+
+  const ogImageUrl = getCldOgImageUrl({
+    ...props,
+    width,
+    height
+  });
+  const twitterImageUrl = getCldOgImageUrl({
+    ...props,
+    width,
+    height,
+    format: props.format || 'webp'
+  });
+  const metaKeys = {
+    'og:image': 'og-image',
+    'og:image:secure_url': 'og-image-secureurl',
+    'og:image:width': 'og-image-width',
+    'og:image:height': 'og-image-height',
+    'og:image:alt': 'og-image-alt',
+    'twitter:title': 'twitter-title',
+    'twitter:card': 'twitter-card',
+    'twitter:image': 'twitter-image',
+    ...keys
+  };
+
+  // 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__*/jsxs(Head, {
+    children: [/*#__PURE__*/jsx("meta", {
+      property: "og:image",
+      content: ogImageUrl
+    }, metaKeys['og:image']), /*#__PURE__*/jsx("meta", {
+      property: "og:image:secure_url",
+      content: ogImageUrl
+    }, metaKeys['og:image:secure_url']), /*#__PURE__*/jsx("meta", {
+      property: "og:image:width",
+      content: `${width}`
+    }, metaKeys['og:image:width']), /*#__PURE__*/jsx("meta", {
+      property: "og:image:height",
+      content: `${height}`
+    }, metaKeys['og:image:height']), alt && /*#__PURE__*/jsx("meta", {
+      property: "og:image:alt",
+      content: alt
+    }, metaKeys['og:image:alt']), !excludeTags.includes('twitter:title') && /*#__PURE__*/jsx("meta", {
+      property: "twitter:title",
+      content: twitterTitle || ' '
+    }, metaKeys['twitter:title']), /*#__PURE__*/jsx("meta", {
+      property: "twitter:card",
+      content: TWITTER_CARD
+    }, metaKeys['twitter:card']), /*#__PURE__*/jsx("meta", {
+      property: "twitter:image",
+      content: twitterImageUrl
+    }, metaKeys['twitter:image'])]
+  });
+};
+
+/**
+ * getCldVideoUrl
+ */
+
+function getCldVideoUrl(options, config, analytics) {
+  return constructCloudinaryUrl({
+    options: {
+      assetType: 'video',
+      format: 'auto:video',
+      ...options
+    },
+    config: getCloudinaryConfig(config),
+    analytics: getCloudinaryAnalytics(analytics)
+  });
+}
+
+export { CldOgImage, getCldOgImageUrl, getCldVideoUrl };

package/package.json

@@ -1,26 +1,45 @@
 {
   "name": "next-cloudinary",
-  "version": "6.13.0",
+  "version": "7.0.0-beta.1",
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "source": "src/index.ts",
+  "main": "dist/next-cloudinary.cjs.js",
+  "module": "dist/next-cloudinary.esm.js",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/next-cloudinary.cjs.mjs",
+        "default": "./dist/next-cloudinary.cjs.js"
+      },
+      "module": "./dist/next-cloudinary.esm.js",
+      "import": "./dist/next-cloudinary.cjs.mjs",
+      "default": "./dist/next-cloudinary.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./cld-video-player.css": "./dist/cld-video-player.css",
+    "./dist/cld-video-player.css": "./dist/cld-video-player.css",
+    "./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+    "./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+    "./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+    "./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+  },
+  "types": "./dist/next-cloudinary.cjs.d.ts",
   "dependencies": {
     "@cloudinary-util/types": "1.5.8",
     "@cloudinary-util/url-loader": "5.10.3",
-    "@cloudinary-util/util": "^3.3.2",
-    "@tsconfig/recommended": "^1.0.7"
+    "@cloudinary-util/util": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@tsconfig/recommended": "^1.0.7",
     "@types/node": "^22.0.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
     "mkdirp": "^3.0.1",
-    "tsup": "^8.2.3",
+    "tsx": "^4.19.1",
     "typescript": "^5.5.4",
     "vitest": "^2.0.5"
   },
@@ -28,11 +47,27 @@
     "next": "^12 || ^13 || ^14 || >=15.0.0-rc",
     "react": "^17 || ^18 || >=19.0.0-beta"
   },
+  "preconstruct": {
+    "exports": {
+      "importConditionDefaultExport": "default",
+      "extra": {
+        "./cld-video-player.css": "./dist/cld-video-player.css",
+        "./dist/cld-video-player.css": "./dist/cld-video-player.css",
+        "./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+        "./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+        "./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+        "./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+      }
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
+    }
+  },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "preconstruct build && tsx scripts/copy-assets.ts",
+    "dev": "preconstruct watch",
     "test": "vitest run",
-    "test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" pnpm build && cd tests/nextjs-app && npm install && npm run build",
+    "test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" pnpm build && cd tests/nextjs-app && pnpm build",
     "test:watch": "vitest"
   }
 }