@chayns-components/gallery 5.0.53 → 5.0.56

package/lib/esm/components/{Gallery.styles.js → gallery-viewer/GalleryViewer.styles.js}

@@ -1,15 +1,15 @@
 import styled, { css } from 'styled-components';
-import { GalleryViewMode } from '../types/gallery';
-export const StyledGallery = styled.div`
+import { GalleryViewMode } from '../../types/gallery';
+export const StyledGalleryViewer = styled.div`
     width: 100%;
 `;
-export const StyledGalleryItemWrapper = styled.div`
+export const StyledGalleryViewerItemWrapper = styled.div`
     display: grid;
     gap: 5px;
 
     ${({
   $viewMode,
-  $uploadedFileLength
+  $itemCount
 }) => {
   if ($viewMode === GalleryViewMode.GRID) {
     return css`
@@ -18,7 +18,7 @@ export const StyledGalleryItemWrapper = styled.div`
                 }
 
                 ${() => {
-      switch ($uploadedFileLength) {
+      switch ($itemCount) {
         case 1:
           return css`
                                 grid-template-columns: 1fr;
@@ -48,7 +48,7 @@ export const StyledGalleryItemWrapper = styled.div`
     }}
             `;
   }
-  switch ($uploadedFileLength) {
+  switch ($itemCount) {
     case 1:
       return css`
                     grid-template-columns: 1fr;
@@ -71,16 +71,11 @@ export const StyledGalleryItemWrapper = styled.div`
   }
 }}
 
-    aspect-ratio: ${({
+    ${({
+  $itemCount,
   $ratio
-}) => $ratio};
-`;
-export const StyledGalleryEditModeWrapper = styled.div`
-    display: grid;
-    grid-template-columns: ${({
-  $fileMinWidth
-}) => `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};
-    grid-auto-rows: 1fr;
-    gap: 6px;
+}) => $itemCount > 0 ? css`
+                  aspect-ratio: ${$ratio};
+              ` : ''}
 `;
-//# sourceMappingURL=Gallery.styles.js.map
+//# sourceMappingURL=GalleryViewer.styles.js.map

package/lib/esm/components/gallery-viewer/GalleryViewer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.styles.js","names":["styled","css","GalleryViewMode","StyledGalleryViewer","div","StyledGalleryViewerItemWrapper","$viewMode","$itemCount","GRID","$ratio"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../../types/gallery';\n\nexport const StyledGalleryViewer = styled.div`\n    width: 100%;\n`;\n\nexport const StyledGalleryViewerItemWrapper = styled.div<{\n    $itemCount: number;\n    $ratio: number;\n    $viewMode: GalleryViewMode;\n}>`\n    display: grid;\n    gap: 5px;\n\n    ${({ $viewMode, $itemCount }) => {\n        if ($viewMode === GalleryViewMode.GRID) {\n            return css`\n                > div:first-child {\n                    grid-column: 1 / -1;\n                }\n\n                ${() => {\n                    switch ($itemCount) {\n                        case 1:\n                            return css`\n                                grid-template-columns: 1fr;\n                            `;\n                        case 2:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 1;\n                                }\n                            `;\n                        case 3:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 2;\n                                }\n                            `;\n                        default:\n                            return css`\n                                grid-template-columns: repeat(3, minmax(0, 1fr));\n                                > div:not(:first-child) {\n                                    grid-column: span 1;\n                                }\n                            `;\n                    }\n                }}\n            `;\n        }\n\n        switch ($itemCount) {\n            case 1:\n                return css`\n                    grid-template-columns: 1fr;\n                `;\n            case 2:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                `;\n            case 3:\n                return css`\n                    grid-template-columns: repeat(3, 1fr);\n                `;\n            default:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                    > div:nth-child(-n + 2) {\n                        grid-row: 1;\n                    }\n                `;\n        }\n    }}\n\n    ${({ $itemCount, $ratio }) =>\n        $itemCount > 0\n            ? css`\n                  aspect-ratio: ${$ratio};\n              `\n            : ''}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,qBAAqB;AAErD,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACI,GAInD;AACF;AACA;AACA;AACA,MAAM,CAAC;EAAEE,SAAS;EAAEC;AAAW,CAAC,KAAK;EAC7B,IAAID,SAAS,KAAKJ,eAAe,CAACM,IAAI,EAAE;IACpC,OAAOP,GAAG;AACtB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQM,UAAU;QACd,KAAK,CAAC;UACF,OAAON,GAAG;AACtC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAC;AACjB,aAAa;EACL;EAEA,QAAQM,UAAU;IACd,KAAK,CAAC;MACF,OAAON,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAC;AACL;AACA,MAAM,CAAC;EAAEM,UAAU;EAAEE;AAAO,CAAC,KACrBF,UAAU,GAAG,CAAC,GACRN,GAAG;AACjB,kCAAkCQ,MAAM;AACxC,eAAe,GACD,EAAE;AAChB,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-viewer/GalleryViewer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryViewer.types.js.map

package/lib/esm/components/gallery-viewer/GalleryViewer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import MediaContent from '../../media-content/MediaContent';
+import { StyledGalleryViewerItem, StyledGalleryViewerMoreItemsIndicator } from './GalleryViewerItem.styles';
+const GalleryViewerItem = ({
+  fileItem,
+  ratio = 1,
+  remainingItemsLength,
+  onClick
+}) => /*#__PURE__*/React.createElement(StyledGalleryViewerItem, null, /*#__PURE__*/React.createElement(MediaContent, {
+  file: fileItem.file,
+  onClick: () => onClick(fileItem),
+  ratio: ratio
+}), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryViewerMoreItemsIndicator, {
+  onClick: () => onClick(fileItem)
+}, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+GalleryViewerItem.displayName = 'GalleryViewerItem';
+export default GalleryViewerItem;
+//# sourceMappingURL=GalleryViewerItem.js.map

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.js","names":["React","MediaContent","StyledGalleryViewerItem","StyledGalleryViewerMoreItemsIndicator","GalleryViewerItem","fileItem","ratio","remainingItemsLength","onClick","createElement","file","displayName"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) => (\n    <StyledGalleryViewerItem>\n        <MediaContent file={fileItem.file} onClick={() => onClick(fileItem)} ratio={ratio} />\n        {remainingItemsLength && (\n            <StyledGalleryViewerMoreItemsIndicator onClick={() => onClick(fileItem)}>\n                <p>{`+ ${remainingItemsLength - 3}`}</p>\n            </StyledGalleryViewerMoreItemsIndicator>\n        )}\n    </StyledGalleryViewerItem>\n);\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default GalleryViewerItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,YAAY,MAAM,kCAAkC;AAC3D,SACIC,uBAAuB,EACvBC,qCAAqC,QAClC,4BAA4B;AAGnC,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,kBACGR,KAAA,CAAAS,aAAA,CAACP,uBAAuB,qBACpBF,KAAA,CAAAS,aAAA,CAACR,YAAY;EAACS,IAAI,EAAEL,QAAQ,CAACK,IAAK;EAACF,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ,CAAE;EAACC,KAAK,EAAEA;AAAM,CAAE,CAAC,EACpFC,oBAAoB,iBACjBP,KAAA,CAAAS,aAAA,CAACN,qCAAqC;EAACK,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ;AAAE,gBACpEL,KAAA,CAAAS,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDH,iBAAiB,CAACO,WAAW,GAAG,mBAAmB;AAEnD,eAAeP,iBAAiB","ignoreList":[]}

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const StyledGalleryViewerItem = styled.div`
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+`;
+export const StyledGalleryViewerMoreItemsIndicator = styled.div`
+    position: absolute;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: brightness(40%);
+
+    p {
+        font-size: 40px;
+        color: white;
+    }
+`;
+//# sourceMappingURL=GalleryViewerItem.styles.js.map

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.styles.js","names":["styled","StyledGalleryViewerItem","div","StyledGalleryViewerMoreItemsIndicator"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGalleryViewerItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\nexport const StyledGalleryViewerMoreItemsIndicator = styled.div`\n    position: absolute;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: brightness(40%);\n\n    p {\n        font-size: 40px;\n        color: white;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGH,MAAM,CAACE,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryViewerItem.types.js.map

package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/media-content/MediaContent.js

@@ -0,0 +1,29 @@
+import { Icon } from '@chayns-components/core';
+import React from 'react';
+import { StyledMediaContentImage, StyledMediaContentImageWrapper, StyledMediaContentPlayIcon, StyledMediaContentVideo, StyledMediaContentVideoWrapper } from './MediaContent.styles';
+const MediaContent = ({
+  file,
+  ratio,
+  onClick,
+  playIconSize = 50
+}) => 'thumbnailUrl' in file ? /*#__PURE__*/React.createElement(StyledMediaContentVideoWrapper, {
+  onClick: onClick,
+  $ratio: ratio
+}, /*#__PURE__*/React.createElement(StyledMediaContentPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
+  size: playIconSize,
+  icons: ['fa fa-play']
+})), /*#__PURE__*/React.createElement(StyledMediaContentVideo, {
+  poster: file.thumbnailUrl
+}, /*#__PURE__*/React.createElement("source", {
+  src: file.url,
+  type: "video/mp4"
+}))) : /*#__PURE__*/React.createElement(StyledMediaContentImageWrapper, {
+  onClick: onClick,
+  $ratio: ratio
+}, /*#__PURE__*/React.createElement(StyledMediaContentImage, {
+  draggable: false,
+  src: file.url
+}));
+MediaContent.displayName = 'MediaContent';
+export default MediaContent;
+//# sourceMappingURL=MediaContent.js.map

package/lib/esm/components/media-content/MediaContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.js","names":["Icon","React","StyledMediaContentImage","StyledMediaContentImageWrapper","StyledMediaContentPlayIcon","StyledMediaContentVideo","StyledMediaContentVideoWrapper","MediaContent","file","ratio","onClick","playIconSize","createElement","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\n\nconst MediaContent: FC<MediaContentProps> = ({ file, ratio, onClick, playIconSize = 50 }) =>\n    'thumbnailUrl' in file ? (\n        <StyledMediaContentVideoWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentPlayIcon>\n                <Icon size={playIconSize} icons={['fa fa-play']} />\n            </StyledMediaContentPlayIcon>\n            <StyledMediaContentVideo poster={file.thumbnailUrl}>\n                <source src={file.url} type=\"video/mp4\" />\n            </StyledMediaContentVideo>\n        </StyledMediaContentVideoWrapper>\n    ) : (\n        <StyledMediaContentImageWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentImage draggable={false} src={file.url} />\n        </StyledMediaContentImageWrapper>\n    );\n\nMediaContent.displayName = 'MediaContent';\n\nexport default MediaContent;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,uBAAuB,EACvBC,8BAA8B,QAC3B,uBAAuB;AAG9B,MAAMC,YAAmC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,YAAY,GAAG;AAAG,CAAC,KACpF,cAAc,IAAIH,IAAI,gBAClBP,KAAA,CAAAW,aAAA,CAACN,8BAA8B;EAACI,OAAO,EAAEA,OAAQ;EAACG,MAAM,EAAEJ;AAAM,gBAC5DR,KAAA,CAAAW,aAAA,CAACR,0BAA0B,qBACvBH,KAAA,CAAAW,aAAA,CAACZ,IAAI;EAACc,IAAI,EAAEH,YAAa;EAACI,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CAC1B,CAAC,eAC7Bd,KAAA,CAAAW,aAAA,CAACP,uBAAuB;EAACW,MAAM,EAAER,IAAI,CAACS;AAAa,gBAC/ChB,KAAA,CAAAW,aAAA;EAAQM,GAAG,EAAEV,IAAI,CAACW,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACpB,CACG,CAAC,gBAEjCnB,KAAA,CAAAW,aAAA,CAACT,8BAA8B;EAACO,OAAO,EAAEA,OAAQ;EAACG,MAAM,EAAEJ;AAAM,gBAC5DR,KAAA,CAAAW,aAAA,CAACV,uBAAuB;EAACmB,SAAS,EAAE,KAAM;EAACH,GAAG,EAAEV,IAAI,CAACW;AAAI,CAAE,CAC/B,CACnC;AAELZ,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC,eAAef,YAAY","ignoreList":[]}

package/lib/esm/components/media-content/MediaContent.styles.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+export const StyledMediaContentVideoWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+export const StyledMediaContentImageWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+export const StyledMediaContentImage = styled.img`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaContentVideo = styled.video`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    width: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaContentPlayIcon = styled.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=MediaContent.styles.js.map

package/lib/esm/components/media-content/MediaContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.styles.js","names":["styled","StyledMediaContentVideoWrapper","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentImage","img","theme","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nexport const StyledMediaContentImage = styled.img<StyledMediaContentImageProps>`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,8BAA8B,GAAGD,MAAM,CAACE,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGJ,MAAM,CAACE,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGL,MAAM,CAACM,GAAiC;AAC/E,wBAAwB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGR,MAAM,CAACS,KAAmC;AACjF,wBAAwB,CAAC;EAAEF;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA,CAAC;AAED,OAAO,MAAMG,0BAA0B,GAAGV,MAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/media-content/MediaContent.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MediaContent.types.js.map

package/lib/esm/components/media-content/MediaContent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/index.js

@@ -1,5 +1,7 @@
 // noinspection JSUnusedGlobalSymbols
 
 export { default as Gallery } from './components/Gallery';
+export { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';
+export { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';
 export { GalleryViewMode } from './types/gallery';
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","Gallery","GalleryEditor","GalleryViewer","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps } from './components/Gallery.types';\nexport type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASD,OAAO,IAAIE,aAAa,QAAQ,2CAA2C;AACpF,SAASF,OAAO,IAAIG,aAAa,QAAQ,2CAA2C;AAIpF,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}

package/lib/esm/types/gallery.js

@@ -1,5 +1,14 @@
+/**
+ * Defines the available gallery layouts for read-only rendering.
+ */
 export let GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
+  /**
+   * Arranges visible items in a square-first layout.
+   */
   GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
+  /**
+   * Arranges visible items in the gallery grid layout.
+   */
   GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
   return GalleryViewMode;
 }({});

package/lib/esm/types/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
+{"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["/**\n * Defines the available gallery layouts for read-only rendering.\n */\nexport enum GalleryViewMode {\n    /**\n     * Arranges visible items in a square-first layout.\n     */\n    SQUARE,\n    /**\n     * Arranges visible items in the gallery grid layout.\n     */\n    GRID,\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,WAAYA,eAAe,0BAAfA,eAAe;EACvB;AACJ;AACA;EAHYA,eAAe,CAAfA,eAAe;EAKvB;AACJ;AACA;EAPYA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}

package/lib/esm/utils/gallery.js

@@ -0,0 +1,132 @@
+import { MediaType, openImage, openMedia, openVideo } from 'chayns-api';
+import { GalleryViewMode } from '../types/gallery';
+const DEFAULT_MEDIA_RATIO = 1;
+export const mapFilesToInternalItems = files => (files ?? []).map((file, index) => ({
+  id: getGalleryViewerKey(file, index),
+  uploadedFile: file.file,
+  file: undefined,
+  state: 'uploaded',
+  previewUrl: undefined
+}));
+export const getGalleryViewerKey = (fileItem, index) => fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;
+export const getGalleryRatio = fileItems => {
+  switch (fileItems.length) {
+    case 0:
+      return DEFAULT_MEDIA_RATIO;
+    case 1:
+      return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);
+    case 2:
+      return 2;
+    case 3:
+      return 3;
+    default:
+      return DEFAULT_MEDIA_RATIO;
+  }
+};
+export const getReadOnlyItemRatio = ({
+  fileItems,
+  index,
+  viewMode
+}) => {
+  const itemCount = fileItems.length;
+  if (viewMode !== GalleryViewMode.GRID) {
+    return DEFAULT_MEDIA_RATIO;
+  }
+  if (itemCount === 1) {
+    // A square fallback keeps virtualization stable when upstream data does not provide a ratio.
+    return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);
+  }
+  if (itemCount === 2 && (index === 0 || index === 1)) {
+    return 0.5;
+  }
+  if (index === 0 && itemCount > 2 || itemCount === 3 && (index === 1 || index === 2)) {
+    return 1.5;
+  }
+  return DEFAULT_MEDIA_RATIO;
+};
+export const openFiles = (fileItems, file) => {
+  let startIndex = 0;
+  try {
+    startIndex = fileItems.findIndex(item => item.id === file.id);
+    const items = fileItems.map(item => ({
+      url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',
+      mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? MediaType.VIDEO : MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void openMedia({
+      items,
+      startIndex
+    });
+  } catch (_) {
+    if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {
+      void openVideo({
+        url: file.uploadedFile.url
+      });
+      return;
+    }
+    const imageFiles = [];
+    fileItems.forEach(({
+      uploadedFile
+    }) => {
+      if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {
+        imageFiles.push({
+          url: uploadedFile.url
+        });
+      }
+    });
+    startIndex = imageFiles.findIndex(item => item.url === file.uploadedFile?.url);
+    const startFile = imageFiles.shift();
+    if (!startFile) {
+      return;
+    }
+    void openImage({
+      items: [startFile, ...imageFiles],
+      startIndex
+    });
+  }
+};
+export const openKnownFiles = (fileItems, file) => {
+  const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));
+  let startIndex = 0;
+  try {
+    startIndex = fileItems.findIndex((item, index) => getGalleryViewerKey(item, index) === activeFileKey);
+    const items = fileItems.map(item => ({
+      url: item.file.url.replace('_0.mp4', '.mp4'),
+      mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void openMedia({
+      items,
+      startIndex
+    });
+  } catch (_) {
+    if ('thumbnailUrl' in file.file) {
+      void openVideo({
+        url: file.file.url
+      });
+      return;
+    }
+    const imageFiles = [];
+    fileItems.forEach(item => {
+      if (!('thumbnailUrl' in item.file)) {
+        imageFiles.push({
+          url: item.file.url
+        });
+      }
+    });
+    startIndex = imageFiles.findIndex(item => item.url === file.file.url);
+    const startFile = imageFiles.shift();
+    if (!startFile) {
+      return;
+    }
+    void openImage({
+      items: [startFile, ...imageFiles],
+      startIndex
+    });
+  }
+};
+//# sourceMappingURL=gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":["MediaType","openImage","openMedia","openVideo","GalleryViewMode","DEFAULT_MEDIA_RATIO","mapFilesToInternalItems","files","map","file","index","id","getGalleryViewerKey","uploadedFile","undefined","state","previewUrl","fileItem","url","getGalleryRatio","fileItems","length","Math","max","ratio","getReadOnlyItemRatio","viewMode","itemCount","GRID","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","_","imageFiles","forEach","push","startFile","shift","openKnownFiles","activeFileKey","indexOf"],"sources":["../../../src/utils/gallery.ts"],"sourcesContent":["import type { FileItem, InternalFileItem } from '@chayns-components/core';\nimport {\n    MediaType,\n    openImage,\n    openMedia,\n    type OpenImageItem,\n    type OpenMediaItem,\n    openVideo,\n} from 'chayns-api';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst DEFAULT_MEDIA_RATIO = 1;\n\nexport const mapFilesToInternalItems = (files?: FileItem[]): InternalFileItem[] =>\n    (files ?? []).map((file, index) => ({\n        id: getGalleryViewerKey(file, index),\n        uploadedFile: file.file,\n        file: undefined,\n        state: 'uploaded',\n        previewUrl: undefined,\n    }));\n\nexport const getGalleryViewerKey = (fileItem: FileItem, index: number): string =>\n    fileItem.id ?? fileItem.file.id ?? fileItem.file.url ?? `gallery-item-${index}`;\n\nexport const getGalleryRatio = (fileItems: FileItem[]): number => {\n    switch (fileItems.length) {\n        case 0:\n            return DEFAULT_MEDIA_RATIO;\n        case 1:\n            return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, 1);\n        case 2:\n            return 2;\n        case 3:\n            return 3;\n        default:\n            return DEFAULT_MEDIA_RATIO;\n    }\n};\n\nexport const getReadOnlyItemRatio = ({\n    fileItems,\n    index,\n    viewMode,\n}: {\n    fileItems: FileItem[];\n    index: number;\n    viewMode: GalleryViewMode;\n}): number => {\n    const itemCount = fileItems.length;\n\n    if (viewMode !== GalleryViewMode.GRID) {\n        return DEFAULT_MEDIA_RATIO;\n    }\n\n    if (itemCount === 1) {\n        // A square fallback keeps virtualization stable when upstream data does not provide a ratio.\n        return Math.max(fileItems[0]?.file.ratio ?? DEFAULT_MEDIA_RATIO, DEFAULT_MEDIA_RATIO);\n    }\n\n    if (itemCount === 2 && (index === 0 || index === 1)) {\n        return 0.5;\n    }\n\n    if ((index === 0 && itemCount > 2) || (itemCount === 3 && (index === 1 || index === 2))) {\n        return 1.5;\n    }\n\n    return DEFAULT_MEDIA_RATIO;\n};\n\nexport const openFiles = (fileItems: InternalFileItem[], file: InternalFileItem) => {\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n            mediaType:\n                item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                    ? MediaType.VIDEO\n                    : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n            void openVideo({ url: file.uploadedFile.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach(({ uploadedFile }) => {\n            if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                imageFiles.push({ url: uploadedFile.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.uploadedFile?.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n\nexport const openKnownFiles = (fileItems: FileItem[], file: FileItem) => {\n    const activeFileKey = getGalleryViewerKey(file, fileItems.indexOf(file));\n    let startIndex = 0;\n\n    try {\n        startIndex = fileItems.findIndex(\n            (item, index) => getGalleryViewerKey(item, index) === activeFileKey,\n        );\n\n        const items: OpenMediaItem[] = fileItems.map((item) => ({\n            url: item.file.url.replace('_0.mp4', '.mp4'),\n            mediaType: 'thumbnailUrl' in item.file ? MediaType.VIDEO : MediaType.IMAGE,\n        }));\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        void openMedia({ items, startIndex });\n    } catch (_) {\n        if ('thumbnailUrl' in file.file) {\n            void openVideo({ url: file.file.url });\n\n            return;\n        }\n\n        const imageFiles: OpenImageItem[] = [];\n\n        fileItems.forEach((item) => {\n            if (!('thumbnailUrl' in item.file)) {\n                imageFiles.push({ url: item.file.url });\n            }\n        });\n\n        startIndex = imageFiles.findIndex((item) => item.url === file.file.url);\n\n        const startFile = imageFiles.shift();\n\n        if (!startFile) {\n            return;\n        }\n\n        void openImage({ items: [startFile, ...imageFiles], startIndex });\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/Gallery.d.ts

@@ -1,47 +1,4 @@
-import { type FileItem } from '@chayns-components/core';
 import { FC } from 'react';
-import { GalleryViewMode } from '../types/gallery';
-export type GalleryProps = {
-    /**
-     * Whether drag and drop is allowed or not
-     */
-    allowDragAndDrop?: boolean;
-    /**
-     * The message that should be displayed if a File is already given.
-     */
-    doubleFileDialogMessage?: string;
-    /**
-     * The minimum width of a file in the edit mode
-     */
-    fileMinWidth?: number;
-    /**
-     *  Images and videos which should be displayed
-     */
-    files?: FileItem[];
-    /**
-     *  Whether images and videos can be edited
-     */
-    isEditMode?: boolean;
-    /**
-     * The maximum amount of images and videos that can be uploaded.
-     */
-    maxFiles?: number;
-    /**
-     *  Function to be executed when files are added and uploaded
-     */
-    onAdd?: (file: FileItem) => void;
-    /**
-     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded
-     */
-    onFileCountChange?: (fileCount: number) => void;
-    /**
-     *  Function to be executed when a file is removed
-     */
-    onRemove?: (file: FileItem) => void;
-    /**
-     * The mode how the images should be displayed.
-     */
-    viewMode?: GalleryViewMode;
-};
+import type { GalleryProps } from './Gallery.types';
 declare const Gallery: FC<GalleryProps>;
 export default Gallery;

package/lib/types/components/Gallery.types.d.ts

@@ -0,0 +1,107 @@
+import type { FileItem } from '@chayns-components/core';
+import type { GalleryViewMode } from '../types/gallery';
+/**
+ * Props for the public Gallery wrapper component.
+ */
+export interface GalleryProps {
+    /**
+     * Enables drag and drop while the component is used in edit mode.
+     * @description
+     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.
+     * @default false
+     * @example
+     * <Gallery allowDragAndDrop isEditMode files={files} />
+     * @optional
+     */
+    allowDragAndDrop?: boolean;
+    /**
+     * Defines the dialog message that is shown when a duplicate upload is detected.
+     * @description
+     * The message is used by the editor when a locally added file resolves to an already known uploaded file.
+     * @default 'Diese Datei ist bereits vorhanden'
+     * @example
+     * <Gallery doubleFileDialogMessage="This file already exists." isEditMode files={files} />
+     * @optional
+     */
+    doubleFileDialogMessage?: string;
+    /**
+     * Defines the minimum width of one tile in edit mode.
+     * @description
+     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.
+     * @default 100
+     * @example
+     * <Gallery fileMinWidth={140} isEditMode files={files} />
+     * @optional
+     */
+    fileMinWidth?: number;
+    /**
+     * Provides already known media items that should be rendered by the gallery.
+     * @description
+     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline
+     * for already uploaded media while local uploads are managed internally.
+     * @example
+     * <Gallery files={files} />
+     * @optional
+     */
+    files?: FileItem[];
+    /**
+     * Enables the editable upload mode instead of the read-only viewer mode.
+     * @description
+     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.
+     * @default false
+     * @example
+     * <Gallery isEditMode files={files} />
+     * @optional
+     */
+    isEditMode?: boolean;
+    /**
+     * Limits how many files can be managed in edit mode.
+     * @description
+     * Once the limit is reached, the editor hides the add-tile and does not accept more files.
+     * This prop has no effect in read-only mode.
+     * @example
+     * <Gallery isEditMode maxFiles={6} files={files} />
+     * @optional
+     */
+    maxFiles?: number;
+    /**
+     * Is called after a file has been uploaded successfully in edit mode.
+     * @description
+     * The callback receives the uploaded file representation that should be merged into the consuming state.
+     * It is never called by the read-only viewer.
+     * @example
+     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />
+     * @optional
+     */
+    onAdd?: (file: FileItem) => void;
+    /**
+     * Is called whenever the internal item count changes in edit mode.
+     * @description
+     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.
+     * It is useful when surrounding UI needs to know whether uploads are still in progress.
+     * @example
+     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />
+     * @optional
+     */
+    onFileCountChange?: (fileCount: number) => void;
+    /**
+     * Is called after an uploaded file has been removed in edit mode.
+     * @description
+     * The callback receives the removed uploaded file so the consuming state can remove it as well.
+     * It is never called by the read-only viewer.
+     * @example
+     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />
+     * @optional
+     */
+    onRemove?: (file: FileItem) => void;
+    /**
+     * Defines how known media items are arranged in read-only mode.
+     * @description
+     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.
+     * @default GalleryViewMode.GRID
+     * @example
+     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />
+     * @optional
+     */
+    viewMode?: GalleryViewMode;
+}

package/lib/types/components/gallery-editor/GalleryEditor.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import type { GalleryEditorProps } from './GalleryEditor.types';
+declare const GalleryEditor: FC<GalleryEditorProps>;
+export default GalleryEditor;

package/lib/types/components/gallery-editor/GalleryEditor.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledGalleryEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryEditorGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fileMinWidth: number;
+}>> & string;