@tradly/asset 1.0.12 → 1.0.14

package/dist/esm/web/FileUpload.web.js

@@ -0,0 +1,253 @@
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { CameraIcon } from './Icons.web';
+
+// Helper: compress image on the client before upload
+// - Downscale to fit within maxWidth/maxHeight.
+// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
+// - Skip SVG (vector) to avoid degradation.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var compressImage = function compressImage(file) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 1600 : _ref$maxWidth,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
+    _ref$quality = _ref.quality,
+    quality = _ref$quality === void 0 ? 1 : _ref$quality,
+    _ref$convertToWebp = _ref.convertToWebp,
+    convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
+  return new Promise(function (resolve) {
+    // Non-image or SVG: skip compression to avoid losing vector quality
+    if (!file.type.startsWith('image/') || file.type === 'image/svg+xml') {
+      resolve(file);
+      return;
+    }
+    var img = new Image();
+    img.onload = function () {
+      var width = img.width,
+        height = img.height;
+
+      // If the image is already small, keep it as-is
+      if (width <= maxWidth && height <= maxHeight) {
+        resolve(file);
+        return;
+      }
+      var scale = Math.min(maxWidth / width, maxHeight / height);
+      var targetWidth = Math.round(width * scale);
+      var targetHeight = Math.round(height * scale);
+      var canvas = document.createElement('canvas');
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      var ctx = canvas.getContext('2d');
+      if (!ctx) {
+        resolve(file);
+        return;
+      }
+      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+      // Prefer WebP for raster images to reduce size (where supported)
+      // Keep original type for GIF to avoid breaking animation.
+      var isRaster = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/heic' || file.type === 'image/heif';
+      var targetType = convertToWebp && isRaster && file.type !== 'image/gif' ? 'image/webp' : file.type;
+      canvas.toBlob(function (blob) {
+        if (!blob) {
+          resolve(file);
+          return;
+        }
+
+        // If we converted to WebP, normalize extension in the file name
+        var newName = file.name;
+        if (targetType === 'image/webp') {
+          var dotIndex = file.name.lastIndexOf('.');
+          newName = dotIndex > 0 ? "".concat(file.name.slice(0, dotIndex), ".webp") : "".concat(file.name, ".webp");
+        }
+        var compressedFile = new File([blob], newName, {
+          type: targetType,
+          lastModified: Date.now()
+        });
+        resolve(compressedFile);
+      }, targetType, quality);
+    };
+    img.onerror = function () {
+      resolve(file);
+    };
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      var _event$target;
+      img.src = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+    };
+    reader.onerror = function () {
+      return resolve(file);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var FileUpload = function FileUpload(_ref2) {
+  var loadMedia = _ref2.loadMedia,
+    accept = _ref2.accept,
+    title = _ref2.title,
+    apiService = _ref2.apiService,
+    onUploadStart = _ref2.onUploadStart,
+    onUploadComplete = _ref2.onUploadComplete,
+    onUploadError = _ref2.onUploadError,
+    className = _ref2.className,
+    buttonClassName = _ref2.buttonClassName,
+    iconContainerClassName = _ref2.iconContainerClassName,
+    titleClassName = _ref2.titleClassName,
+    loadingClassName = _ref2.loadingClassName;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setISLoading = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    length = _useState6[0],
+    setLength = _useState6[1];
+
+  // Upload files
+  var uploadFiles = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
+      var filesToUpload, uploadedUrls, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (onUploadStart) {
+              onUploadStart(fileList);
+            }
+            setISLoading(true);
+            setLength(fileList.length);
+            _context.p = 1;
+            filesToUpload = fileList; // For image uploads, compress on the client before sending
+            if (!(accept && accept.includes('image'))) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 2;
+            return Promise.all(fileList.map(function (file) {
+              return compressImage(file, {
+                maxWidth: 1600,
+                maxHeight: 1600,
+                quality: 0.95,
+                convertToWebp: true
+              });
+            }));
+          case 2:
+            filesToUpload = _context.v;
+          case 3:
+            _context.n = 4;
+            return apiService.uploadMedia(filesToUpload, apiService.authKey);
+          case 4:
+            uploadedUrls = _context.v;
+            if (onUploadComplete) {
+              onUploadComplete(uploadedUrls);
+            }
+            setLength(0);
+            if (loadMedia) {
+              loadMedia();
+            }
+            _context.n = 6;
+            break;
+          case 5:
+            _context.p = 5;
+            _t = _context.v;
+            console.error('Upload error:', _t);
+            if (onUploadError) {
+              onUploadError(_t);
+            }
+          case 6:
+            _context.p = 6;
+            setISLoading(false);
+            return _context.f(6);
+          case 7:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 5, 6, 7]]);
+    }));
+    return function uploadFiles(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  // Default classes with customization support
+  var defaultContainerClass = 'min-w-40 h-40';
+  var defaultButtonClass = 'w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors';
+  var defaultIconContainerClass = 'p-[10px] bg-primary rounded-full';
+  var defaultTitleClass = 'mt-2';
+  var defaultLoadingClass = 'flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse';
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: className || defaultContainerClass,
+      children: [/*#__PURE__*/_jsx("input", {
+        required: true,
+        id: "media_select_".concat(files === null || files === void 0 ? void 0 : files.length),
+        type: "file",
+        className: "hidden",
+        accept: accept,
+        placeholder: "",
+        onChange: (/*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+            var all_files;
+            return _regenerator().w(function (_context2) {
+              while (1) switch (_context2.n) {
+                case 0:
+                  e.stopPropagation();
+                  all_files = Array.from(e.target.files || []);
+                  if (!((all_files === null || all_files === void 0 ? void 0 : all_files.length) > 0)) {
+                    _context2.n = 1;
+                    break;
+                  }
+                  _context2.n = 1;
+                  return uploadFiles(all_files);
+                case 1:
+                  // Reset input
+                  e.target.value = '';
+                case 2:
+                  return _context2.a(2);
+              }
+            }, _callee2);
+          }));
+          return function (_x2) {
+            return _ref4.apply(this, arguments);
+          };
+        }()),
+        multiple: true
+      }), /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: buttonClassName || defaultButtonClass,
+        onClick: function onClick() {
+          return document.getElementById("media_select_".concat(files === null || files === void 0 ? void 0 : files.length)).click();
+        },
+        disabled: isLoading,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: iconContainerClassName || defaultIconContainerClass,
+          children: /*#__PURE__*/_jsx(CameraIcon, {})
+        }), /*#__PURE__*/_jsx("span", {
+          className: titleClassName || defaultTitleClass,
+          children: title
+        })]
+      })]
+    }), isLoading && Array.from({
+      length: length
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: loadingClassName || defaultLoadingClass,
+        children: ["File Uploading... ", index + 1, "/", length]
+      }, index);
+    })]
+  });
+};
+export default FileUpload;

package/dist/esm/web/Icons.web.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CloseIcon = function CloseIcon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'w-8 h-8' : _ref$className;
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className,
+    children: /*#__PURE__*/_jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M6 18L18 6M6 6l12 12"
+    })
+  });
+};
+export var CameraIcon = function CameraIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "22",
+    height: "18",
+    viewBox: "0 0 22 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M7.75033 0.166672L5.76783 2.33334H2.33366C1.14199 2.33334 0.166992 3.30834 0.166992 4.50001V17.5C0.166992 18.6917 1.14199 19.6667 2.33366 19.6667H19.667C20.8587 19.6667 21.8337 18.6917 21.8337 17.5V4.50001C21.8337 3.30834 20.8587 2.33334 19.667 2.33334H16.2328L14.2503 0.166672H7.75033ZM11.0003 16.4167C8.01033 16.4167 5.58366 13.99 5.58366 11C5.58366 8.01001 8.01033 5.58334 11.0003 5.58334C13.9903 5.58334 16.417 8.01001 16.417 11C16.417 13.99 13.9903 16.4167 11.0003 16.4167Z",
+      fill: "white"
+    })
+  });
+};

package/dist/esm/web/ImagesSkeleton.web.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ImagesSkeleton = function ImagesSkeleton(_ref) {
+  var _ref$per_page = _ref.per_page,
+    per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
+  var gridItems = [];
+  for (var i = 0; i < per_page; i++) {
+    gridItems.push(/*#__PURE__*/_jsx("div", {
+      className: "w-full min-h-[160px] bg-[#3B3269] bg-opacity-[20%] rounded-card animate-pulse"
+    }, i));
+  }
+  return gridItems;
+};
+export default ImagesSkeleton;

package/dist/esm/web/MediaGallery.web.js

@@ -0,0 +1,144 @@
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useEffect } from 'react';
+import FileUpload from './FileUpload.web';
+import ImagesSkeleton from './ImagesSkeleton.web';
+import Pagination from './Pagination.web';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var IMAGE_MIME_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/gif', 'image/avif', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/heic', 'image/heif'];
+var ImagesGallery = function ImagesGallery(_ref) {
+  var update_data = _ref.update_data,
+    closePopup = _ref.closePopup,
+    apiService = _ref.apiService,
+    onError = _ref.onError,
+    className = _ref.className,
+    gridClassName = _ref.gridClassName,
+    imageItemClassName = _ref.imageItemClassName,
+    paginationContainerClassName = _ref.paginationContainerClassName;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    images = _useState2[0],
+    setImages = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    total_count = _useState4[0],
+    setTotalCount = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentPage = _useState6[0],
+    setCurrentPage = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isLoading = _useState8[0],
+    setISLoading = _useState8[1];
+
+  // Fetch images
+  useEffect(function () {
+    loadMedia();
+  }, []);
+  var loadMedia = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var page_number,
+        _response$data,
+        _response$data2,
+        response,
+        mediaData,
+        count,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            page_number = _args.length > 0 && _args[0] !== undefined ? _args[0] : 1;
+            _context.p = 1;
+            _context.n = 2;
+            return apiService.fetchMedia({
+              mimeTypes: IMAGE_MIME_TYPES,
+              page: page_number,
+              setISLoading: setISLoading,
+              isLoading: isLoading
+            });
+          case 2:
+            response = _context.v;
+            // Handle different response formats
+            // Response might be: { media: [...], count: ... } or { data: { media: [...], count: ... } } or directly [...]
+            mediaData = (response === null || response === void 0 ? void 0 : response.media) || (response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.media) || (response === null || response === void 0 ? void 0 : response.data) || response || [];
+            count = (response === null || response === void 0 ? void 0 : response.count) || (response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.count) || (response === null || response === void 0 ? void 0 : response.total) || 0;
+            setImages(Array.isArray(mediaData) ? mediaData : []);
+            setTotalCount(count);
+            setCurrentPage(page_number);
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
+            console.error('Error loading media:', _t);
+            if (onError) {
+              onError(_t);
+            }
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return function loadMedia() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleImageClick = function handleImageClick(image) {
+    if (update_data) {
+      update_data(image.url || image);
+    }
+    if (closePopup) {
+      closePopup();
+    }
+  };
+
+  // Default classes with customization support
+  var defaultContainerClass = 'h-full flex flex-col justify-between';
+  var defaultGridClass = 'grid grid-cols-[repeat(auto-fill,minmax(calc(160px),1fr))] gap-5';
+  var defaultImageItemClass = 'cursor-pointer w-full h-40 object-contain p-3 overflow-hidden bg-white rounded-md shadow-md hover:shadow-lg transition-shadow';
+  var defaultPaginationContainerClass = 'mb-4 bg-gray-100/90 p-4 sticky bottom-0';
+  return /*#__PURE__*/_jsxs("div", {
+    className: className || defaultContainerClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: gridClassName || defaultGridClass,
+      children: [/*#__PURE__*/_jsx(FileUpload, {
+        loadMedia: loadMedia,
+        accept: "image/*",
+        title: "Add Image",
+        apiService: apiService,
+        onUploadError: onError
+      }), isLoading ? /*#__PURE__*/_jsx(ImagesSkeleton, {}) : images === null || images === void 0 ? void 0 : images.map(function (image, index) {
+        var imageUrl = typeof image === 'string' ? image : image.url;
+        var imageKey = image.id || image.url || index;
+        return /*#__PURE__*/_jsx("img", {
+          onClick: function onClick() {
+            return handleImageClick(image);
+          },
+          className: imageItemClassName || defaultImageItemClass,
+          src: imageUrl,
+          alt: image.name || 'Media item'
+        }, imageKey);
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: paginationContainerClassName || defaultPaginationContainerClass,
+      children: total_count > 0 && /*#__PURE__*/_jsx(Pagination, {
+        nextPage: function nextPage(value) {
+          return loadMedia(value);
+        },
+        pageCount: Math.ceil(total_count / 30),
+        current_page: currentPage
+      })
+    })]
+  });
+};
+export default ImagesGallery;

package/dist/esm/web/MediaPopup.web.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import MediaTab from '../components/MediaTab';
+import { CloseIcon } from './Icons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var MediaPopup = function MediaPopup(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect,
+    currentData = _ref.currentData,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? ['image'] : _ref$options,
+    apiService = _ref.apiService,
+    onError = _ref.onError,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Media Gallery' : _ref$title,
+    className = _ref.className,
+    overlayClassName = _ref.overlayClassName,
+    containerClassName = _ref.containerClassName,
+    headerClassName = _ref.headerClassName,
+    titleClassName = _ref.titleClassName,
+    closeButtonClassName = _ref.closeButtonClassName,
+    tabListClassName = _ref.tabListClassName,
+    tabButtonClassName = _ref.tabButtonClassName,
+    tabButtonActiveClassName = _ref.tabButtonActiveClassName,
+    tabButtonInactiveClassName = _ref.tabButtonInactiveClassName,
+    tabPanelClassName = _ref.tabPanelClassName,
+    gridClassName = _ref.gridClassName,
+    imageItemClassName = _ref.imageItemClassName,
+    videoItemClassName = _ref.videoItemClassName,
+    paginationContainerClassName = _ref.paginationContainerClassName;
+  if (!isOpen) return null;
+  var handleUpdate = function handleUpdate(data) {
+    if (onSelect) {
+      onSelect(data);
+    }
+  };
+  var handleClose = function handleClose() {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  // Default classes with customization support
+  var defaultOverlayClass = 'fixed inset-0 w-screen h-screen bg-black opacity-10';
+  var defaultContainerClass = 'origin-top-right z-[9999] absolute inset-0 max-w-3xl mx-auto my-auto min-h-[200px] h-[600px] bg-white rounded shadow-inner cursor-auto p-6';
+  var defaultHeaderClass = 'flex items-center justify-between gap-4';
+  var defaultTitleClass = 'text-[#000] font-bold text-2xl';
+  var defaultCloseButtonClass = 'bg-transparent rounded-full hover:bg-gray-100 p-1 transition-colors';
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: overlayClassName || defaultOverlayClass,
+      style: {
+        zIndex: 9998
+      },
+      onClick: handleClose
+    }), /*#__PURE__*/_jsxs("div", {
+      className: containerClassName || defaultContainerClass,
+      style: {
+        zIndex: 9999
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: headerClassName || defaultHeaderClass,
+        children: [/*#__PURE__*/_jsx("p", {
+          className: titleClassName || defaultTitleClass,
+          children: title
+        }), /*#__PURE__*/_jsx("button", {
+          className: closeButtonClassName || defaultCloseButtonClass,
+          type: "button",
+          onClick: handleClose,
+          "aria-label": "Close",
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })]
+      }), /*#__PURE__*/_jsx(MediaTab, {
+        imagePopup: isOpen,
+        update_data: handleUpdate,
+        current_data: currentData,
+        closePopup: handleClose,
+        options: options,
+        apiService: apiService,
+        onError: onError
+        // Pass styling props through
+        ,
+        tabListClassName: tabListClassName,
+        tabButtonClassName: tabButtonClassName,
+        tabButtonActiveClassName: tabButtonActiveClassName,
+        tabButtonInactiveClassName: tabButtonInactiveClassName,
+        tabPanelClassName: tabPanelClassName,
+        gridClassName: gridClassName,
+        imageItemClassName: imageItemClassName,
+        videoItemClassName: videoItemClassName,
+        paginationContainerClassName: paginationContainerClassName
+      })]
+    })]
+  }), document.body);
+};
+export default MediaPopup;