@chayns-components/core 5.0.0-beta.1001 → 5.0.0-beta.1004

package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js

@@ -50,6 +50,14 @@ const ListItemImage = ({
       onClick: handleImageClick
     });
   }
+  if (images && images[0] && images[1]) {
+    return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListImageWrapper, null, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListImageWrapperImage, {
+      src: images[0]
+    }), /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListImageWrapperImage, {
+      src: images[1],
+      $isSecondImage: true
+    }));
+  }
   if (images && images[0]) {
     return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
       onClick: handleImageClick,

package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","gridImages","createElement","background","size","onClick","StyledListItemHeadImageWrapper","$background","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage\n                background={imageBackground}\n                images={gridImages}\n                shouldShowRoundImage={shouldShowRoundImage}\n                size={40}\n                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $background={imageBackground}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","gridImages","createElement","background","size","onClick","StyledListImageWrapper","StyledListImageWrapperImage","src","$isSecondImage","StyledListItemHeadImageWrapper","$background","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$isHidden","onLoad","displayName","_default","exports"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport {\n    StyledListImageWrapper,\n    StyledListImageWrapperImage,\n    StyledListItemHeadImage,\n    StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage\n                background={imageBackground}\n                images={gridImages}\n                shouldShowRoundImage={shouldShowRoundImage}\n                size={40}\n                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0] && images[1]) {\n        return (\n            <StyledListImageWrapper>\n                <StyledListImageWrapperImage src={images[0]} />\n                <StyledListImageWrapperImage src={images[1]} $isSecondImage />\n            </StyledListImageWrapper>\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $background={imageBackground}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
+exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = exports.StyledListImageWrapperImage = exports.StyledListImageWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,4 +44,27 @@ const StyledListItemHeadImage = exports.StyledListItemHeadImage = _styledCompone
     transition: opacity 0.4s ease;
     width: 100%;
 `;
+const StyledListImageWrapper = exports.StyledListImageWrapper = _styledComponents.default.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+`;
+const StyledListImageWrapperImage = exports.StyledListImageWrapperImage = _styledComponents.default.img`
+    border-radius: 100px;
+    height: calc(80%);
+    aspect-ratio: 1;
+    position: absolute;
+
+    ${({
+  $isSecondImage
+}) => $isSecondImage ? (0, _styledComponents.css)`
+                  bottom: 0;
+                  right: 0;
+              ` : (0, _styledComponents.css)`
+                  top: 0;
+                  left: 0;
+              `}
+`;
 //# sourceMappingURL=ListItemImage.styles.js.map

package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledListItemHeadImageWrapper","exports","styled","div","$shouldShowRoundImage","undefined","$shouldHideBackground","css","$background","theme","StyledListItemHeadImage","img","$isHidden"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldHideBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition:\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n    width: 40px;\n\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n    ${({ $shouldHideBackground }) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n                $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px\n                rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n                inset;\n        `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n    $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F;AACA,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxB,CAACA,qBAAqB,IACtB,IAAAC,qBAAG;AACX,0BAA0B,CAAC;EAAEC,WAAW;EAAEC;AAA2C,CAAC,KACtED,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AAC3E;AACA,uBAAuB,CAAC;EAAEA;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA,SAAS;AACT,CAAC;AAMM,MAAMC,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledListItemHeadImageWrapper","exports","styled","div","$shouldShowRoundImage","undefined","$shouldHideBackground","css","$background","theme","StyledListItemHeadImage","img","$isHidden","StyledListImageWrapper","StyledListImageWrapperImage","$isSecondImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldHideBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition:\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n    width: 40px;\n\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n    ${({ $shouldHideBackground }) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n                $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px\n                rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n                inset;\n        `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n    $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\nexport const StyledListImageWrapper = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = {\n    $isSecondImage?: boolean;\n};\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n    border-radius: 100px;\n    height: calc(80%);\n    aspect-ratio: 1;\n    position: absolute;\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F;AACA,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxB,CAACA,qBAAqB,IACtB,IAAAC,qBAAG;AACX,0BAA0B,CAAC;EAAEC,WAAW;EAAEC;AAA2C,CAAC,KACtED,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AAC3E;AACA,uBAAuB,CAAC;EAAEA;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA,SAAS;AACT,CAAC;AAMM,MAAMC,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA,CAAC;AAEM,MAAMC,sBAAsB,GAAAZ,OAAA,CAAAY,sBAAA,GAAGX,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMW,2BAA2B,GAAAb,OAAA,CAAAa,2BAAA,GAAGZ,yBAAM,CAACS,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI;AAAe,CAAC,KACjBA,cAAc,GACR,IAAAR,qBAAG;AACjB;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
@@ -24,6 +25,7 @@ const SearchInput = ({
 }) => {
   const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = (0, _react.useRef)(null);
+  const theme = (0, _styledComponents.useTheme)();
   const handleBackIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(true), []);
   (0, _react.useEffect)(() => {
@@ -43,7 +45,30 @@ const SearchInput = ({
   return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     animate: {
@@ -63,6 +88,10 @@ const SearchInput = ({
       duration: 0.3
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
     onChange: onChange,
     onKeyDown: onKeyDown,
     placeholder: placeholder,
@@ -70,27 +99,6 @@ const SearchInput = ({
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0,
-      position: 'absolute'
-    },
-    initial: {
-      opacity: 0
-    },
-    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
-    transition: {
-      duration: 0.3
-    },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    color: iconColor,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
   }))));
 };
 SearchInput.displayName = 'SearchInput';

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n                <StyledMotionSearchInputIconWrapperContent\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0, position: 'absolute' }}\n                    initial={{ opacity: 0 }}\n                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                    transition={{ duration: 0.3 }}\n                    id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                        onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n                        size={18}\n                    />\n                </StyledMotionSearchInputIconWrapperContent>\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","StyledMotionSearchInputContentWrapper","width","leftElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <StyledMotionSearchInputIconWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchInputIconWrapperContent\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0, position: 'absolute' }}\n                        initial={{ opacity: 0 }}\n                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                        transition={{ duration: 0.3 }}\n                        id={\n                            isSearchInputActive\n                                ? 'search-input-backIcon'\n                                : 'search-input-searchIcon'\n                        }\n                    >\n                        <Icon\n                            color={iconColor}\n                            icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n                            onClick={\n                                isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n                            }\n                            size={18}\n                        />\n                    </StyledMotionSearchInputIconWrapperContent>\n                </AnimatePresence>\n            </StyledMotionSearchInputIconWrapper>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.styles.js

@@ -3,33 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputContentWrapper = void 0;
+exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
-    display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
-
+    display: flex;
+    gap: 8px;
     height: ${({
   $size
 }) => $size === 'medium' ? '42px' : '32px'};
-
-    &:hover {
-        background-color: ${({
-  theme
-}) => theme[103]};
-    }
+    justify-content: flex-end;
+    width: 100%;
 `;
 const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
-    position: absolute;
-    top: 0;
-    right: 0;
     overflow: hidden;
 `;
+const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
+    width: 18px;
+`;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
     display: flex;
 `;

package/lib/cjs/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","theme","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    border-radius: 3px;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    &:hover {\n        background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n    }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: absolute;\n    top: 0;\n    right: 0;\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":";;;;;;AAAA,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;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA;AACA,4BAA4B,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAAC,GAAG,CAAC;AAC7E;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAL,OAAA,CAAAK,qCAAA,GAAG,IAAAJ,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n    $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n    justify-content: flex-end;\n    width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":";;;;;;AAAA,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;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAJ,OAAA,CAAAI,qCAAA,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC3F;AACA,CAAC;AAEM,MAAMI,kCAAkC,GAAAN,OAAA,CAAAM,kCAAA,GAAGL,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js

@@ -1,7 +1,7 @@
 import { MediaType, openMedia } from 'chayns-api';
 import React, { useCallback, useState } from 'react';
 import GridImage from '../../../../grid-image/GridImage';
-import { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
+import { StyledListImageWrapper, StyledListImageWrapperImage, StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
 const ListItemImage = _ref => {
   let {
     imageBackground,
@@ -42,6 +42,14 @@ const ListItemImage = _ref => {
       onClick: handleImageClick
     });
   }
+  if (images && images[0] && images[1]) {
+    return /*#__PURE__*/React.createElement(StyledListImageWrapper, null, /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
+      src: images[0]
+    }), /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
+      src: images[1],
+      $isSecondImage: true
+    }));
+  }
   if (images && images[0]) {
     return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
       onClick: handleImageClick,

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","$background","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","src","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage\n                background={imageBackground}\n                images={gridImages}\n                shouldShowRoundImage={shouldShowRoundImage}\n                size={40}\n                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $background={imageBackground}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAAsCC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACtF,OAAOC,SAAS,MAAM,kCAAkC;AACxD,SAASC,uBAAuB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAUhG,MAAMC,aAA2C,GAAGC,IAAA,IAM9C;EAAA,IAN+C;IACjDC,eAAe;IACfC,MAAM;IACNC,oBAAoB;IACpBC,oBAAoB;IACpBC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMa,iBAAiB,GAAGd,WAAW,CAAC,MAAM;IACxCa,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,gBAAgB,GAAGf,WAAW,CAC/BgB,KAAK,IAAK;IACP,IAAI,CAACL,sBAAsB,EAAE;MACzB;IACJ;IAEAK,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGX,MAAM,CAACY,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAE1B,SAAS,CAAC2B;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAK1B,SAAS,CAAC;MAAEqB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAACjB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMkB,UAAU,GAAG,CAAClB,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACIT,KAAA,CAAA4B,aAAA,CAACzB,SAAS;MACN0B,UAAU,EAAErB,eAAgB;MAC5BC,MAAM,EAAEkB,UAAW;MACnBhB,oBAAoB,EAAEA,oBAAqB;MAC3CmB,IAAI,EAAE,EAAG;MACTC,OAAO,EAAEf;IAAiB,CAC7B,CAAC;EAEV;EAEA,IAAIP,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACIT,KAAA,CAAA4B,aAAA,CAACvB,8BAA8B;MAC3B0B,OAAO,EAAEf,gBAAiB;MAC1BgB,WAAW,EAAExB,eAAgB;MAC7ByB,qBAAqB,EAAEvB,oBAAqB;MAC5CwB,qBAAqB,EAAEvB;IAAqB,gBAE5CX,KAAA,CAAA4B,aAAA,CAACxB,uBAAuB;MACpB+B,SAAS,EAAE,CAACtB,cAAe;MAC3BuB,MAAM,EAAErB,iBAAkB;MAC1BsB,GAAG,EAAE5B,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDH,aAAa,CAACgC,WAAW,GAAG,eAAe;AAE3C,eAAehC,aAAa","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListImageWrapper","StyledListImageWrapperImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","src","$isSecondImage","$background","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport {\n    StyledListImageWrapper,\n    StyledListImageWrapperImage,\n    StyledListItemHeadImage,\n    StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage\n                background={imageBackground}\n                images={gridImages}\n                shouldShowRoundImage={shouldShowRoundImage}\n                size={40}\n                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0] && images[1]) {\n        return (\n            <StyledListImageWrapper>\n                <StyledListImageWrapperImage src={images[0]} />\n                <StyledListImageWrapperImage src={images[1]} $isSecondImage />\n            </StyledListImageWrapper>\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $background={imageBackground}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js

@@ -51,4 +51,30 @@ export const StyledListItemHeadImage = styled.img`
     transition: opacity 0.4s ease;
     width: 100%;
 `;
+export const StyledListImageWrapper = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+`;
+export const StyledListImageWrapperImage = styled.img`
+    border-radius: 100px;
+    height: calc(80%);
+    aspect-ratio: 1;
+    position: absolute;
+
+    ${_ref6 => {
+  let {
+    $isSecondImage
+  } = _ref6;
+  return $isSecondImage ? css`
+                  bottom: 0;
+                  right: 0;
+              ` : css`
+                  top: 0;
+                  left: 0;
+              `;
+}}
+`;
 //# sourceMappingURL=ListItemImage.styles.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","$background","theme","_ref4","StyledListItemHeadImage","img","_ref5","$isHidden"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldHideBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition:\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n    width: 40px;\n\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n    ${({ $shouldHideBackground }) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n                $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px\n                rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n                inset;\n        `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n    $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEC,WAAW;MAAEC;IAA2C,CAAC,GAAAF,KAAA;IAAA,OACtEC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;EAAA;AAC3E;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA2C,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC3F;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","$background","theme","_ref4","StyledListItemHeadImage","img","_ref5","$isHidden","StyledListImageWrapper","StyledListImageWrapperImage","_ref6","$isSecondImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldHideBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition:\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n    width: 40px;\n\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n    ${({ $shouldHideBackground }) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n                $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px\n                rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n                inset;\n        `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n    $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\nexport const StyledListImageWrapper = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = {\n    $isSecondImage?: boolean;\n};\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n    border-radius: 100px;\n    height: calc(80%);\n    aspect-ratio: 1;\n    position: absolute;\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEC,WAAW;MAAEC;IAA2C,CAAC,GAAAF,KAAA;IAAA,OACtEC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;EAAA;AAC3E;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA2C,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC3F;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,2BAA2B,GAAGlB,MAAM,CAACc,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OACjBC,cAAc,GACRnB,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js

@@ -1,8 +1,9 @@
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
 const SearchInput = _ref => {
   let {
     iconColor,
@@ -16,6 +17,7 @@ const SearchInput = _ref => {
   } = _ref;
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = useRef(null);
+  const theme = useTheme();
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
   useEffect(() => {
@@ -34,7 +36,30 @@ const SearchInput = _ref => {
   return /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     animate: {
@@ -54,6 +79,10 @@ const SearchInput = _ref => {
       duration: 0.3
     }
   }, /*#__PURE__*/React.createElement(Input, {
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
     onChange: onChange,
     onKeyDown: onKeyDown,
     placeholder: placeholder,
@@ -61,27 +90,6 @@ const SearchInput = _ref => {
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0,
-      position: 'absolute'
-    },
-    initial: {
-      opacity: 0
-    },
-    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
-    transition: {
-      duration: 0.3
-    },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    color: iconColor,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
   }))));
 };
 SearchInput.displayName = 'SearchInput';

package/lib/esm/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","onClick","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n                <StyledMotionSearchInputIconWrapperContent\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0, position: 'absolute' }}\n                    initial={{ opacity: 0 }}\n                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                    transition={{ duration: 0.3 }}\n                    id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                        onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n                        size={18}\n                    />\n                </StyledMotionSearchInputIconWrapperContent>\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","width","leftElement","text","ref","shouldShowClearIcon","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <StyledMotionSearchInputIconWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchInputIconWrapperContent\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0, position: 'absolute' }}\n                        initial={{ opacity: 0 }}\n                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                        transition={{ duration: 0.3 }}\n                        id={\n                            isSearchInputActive\n                                ? 'search-input-backIcon'\n                                : 'search-input-searchIcon'\n                        }\n                    >\n                        <Icon\n                            color={iconColor}\n                            icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n                            onClick={\n                                isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n                            }\n                            size={18}\n                        />\n                    </StyledMotionSearchInputIconWrapperContent>\n                </AnimatePresence>\n            </StyledMotionSearchInputIconWrapper>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js

@@ -1,34 +1,24 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 export const StyledSearchInput = styled.div`
-    display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
-
+    display: flex;
+    gap: 8px;
     height: ${_ref => {
   let {
     $size
   } = _ref;
   return $size === 'medium' ? '42px' : '32px';
 }};
-
-    &:hover {
-        background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme[103];
-}};
-    }
+    justify-content: flex-end;
+    width: 100%;
 `;
 export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
-    position: absolute;
-    top: 0;
-    right: 0;
     overflow: hidden;
 `;
+export const StyledMotionSearchInputIconWrapper = styled.div`
+    width: 18px;
+`;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
 `;

package/lib/esm/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","_ref2","theme","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    border-radius: 3px;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    &:hover {\n        background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n    }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: absolute;\n    top: 0;\n    right: 0;\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC3F;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,yCAAyC,GAAGR,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n    $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n    justify-content: flex-end;\n    width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACnE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGL,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA,CAAC;AAED,OAAO,MAAMI,kCAAkC,GAAGN,MAAM,CAACE,GAAG;AAC5D;AACA,CAAC;AAED,OAAO,MAAMK,yCAAyC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}

package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts

@@ -10,4 +10,9 @@ type StyledListItemHeadImageProps = WithTheme<{
     $isHidden: boolean;
 }>;
 export declare const StyledListItemHeadImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListItemHeadImageProps>> & string;
+export declare const StyledListImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export type StyledListImageWrapperImageProps = {
+    $isSecondImage?: boolean;
+};
+export declare const StyledListImageWrapperImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListImageWrapperImageProps>> & string;
 export {};

package/lib/types/components/search-input/SearchInput.styles.d.ts

@@ -1,8 +1,7 @@
-import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { InputSize } from '../input/Input';
-type StyledSearchInputProps = WithTheme<{
+type StyledSearchInputProps = {
     $size: InputSize;
-}>;
+};
 export declare const StyledSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSearchInputProps>> & string;
 export declare const StyledMotionSearchInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
@@ -270,6 +269,7 @@ export declare const StyledMotionSearchInputContentWrapper: import("styled-compo
 }, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionSearchInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledMotionSearchInputIconWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1001",
+    "version": "5.0.0-beta.1004",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f468aac7b0520920e4f35c9255279ffe48471ea5"
+    "gitHead": "a9fb53787fea09b45e246d8c6bb4529035acb02c"
 }