@chayns-components/gallery 5.0.0-beta.1004 → 5.0.0-beta.1005

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _core = require("@chayns-components/core");
8
- var _framerMotion = require("framer-motion");
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = require("motion/react");
9
+ var _react2 = _interopRequireWildcard(require("react"));
10
10
  var _GalleryItem = require("./GalleryItem.styles");
11
11
  var _MediaItem = _interopRequireDefault(require("./media-item/MediaItem"));
12
12
  var _PreviewItem = _interopRequireDefault(require("./preview-item/PreviewItem"));
@@ -20,24 +20,24 @@ const GalleryItem = ({
20
20
  ratio = 1,
21
21
  remainingItemsLength,
22
22
  onClick
23
- }) => (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
23
+ }) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
24
24
  onClick: () => handleDeleteFile(fileItem.id)
25
- }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
25
+ }, /*#__PURE__*/_react2.default.createElement(_core.Icon, {
26
26
  size: 20,
27
27
  icons: ['ts-wrong']
28
- })), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
28
+ })), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
29
29
  initial: false
30
- }, fileItem.state === 'uploading' ? /*#__PURE__*/_react.default.createElement(_PreviewItem.default, {
30
+ }, fileItem.state === 'uploading' ? /*#__PURE__*/_react2.default.createElement(_PreviewItem.default, {
31
31
  ratio: ratio,
32
32
  key: `uploading_${fileItem.id ?? ''}`,
33
33
  fileItem: fileItem
34
- }) : /*#__PURE__*/_react.default.createElement(_MediaItem.default, {
34
+ }) : /*#__PURE__*/_react2.default.createElement(_MediaItem.default, {
35
35
  key: `uploaded_${fileItem.id ?? ''}`,
36
36
  fileItem: fileItem,
37
37
  isEditMode: isEditMode,
38
38
  ratio: ratio,
39
39
  openSelectedFile: onClick
40
- })), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
40
+ })), remainingItemsLength && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/_react2.default.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
41
41
  GalleryItem.displayName = 'GalleryItem';
42
42
  var _default = exports.default = GalleryItem;
43
43
  //# sourceMappingURL=GalleryItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryItem.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GalleryItem","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","useMemo","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","id","Icon","size","icons","state","previewUrl","uploadedFile","AnimatePresence","initial","key","openSelectedFile","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"GalleryItem.js","names":["_core","require","_react","_react2","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GalleryItem","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","useMemo","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","id","Icon","size","icons","state","previewUrl","uploadedFile","AnimatePresence","initial","key","openSelectedFile","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"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","ignoreList":[]}
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.StyledMotionMediaItem = exports.StyledMediaItemVideoWrapper = exports.StyledMediaItemVideo = exports.StyledMediaItemPlayIcon = exports.StyledMediaItemImageWrapper = exports.StyledMediaItemImage = void 0;
7
- var _framerMotion = require("framer-motion");
7
+ var _react = require("motion/react");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
10
+ const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_react.motion.div)`
11
11
  display: flex;
12
12
  width: 100%;
13
13
  height: 100%;
@@ -1 +1 @@
1
- {"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionMediaItem","exports","styled","motion","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,GAAGT,yBAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"MediaItem.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionMediaItem","exports","styled","motion","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,GAAGT,yBAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.StyledPreviewItemLoadingIcon = exports.StyledPreviewItemImageWrapper = exports.StyledPreviewItemImage = exports.StyledMotionPreviewItem = void 0;
7
- var _framerMotion = require("framer-motion");
7
+ var _react = require("motion/react");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const StyledMotionPreviewItem = exports.StyledMotionPreviewItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
10
+ const StyledMotionPreviewItem = exports.StyledMotionPreviewItem = (0, _styledComponents.default)(_react.motion.div)`
11
11
  display: flex;
12
12
  width: 100%;
13
13
  height: 100%;
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionPreviewItem","exports","styled","motion","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAIM,MAAMC,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAGL,yBAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,4BAA4B,GAAAT,OAAA,CAAAS,4BAAA,GAAGR,yBAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"PreviewItem.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionPreviewItem","exports","styled","motion","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAIM,MAAMC,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAGL,yBAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,4BAA4B,GAAAT,OAAA,CAAAS,4BAAA,GAAGR,yBAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  import { Icon } from '@chayns-components/core';
2
- import { AnimatePresence } from 'framer-motion';
2
+ import { AnimatePresence } from 'motion/react';
3
3
  import React, { useMemo } from 'react';
4
4
  import { StyledGalleryItem, StyledGalleryItemDeleteButton, StyledGalleryItemMoreItemsIndicator } from './GalleryItem.styles';
5
5
  import MediaItem from './media-item/MediaItem';
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB;IACpBC;EACJ,CAAC,GAAAN,IAAA;EAAA,OACGP,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACb,iBAAiB,QACbS,UAAU,iBACPX,KAAA,CAAAe,aAAA,CAACZ,6BAA6B;IAACW,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;EAAE,gBACxEhB,KAAA,CAAAe,aAAA,CAACjB,IAAI;IAACmB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDrB,KAAA,CAAAe,aAAA,CAAChB,eAAe;IAACuB,OAAO,EAAE;EAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BnB,KAAA,CAAAe,aAAA,CAACT,WAAW;IACRM,KAAK,EAAEA,KAAM;IACbW,GAAG,EAAE,aAAad,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;IACtCP,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFT,KAAA,CAAAe,aAAA,CAACV,SAAS;IACNkB,GAAG,EAAE,YAAYd,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;IACrCP,QAAQ,EAAEA,QAAS;IACnBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,gBAAgB,EAAEV;EAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBb,KAAA,CAAAe,aAAA,CAACX,mCAAmC,qBAChCJ,KAAA,CAAAe,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAAA;AAELN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
1
+ {"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,SAASC,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB;IACpBC;EACJ,CAAC,GAAAN,IAAA;EAAA,OACGP,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACb,iBAAiB,QACbS,UAAU,iBACPX,KAAA,CAAAe,aAAA,CAACZ,6BAA6B;IAACW,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;EAAE,gBACxEhB,KAAA,CAAAe,aAAA,CAACjB,IAAI;IAACmB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDrB,KAAA,CAAAe,aAAA,CAAChB,eAAe;IAACuB,OAAO,EAAE;EAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BnB,KAAA,CAAAe,aAAA,CAACT,WAAW;IACRM,KAAK,EAAEA,KAAM;IACbW,GAAG,EAAE,aAAad,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;IACtCP,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFT,KAAA,CAAAe,aAAA,CAACV,SAAS;IACNkB,GAAG,EAAE,YAAYd,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;IACrCP,QAAQ,EAAEA,QAAS;IACnBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,gBAAgB,EAAEV;EAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBb,KAAA,CAAAe,aAAA,CAACX,mCAAmC,qBAChCJ,KAAA,CAAAe,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAAA;AAELN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled from 'styled-components';
3
3
  export const StyledMotionMediaItem = styled(motion.div)`
4
4
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","$ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA;AAC1C,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA8B;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAgC;AAC3E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","$ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA;AAC1C,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA8B;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAgC;AAC3E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled from 'styled-components';
3
3
  export const StyledMotionPreviewItem = styled(motion.div)`
4
4
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","$ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAgC;AAC7E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","$ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAgC;AAC7E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,269 +1,8 @@
1
- export declare const StyledMotionMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
2
- slot?: string | undefined;
3
- title?: string | undefined;
4
- defaultChecked?: boolean | undefined;
5
- defaultValue?: string | number | readonly string[] | undefined;
6
- suppressContentEditableWarning?: boolean | undefined;
7
- suppressHydrationWarning?: boolean | undefined;
8
- accessKey?: string | undefined;
9
- autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
10
- autoFocus?: boolean | undefined;
11
- className?: string | undefined;
12
- contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
13
- contextMenu?: string | undefined;
14
- dir?: string | undefined;
15
- draggable?: (boolean | "true" | "false") | undefined;
16
- enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
17
- hidden?: boolean | undefined;
18
- id?: string | undefined;
19
- lang?: string | undefined;
20
- nonce?: string | undefined;
21
- spellCheck?: (boolean | "true" | "false") | undefined;
22
- tabIndex?: number | undefined;
23
- translate?: "yes" | "no" | undefined;
24
- radioGroup?: string | undefined;
25
- role?: import("react").AriaRole | undefined;
26
- about?: string | undefined;
27
- content?: string | undefined;
28
- datatype?: string | undefined;
29
- inlist?: any;
30
- prefix?: string | undefined;
31
- property?: string | undefined;
32
- rel?: string | undefined;
33
- resource?: string | undefined;
34
- rev?: string | undefined;
35
- typeof?: string | undefined;
36
- vocab?: string | undefined;
37
- autoCorrect?: string | undefined;
38
- autoSave?: string | undefined;
39
- color?: string | undefined;
40
- itemProp?: string | undefined;
41
- itemScope?: boolean | undefined;
42
- itemType?: string | undefined;
43
- itemID?: string | undefined;
44
- itemRef?: string | undefined;
45
- results?: number | undefined;
46
- security?: string | undefined;
47
- unselectable?: "off" | "on" | undefined;
48
- inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
49
- is?: string | undefined;
50
- "aria-activedescendant"?: string | undefined;
51
- "aria-atomic"?: (boolean | "true" | "false") | undefined;
52
- "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
53
- "aria-braillelabel"?: string | undefined;
54
- "aria-brailleroledescription"?: string | undefined;
55
- "aria-busy"?: (boolean | "true" | "false") | undefined;
56
- "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
57
- "aria-colcount"?: number | undefined;
58
- "aria-colindex"?: number | undefined;
59
- "aria-colindextext"?: string | undefined;
60
- "aria-colspan"?: number | undefined;
61
- "aria-controls"?: string | undefined;
62
- "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
63
- "aria-describedby"?: string | undefined;
64
- "aria-description"?: string | undefined;
65
- "aria-details"?: string | undefined;
66
- "aria-disabled"?: (boolean | "true" | "false") | undefined;
67
- "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
68
- "aria-errormessage"?: string | undefined;
69
- "aria-expanded"?: (boolean | "true" | "false") | undefined;
70
- "aria-flowto"?: string | undefined;
71
- "aria-grabbed"?: (boolean | "true" | "false") | undefined;
72
- "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
73
- "aria-hidden"?: (boolean | "true" | "false") | undefined;
74
- "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
75
- "aria-keyshortcuts"?: string | undefined;
76
- "aria-label"?: string | undefined;
77
- "aria-labelledby"?: string | undefined;
78
- "aria-level"?: number | undefined;
79
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
80
- "aria-modal"?: (boolean | "true" | "false") | undefined;
81
- "aria-multiline"?: (boolean | "true" | "false") | undefined;
82
- "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
83
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
84
- "aria-owns"?: string | undefined;
85
- "aria-placeholder"?: string | undefined;
86
- "aria-posinset"?: number | undefined;
87
- "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
88
- "aria-readonly"?: (boolean | "true" | "false") | undefined;
89
- "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
90
- "aria-required"?: (boolean | "true" | "false") | undefined;
91
- "aria-roledescription"?: string | undefined;
92
- "aria-rowcount"?: number | undefined;
93
- "aria-rowindex"?: number | undefined;
94
- "aria-rowindextext"?: string | undefined;
95
- "aria-rowspan"?: number | undefined;
96
- "aria-selected"?: (boolean | "true" | "false") | undefined;
97
- "aria-setsize"?: number | undefined;
98
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
99
- "aria-valuemax"?: number | undefined;
100
- "aria-valuemin"?: number | undefined;
101
- "aria-valuenow"?: number | undefined;
102
- "aria-valuetext"?: string | undefined;
103
- dangerouslySetInnerHTML?: {
104
- __html: string | TrustedHTML;
105
- } | undefined;
106
- onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
107
- onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
108
- onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
109
- onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
110
- onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
111
- onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
112
- onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
113
- onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
114
- onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
115
- onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
116
- onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
117
- onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
118
- onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
119
- onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
120
- onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
121
- onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
122
- onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
123
- onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
124
- onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
125
- onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
126
- onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
127
- onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
128
- onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
129
- onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
130
- onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
131
- onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
132
- onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
133
- onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
134
- onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
135
- onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
136
- onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
137
- onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
138
- onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
139
- onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
140
- onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
141
- onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
142
- onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
143
- onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
144
- onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
145
- onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
146
- onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
147
- onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
148
- onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
149
- onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
150
- onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
151
- onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
152
- onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
153
- onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
154
- onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
155
- onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
156
- onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
157
- onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
158
- onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
159
- onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
160
- onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
161
- onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
162
- onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
163
- onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
164
- onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
165
- onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
166
- onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
167
- onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
168
- onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
169
- onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
170
- onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
171
- onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
172
- onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
173
- onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
174
- onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
175
- onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
176
- onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
177
- onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
178
- onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
179
- onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
180
- onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
181
- onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
182
- onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
183
- onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
184
- onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
185
- onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
186
- onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
187
- onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
188
- onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
189
- onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
190
- onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
191
- onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
192
- onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
193
- onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
194
- onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
195
- onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
196
- onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
197
- onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
198
- onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
199
- onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
200
- onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
201
- onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
202
- onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
203
- onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
204
- onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
205
- onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
206
- onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
207
- onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
208
- onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
209
- onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
210
- onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
211
- onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
212
- onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
213
- onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
214
- onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
215
- onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
216
- onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
217
- onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
218
- onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
219
- onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
220
- onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
221
- onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
222
- onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
223
- onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
224
- onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
225
- onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
226
- onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
227
- onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
228
- onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
229
- onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
230
- onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
231
- onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
232
- onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
233
- onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
234
- onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
235
- onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
236
- onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
237
- onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
238
- onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
239
- onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
240
- onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
241
- onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
242
- onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
243
- onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
244
- onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
245
- onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
246
- onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
247
- onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
248
- onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
249
- onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
250
- onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
251
- onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
252
- onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
253
- onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
254
- onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
255
- onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
256
- onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
257
- onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
258
- onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
259
- onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
260
- onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
261
- onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
262
- } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
1
+ export declare const StyledMotionMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
263
2
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
264
3
  }, {
265
4
  theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
266
- }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
5
+ }>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
267
6
  export declare const StyledMediaItemVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
268
7
  $ratio: number;
269
8
  }>> & string;
@@ -1,269 +1,8 @@
1
- export declare const StyledMotionPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
2
- slot?: string | undefined;
3
- title?: string | undefined;
4
- defaultChecked?: boolean | undefined;
5
- defaultValue?: string | number | readonly string[] | undefined;
6
- suppressContentEditableWarning?: boolean | undefined;
7
- suppressHydrationWarning?: boolean | undefined;
8
- accessKey?: string | undefined;
9
- autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
10
- autoFocus?: boolean | undefined;
11
- className?: string | undefined;
12
- contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
13
- contextMenu?: string | undefined;
14
- dir?: string | undefined;
15
- draggable?: (boolean | "true" | "false") | undefined;
16
- enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
17
- hidden?: boolean | undefined;
18
- id?: string | undefined;
19
- lang?: string | undefined;
20
- nonce?: string | undefined;
21
- spellCheck?: (boolean | "true" | "false") | undefined;
22
- tabIndex?: number | undefined;
23
- translate?: "yes" | "no" | undefined;
24
- radioGroup?: string | undefined;
25
- role?: import("react").AriaRole | undefined;
26
- about?: string | undefined;
27
- content?: string | undefined;
28
- datatype?: string | undefined;
29
- inlist?: any;
30
- prefix?: string | undefined;
31
- property?: string | undefined;
32
- rel?: string | undefined;
33
- resource?: string | undefined;
34
- rev?: string | undefined;
35
- typeof?: string | undefined;
36
- vocab?: string | undefined;
37
- autoCorrect?: string | undefined;
38
- autoSave?: string | undefined;
39
- color?: string | undefined;
40
- itemProp?: string | undefined;
41
- itemScope?: boolean | undefined;
42
- itemType?: string | undefined;
43
- itemID?: string | undefined;
44
- itemRef?: string | undefined;
45
- results?: number | undefined;
46
- security?: string | undefined;
47
- unselectable?: "off" | "on" | undefined;
48
- inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
49
- is?: string | undefined;
50
- "aria-activedescendant"?: string | undefined;
51
- "aria-atomic"?: (boolean | "true" | "false") | undefined;
52
- "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
53
- "aria-braillelabel"?: string | undefined;
54
- "aria-brailleroledescription"?: string | undefined;
55
- "aria-busy"?: (boolean | "true" | "false") | undefined;
56
- "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
57
- "aria-colcount"?: number | undefined;
58
- "aria-colindex"?: number | undefined;
59
- "aria-colindextext"?: string | undefined;
60
- "aria-colspan"?: number | undefined;
61
- "aria-controls"?: string | undefined;
62
- "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
63
- "aria-describedby"?: string | undefined;
64
- "aria-description"?: string | undefined;
65
- "aria-details"?: string | undefined;
66
- "aria-disabled"?: (boolean | "true" | "false") | undefined;
67
- "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
68
- "aria-errormessage"?: string | undefined;
69
- "aria-expanded"?: (boolean | "true" | "false") | undefined;
70
- "aria-flowto"?: string | undefined;
71
- "aria-grabbed"?: (boolean | "true" | "false") | undefined;
72
- "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
73
- "aria-hidden"?: (boolean | "true" | "false") | undefined;
74
- "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
75
- "aria-keyshortcuts"?: string | undefined;
76
- "aria-label"?: string | undefined;
77
- "aria-labelledby"?: string | undefined;
78
- "aria-level"?: number | undefined;
79
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
80
- "aria-modal"?: (boolean | "true" | "false") | undefined;
81
- "aria-multiline"?: (boolean | "true" | "false") | undefined;
82
- "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
83
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
84
- "aria-owns"?: string | undefined;
85
- "aria-placeholder"?: string | undefined;
86
- "aria-posinset"?: number | undefined;
87
- "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
88
- "aria-readonly"?: (boolean | "true" | "false") | undefined;
89
- "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
90
- "aria-required"?: (boolean | "true" | "false") | undefined;
91
- "aria-roledescription"?: string | undefined;
92
- "aria-rowcount"?: number | undefined;
93
- "aria-rowindex"?: number | undefined;
94
- "aria-rowindextext"?: string | undefined;
95
- "aria-rowspan"?: number | undefined;
96
- "aria-selected"?: (boolean | "true" | "false") | undefined;
97
- "aria-setsize"?: number | undefined;
98
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
99
- "aria-valuemax"?: number | undefined;
100
- "aria-valuemin"?: number | undefined;
101
- "aria-valuenow"?: number | undefined;
102
- "aria-valuetext"?: string | undefined;
103
- dangerouslySetInnerHTML?: {
104
- __html: string | TrustedHTML;
105
- } | undefined;
106
- onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
107
- onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
108
- onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
109
- onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
110
- onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
111
- onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
112
- onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
113
- onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
114
- onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
115
- onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
116
- onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
117
- onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
118
- onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
119
- onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
120
- onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
121
- onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
122
- onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
123
- onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
124
- onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
125
- onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
126
- onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
127
- onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
128
- onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
129
- onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
130
- onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
131
- onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
132
- onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
133
- onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
134
- onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
135
- onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
136
- onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
137
- onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
138
- onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
139
- onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
140
- onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
141
- onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
142
- onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
143
- onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
144
- onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
145
- onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
146
- onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
147
- onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
148
- onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
149
- onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
150
- onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
151
- onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
152
- onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
153
- onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
154
- onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
155
- onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
156
- onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
157
- onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
158
- onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
159
- onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
160
- onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
161
- onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
162
- onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
163
- onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
164
- onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
165
- onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
166
- onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
167
- onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
168
- onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
169
- onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
170
- onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
171
- onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
172
- onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
173
- onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
174
- onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
175
- onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
176
- onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
177
- onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
178
- onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
179
- onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
180
- onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
181
- onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
182
- onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
183
- onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
184
- onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
185
- onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
186
- onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
187
- onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
188
- onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
189
- onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
190
- onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
191
- onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
192
- onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
193
- onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
194
- onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
195
- onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
196
- onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
197
- onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
198
- onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
199
- onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
200
- onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
201
- onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
202
- onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
203
- onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
204
- onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
205
- onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
206
- onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
207
- onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
208
- onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
209
- onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
210
- onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
211
- onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
212
- onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
213
- onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
214
- onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
215
- onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
216
- onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
217
- onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
218
- onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
219
- onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
220
- onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
221
- onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
222
- onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
223
- onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
224
- onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
225
- onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
226
- onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
227
- onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
228
- onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
229
- onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
230
- onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
231
- onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
232
- onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
233
- onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
234
- onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
235
- onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
236
- onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
237
- onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
238
- onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
239
- onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
240
- onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
241
- onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
242
- onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
243
- onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
244
- onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
245
- onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
246
- onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
247
- onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
248
- onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
249
- onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
250
- onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
251
- onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
252
- onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
253
- onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
254
- onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
255
- onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
256
- onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
257
- onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
258
- onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
259
- onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
260
- onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
261
- onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
262
- } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
1
+ export declare const StyledMotionPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
263
2
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
264
3
  }, {
265
4
  theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
266
- }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
5
+ }>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
267
6
  export declare const StyledPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
268
7
  $ratio: number;
269
8
  }>> & string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/gallery",
3
- "version": "5.0.0-beta.1004",
3
+ "version": "5.0.0-beta.1005",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -69,12 +69,12 @@
69
69
  "typescript": "^5.7.3"
70
70
  },
71
71
  "dependencies": {
72
- "@chayns-components/core": "^5.0.0-beta.1004",
72
+ "@chayns-components/core": "^5.0.0-beta.1005",
73
73
  "uuid": "^10.0.0"
74
74
  },
75
75
  "peerDependencies": {
76
76
  "chayns-api": ">=2.0.0",
77
- "framer-motion": ">=10.18.0",
77
+ "motion": ">=12.4.1",
78
78
  "react": ">=18.0.0",
79
79
  "react-dom": ">=18.0.0",
80
80
  "styled-components": ">=5.3.11"
@@ -82,5 +82,5 @@
82
82
  "publishConfig": {
83
83
  "access": "public"
84
84
  },
85
- "gitHead": "a9fb53787fea09b45e246d8c6bb4529035acb02c"
85
+ "gitHead": "e9addebffb5f9ef1fb0f85ddfd9611ec4b422f55"
86
86
  }