@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

package/lib/esm/components/list/list-item/list-item-content/ListItemContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyledListItemContent } from './ListItemContent.styles';
+const ListItemContent = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledListItemContent, {
+    className: "beta-chayns-list-item-content"
+  }, children);
+};
+ListItemContent.displayName = 'ListItemContent';
+export default ListItemContent;
+//# sourceMappingURL=ListItemContent.js.map

package/lib/esm/components/list/list-item/list-item-content/ListItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.js","names":["React","StyledListItemContent","ListItemContent","_ref","children","createElement","className","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-content/ListItemContent.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledListItemContent } from './ListItemContent.styles';\n\ntype ListItemContentProps = {\n    /**\n     * The Elements that should be shown inside the LIstItemContent\n     */\n    children: ReactNode;\n};\n\nconst ListItemContent: FC<ListItemContentProps> = ({ children }) => (\n    <StyledListItemContent className=\"beta-chayns-list-item-content\">\n        {children}\n    </StyledListItemContent>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,qBAAqB,QAAQ,0BAA0B;AAShE,MAAMC,eAAyC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,oBAC3DH,KAAA,CAAAK,aAAA,CAACJ,qBAAqB;IAACK,SAAS,EAAC;EAA+B,GAC3DF,QACkB,CAAC;AAAA,CAC3B;AAEDF,eAAe,CAACK,WAAW,GAAG,iBAAiB;AAE/C,eAAeL,eAAe","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-content/ListItemContent.styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export const StyledListItemContent = styled.div`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    padding: 9px 18px 8px 35px;
+`;
+//# sourceMappingURL=ListItemContent.styles.js.map

package/lib/esm/components/list/list-item/list-item-content/ListItemContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.styles.js","names":["styled","StyledListItemContent","div","_ref","theme","text"],"sources":["../../../../../../src/components/list/list-item/list-item-content/ListItemContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemContentProps = WithTheme<unknown>;\n\nexport const StyledListItemContent = styled.div`\n    color: ${({ theme }: StyledListItemContentProps) => theme.text};\n    padding: 9px 18px 8px 35px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACE,GAAG;AAC/C,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAkC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAClE;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js

@@ -0,0 +1,190 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Icon from '../../../icon/Icon';
+import ListItemIcon from './list-item-icon/ListItemIcon';
+import ListItemImage from './list-item-image/ListItemImage';
+import ListItemRightElements from './list-item-right-elements/ListItemRightElements';
+import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadSubtitleText, StyledListItemHeadSubtitleTextPseudo, StyledListItemHeadTitle, StyledListItemHeadTitleContent, StyledListItemHeadTitleElement, StyledListItemHeadTitleText, StyledListItemHeadTitleTextPseudo, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper, StyledMotionListItemHeadIndicator } from './ListItemHead.styles';
+const ListItemHead = _ref => {
+  let {
+    careOfLocationId,
+    hoverItem,
+    icons,
+    imageBackground,
+    images,
+    isAnyItemExpandable,
+    isExpandable,
+    isOpen,
+    isTitleGreyed,
+    leftElements,
+    onClick,
+    onLongPress,
+    rightElements,
+    shouldHideImageOrIconBackground,
+    shouldHideIndicator,
+    shouldOpenImageOnClick,
+    shouldShowRoundImageOrIcon,
+    subtitle,
+    shouldForceHover,
+    title,
+    titleElement
+  } = _ref;
+  const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);
+  const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
+  const [openTitleWidth, setOpenTitleWidth] = useState(0);
+  const [headHeight, setHeadHeight] = useState({
+    closed: 40,
+    open: 40
+  });
+  const [, setIsFirstRender] = useState(false);
+  const longPressTimeoutRef = useRef();
+  const pseudoTitleOpenRef = useRef(null);
+  const pseudoTitleClosedRef = useRef(null);
+  const pseudoSubtitleOpenRef = useRef(null);
+  const pseudoSubtitleClosedRef = useRef(null);
+  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
+  useEffect(() => {
+    if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
+      const {
+        height: closedTitleHeight
+      } = pseudoTitleClosedRef.current.getBoundingClientRect();
+      const {
+        height: openTitleHeight,
+        width: openWidth
+      } = pseudoTitleOpenRef.current.getBoundingClientRect();
+      setOpenTitleWidth(openWidth);
+      let closedHeight = closedTitleHeight + 24;
+      let openHeight = openTitleHeight + 24;
+      if (shouldShowSubtitleRow) {
+        if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
+          const {
+            height: closedSubtitleHeight
+          } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
+          const {
+            height: openSubtitleHeight
+          } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
+          closedHeight += closedSubtitleHeight + 4;
+          openHeight += openSubtitleHeight + 4;
+        }
+      }
+      setHeadHeight({
+        closed: closedHeight,
+        open: openHeight
+      });
+      setShouldRenderPseudoElements(false);
+    }
+  }, [shouldShowSubtitleRow]);
+  useEffect(() => {
+    if (subtitle || title) setShouldRenderPseudoElements(true);
+  }, [subtitle, title]);
+
+  // This is used to trigger a rerender, so the head height can be calculated
+  useEffect(() => {
+    setIsFirstRender(true);
+  }, []);
+  const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);
+  const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);
+  const marginTop = useMemo(() => {
+    const height = headHeight[isOpen ? 'open' : 'closed'];
+    if (height < 64) {
+      return (64 - height) / 2;
+    }
+    return 0;
+  }, [headHeight, isOpen]);
+  const handleTouchStart = useCallback(event => {
+    longPressTimeoutRef.current = window.setTimeout(() => {
+      if (typeof onLongPress === 'function') {
+        onLongPress(event);
+      }
+    }, 400);
+  }, [onLongPress]);
+  const handleTouchEnd = useCallback(() => {
+    clearTimeout(longPressTimeoutRef.current);
+  }, []);
+  const iconOrImageElement = useMemo(() => {
+    if (icons) {
+      return /*#__PURE__*/React.createElement(ListItemIcon, {
+        icons: icons,
+        shouldHideBackground: !!shouldHideImageOrIconBackground,
+        shouldShowRoundIcon: !!shouldShowRoundImageOrIcon
+      });
+    }
+    if (images) {
+      return /*#__PURE__*/React.createElement(ListItemImage, {
+        imageBackground: imageBackground,
+        careOfLocationId: careOfLocationId,
+        images: images,
+        shouldOpenImageOnClick: shouldOpenImageOnClick,
+        shouldHideBackground: !!shouldHideImageOrIconBackground,
+        shouldShowRoundImage: !!shouldShowRoundImageOrIcon
+      });
+    }
+    return undefined;
+  }, [careOfLocationId, icons, imageBackground, images, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
+  return /*#__PURE__*/React.createElement(StyledListItemHead, {
+    animate: {
+      height: isOpen ? headHeight.open : headHeight.closed,
+      opacity: isTitleGreyed ? 0.5 : 1
+    },
+    initial: false,
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    className: "beta-chayns-list-item-head",
+    $isClickable: typeof onClick === 'function' || isExpandable,
+    $isAnyItemExpandable: isAnyItemExpandable,
+    onClick: onClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: typeof onLongPress === 'function' ? handleTouchStart : undefined,
+    onTouchEnd: typeof onLongPress === 'function' ? handleTouchEnd : undefined
+  }, /*#__PURE__*/React.createElement(StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && /*#__PURE__*/React.createElement(StyledMotionListItemHeadIndicator, {
+    animate: {
+      rotate: isOpen ? 90 : 0
+    },
+    initial: false,
+    transition: {
+      type: 'tween'
+    }
+  }, isExpandable && !shouldHideIndicator && /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-right']
+  })), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
+    $isIconOrImageGiven: iconOrImageElement !== undefined,
+    $marginTop: marginTop,
+    $isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
+    ref: pseudoTitleOpenRef,
+    $isOpen: true
+  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
+    ref: pseudoTitleClosedRef,
+    $isOpen: false
+  }, title)), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
+    $isOpen: isOpen,
+    $width: openTitleWidth
+  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
+    ref: pseudoSubtitleOpenRef,
+    $isOpen: true
+  }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
+    ref: pseudoSubtitleClosedRef,
+    $isOpen: false
+  }, subtitle)), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
+    $isOpen: isOpen
+  }, subtitle))), rightElements && /*#__PURE__*/React.createElement(ListItemRightElements, {
+    rightElements: rightElements
+  }), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItemWrapper, {
+    className: "beta-chayns-list-item-hover-item",
+    animate: {
+      marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,
+      opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,
+      width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0
+    },
+    initial: false,
+    transition: {
+      duration: 0.15,
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItem, null, hoverItem)));
+};
+ListItemHead.displayName = 'ListItemHead';
+export default ListItemHead;
+//# sourceMappingURL=ListItemHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","_ref","careOfLocationId","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","current","height","closedTitleHeight","getBoundingClientRect","openTitleHeight","width","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","Fragment","ref","$width","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    shouldForceHover,\n    title,\n    titleElement,\n}) => {\n    const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [openTitleWidth, setOpenTitleWidth] = useState(0);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 40, open: 40 });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n            const { height: closedTitleHeight } =\n                pseudoTitleClosedRef.current.getBoundingClientRect();\n            const { height: openTitleHeight, width: openWidth } =\n                pseudoTitleOpenRef.current.getBoundingClientRect();\n\n            setOpenTitleWidth(openWidth);\n\n            let closedHeight = closedTitleHeight + 24;\n            let openHeight = openTitleHeight + 24;\n\n            if (shouldShowSubtitleRow) {\n                if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n                    const { height: closedSubtitleHeight } =\n                        pseudoSubtitleClosedRef.current.getBoundingClientRect();\n                    const { height: openSubtitleHeight } =\n                        pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n                    closedHeight += closedSubtitleHeight + 4;\n                    openHeight += openSubtitleHeight + 4;\n                }\n            }\n\n            setHeadHeight({ closed: closedHeight, open: openHeight });\n\n            setShouldRenderPseudoElements(false);\n        }\n    }, [shouldShowSubtitleRow]);\n\n    useEffect(() => {\n        if (subtitle || title) setShouldRenderPseudoElements(true);\n    }, [subtitle, title]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                                <StyledListItemHeadTitleTextPseudo\n                                    ref={pseudoTitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadTitleText $isOpen={isOpen} $width={openTitleWidth}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleOpenRef}\n                                    $isOpen\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,206 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledListItemHead = styled(motion.div)`
+    //align-items: center;
+    overflow: hidden;
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    display: flex;
+    min-height: 64px;
+    padding: 12px 9px;
+    position: relative;
+
+    ${_ref2 => {
+  let {
+    $isAnyItemExpandable
+  } = _ref2;
+  return !$isAnyItemExpandable && css`
+            padding-left: 12px;
+        `;
+}}
+
+    ${_ref3 => {
+  let {
+    $isClickable
+  } = _ref3;
+  return $isClickable && css`
+            cursor: pointer;
+        `;
+}}
+`;
+export const StyledListItemHeadLeftWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    margin: auto 0;
+`;
+export const StyledMotionListItemHeadIndicator = styled(motion.div)`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    height: 26px;
+    justify-content: center;
+    width: 26px;
+`;
+export const StyledListItemHeadContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    font-weight: ${_ref4 => {
+  let {
+    $isOpen
+  } = _ref4;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    justify-content: start;
+    line-height: normal;
+    margin-left: ${_ref5 => {
+  let {
+    $isIconOrImageGiven
+  } = _ref5;
+  return $isIconOrImageGiven ? '10px' : undefined;
+}};
+    margin-top: ${_ref6 => {
+  let {
+    $marginTop
+  } = _ref6;
+  return $marginTop;
+}}px;
+    min-width: 0;
+`;
+export const StyledListItemHeadTitle = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+export const StyledListItemHeadTitleContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    max-width: 100%;
+    min-width: 0;
+    position: relative;
+`;
+export const StyledListItemHeadTitleElement = styled.div`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    margin-left: 8px;
+`;
+export const StyledListItemHeadTitleText = styled(motion.span)`
+    font-weight: ${_ref7 => {
+  let {
+    $isOpen
+  } = _ref7;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref8 => {
+  let {
+    $isOpen
+  } = _ref8;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    min-width: ${_ref9 => {
+  let {
+    $isOpen,
+    $width
+  } = _ref9;
+  return $isOpen ? `${$width}px` : undefined;
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+export const StyledListItemHeadTitleTextPseudo = styled.span`
+    font-weight: ${_ref10 => {
+  let {
+    $isOpen
+  } = _ref10;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref11 => {
+  let {
+    $isOpen
+  } = _ref11;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    position: absolute;
+`;
+export const StyledListItemHeadSubtitle = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2px;
+`;
+export const StyledListItemHeadSubtitleText = styled.span`
+    font-weight: ${_ref12 => {
+  let {
+    $isOpen
+  } = _ref12;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref13 => {
+  let {
+    $isOpen
+  } = _ref13;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    flex: 1 1 auto;
+    font-size: 85%;
+    min-width: 0;
+    opacity: 0.75;
+`;
+export const StyledListItemHeadSubtitleTextPseudo = styled.span`
+    font-weight: ${_ref14 => {
+  let {
+    $isOpen
+  } = _ref14;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref15 => {
+  let {
+    $isOpen
+  } = _ref15;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    flex: 1 1 auto;
+    font-size: 85%;
+    min-width: 0;
+
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+
+    position: absolute;
+`;
+export const StyledMotionListItemHeadHoverItemWrapper = styled(motion.div)`
+    overflow: hidden;
+    flex-shrink: 0;
+    margin: auto 0;
+    position: absolute;
+    right: 0;
+
+    background: ${_ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`;
+}};
+`;
+export const StyledMotionListItemHeadHoverItem = styled.div`
+    padding-left: 40px;
+`;
+//# sourceMappingURL=ListItemHead.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","_ref6","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","_ref9","$width","StyledListItemHeadTitleTextPseudo","_ref10","_ref11","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref12","_ref13","StyledListItemHeadSubtitleTextPseudo","_ref14","_ref15","StyledMotionListItemHeadHoverItemWrapper","_ref16","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled(motion.div)<StyledListItemHeadProps>`\n    //align-items: center;\n    overflow: hidden;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    min-height: 64px;\n    padding: 12px 9px;\n    position: relative;\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n\n    ${({ $isClickable }) =>\n        $isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    margin: auto 0;\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    $isIconOrImageGiven: boolean;\n    $isOpen: boolean;\n    $marginTop: number;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    justify-content: start;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    margin-top: ${({ $marginTop }) => $marginTop}px;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    max-width: 100%;\n    min-width: 0;\n    position: relative;\n`;\n\nexport const StyledListItemHeadTitleElement = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean; $width: number }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleTextPseudo = styled.span<StyledListItemHeadTitleTextPseudoProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n    position: absolute;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n    opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleTextPseudo = styled.span<StyledListItemHeadSubtitleTextPseudoProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n\n    position: absolute;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = WithTheme<unknown>;\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n    motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n    overflow: hidden;\n    flex-shrink: 0;\n    margin: auto 0;\n    position: absolute;\n    right: 0;\n\n    background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n        `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n    padding-left: 40px;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Icon from '../../../../icon/Icon';
+import { StyledListItemIcon } from './ListItemIcon.styles';
+const ListItemIcon = _ref => {
+  let {
+    icons,
+    shouldHideBackground,
+    shouldShowRoundIcon
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledListItemIcon, {
+    $shouldHideBackground: shouldHideBackground,
+    $shouldShowRoundIcon: shouldShowRoundIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: icons,
+    size: 22
+  }));
+};
+ListItemIcon.displayName = 'ListItemIcon';
+export default ListItemIcon;
+//# sourceMappingURL=ListItemIcon.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIcon.js","names":["React","Icon","StyledListItemIcon","ListItemIcon","_ref","icons","shouldHideBackground","shouldShowRoundIcon","createElement","$shouldHideBackground","$shouldShowRoundIcon","size","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Icon from '../../../../icon/Icon';\nimport { StyledListItemIcon } from './ListItemIcon.styles';\n\ntype ListItemIconProps = {\n    icons: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundIcon: boolean;\n};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({\n    icons,\n    shouldHideBackground,\n    shouldShowRoundIcon,\n}) => (\n    <StyledListItemIcon\n        $shouldHideBackground={shouldHideBackground}\n        $shouldShowRoundIcon={shouldShowRoundIcon}\n    >\n        <Icon icons={icons} size={22} />\n    </StyledListItemIcon>\n);\n\nListItemIcon.displayName = 'ListItemIcon';\n\nexport default ListItemIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,IAAI,MAAM,uBAAuB;AACxC,SAASC,kBAAkB,QAAQ,uBAAuB;AAQ1D,MAAMC,YAAyC,GAAGC,IAAA;EAAA,IAAC;IAC/CC,KAAK;IACLC,oBAAoB;IACpBC;EACJ,CAAC,GAAAH,IAAA;EAAA,oBACGJ,KAAA,CAAAQ,aAAA,CAACN,kBAAkB;IACfO,qBAAqB,EAAEH,oBAAqB;IAC5CI,oBAAoB,EAAEH;EAAoB,gBAE1CP,KAAA,CAAAQ,aAAA,CAACP,IAAI;IAACI,KAAK,EAAEA,KAAM;IAACM,IAAI,EAAE;EAAG,CAAE,CACf,CAAC;AAAA,CACxB;AAEDR,YAAY,CAACS,WAAW,GAAG,cAAc;AAEzC,eAAeT,YAAY","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+export const StyledListItemIcon = styled.div`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    transition:
+        background-color 0.3s ease,
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease;
+    width: 40px;
+
+    border-radius: ${_ref => {
+  let {
+    $shouldShowRoundIcon
+  } = _ref;
+  return $shouldShowRoundIcon ? '50%' : undefined;
+}};
+
+    ${_ref2 => {
+  let {
+    $shouldHideBackground
+  } = _ref2;
+  return !$shouldHideBackground && css`
+            background-color: rgba(
+                ${_ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme['text-rgb'];
+  }},
+                0.1
+            );
+            box-shadow: 0 0 0 1px
+                rgba(${_ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme['009-rgb'];
+  }}, 0.08) inset;
+        `;
+}}
+`;
+//# sourceMappingURL=ListItemIcon.styles.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIcon.styles.js","names":["styled","css","StyledListItemIcon","div","_ref","$shouldShowRoundIcon","undefined","_ref2","$shouldHideBackground","_ref3","theme","_ref4"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<{\n    $shouldHideBackground?: boolean;\n    $shouldShowRoundIcon?: boolean;\n}>;\n\nexport const StyledListItemIcon = styled.div<StyledListItemIconProps>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\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: ${({ $shouldShowRoundIcon }) => ($shouldShowRoundIcon ? '50%' : undefined)};\n\n    ${({ $shouldHideBackground }) =>\n        !$shouldHideBackground &&\n        css`\n            background-color: rgba(\n                ${({ theme }: StyledListItemIconProps) => theme['text-rgb']},\n                0.1\n            );\n            box-shadow: 0 0 0 1px\n                rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,IAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC7F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX;AACA,kBAAkBQ,KAAA;IAAA,IAAC;MAAEC;IAA+B,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;EAAA;AAC3E;AACA;AACA;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA+B,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC/E,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+import { MediaType, openMedia } from 'chayns-api';
+import React, { useCallback, useState } from 'react';
+import { StyledCareOfImage, StyledListImageWrapper, StyledListImageWrapperImage, StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
+const ListItemImage = _ref => {
+  let {
+    careOfLocationId,
+    imageBackground,
+    images,
+    shouldHideBackground,
+    shouldShowRoundImage,
+    shouldOpenImageOnClick
+  } = _ref;
+  const [hasLoadedImage, setHasLoadedImage] = useState(false);
+  const handleImageLoaded = useCallback(() => {
+    setHasLoadedImage(true);
+  }, []);
+  const handleImageClick = useCallback(event => {
+    if (!shouldOpenImageOnClick) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const items = images.map(image => ({
+      url: image,
+      mediaType: MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void openMedia({
+      items,
+      startIndex: 0
+    });
+  }, [images, shouldOpenImageOnClick]);
+  if (images && images[0] && images[1]) {
+    return /*#__PURE__*/React.createElement(StyledListImageWrapper, {
+      onClick: handleImageClick
+    }, /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
+      src: images[0],
+      $shouldHideBackground: shouldHideBackground,
+      $background: imageBackground,
+      $isSmall: !!careOfLocationId
+    }), /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
+      src: images[1],
+      $isSecondImage: true,
+      $shouldHideBackground: shouldHideBackground,
+      $background: imageBackground,
+      $isSmall: !!careOfLocationId
+    }), careOfLocationId && /*#__PURE__*/React.createElement(StyledCareOfImage, {
+      $shouldHideBackground: shouldHideBackground,
+      $background: imageBackground,
+      src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
+      alt: "care-of"
+    }));
+  }
+  if (images && images[0]) {
+    return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
+      onClick: handleImageClick
+    }, /*#__PURE__*/React.createElement(StyledListItemHeadImage, {
+      $isHidden: !hasLoadedImage,
+      onLoad: handleImageLoaded,
+      $shouldShowRoundImage: shouldShowRoundImage,
+      $background: imageBackground,
+      $shouldHideBackground: shouldHideBackground,
+      $isSmall: !!careOfLocationId,
+      src: images[0]
+    }), careOfLocationId && /*#__PURE__*/React.createElement(StyledCareOfImage, {
+      $shouldHideBackground: shouldHideBackground,
+      $background: imageBackground,
+      src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
+      alt: "care-of"
+    }));
+  }
+  return null;
+};
+ListItemImage.displayName = 'ListItemImage';
+export default ListItemImage;
+//# sourceMappingURL=ListItemImage.js.map