@chayns-components/core 5.5.42 → 5.5.51

package/AGENTS.md

@@ -2532,6 +2532,27 @@ import { GridImage } from '@chayns-components/core';
 />
 ```
 
+#### One Image
+
+```tsx
+<GridImage
+    images={['https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png']}
+    size={250}
+/>
+```
+
+#### Two Images
+
+```tsx
+<GridImage
+    images={[
+            'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
+            'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
+        ]}
+    size={250}
+/>
+```
+
 ### Props
 
 | name | type | required | description |

package/lib/cjs/api/image/post.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.postImage = void 0;
 var _chaynsApi = require("chayns-api");
-const IMAGE_SERVICE_API_V3_URL = 'https://cube.tobit.cloud/image-service/v3/Images';
-const IMAGE_RESIZER_API_URL = 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';
-
+var _uploadUrls = require("../../constants/uploadUrls");
 /**
  * Uploads an image to the tsimg cloud service
  */
@@ -28,7 +26,7 @@ const postImage = async ({
 
   const body = new FormData();
   body.append('File', file);
-  const url = file.size > 10 * 1024 * 1024 ? `${IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}` : `${IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;
+  const url = file.size > 10 * 1024 * 1024 ? `${_uploadUrls.IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}` : `${_uploadUrls.IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;
   const response = await fetch(url, {
     body,
     headers: {

package/lib/cjs/api/image/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["_chaynsApi","require","IMAGE_SERVICE_API_V3_URL","IMAGE_RESIZER_API_URL","postImage","file","shouldUploadImageToSite","accessToken","getAccessToken","user","getUser","site","getSite","personId","undefined","body","FormData","append","url","size","id","response","fetch","headers","Accept","Authorization","method","ok","image","baseDomain","json","key","path","base","endsWith","slice","meta","preview","width","String","height","Error","status","exports"],"sources":["../../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface Result {\n    requestId: string;\n    image: Image;\n    baseDomain: string;\n    signature: Signature;\n}\n\nexport interface Image {\n    path: string;\n    width: number;\n    height: number;\n    size: number;\n    hash: string;\n    preview: string;\n    isSecured: boolean;\n    format: string;\n    fileExtension: string;\n}\n\nexport interface Signature {\n    verify: string;\n    signature: string;\n    expires: Date;\n}\n\ninterface PostImageOptions {\n    file: File;\n    shouldUploadImageToSite?: boolean;\n}\n\nconst IMAGE_SERVICE_API_V3_URL = 'https://cube.tobit.cloud/image-service/v3/Images';\nconst IMAGE_RESIZER_API_URL = 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n    shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n    const site = getSite();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    // const body = await getFileAsArrayBuffer(file);\n\n    const body = new FormData();\n\n    body.append('File', file);\n\n    const url =\n        file.size > 10 * 1024 * 1024\n            ? `${IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}`\n            : `${IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;\n\n    const response = await fetch(url, {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const { image, baseDomain } = (await response.json()) as Result;\n        // Maps image-service-api-v3 result to v2 result.\n        return {\n            key: image.path,\n            // Removes trailing slash from baseDomain, since image-service-api-v2 doesn't have a trailing slash on base.\n            base: baseDomain.endsWith('/') ? baseDomain.slice(0, -1) : baseDomain,\n            meta: {\n                preview: image.preview,\n                width: String(image.width),\n                height: String(image.height),\n            },\n        };\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAuCA,MAAMC,wBAAwB,GAAG,kDAAkD;AACnF,MAAMC,qBAAqB,GAAG,+DAA+D;;AAE7F;AACA;AACA;AACO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC,IAAI;EACJC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAC9C,MAAMC,IAAI,GAAG,IAAAC,kBAAO,EAAC,CAAC;EACtB,MAAMC,IAAI,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAEtB,IAAI,CAACL,WAAW,IAAI,EAACE,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ,GAAE;IACjC,OAAOC,SAAS;EACpB;;EAEA;;EAEA,MAAMC,IAAI,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE3BD,IAAI,CAACE,MAAM,CAAC,MAAM,EAAEZ,IAAI,CAAC;EAEzB,MAAMa,GAAG,GACLb,IAAI,CAACc,IAAI,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,GACtB,GAAGhB,qBAAqB,IAAIG,uBAAuB,GAAGK,IAAI,CAACS,EAAE,GAAGX,IAAI,CAACI,QAAQ,EAAE,GAC/E,GAAGX,wBAAwB,IAAII,uBAAuB,GAAGK,IAAI,CAACS,EAAE,GAAGX,IAAI,CAACI,QAAQ,EAAE;EAE5F,MAAMQ,QAAQ,GAAG,MAAMC,KAAK,CAACJ,GAAG,EAAE;IAC9BH,IAAI;IACJQ,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAE,UAAUlB,WAAW;IACxC,CAAC;IACDmB,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAM;MAAEC,KAAK;MAAEC;IAAW,CAAC,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAAY;IAC/D;IACA,OAAO;MACHC,GAAG,EAAEH,KAAK,CAACI,IAAI;MACf;MACAC,IAAI,EAAEJ,UAAU,CAACK,QAAQ,CAAC,GAAG,CAAC,GAAGL,UAAU,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAGN,UAAU;MACrEO,IAAI,EAAE;QACFC,OAAO,EAAET,KAAK,CAACS,OAAO;QACtBC,KAAK,EAAEC,MAAM,CAACX,KAAK,CAACU,KAAK,CAAC;QAC1BE,MAAM,EAAED,MAAM,CAACX,KAAK,CAACY,MAAM;MAC/B;IACJ,CAAC;EACL;EAEA,MAAMC,KAAK,CAAC,sCAAsCpB,QAAQ,CAACqB,MAAM,IAAI,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAvC,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"post.js","names":["_chaynsApi","require","_uploadUrls","postImage","file","shouldUploadImageToSite","accessToken","getAccessToken","user","getUser","site","getSite","personId","undefined","body","FormData","append","url","size","IMAGE_RESIZER_API_URL","id","IMAGE_SERVICE_API_V3_URL","response","fetch","headers","Accept","Authorization","method","ok","image","baseDomain","json","key","path","base","endsWith","slice","meta","preview","width","String","height","Error","status","exports"],"sources":["../../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport { IMAGE_RESIZER_API_URL, IMAGE_SERVICE_API_V3_URL } from '../../constants/uploadUrls';\nimport type { Meta } from '../../types/file';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface Result {\n    requestId: string;\n    image: Image;\n    baseDomain: string;\n    signature: Signature;\n}\n\nexport interface Image {\n    path: string;\n    width: number;\n    height: number;\n    size: number;\n    hash: string;\n    preview: string;\n    isSecured: boolean;\n    format: string;\n    fileExtension: string;\n}\n\nexport interface Signature {\n    verify: string;\n    signature: string;\n    expires: Date;\n}\n\ninterface PostImageOptions {\n    file: File;\n    shouldUploadImageToSite?: boolean;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n    shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n    const site = getSite();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    // const body = await getFileAsArrayBuffer(file);\n\n    const body = new FormData();\n\n    body.append('File', file);\n\n    const url =\n        file.size > 10 * 1024 * 1024\n            ? `${IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}`\n            : `${IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;\n\n    const response = await fetch(url, {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const { image, baseDomain } = (await response.json()) as Result;\n        // Maps image-service-api-v3 result to v2 result.\n        return {\n            key: image.path,\n            // Removes trailing slash from baseDomain, since image-service-api-v2 doesn't have a trailing slash on base.\n            base: baseDomain.endsWith('/') ? baseDomain.slice(0, -1) : baseDomain,\n            meta: {\n                preview: image.preview,\n                width: String(image.width),\n                height: String(image.height),\n            },\n        };\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAuCA;AACA;AACA;AACO,MAAME,SAAS,GAAG,MAAAA,CAAO;EAC5BC,IAAI;EACJC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAC9C,MAAMC,IAAI,GAAG,IAAAC,kBAAO,EAAC,CAAC;EACtB,MAAMC,IAAI,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAEtB,IAAI,CAACL,WAAW,IAAI,EAACE,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ,GAAE;IACjC,OAAOC,SAAS;EACpB;;EAEA;;EAEA,MAAMC,IAAI,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE3BD,IAAI,CAACE,MAAM,CAAC,MAAM,EAAEZ,IAAI,CAAC;EAEzB,MAAMa,GAAG,GACLb,IAAI,CAACc,IAAI,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,GACtB,GAAGC,iCAAqB,IAAId,uBAAuB,GAAGK,IAAI,CAACU,EAAE,GAAGZ,IAAI,CAACI,QAAQ,EAAE,GAC/E,GAAGS,oCAAwB,IAAIhB,uBAAuB,GAAGK,IAAI,CAACU,EAAE,GAAGZ,IAAI,CAACI,QAAQ,EAAE;EAE5F,MAAMU,QAAQ,GAAG,MAAMC,KAAK,CAACN,GAAG,EAAE;IAC9BH,IAAI;IACJU,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAE,UAAUpB,WAAW;IACxC,CAAC;IACDqB,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAM;MAAEC,KAAK;MAAEC;IAAW,CAAC,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAAY;IAC/D;IACA,OAAO;MACHC,GAAG,EAAEH,KAAK,CAACI,IAAI;MACf;MACAC,IAAI,EAAEJ,UAAU,CAACK,QAAQ,CAAC,GAAG,CAAC,GAAGL,UAAU,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAGN,UAAU;MACrEO,IAAI,EAAE;QACFC,OAAO,EAAET,KAAK,CAACS,OAAO;QACtBC,KAAK,EAAEC,MAAM,CAACX,KAAK,CAACU,KAAK,CAAC;QAC1BE,MAAM,EAAED,MAAM,CAACX,KAAK,CAACY,MAAM;MAC/B;IACJ,CAAC;EACL;EAEA,MAAMC,KAAK,CAAC,sCAAsCpB,QAAQ,CAACqB,MAAM,IAAI,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAzC,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/cjs/api/video/post.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.postVideo = void 0;
 var _chaynsApi = require("chayns-api");
+var _uploadUrls = require("../../constants/uploadUrls");
 /**
  * Uploads a video to the streaming service
  */
@@ -19,7 +20,7 @@ const postVideo = async ({
   }
   const formData = new FormData();
   formData.append('files', file);
-  const response = await fetch('https://streamingservice.chayns.space/video?disableIntercom=true', {
+  const response = await fetch(`${_uploadUrls.VIDEO_SERVICE_URL}?disableIntercom=true`, {
     body: formData,
     headers: {
       Authorization: `bearer ${accessToken}`

package/lib/cjs/api/video/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["_chaynsApi","require","postVideo","file","accessToken","getAccessToken","undefined","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","data","json","Error","status","exports"],"sources":["../../../../src/api/video/post.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\n\nexport interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(\n        'https://streamingservice.chayns.space/video?disableIntercom=true',\n        {\n            body: formData,\n            headers: {\n                Authorization: `bearer ${accessToken}`,\n            },\n            method: 'POST',\n        },\n    );\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAcA;AACA;AACA;AACO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAOE,SAAS;EACpB;EAEA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEN,IAAI,CAAC;EAE9B,MAAMO,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUV,WAAW;IACxC,CAAC;IACDW,MAAM,EAAE;EACZ,CACJ,CAAC;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAC,sCAAsCT,QAAQ,CAACU,MAAM,IAAI,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAnB,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"post.js","names":["_chaynsApi","require","_uploadUrls","postVideo","file","accessToken","getAccessToken","undefined","formData","FormData","append","response","fetch","VIDEO_SERVICE_URL","body","headers","Authorization","method","ok","data","json","Error","status","exports"],"sources":["../../../../src/api/video/post.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { VIDEO_SERVICE_URL } from '../../constants/uploadUrls';\n\nexport interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(`${VIDEO_SERVICE_URL}?disableIntercom=true`, {\n        body: formData,\n        headers: {\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAcA;AACA;AACA;AACO,MAAME,SAAS,GAAG,MAAAA,CAAO;EAC5BC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAOE,SAAS;EACpB;EAEA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEN,IAAI,CAAC;EAE9B,MAAMO,QAAQ,GAAG,MAAMC,KAAK,CAAC,GAAGC,6BAAiB,uBAAuB,EAAE;IACtEC,IAAI,EAAEN,QAAQ;IACdO,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUX,WAAW;IACxC,CAAC;IACDY,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIN,QAAQ,CAACO,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAC,sCAAsCV,QAAQ,CAACW,MAAM,IAAI,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAApB,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.js

@@ -43,7 +43,7 @@ const GridImage = ({
   const handleLeftImageLoaded = (0, _react.useCallback)(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedBottomRightImage(true), []);
-  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+  const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
   return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
     ref: gridImageRef,
     $background: background,
@@ -53,7 +53,23 @@ const GridImage = ({
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined
-  }, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
+  }, images.length === 1 && /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridSingleImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), images.length === 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: true,
+    $size: size,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: false,
+    $size: size,
+    onLoad: handleTopRightImageLoaded,
+    src: images[1]
+  })), images.length > 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,
     $size: size,
@@ -67,7 +83,7 @@ const GridImage = ({
     $isHidden: isGridImageHidden,
     onLoad: handleBottomRightImageLoaded,
     src: images[2]
-  }));
+  })));
 };
 GridImage.displayName = 'GridImage';
 var _default = exports.default = GridImage;

package/lib/cjs/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const gridImageRef = useRef<HTMLDivElement>(null);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n    useFocusRingPortal(gridImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            ref={gridImageRef}\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridSingleImage","$isHidden","onLoad","src","Fragment","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridSingleImage,\n    StyledGridTopRightImage,\n    StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const gridImageRef = useRef<HTMLDivElement>(null);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n    useFocusRingPortal(gridImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage ||\n        (images.length > 1 && !hasLoadedTopRightImage) ||\n        (images.length > 2 && !hasLoadedBottomRightImage);\n\n    return (\n        <StyledGridImage\n            ref={gridImageRef}\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            {images.length === 1 && (\n                <StyledGridSingleImage\n                    $isHidden={isGridImageHidden}\n                    onLoad={handleLeftImageLoaded}\n                    src={images[0]}\n                />\n            )}\n            {images.length === 2 && (\n                <>\n                    <StyledGridTwoImage\n                        $isHidden={isGridImageHidden}\n                        $isLeft\n                        $size={size}\n                        onLoad={handleLeftImageLoaded}\n                        src={images[0]}\n                    />\n                    <StyledGridTwoImage\n                        $isHidden={isGridImageHidden}\n                        $isLeft={false}\n                        $size={size}\n                        onLoad={handleTopRightImageLoaded}\n                        src={images[1]}\n                    />\n                </>\n            )}\n            {images.length > 2 && (\n                <>\n                    <StyledGridLeftImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleLeftImageLoaded}\n                        $size={size}\n                        src={images[0]}\n                    />\n                    <StyledGridTopRightImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleTopRightImageLoaded}\n                        $size={size}\n                        src={images[1]}\n                    />\n                    <StyledGridBottomRightImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleBottomRightImageLoaded}\n                        src={images[2]}\n                    />\n                </>\n            )}\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
+exports.StyledGridTwoImage = exports.StyledGridTopRightImage = exports.StyledGridSingleImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
@@ -32,6 +32,40 @@ const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
         outline: none;
     }
 `;
+const StyledGridSingleImage = exports.StyledGridSingleImage = _styledComponents.default.img`
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+const StyledGridTwoImage = exports.StyledGridTwoImage = _styledComponents.default.img`
+    border-right: ${({
+  $isLeft,
+  $size
+}) => $isLeft ? `${$size / 40}px solid white` : undefined};
+    box-sizing: border-box;
+    height: 100%;
+    left: ${({
+  $isLeft
+}) => $isLeft ? 0 : undefined};
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: ${({
+  $isLeft
+}) => $isLeft ? undefined : 0};
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 50%;
+`;
 const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
     border-right: ${({
   $size

package/lib/cjs/components/grid-image/GridImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,uBAAuB,GAAAX,OAAA,CAAAW,uBAAA,GAAGV,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAME,0BAA0B,GAAAZ,OAAA,CAAAY,0BAAA,GAAGX,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridSingleImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n    $isHidden: boolean;\n    $isLeft: boolean;\n    $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n    border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n    box-sizing: border-box;\n    height: 100%;\n    left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,qBAAqB,GAAAR,OAAA,CAAAQ,qBAAA,GAAGP,yBAAM,CAACQ,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAGV,yBAAM,CAACQ,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOM,MAAMO,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMI,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMK,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAGd,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.test.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _vitest = require("vitest");
+var _GridImage = _interopRequireDefault(require("./GridImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)('GridImage', () => {
+  (0, _vitest.it)('renders one image without additional grid images', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
+      images: ['one.jpg'],
+      size: 100
+    }));
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(1);
+    (0, _vitest.expect)(_react.screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
+  });
+  (0, _vitest.it)('renders two images side by side without a third grid image', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
+      images: ['one.jpg', 'two.jpg'],
+      size: 100
+    }));
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(2);
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
+  });
+});
+//# sourceMappingURL=GridImage.test.js.map

package/lib/cjs/components/grid-image/GridImage.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_GridImage","e","__esModule","default","describe","it","render","createElement","images","size","expect","screen","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n    it('renders one image without additional grid images', () => {\n        render(<GridImage images={['one.jpg']} size={100} />);\n\n        expect(screen.getAllByRole('img')).toHaveLength(1);\n        expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n    });\n\n    it('renders two images side by side without a third grid image', () => {\n        render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n        expect(screen.getAllByRole('img')).toHaveLength(2);\n        expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n        expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n    });\n});\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAoC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpC,IAAAG,gBAAQ,EAAC,WAAW,EAAE,MAAM;EACxB,IAAAC,UAAE,EAAC,kDAAkD,EAAE,MAAM;IACzD,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErD,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACG,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEF,IAAAV,UAAE,EAAC,4DAA4D,EAAE,MAAM;IACnE,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhE,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvE,IAAAL,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/constants/uploadUrls.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VIDEO_SERVICE_URL = exports.IMAGE_SERVICE_API_V3_URL = exports.IMAGE_RESIZER_API_URL = void 0;
+/**
+ * Reads an environment variable defensively so that accessing `process.env` does
+ * not throw a `ReferenceError` in browser environments where `process` is not
+ * defined. Returns `undefined` if the variable is not set or not accessible.
+ */
+const readEnv = key => {
+  try {
+    if (typeof process !== 'undefined' && process.env) {
+      const value = process.env[key];
+      if (typeof value === 'string' && value.length > 0) {
+        return value;
+      }
+    }
+  } catch {
+    // Accessing `process` can throw in some sandboxed environments.
+  }
+  return undefined;
+};
+
+/**
+ * URL of the image service used to upload images.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image service when the variable is not defined.
+ */
+const IMAGE_SERVICE_API_V3_URL = exports.IMAGE_SERVICE_API_V3_URL = readEnv('CHAYNS_IMAGE_SERVICE_URL') ?? 'https://cube.tobit.cloud/image-service/v3/Images';
+
+/**
+ * URL of the image resizer service used to upload images larger than 10 MB.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_RESIZER_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image resizer when the variable is not defined.
+ */
+const IMAGE_RESIZER_API_URL = exports.IMAGE_RESIZER_API_URL = readEnv('CHAYNS_IMAGE_RESIZER_URL') ?? 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';
+
+/**
+ * URL of the streaming service used to upload videos.
+ *
+ * Can be overridden via the `CHAYNS_VIDEO_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted video service). Falls back
+ * to the default chayns streaming service when the variable is not defined.
+ */
+const VIDEO_SERVICE_URL = exports.VIDEO_SERVICE_URL = readEnv('CHAYNS_VIDEO_SERVICE_URL') ?? 'https://streamingservice.chayns.space/video';
+//# sourceMappingURL=uploadUrls.js.map

package/lib/cjs/constants/uploadUrls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadUrls.js","names":["readEnv","key","process","env","value","length","undefined","IMAGE_SERVICE_API_V3_URL","exports","IMAGE_RESIZER_API_URL","VIDEO_SERVICE_URL"],"sources":["../../../src/constants/uploadUrls.ts"],"sourcesContent":["/**\n * Reads an environment variable defensively so that accessing `process.env` does\n * not throw a `ReferenceError` in browser environments where `process` is not\n * defined. Returns `undefined` if the variable is not set or not accessible.\n */\nconst readEnv = (key: string): string | undefined => {\n    try {\n        if (typeof process !== 'undefined' && process.env) {\n            const value = process.env[key];\n\n            if (typeof value === 'string' && value.length > 0) {\n                return value;\n            }\n        }\n    } catch {\n        // Accessing `process` can throw in some sandboxed environments.\n    }\n\n    return undefined;\n};\n\n/**\n * URL of the image service used to upload images.\n *\n * Can be overridden via the `CHAYNS_IMAGE_SERVICE_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted image service). Falls back\n * to the default chayns image service when the variable is not defined.\n */\nexport const IMAGE_SERVICE_API_V3_URL =\n    readEnv('CHAYNS_IMAGE_SERVICE_URL') ?? 'https://cube.tobit.cloud/image-service/v3/Images';\n\n/**\n * URL of the image resizer service used to upload images larger than 10 MB.\n *\n * Can be overridden via the `CHAYNS_IMAGE_RESIZER_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted image service). Falls back\n * to the default chayns image resizer when the variable is not defined.\n */\nexport const IMAGE_RESIZER_API_URL =\n    readEnv('CHAYNS_IMAGE_RESIZER_URL') ??\n    'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';\n\n/**\n * URL of the streaming service used to upload videos.\n *\n * Can be overridden via the `CHAYNS_VIDEO_SERVICE_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted video service). Falls back\n * to the default chayns streaming service when the variable is not defined.\n */\nexport const VIDEO_SERVICE_URL =\n    readEnv('CHAYNS_VIDEO_SERVICE_URL') ?? 'https://streamingservice.chayns.space/video';\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,OAAO,GAAIC,GAAW,IAAyB;EACjD,IAAI;IACA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAE;MAC/C,MAAMC,KAAK,GAAGF,OAAO,CAACC,GAAG,CAACF,GAAG,CAAC;MAE9B,IAAI,OAAOG,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,MAAM,GAAG,CAAC,EAAE;QAC/C,OAAOD,KAAK;MAChB;IACJ;EACJ,CAAC,CAAC,MAAM;IACJ;EAAA;EAGJ,OAAOE,SAAS;AACpB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GACjCP,OAAO,CAAC,0BAA0B,CAAC,IAAI,kDAAkD;;AAE7F;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMS,qBAAqB,GAAAD,OAAA,CAAAC,qBAAA,GAC9BT,OAAO,CAAC,0BAA0B,CAAC,IACnC,+DAA+D;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMU,iBAAiB,GAAAF,OAAA,CAAAE,iBAAA,GAC1BV,OAAO,CAAC,0BAA0B,CAAC,IAAI,6CAA6C","ignoreList":[]}

package/lib/cjs/utils/uploadFile.js

@@ -12,7 +12,7 @@ const uploadFile = async ({
   shouldUploadImageToSite
 }) => {
   var _fileToUpload$file, _fileToUpload$file2;
-  if (!fileToUpload || fileToUpload.state !== 'none') {
+  if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
     return;
   }
   if ((_fileToUpload$file = fileToUpload.file) !== null && _fileToUpload$file !== void 0 && _fileToUpload$file.type.includes('video/')) {

package/lib/cjs/utils/uploadFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","undefined","exports"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n    fileToUpload: InternalFileItem;\n    callback: (UploadedFile: Video | Image) => void;\n    shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n    fileToUpload,\n    callback,\n    shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n    if (!fileToUpload || fileToUpload.state !== 'none') {\n        return;\n    }\n\n    if (fileToUpload.file?.type.includes('video/')) {\n        const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n        if (uploadedVideo) {\n            callback({\n                ...uploadedVideo,\n                id: uploadedVideo.id.toString(),\n            });\n        }\n    }\n\n    if (fileToUpload.file?.type.includes('image/')) {\n        const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n        if (uploadedImage) {\n            callback({\n                url: `${uploadedImage.base}/${uploadedImage.key}`,\n                id: uploadedImage.key,\n                meta: uploadedImage.meta,\n                ratio:\n                    uploadedImage.meta?.width && uploadedImage.meta?.height\n                        ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n                        : undefined,\n            });\n        }\n    }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AASO,MAAME,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EAAA,IAAAC,kBAAA,EAAAC,mBAAA;EACrC,IAAI,CAACJ,YAAY,IAAIA,YAAY,CAACK,KAAK,KAAK,MAAM,EAAE;IAChD;EACJ;EAEA,KAAAF,kBAAA,GAAIH,YAAY,CAACM,IAAI,cAAAH,kBAAA,eAAjBA,kBAAA,CAAmBI,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAM,IAAAC,gBAAS,EAAC;MAAEJ,IAAI,EAAEN,YAAY,CAACM;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfR,QAAQ,CAAC;QACL,GAAGQ,aAAa;QAChBE,EAAE,EAAEF,aAAa,CAACE,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,KAAAR,mBAAA,GAAIJ,YAAY,CAACM,IAAI,cAAAF,mBAAA,eAAjBA,mBAAA,CAAmBG,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMK,aAAa,GAAG,MAAM,IAAAC,eAAS,EAAC;MAAER,IAAI,EAAEN,YAAY,CAACM,IAAI;MAAEJ;IAAwB,CAAC,CAAC;IAE3F,IAAIW,aAAa,EAAE;MAAA,IAAAE,mBAAA,EAAAC,oBAAA,EAAAC,oBAAA,EAAAC,oBAAA;MACfjB,QAAQ,CAAC;QACLkB,GAAG,EAAE,GAAGN,aAAa,CAACO,IAAI,IAAIP,aAAa,CAACQ,GAAG,EAAE;QACjDV,EAAE,EAAEE,aAAa,CAACQ,GAAG;QACrBC,IAAI,EAAET,aAAa,CAACS,IAAI;QACxBC,KAAK,EACD,CAAAR,mBAAA,GAAAF,aAAa,CAACS,IAAI,cAAAP,mBAAA,eAAlBA,mBAAA,CAAoBS,KAAK,KAAAR,oBAAA,GAAIH,aAAa,CAACS,IAAI,cAAAN,oBAAA,eAAlBA,oBAAA,CAAoBS,MAAM,GACjDC,MAAM,EAAAT,oBAAA,GAACJ,aAAa,CAACS,IAAI,cAAAL,oBAAA,uBAAlBA,oBAAA,CAAoBO,KAAK,CAAC,GAAGE,MAAM,EAAAR,oBAAA,GAACL,aAAa,CAACS,IAAI,cAAAJ,oBAAA,uBAAlBA,oBAAA,CAAoBO,MAAM,CAAC,GACtEE;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC;AAACC,OAAA,CAAA7B,UAAA,GAAAA,UAAA","ignoreList":[]}
+{"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","undefined","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","exports"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n    fileToUpload: InternalFileItem;\n    callback: (UploadedFile: Video | Image) => void;\n    shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n    fileToUpload,\n    callback,\n    shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n    if (!fileToUpload || (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n        return;\n    }\n\n    if (fileToUpload.file?.type.includes('video/')) {\n        const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n        if (uploadedVideo) {\n            callback({\n                ...uploadedVideo,\n                id: uploadedVideo.id.toString(),\n            });\n        }\n    }\n\n    if (fileToUpload.file?.type.includes('image/')) {\n        const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n        if (uploadedImage) {\n            callback({\n                url: `${uploadedImage.base}/${uploadedImage.key}`,\n                id: uploadedImage.key,\n                meta: uploadedImage.meta,\n                ratio:\n                    uploadedImage.meta?.width && uploadedImage.meta?.height\n                        ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n                        : undefined,\n            });\n        }\n    }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AASO,MAAME,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EAAA,IAAAC,kBAAA,EAAAC,mBAAA;EACrC,IAAI,CAACJ,YAAY,IAAKA,YAAY,CAACK,KAAK,KAAKC,SAAS,IAAIN,YAAY,CAACK,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,KAAAF,kBAAA,GAAIH,YAAY,CAACO,IAAI,cAAAJ,kBAAA,eAAjBA,kBAAA,CAAmBK,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAM,IAAAC,gBAAS,EAAC;MAAEJ,IAAI,EAAEP,YAAY,CAACO;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfT,QAAQ,CAAC;QACL,GAAGS,aAAa;QAChBE,EAAE,EAAEF,aAAa,CAACE,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,KAAAT,mBAAA,GAAIJ,YAAY,CAACO,IAAI,cAAAH,mBAAA,eAAjBA,mBAAA,CAAmBI,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMK,aAAa,GAAG,MAAM,IAAAC,eAAS,EAAC;MAAER,IAAI,EAAEP,YAAY,CAACO,IAAI;MAAEL;IAAwB,CAAC,CAAC;IAE3F,IAAIY,aAAa,EAAE;MAAA,IAAAE,mBAAA,EAAAC,oBAAA,EAAAC,oBAAA,EAAAC,oBAAA;MACflB,QAAQ,CAAC;QACLmB,GAAG,EAAE,GAAGN,aAAa,CAACO,IAAI,IAAIP,aAAa,CAACQ,GAAG,EAAE;QACjDV,EAAE,EAAEE,aAAa,CAACQ,GAAG;QACrBC,IAAI,EAAET,aAAa,CAACS,IAAI;QACxBC,KAAK,EACD,CAAAR,mBAAA,GAAAF,aAAa,CAACS,IAAI,cAAAP,mBAAA,eAAlBA,mBAAA,CAAoBS,KAAK,KAAAR,oBAAA,GAAIH,aAAa,CAACS,IAAI,cAAAN,oBAAA,eAAlBA,oBAAA,CAAoBS,MAAM,GACjDC,MAAM,EAAAT,oBAAA,GAACJ,aAAa,CAACS,IAAI,cAAAL,oBAAA,uBAAlBA,oBAAA,CAAoBO,KAAK,CAAC,GAAGE,MAAM,EAAAR,oBAAA,GAACL,aAAa,CAACS,IAAI,cAAAJ,oBAAA,uBAAlBA,oBAAA,CAAoBO,MAAM,CAAC,GACtEpB;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC;AAACsB,OAAA,CAAA7B,UAAA,GAAAA,UAAA","ignoreList":[]}

package/lib/esm/api/image/post.js

@@ -1,7 +1,5 @@
 import { getAccessToken, getSite, getUser } from 'chayns-api';
-const IMAGE_SERVICE_API_V3_URL = 'https://cube.tobit.cloud/image-service/v3/Images';
-const IMAGE_RESIZER_API_URL = 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';
-
+import { IMAGE_RESIZER_API_URL, IMAGE_SERVICE_API_V3_URL } from '../../constants/uploadUrls';
 /**
  * Uploads an image to the tsimg cloud service
  */

package/lib/esm/api/image/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["getAccessToken","getSite","getUser","IMAGE_SERVICE_API_V3_URL","IMAGE_RESIZER_API_URL","postImage","file","shouldUploadImageToSite","accessToken","user","site","personId","undefined","body","FormData","append","url","size","id","response","fetch","headers","Accept","Authorization","method","ok","image","baseDomain","json","key","path","base","endsWith","slice","meta","preview","width","String","height","Error","status"],"sources":["../../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface Result {\n    requestId: string;\n    image: Image;\n    baseDomain: string;\n    signature: Signature;\n}\n\nexport interface Image {\n    path: string;\n    width: number;\n    height: number;\n    size: number;\n    hash: string;\n    preview: string;\n    isSecured: boolean;\n    format: string;\n    fileExtension: string;\n}\n\nexport interface Signature {\n    verify: string;\n    signature: string;\n    expires: Date;\n}\n\ninterface PostImageOptions {\n    file: File;\n    shouldUploadImageToSite?: boolean;\n}\n\nconst IMAGE_SERVICE_API_V3_URL = 'https://cube.tobit.cloud/image-service/v3/Images';\nconst IMAGE_RESIZER_API_URL = 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n    shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n    const site = getSite();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    // const body = await getFileAsArrayBuffer(file);\n\n    const body = new FormData();\n\n    body.append('File', file);\n\n    const url =\n        file.size > 10 * 1024 * 1024\n            ? `${IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}`\n            : `${IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;\n\n    const response = await fetch(url, {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const { image, baseDomain } = (await response.json()) as Result;\n        // Maps image-service-api-v3 result to v2 result.\n        return {\n            key: image.path,\n            // Removes trailing slash from baseDomain, since image-service-api-v2 doesn't have a trailing slash on base.\n            base: baseDomain.endsWith('/') ? baseDomain.slice(0, -1) : baseDomain,\n            meta: {\n                preview: image.preview,\n                width: String(image.width),\n                height: String(image.height),\n            },\n        };\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAuC7D,MAAMC,wBAAwB,GAAG,kDAAkD;AACnF,MAAMC,qBAAqB,GAAG,+DAA+D;;AAE7F;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC,IAAI;EACJC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMR,cAAc,CAAC,CAAC;EAC9C,MAAMS,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAMQ,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACO,WAAW,IAAI,CAACC,IAAI,EAAEE,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;;EAEA;;EAEA,MAAMC,IAAI,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE3BD,IAAI,CAACE,MAAM,CAAC,MAAM,EAAET,IAAI,CAAC;EAEzB,MAAMU,GAAG,GACLV,IAAI,CAACW,IAAI,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,GACtB,GAAGb,qBAAqB,IAAIG,uBAAuB,GAAGG,IAAI,CAACQ,EAAE,GAAGT,IAAI,CAACE,QAAQ,EAAE,GAC/E,GAAGR,wBAAwB,IAAII,uBAAuB,GAAGG,IAAI,CAACQ,EAAE,GAAGT,IAAI,CAACE,QAAQ,EAAE;EAE5F,MAAMQ,QAAQ,GAAG,MAAMC,KAAK,CAACJ,GAAG,EAAE;IAC9BH,IAAI;IACJQ,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAE,UAAUf,WAAW;IACxC,CAAC;IACDgB,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAM;MAAEC,KAAK;MAAEC;IAAW,CAAC,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAAY;IAC/D;IACA,OAAO;MACHC,GAAG,EAAEH,KAAK,CAACI,IAAI;MACf;MACAC,IAAI,EAAEJ,UAAU,CAACK,QAAQ,CAAC,GAAG,CAAC,GAAGL,UAAU,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAGN,UAAU;MACrEO,IAAI,EAAE;QACFC,OAAO,EAAET,KAAK,CAACS,OAAO;QACtBC,KAAK,EAAEC,MAAM,CAACX,KAAK,CAACU,KAAK,CAAC;QAC1BE,MAAM,EAAED,MAAM,CAACX,KAAK,CAACY,MAAM;MAC/B;IACJ,CAAC;EACL;EAEA,MAAMC,KAAK,CAAC,sCAAsCpB,QAAQ,CAACqB,MAAM,IAAI,CAAC;AAC1E,CAAC","ignoreList":[]}
+{"version":3,"file":"post.js","names":["getAccessToken","getSite","getUser","IMAGE_RESIZER_API_URL","IMAGE_SERVICE_API_V3_URL","postImage","file","shouldUploadImageToSite","accessToken","user","site","personId","undefined","body","FormData","append","url","size","id","response","fetch","headers","Accept","Authorization","method","ok","image","baseDomain","json","key","path","base","endsWith","slice","meta","preview","width","String","height","Error","status"],"sources":["../../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport { IMAGE_RESIZER_API_URL, IMAGE_SERVICE_API_V3_URL } from '../../constants/uploadUrls';\nimport type { Meta } from '../../types/file';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface Result {\n    requestId: string;\n    image: Image;\n    baseDomain: string;\n    signature: Signature;\n}\n\nexport interface Image {\n    path: string;\n    width: number;\n    height: number;\n    size: number;\n    hash: string;\n    preview: string;\n    isSecured: boolean;\n    format: string;\n    fileExtension: string;\n}\n\nexport interface Signature {\n    verify: string;\n    signature: string;\n    expires: Date;\n}\n\ninterface PostImageOptions {\n    file: File;\n    shouldUploadImageToSite?: boolean;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n    shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n    const site = getSite();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    // const body = await getFileAsArrayBuffer(file);\n\n    const body = new FormData();\n\n    body.append('File', file);\n\n    const url =\n        file.size > 10 * 1024 * 1024\n            ? `${IMAGE_RESIZER_API_URL}/${shouldUploadImageToSite ? site.id : user.personId}`\n            : `${IMAGE_SERVICE_API_V3_URL}/${shouldUploadImageToSite ? site.id : user.personId}`;\n\n    const response = await fetch(url, {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const { image, baseDomain } = (await response.json()) as Result;\n        // Maps image-service-api-v3 result to v2 result.\n        return {\n            key: image.path,\n            // Removes trailing slash from baseDomain, since image-service-api-v2 doesn't have a trailing slash on base.\n            base: baseDomain.endsWith('/') ? baseDomain.slice(0, -1) : baseDomain,\n            meta: {\n                preview: image.preview,\n                width: String(image.width),\n                height: String(image.height),\n            },\n        };\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAC7D,SAASC,qBAAqB,EAAEC,wBAAwB,QAAQ,4BAA4B;AAuC5F;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC,IAAI;EACJC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMR,cAAc,CAAC,CAAC;EAC9C,MAAMS,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAMQ,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACO,WAAW,IAAI,CAACC,IAAI,EAAEE,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;;EAEA;;EAEA,MAAMC,IAAI,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE3BD,IAAI,CAACE,MAAM,CAAC,MAAM,EAAET,IAAI,CAAC;EAEzB,MAAMU,GAAG,GACLV,IAAI,CAACW,IAAI,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,GACtB,GAAGd,qBAAqB,IAAII,uBAAuB,GAAGG,IAAI,CAACQ,EAAE,GAAGT,IAAI,CAACE,QAAQ,EAAE,GAC/E,GAAGP,wBAAwB,IAAIG,uBAAuB,GAAGG,IAAI,CAACQ,EAAE,GAAGT,IAAI,CAACE,QAAQ,EAAE;EAE5F,MAAMQ,QAAQ,GAAG,MAAMC,KAAK,CAACJ,GAAG,EAAE;IAC9BH,IAAI;IACJQ,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAE,UAAUf,WAAW;IACxC,CAAC;IACDgB,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAM;MAAEC,KAAK;MAAEC;IAAW,CAAC,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAAY;IAC/D;IACA,OAAO;MACHC,GAAG,EAAEH,KAAK,CAACI,IAAI;MACf;MACAC,IAAI,EAAEJ,UAAU,CAACK,QAAQ,CAAC,GAAG,CAAC,GAAGL,UAAU,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAGN,UAAU;MACrEO,IAAI,EAAE;QACFC,OAAO,EAAET,KAAK,CAACS,OAAO;QACtBC,KAAK,EAAEC,MAAM,CAACX,KAAK,CAACU,KAAK,CAAC;QAC1BE,MAAM,EAAED,MAAM,CAACX,KAAK,CAACY,MAAM;MAC/B;IACJ,CAAC;EACL;EAEA,MAAMC,KAAK,CAAC,sCAAsCpB,QAAQ,CAACqB,MAAM,IAAI,CAAC;AAC1E,CAAC","ignoreList":[]}

package/lib/esm/api/video/post.js

@@ -1,4 +1,5 @@
 import { getAccessToken } from 'chayns-api';
+import { VIDEO_SERVICE_URL } from '../../constants/uploadUrls';
 /**
  * Uploads a video to the streaming service
  */
@@ -13,7 +14,7 @@ export const postVideo = async ({
   }
   const formData = new FormData();
   formData.append('files', file);
-  const response = await fetch('https://streamingservice.chayns.space/video?disableIntercom=true', {
+  const response = await fetch(`${VIDEO_SERVICE_URL}?disableIntercom=true`, {
     body: formData,
     headers: {
       Authorization: `bearer ${accessToken}`

package/lib/esm/api/video/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["getAccessToken","postVideo","file","accessToken","undefined","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","data","json","Error","status"],"sources":["../../../../src/api/video/post.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\n\nexport interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(\n        'https://streamingservice.chayns.space/video?disableIntercom=true',\n        {\n            body: formData,\n            headers: {\n                Authorization: `bearer ${accessToken}`,\n            },\n            method: 'POST',\n        },\n    );\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAc3C;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMH,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACG,WAAW,EAAE;IACd,OAAOC,SAAS;EACpB;EAEA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEL,IAAI,CAAC;EAE9B,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUT,WAAW;IACxC,CAAC;IACDU,MAAM,EAAE;EACZ,CACJ,CAAC;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAC,sCAAsCT,QAAQ,CAACU,MAAM,IAAI,CAAC;AAC1E,CAAC","ignoreList":[]}
+{"version":3,"file":"post.js","names":["getAccessToken","VIDEO_SERVICE_URL","postVideo","file","accessToken","undefined","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","data","json","Error","status"],"sources":["../../../../src/api/video/post.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { VIDEO_SERVICE_URL } from '../../constants/uploadUrls';\n\nexport interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(`${VIDEO_SERVICE_URL}?disableIntercom=true`, {\n        body: formData,\n        headers: {\n            Authorization: `bearer ${accessToken}`,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,iBAAiB,QAAQ,4BAA4B;AAc9D;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC5BC;AACc,CAAC,KAA2C;EAC1D,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMJ,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACI,WAAW,EAAE;IACd,OAAOC,SAAS;EACpB;EAEA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEL,IAAI,CAAC;EAE9B,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CAAC,GAAGT,iBAAiB,uBAAuB,EAAE;IACtEU,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAE,UAAUT,WAAW;IACxC,CAAC;IACDU,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAC,sCAAsCT,QAAQ,CAACU,MAAM,IAAI,CAAC;AAC1E,CAAC","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.js

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
-import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
+import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridSingleImage, StyledGridTopRightImage, StyledGridTwoImage } from './GridImage.styles';
 const GridImage = ({
   background,
   images,
@@ -36,7 +36,7 @@ const GridImage = ({
   const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
-  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+  const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
   return /*#__PURE__*/React.createElement(StyledGridImage, {
     ref: gridImageRef,
     $background: background,
@@ -46,7 +46,23 @@ const GridImage = ({
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined
-  }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
+  }, images.length === 1 && /*#__PURE__*/React.createElement(StyledGridSingleImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), images.length === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: true,
+    $size: size,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), /*#__PURE__*/React.createElement(StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: false,
+    $size: size,
+    onLoad: handleTopRightImageLoaded,
+    src: images[1]
+  })), images.length > 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,
     $size: size,
@@ -60,7 +76,7 @@ const GridImage = ({
     $isHidden: isGridImageHidden,
     onLoad: handleBottomRightImageLoaded,
     src: images[2]
-  }));
+  })));
 };
 GridImage.displayName = 'GridImage';
 export default GridImage;

package/lib/esm/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const gridImageRef = useRef<HTMLDivElement>(null);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n    useFocusRingPortal(gridImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            ref={gridImageRef}\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridSingleImage","StyledGridTopRightImage","StyledGridTwoImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","Fragment","$isLeft","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridSingleImage,\n    StyledGridTopRightImage,\n    StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable GridImage instances.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const gridImageRef = useRef<HTMLDivElement>(null);\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n    useFocusRingPortal(gridImageRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage ||\n        (images.length > 1 && !hasLoadedTopRightImage) ||\n        (images.length > 2 && !hasLoadedBottomRightImage);\n\n    return (\n        <StyledGridImage\n            ref={gridImageRef}\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n        >\n            {images.length === 1 && (\n                <StyledGridSingleImage\n                    $isHidden={isGridImageHidden}\n                    onLoad={handleLeftImageLoaded}\n                    src={images[0]}\n                />\n            )}\n            {images.length === 2 && (\n                <>\n                    <StyledGridTwoImage\n                        $isHidden={isGridImageHidden}\n                        $isLeft\n                        $size={size}\n                        onLoad={handleLeftImageLoaded}\n                        src={images[0]}\n                    />\n                    <StyledGridTwoImage\n                        $isHidden={isGridImageHidden}\n                        $isLeft={false}\n                        $size={size}\n                        onLoad={handleTopRightImageLoaded}\n                        src={images[1]}\n                    />\n                </>\n            )}\n            {images.length > 2 && (\n                <>\n                    <StyledGridLeftImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleLeftImageLoaded}\n                        $size={size}\n                        src={images[0]}\n                    />\n                    <StyledGridTopRightImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleTopRightImageLoaded}\n                        $size={size}\n                        src={images[1]}\n                    />\n                    <StyledGridBottomRightImage\n                        $isHidden={isGridImageHidden}\n                        onLoad={handleBottomRightImageLoaded}\n                        src={images[2]}\n                    />\n                </>\n            )}\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.styles.js

@@ -25,6 +25,40 @@ export const StyledGridImage = styled.div`
         outline: none;
     }
 `;
+export const StyledGridSingleImage = styled.img`
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+export const StyledGridTwoImage = styled.img`
+    border-right: ${({
+  $isLeft,
+  $size
+}) => $isLeft ? `${$size / 40}px solid white` : undefined};
+    box-sizing: border-box;
+    height: 100%;
+    left: ${({
+  $isLeft
+}) => $isLeft ? 0 : undefined};
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: ${({
+  $isLeft
+}) => $isLeft ? undefined : 0};
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 50%;
+`;
 export const StyledGridLeftImage = styled.img`
     border-right: ${({
   $size

package/lib/esm/components/grid-image/GridImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,mBAAmB,GAAGR,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGX,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAME,0BAA0B,GAAGZ,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n    flex: 0 0 auto;\n\n    &:focus-visible {\n        outline: none;\n    }\n`;\n\ntype StyledGridSingleImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n    $isHidden: boolean;\n    $isLeft: boolean;\n    $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n    border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n    box-sizing: border-box;\n    height: 100%;\n    left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qBAAqB,GAAGR,MAAM,CAACS,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACS,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,mBAAmB,GAAGb,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,uBAAuB,GAAGd,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,0BAA0B,GAAGf,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.test.js

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import GridImage from './GridImage';
+describe('GridImage', () => {
+  it('renders one image without additional grid images', () => {
+    render(/*#__PURE__*/React.createElement(GridImage, {
+      images: ['one.jpg'],
+      size: 100
+    }));
+    expect(screen.getAllByRole('img')).toHaveLength(1);
+    expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
+  });
+  it('renders two images side by side without a third grid image', () => {
+    render(/*#__PURE__*/React.createElement(GridImage, {
+      images: ['one.jpg', 'two.jpg'],
+      size: 100
+    }));
+    expect(screen.getAllByRole('img')).toHaveLength(2);
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
+  });
+});
+//# sourceMappingURL=GridImage.test.js.map

package/lib/esm/components/grid-image/GridImage.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.test.js","names":["render","screen","React","describe","expect","it","GridImage","createElement","images","size","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n    it('renders one image without additional grid images', () => {\n        render(<GridImage images={['one.jpg']} size={100} />);\n\n        expect(screen.getAllByRole('img')).toHaveLength(1);\n        expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n    });\n\n    it('renders two images side by side without a third grid image', () => {\n        render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n        expect(screen.getAllByRole('img')).toHaveLength(2);\n        expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n        expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n    });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB;AACvD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,QAAQ;AAC7C,OAAOC,SAAS,MAAM,aAAa;AAEnCH,QAAQ,CAAC,WAAW,EAAE,MAAM;EACxBE,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzDL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErDL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACW,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEFR,EAAE,CAAC,4DAA4D,EAAE,MAAM;IACnEL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhEL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvET,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/esm/constants/uploadUrls.js

@@ -0,0 +1,46 @@
+/**
+ * Reads an environment variable defensively so that accessing `process.env` does
+ * not throw a `ReferenceError` in browser environments where `process` is not
+ * defined. Returns `undefined` if the variable is not set or not accessible.
+ */
+const readEnv = key => {
+  try {
+    if (typeof process !== 'undefined' && process.env) {
+      const value = process.env[key];
+      if (typeof value === 'string' && value.length > 0) {
+        return value;
+      }
+    }
+  } catch {
+    // Accessing `process` can throw in some sandboxed environments.
+  }
+  return undefined;
+};
+
+/**
+ * URL of the image service used to upload images.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image service when the variable is not defined.
+ */
+export const IMAGE_SERVICE_API_V3_URL = readEnv('CHAYNS_IMAGE_SERVICE_URL') ?? 'https://cube.tobit.cloud/image-service/v3/Images';
+
+/**
+ * URL of the image resizer service used to upload images larger than 10 MB.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_RESIZER_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image resizer when the variable is not defined.
+ */
+export const IMAGE_RESIZER_API_URL = readEnv('CHAYNS_IMAGE_RESIZER_URL') ?? 'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';
+
+/**
+ * URL of the streaming service used to upload videos.
+ *
+ * Can be overridden via the `CHAYNS_VIDEO_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted video service). Falls back
+ * to the default chayns streaming service when the variable is not defined.
+ */
+export const VIDEO_SERVICE_URL = readEnv('CHAYNS_VIDEO_SERVICE_URL') ?? 'https://streamingservice.chayns.space/video';
+//# sourceMappingURL=uploadUrls.js.map

package/lib/esm/constants/uploadUrls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadUrls.js","names":["readEnv","key","process","env","value","length","undefined","IMAGE_SERVICE_API_V3_URL","IMAGE_RESIZER_API_URL","VIDEO_SERVICE_URL"],"sources":["../../../src/constants/uploadUrls.ts"],"sourcesContent":["/**\n * Reads an environment variable defensively so that accessing `process.env` does\n * not throw a `ReferenceError` in browser environments where `process` is not\n * defined. Returns `undefined` if the variable is not set or not accessible.\n */\nconst readEnv = (key: string): string | undefined => {\n    try {\n        if (typeof process !== 'undefined' && process.env) {\n            const value = process.env[key];\n\n            if (typeof value === 'string' && value.length > 0) {\n                return value;\n            }\n        }\n    } catch {\n        // Accessing `process` can throw in some sandboxed environments.\n    }\n\n    return undefined;\n};\n\n/**\n * URL of the image service used to upload images.\n *\n * Can be overridden via the `CHAYNS_IMAGE_SERVICE_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted image service). Falls back\n * to the default chayns image service when the variable is not defined.\n */\nexport const IMAGE_SERVICE_API_V3_URL =\n    readEnv('CHAYNS_IMAGE_SERVICE_URL') ?? 'https://cube.tobit.cloud/image-service/v3/Images';\n\n/**\n * URL of the image resizer service used to upload images larger than 10 MB.\n *\n * Can be overridden via the `CHAYNS_IMAGE_RESIZER_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted image service). Falls back\n * to the default chayns image resizer when the variable is not defined.\n */\nexport const IMAGE_RESIZER_API_URL =\n    readEnv('CHAYNS_IMAGE_RESIZER_URL') ??\n    'https://cube.tobit.cloud/image-resizer-backend/api/v1.0/image';\n\n/**\n * URL of the streaming service used to upload videos.\n *\n * Can be overridden via the `CHAYNS_VIDEO_SERVICE_URL` environment variable\n * (e.g. for OnPremise deployments with a self-hosted video service). Falls back\n * to the default chayns streaming service when the variable is not defined.\n */\nexport const VIDEO_SERVICE_URL =\n    readEnv('CHAYNS_VIDEO_SERVICE_URL') ?? 'https://streamingservice.chayns.space/video';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,OAAO,GAAIC,GAAW,IAAyB;EACjD,IAAI;IACA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAE;MAC/C,MAAMC,KAAK,GAAGF,OAAO,CAACC,GAAG,CAACF,GAAG,CAAC;MAE9B,IAAI,OAAOG,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,MAAM,GAAG,CAAC,EAAE;QAC/C,OAAOD,KAAK;MAChB;IACJ;EACJ,CAAC,CAAC,MAAM;IACJ;EAAA;EAGJ,OAAOE,SAAS;AACpB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GACjCP,OAAO,CAAC,0BAA0B,CAAC,IAAI,kDAAkD;;AAE7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMQ,qBAAqB,GAC9BR,OAAO,CAAC,0BAA0B,CAAC,IACnC,+DAA+D;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,iBAAiB,GAC1BT,OAAO,CAAC,0BAA0B,CAAC,IAAI,6CAA6C","ignoreList":[]}

package/lib/esm/utils/uploadFile.js

@@ -5,7 +5,7 @@ export const uploadFile = async ({
   callback,
   shouldUploadImageToSite
 }) => {
-  if (!fileToUpload || fileToUpload.state !== 'none') {
+  if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
     return;
   }
   if (fileToUpload.file?.type.includes('video/')) {

package/lib/esm/utils/uploadFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number","undefined"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n    fileToUpload: InternalFileItem;\n    callback: (UploadedFile: Video | Image) => void;\n    shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n    fileToUpload,\n    callback,\n    shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n    if (!fileToUpload || fileToUpload.state !== 'none') {\n        return;\n    }\n\n    if (fileToUpload.file?.type.includes('video/')) {\n        const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n        if (uploadedVideo) {\n            callback({\n                ...uploadedVideo,\n                id: uploadedVideo.id.toString(),\n            });\n        }\n    }\n\n    if (fileToUpload.file?.type.includes('image/')) {\n        const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n        if (uploadedImage) {\n            callback({\n                url: `${uploadedImage.base}/${uploadedImage.key}`,\n                id: uploadedImage.key,\n                meta: uploadedImage.meta,\n                ratio:\n                    uploadedImage.meta?.width && uploadedImage.meta?.height\n                        ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n                        : undefined,\n            });\n        }\n    }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EACrC,IAAI,CAACF,YAAY,IAAIA,YAAY,CAACG,KAAK,KAAK,MAAM,EAAE;IAChD;EACJ;EAEA,IAAIH,YAAY,CAACI,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAMT,SAAS,CAAC;MAAEM,IAAI,EAAEJ,YAAY,CAACI;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfN,QAAQ,CAAC;QACL,GAAGM,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,IAAIT,YAAY,CAACI,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,MAAMb,SAAS,CAAC;MAAEO,IAAI,EAAEJ,YAAY,CAACI,IAAI;MAAEF;IAAwB,CAAC,CAAC;IAE3F,IAAIQ,aAAa,EAAE;MACfT,QAAQ,CAAC;QACLU,GAAG,EAAE,GAAGD,aAAa,CAACE,IAAI,IAAIF,aAAa,CAACG,GAAG,EAAE;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI,IAAI;QACxBC,KAAK,EACDL,aAAa,CAACI,IAAI,EAAEE,KAAK,IAAIN,aAAa,CAACI,IAAI,EAAEG,MAAM,GACjDC,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEE,KAAK,CAAC,GAAGE,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEG,MAAM,CAAC,GACtEE;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","undefined","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n    fileToUpload: InternalFileItem;\n    callback: (UploadedFile: Video | Image) => void;\n    shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n    fileToUpload,\n    callback,\n    shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n    if (!fileToUpload || (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n        return;\n    }\n\n    if (fileToUpload.file?.type.includes('video/')) {\n        const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n        if (uploadedVideo) {\n            callback({\n                ...uploadedVideo,\n                id: uploadedVideo.id.toString(),\n            });\n        }\n    }\n\n    if (fileToUpload.file?.type.includes('image/')) {\n        const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n        if (uploadedImage) {\n            callback({\n                url: `${uploadedImage.base}/${uploadedImage.key}`,\n                id: uploadedImage.key,\n                meta: uploadedImage.meta,\n                ratio:\n                    uploadedImage.meta?.width && uploadedImage.meta?.height\n                        ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n                        : undefined,\n            });\n        }\n    }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EACrC,IAAI,CAACF,YAAY,IAAKA,YAAY,CAACG,KAAK,KAAKC,SAAS,IAAIJ,YAAY,CAACG,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,IAAIH,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAMV,SAAS,CAAC;MAAEO,IAAI,EAAEL,YAAY,CAACK;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfP,QAAQ,CAAC;QACL,GAAGO,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,IAAIV,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,MAAMd,SAAS,CAAC;MAAEQ,IAAI,EAAEL,YAAY,CAACK,IAAI;MAAEH;IAAwB,CAAC,CAAC;IAE3F,IAAIS,aAAa,EAAE;MACfV,QAAQ,CAAC;QACLW,GAAG,EAAE,GAAGD,aAAa,CAACE,IAAI,IAAIF,aAAa,CAACG,GAAG,EAAE;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI,IAAI;QACxBC,KAAK,EACDL,aAAa,CAACI,IAAI,EAAEE,KAAK,IAAIN,aAAa,CAACI,IAAI,EAAEG,MAAM,GACjDC,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEE,KAAK,CAAC,GAAGE,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEG,MAAM,CAAC,GACtEd;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/components/grid-image/GridImage.styles.d.ts

@@ -12,6 +12,16 @@ export declare const StyledGridImage: import("styled-components/dist/types").ISt
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
+type StyledGridSingleImageProps = {
+    $isHidden: boolean;
+};
+export declare const StyledGridSingleImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never>>> & string;
+type StyledGridTwoImageProps = {
+    $isHidden: boolean;
+    $isLeft: boolean;
+    $size: number;
+};
+export declare const StyledGridTwoImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never>>> & string;
 type StyledGridLeftImageProps = {
     $isHidden: boolean;
     $size: number;

package/lib/types/constants/uploadUrls.d.ts

@@ -0,0 +1,24 @@
+/**
+ * URL of the image service used to upload images.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image service when the variable is not defined.
+ */
+export declare const IMAGE_SERVICE_API_V3_URL: string;
+/**
+ * URL of the image resizer service used to upload images larger than 10 MB.
+ *
+ * Can be overridden via the `CHAYNS_IMAGE_RESIZER_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted image service). Falls back
+ * to the default chayns image resizer when the variable is not defined.
+ */
+export declare const IMAGE_RESIZER_API_URL: string;
+/**
+ * URL of the streaming service used to upload videos.
+ *
+ * Can be overridden via the `CHAYNS_VIDEO_SERVICE_URL` environment variable
+ * (e.g. for OnPremise deployments with a self-hosted video service). Falls back
+ * to the default chayns streaming service when the variable is not defined.
+ */
+export declare const VIDEO_SERVICE_URL: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.5.42",
+    "version": "5.5.51",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -93,5 +93,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c319b7cea48a7f51172e657f756aa44580e81784"
+    "gitHead": "5a52e13c899d061e982e5c39da6c2bc24de0c862"
 }