@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.1200

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

@@ -0,0 +1,33 @@
+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: ${({
+  $shouldShowRoundIcon
+}) => $shouldShowRoundIcon ? '50%' : undefined};
+
+    ${({
+  $shouldHideBackground
+}) => !$shouldHideBackground && css`
+            background-color: rgba(
+                ${({
+  theme
+}) => theme['text-rgb']},
+                0.1
+            );
+            box-shadow: 0 0 0 1px
+                rgba(${({
+  theme
+}) => 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","$shouldShowRoundIcon","undefined","$shouldHideBackground","theme"],"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,qBAAqB,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,KAAK,GAAGC,SAAU;AAC7F;AACA,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxB,CAACA,qBAAqB,IACtBL,GAAG;AACX;AACA,kBAAkB,CAAC;EAAEM;AAA+B,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC3E;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC/E,SAAS;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,46 @@
+import { MediaType, openMedia } from 'chayns-api';
+import React, { useCallback } from 'react';
+import GroupedImage from '../../../../grouped-image/GroupedImage';
+const ListItemImage = ({
+  careOfLocationId,
+  cornerImage,
+  imageBackground,
+  images,
+  shouldHideBackground,
+  shouldShowRoundImage,
+  shouldOpenImageOnClick
+}) => {
+  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]) {
+    const careOfImage = careOfLocationId ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128` : undefined;
+    return /*#__PURE__*/React.createElement(GroupedImage, {
+      cornerImage: cornerImage ?? careOfImage,
+      imageBackground: imageBackground,
+      images: images,
+      onClick: handleImageClick,
+      shouldPreventBackground: shouldHideBackground,
+      shouldShowRoundImage: shouldShowRoundImage
+    });
+  }
+  return null;
+};
+ListItemImage.displayName = 'ListItemImage';
+export default ListItemImage;
+//# sourceMappingURL=ListItemImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","onClick","shouldPreventBackground","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 } from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    cornerImage,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\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]) {\n        const careOfImage = careOfLocationId\n            ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n            : undefined;\n\n        return (\n            <GroupedImage\n                cornerImage={cornerImage ?? careOfImage}\n                imageBackground={imageBackground}\n                images={images}\n                onClick={handleImageClick}\n                shouldPreventBackground={shouldHideBackground}\n                shouldShowRoundImage={shouldShowRoundImage}\n            />\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,QAAQ,OAAO;AAC5E,OAAOC,YAAY,MAAM,wCAAwC;AAYjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGV,WAAW,CAC/BW,KAAK,IAAK;IACP,IAAI,CAACF,sBAAsB,EAAE;MACzB;IACJ;IAEAE,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGR,MAAM,CAACS,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAErB,SAAS,CAACsB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKrB,SAAS,CAAC;MAAEgB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAACd,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMe,WAAW,GAAGlB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDmB,SAAS;IAEf,oBACIvB,KAAA,CAAAwB,aAAA,CAACtB,YAAY;MACTG,WAAW,EAAEA,WAAW,IAAIiB,WAAY;MACxChB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfkB,OAAO,EAAEd,gBAAiB;MAC1Be,uBAAuB,EAAElB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAACwB,WAAW,GAAG,eAAe;AAE3C,eAAexB,aAAa","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.js

@@ -0,0 +1,57 @@
+import React, { isValidElement, useMemo } from 'react';
+import { StyledListItemRightElements, StyledListItemRightElementsLeft, StyledListItemRightElementsLeftBottom, StyledListItemRightElementsLeftPseudo, StyledListItemRightElementsLeftTop, StyledListItemRightElementsRight } from './ListItemRightElements.styles';
+const ListItemRightElements = ({
+  rightElements,
+  shouldPreventRightElementClick
+}) => {
+  const handlePreventClick = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const topElement = useMemo(() => {
+    if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {
+      return rightElements.top;
+    }
+    return undefined;
+  }, [rightElements]);
+  const bottomElement = useMemo(() => {
+    if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {
+      return rightElements.bottom;
+    }
+    return undefined;
+  }, [rightElements]);
+  const centerElement = useMemo(() => {
+    if (typeof rightElements === 'string' || /*#__PURE__*/isValidElement(rightElements)) {
+      return rightElements;
+    }
+    if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {
+      return rightElements.center;
+    }
+    return undefined;
+  }, [rightElements]);
+  const {
+    topAlignment,
+    bottomAlignment
+  } = useMemo(() => {
+    if (typeof rightElements === 'object' && (rightElements && 'topAlignment' in rightElements || rightElements && 'bottomAlignment' in rightElements)) {
+      return {
+        topAlignment: rightElements.topAlignment,
+        bottomAlignment: rightElements.bottomAlignment
+      };
+    }
+    return {
+      topAlignment: undefined,
+      bottomAlignment: undefined
+    };
+  }, [rightElements]);
+  return /*#__PURE__*/React.createElement(StyledListItemRightElements, {
+    onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
+  }, (topElement || bottomElement) && /*#__PURE__*/React.createElement(StyledListItemRightElementsLeft, null, topElement ? /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftTop, {
+    $alignment: topAlignment
+  }, topElement) : /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftPseudo, null, "."), bottomElement && /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftBottom, {
+    $alignment: bottomAlignment
+  }, bottomElement)), centerElement && /*#__PURE__*/React.createElement(StyledListItemRightElementsRight, null, centerElement));
+};
+ListItemRightElements.displayName = 'ListItemRightElements';
+export default ListItemRightElements;
+//# sourceMappingURL=ListItemRightElements.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRightElements.js","names":["React","isValidElement","useMemo","StyledListItemRightElements","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftBottom","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","StyledListItemRightElementsRight","ListItemRightElements","rightElements","shouldPreventRightElementClick","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","undefined","bottomElement","bottom","centerElement","center","topAlignment","bottomAlignment","createElement","onClick","$alignment","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemRightElements,\n    StyledListItemRightElementsLeft,\n    StyledListItemRightElementsLeftBottom,\n    StyledListItemRightElementsLeftPseudo,\n    StyledListItemRightElementsLeftTop,\n    StyledListItemRightElementsRight,\n} from './ListItemRightElements.styles';\n\ntype ListItemRightElementsProps = {\n    rightElements?: IListItemRightElements;\n    shouldPreventRightElementClick?: boolean;\n};\n\nconst ListItemRightElements: FC<ListItemRightElementsProps> = ({\n    rightElements,\n    shouldPreventRightElementClick,\n}) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const { topAlignment, bottomAlignment } = useMemo(() => {\n        if (\n            typeof rightElements === 'object' &&\n            ((rightElements && 'topAlignment' in rightElements) ||\n                (rightElements && 'bottomAlignment' in rightElements))\n        ) {\n            return {\n                topAlignment: rightElements.topAlignment,\n                bottomAlignment: rightElements.bottomAlignment,\n            };\n        }\n\n        return { topAlignment: undefined, bottomAlignment: undefined };\n    }, [rightElements]);\n\n    return (\n        <StyledListItemRightElements\n            onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n        >\n            {(topElement || bottomElement) && (\n                <StyledListItemRightElementsLeft>\n                    {topElement ? (\n                        <StyledListItemRightElementsLeftTop $alignment={topAlignment}>\n                            {topElement}\n                        </StyledListItemRightElementsLeftTop>\n                    ) : (\n                        <StyledListItemRightElementsLeftPseudo>\n                            .\n                        </StyledListItemRightElementsLeftPseudo>\n                    )}\n                    {bottomElement && (\n                        <StyledListItemRightElementsLeftBottom $alignment={bottomAlignment}>\n                            {bottomElement}\n                        </StyledListItemRightElementsLeftBottom>\n                    )}\n                </StyledListItemRightElementsLeft>\n            )}\n            {centerElement && (\n                <StyledListItemRightElementsRight>{centerElement}</StyledListItemRightElementsRight>\n            )}\n        </StyledListItemRightElements>\n    );\n};\n\nListItemRightElements.displayName = 'ListItemRightElements';\n\nexport default ListItemRightElements;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SACIC,2BAA2B,EAC3BC,+BAA+B,EAC/BC,qCAAqC,EACrCC,qCAAqC,EACrCC,kCAAkC,EAClCC,gCAAgC,QAC7B,gCAAgC;AAOvC,MAAMC,qBAAqD,GAAGA,CAAC;EAC3DC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,UAAU,GAAGd,OAAO,CAAC,MAAM;IAC7B,IAAI,OAAOQ,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,KAAK,IAAIA,aAAa,EAAE;MAC9E,OAAQA,aAAa,CAAsCO,GAAG;IAClE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;EAEnB,MAAMS,aAAa,GAAGjB,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOQ,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCU,MAAM;IACrE;IAEA,OAAOF,SAAS;EACpB,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;EAEnB,MAAMW,aAAa,GAAGnB,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOQ,aAAa,KAAK,QAAQ,iBAAIT,cAAc,CAACS,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCY,MAAM;IACrE;IAEA,OAAOJ,SAAS;EACpB,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;EAEnB,MAAM;IAAEa,YAAY;IAAEC;EAAgB,CAAC,GAAGtB,OAAO,CAAC,MAAM;IACpD,IACI,OAAOQ,aAAa,KAAK,QAAQ,KAC/BA,aAAa,IAAI,cAAc,IAAIA,aAAa,IAC7CA,aAAa,IAAI,iBAAiB,IAAIA,aAAc,CAAC,EAC5D;MACE,OAAO;QACHa,YAAY,EAAEb,aAAa,CAACa,YAAY;QACxCC,eAAe,EAAEd,aAAa,CAACc;MACnC,CAAC;IACL;IAEA,OAAO;MAAED,YAAY,EAAEL,SAAS;MAAEM,eAAe,EAAEN;IAAU,CAAC;EAClE,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;EAEnB,oBACIV,KAAA,CAAAyB,aAAA,CAACtB,2BAA2B;IACxBuB,OAAO,EAAEf,8BAA8B,GAAGC,kBAAkB,GAAGM;EAAU,GAExE,CAACF,UAAU,IAAIG,aAAa,kBACzBnB,KAAA,CAAAyB,aAAA,CAACrB,+BAA+B,QAC3BY,UAAU,gBACPhB,KAAA,CAAAyB,aAAA,CAAClB,kCAAkC;IAACoB,UAAU,EAAEJ;EAAa,GACxDP,UAC+B,CAAC,gBAErChB,KAAA,CAAAyB,aAAA,CAACnB,qCAAqC,QAAC,GAEA,CAC1C,EACAa,aAAa,iBACVnB,KAAA,CAAAyB,aAAA,CAACpB,qCAAqC;IAACsB,UAAU,EAAEH;EAAgB,GAC9DL,aACkC,CAEd,CACpC,EACAE,aAAa,iBACVrB,KAAA,CAAAyB,aAAA,CAACjB,gCAAgC,QAAEa,aAAgD,CAE9D,CAAC;AAEtC,CAAC;AAEDZ,qBAAqB,CAACmB,WAAW,GAAG,uBAAuB;AAE3D,eAAenB,qBAAqB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+export const StyledListItemRightElements = styled.div`
+    display: flex;
+    align-items: start;
+    gap: 6px;
+    margin-left: 8px;
+    flex: 0 0 auto;
+`;
+export const StyledListItemRightElementsLeft = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+export const StyledListItemRightElementsLeftPseudo = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    color: transparent;
+    height: 50%;
+    line-height: normal;
+    user-select: none;
+`;
+export const StyledListItemRightElementsLeftTop = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    height: 50%;
+    justify-content: ${({
+  $alignment
+}) => $alignment ?? 'end'};
+    align-items: center;
+    line-height: normal;
+`;
+export const StyledListItemRightElementsLeftBottom = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    height: 50%;
+    justify-content: ${({
+  $alignment
+}) => $alignment ?? 'end'};
+    align-items: center;
+    line-height: normal;
+`;
+export const StyledListItemRightElementsRight = styled.div`
+    margin: auto 0;
+    display: flex;
+    flex: 0 0 auto;
+    line-height: normal;
+`;
+//# sourceMappingURL=ListItemRightElements.styles.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRightElements.styles.js","names":["styled","StyledListItemRightElements","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","$alignment","StyledListItemRightElementsLeftBottom","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n    display: flex;\n    align-items: start;\n    gap: 6px;\n    margin-left: 8px;\n    flex: 0 0 auto;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    color: transparent;\n    height: 50%;\n    line-height: normal;\n    user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n    $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    height: 50%;\n    justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n    align-items: center;\n    line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n    $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    height: 50%;\n    justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n    align-items: center;\n    line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n    margin: auto 0;\n    display: flex;\n    flex: 0 0 auto;\n    line-height: normal;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,2BAA2B,GAAGD,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CAACE,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,qCAAqC,GAAGJ,MAAM,CAACE,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,kCAAkC,GAAGL,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qCAAqC,GAAGP,MAAM,CAACE,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEI;AAAW,CAAC,KAAKA,UAAU,IAAI,KAAK;AAC9D;AACA;AACA,CAAC;AAED,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.js

@@ -0,0 +1,117 @@
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import MentionFinderItem from './mention-finder-item/MentionFinderItem';
+import { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
+const MentionFinder = ({
+  inputValue,
+  members,
+  onSelect,
+  popupAlignment
+}) => {
+  const [activeMember, setActiveMember] = useState(members[0]);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const ref = useRef(null);
+  const [fullMatch, searchString] = useMemo(() => {
+    // eslint-disable-next-line no-irregular-whitespace
+    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
+    return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];
+  }, [inputValue]);
+  const filteredMembers = useMemo(() => searchString !== '' ? members.filter(({
+    id,
+    info,
+    name
+  }) => id.toLowerCase().includes(searchString) || info?.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      const children = ref.current?.children;
+      if (children && children.length > 0) {
+        const newIndex = focusedIndex !== null ? (focusedIndex + (event.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+        if (focusedIndex !== null) {
+          const prevElement = children[focusedIndex];
+          prevElement.tabIndex = -1;
+        }
+        setFocusedIndex(newIndex);
+        const member = filteredMembers[newIndex];
+        setActiveMember(member);
+        const newElement = children[newIndex];
+        newElement.tabIndex = 0;
+        newElement.focus();
+      }
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+      }
+    }
+  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
+  const handleMemberClick = useCallback(member => {
+    if (fullMatch) {
+      onSelect({
+        fullMatch,
+        member
+      });
+    }
+  }, [fullMatch, onSelect]);
+  const handleMemberHover = useCallback(member => {
+    setActiveMember(member);
+  }, []);
+  useEffect(() => {
+    if (filteredMembers.length > 0) {
+      const isActiveMemberShown = filteredMembers.some(({
+        id
+      }) => id === activeMember?.id);
+      if (!isActiveMemberShown) {
+        setActiveMember(filteredMembers[0]);
+      }
+    }
+  }, [activeMember?.id, filteredMembers]);
+  const items = useMemo(() => filteredMembers.map(member => /*#__PURE__*/React.createElement(MentionFinderItem, {
+    isActive: member.id === activeMember?.id,
+    key: member.id,
+    member: member,
+    onClick: handleMemberClick,
+    onHover: handleMemberHover
+  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
+  const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);
+  useEffect(() => {
+    if (shouldShowPopup) {
+      window.addEventListener('keydown', handleKeyDown, true);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [handleKeyDown, shouldShowPopup]);
+  return /*#__PURE__*/React.createElement(StyledMentionFinder, {
+    className: "beta-chayns-mention-finder"
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/React.createElement(StyledMotionMentionFinderPopup, {
+    ref: ref,
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    className: "prevent-lose-focus",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    $popupAlignment: popupAlignment,
+    transition: {
+      duration: 0.15
+    },
+    tabIndex: 0
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+export default MentionFinder;
+//# sourceMappingURL=MentionFinder.js.map

package/lib/esm/components/mention-finder/MentionFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","focusedIndex","setFocusedIndex","ref","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","children","current","length","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info?: string;\n    imageUrl: string;\n    name: string;\n    shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info?.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                const children = ref.current?.children;\n\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex +\n                                  (event.key === 'ArrowUp' ? -1 : 1) +\n                                  children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const member = filteredMembers[newIndex];\n\n                    setActiveMember(member);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n            }\n        },\n        [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        ref={ref}\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        $popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                        tabIndex={0}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.styles.js

@@ -0,0 +1,74 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
+export const StyledMentionFinder = styled.div`
+    position: relative;
+`;
+export const StyledMotionMentionFinderPopup = styled(motion.div)`
+    background-color: ${({
+  theme
+}) => theme['000']};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
+    left: 0;
+    max-height: 275px;
+    overflow-y: scroll;
+    position: absolute;
+    width: 100%;
+
+    ${({
+  $popupAlignment
+}) => {
+  switch ($popupAlignment) {
+    case MentionFinderPopupAlignment.Bottom:
+      return css`
+                    top: 0;
+                `;
+    case MentionFinderPopupAlignment.Top:
+      return css`
+                    bottom: 0;
+                `;
+    default:
+      return undefined;
+  }
+}}
+
+    // Styles for custom scrollbar
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-button {
+        background-color: transparent;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(
+            ${({
+  theme
+}) => theme['text-rgb']},
+            0.15
+        );
+        border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+        scrollbar-color: rgba(
+                ${({
+  theme
+}) => theme['text-rgb']},
+                0.15
+            )
+            transparent;
+        scrollbar-width: thin;
+    }
+`;
+//# sourceMappingURL=MentionFinder.styles.js.map

package/lib/esm/components/mention-finder/MentionFinder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMotionMentionFinderPopup","theme","$popupAlignment","Bottom","Top","undefined"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n    left: 0;\n    max-height: 275px;\n    overflow-y: scroll;\n    position: absolute;\n    width: 100%;\n\n    ${({ $popupAlignment }) => {\n        switch ($popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    top: 0;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    bottom: 0;\n                `;\n            default:\n                return undefined;\n        }\n    }}\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAID,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEE;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKL,2BAA2B,CAACM,MAAM;MACnC,OAAOP,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACO,GAAG;MAChC,OAAOR,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOS,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEJ;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { StyledMentionFinderItem, StyledMentionFinderItemContent, StyledMentionFinderItemContentInfo, StyledMentionFinderItemContentName, StyledMentionFinderItemImage } from './MentionFinderItem.styles';
+const MentionFinderItem = ({
+  isActive,
+  member,
+  onClick,
+  onHover
+}) => {
+  const handleItemClick = useCallback(() => onClick(member), [member, onClick]);
+  const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);
+  return /*#__PURE__*/React.createElement(StyledMentionFinderItem, {
+    className: "prevent-lose-focus",
+    onClick: handleItemClick,
+    onMouseEnter: handleItemMouseEnter,
+    $isActive: isActive
+  }, /*#__PURE__*/React.createElement(StyledMentionFinderItemImage, {
+    src: member.imageUrl,
+    $shouldShowRoundImage: member.shouldShowRoundImage
+  }), /*#__PURE__*/React.createElement(StyledMentionFinderItemContent, null, /*#__PURE__*/React.createElement(StyledMentionFinderItemContentName, null, member.name), member.info && /*#__PURE__*/React.createElement(StyledMentionFinderItemContentInfo, null, member.info)));
+};
+MentionFinderItem.displayName = 'MentionFinderItem';
+export default MentionFinderItem;
+//# sourceMappingURL=MentionFinderItem.js.map

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","onMouseEnter","$isActive","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","name","info","displayName"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n    StyledMentionFinderItem,\n    StyledMentionFinderItemContent,\n    StyledMentionFinderItemContentInfo,\n    StyledMentionFinderItemContentName,\n    StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n    isActive: boolean;\n    member: MentionMember;\n    onClick: (member: MentionMember) => void;\n    onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n    const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n    const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n    return (\n        <StyledMentionFinderItem\n            className=\"prevent-lose-focus\"\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n            $isActive={isActive}\n        >\n            <StyledMentionFinderItemImage\n                src={member.imageUrl}\n                $shouldShowRoundImage={member.shouldShowRoundImage}\n            />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                {member.info && (\n                    <StyledMentionFinderItemContentInfo>\n                        {member.info}\n                    </StyledMentionFinderItemContentInfo>\n                )}\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAE9C,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,kCAAkC,EAClCC,kCAAkC,EAClCC,4BAA4B,QACzB,4BAA4B;AASnC,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC;AAAQ,CAAC,KAAK;EAC9F,MAAMC,eAAe,GAAGX,WAAW,CAAC,MAAMS,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMG,oBAAoB,GAAGZ,WAAW,CAAC,MAAMU,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACIX,KAAA,CAAAc,aAAA,CAACZ,uBAAuB;IACpBa,SAAS,EAAC,oBAAoB;IAC9BL,OAAO,EAAEE,eAAgB;IACzBI,YAAY,EAAEH,oBAAqB;IACnCI,SAAS,EAAET;EAAS,gBAEpBR,KAAA,CAAAc,aAAA,CAACR,4BAA4B;IACzBY,GAAG,EAAET,MAAM,CAACU,QAAS;IACrBC,qBAAqB,EAAEX,MAAM,CAACY;EAAqB,CACtD,CAAC,eACFrB,KAAA,CAAAc,aAAA,CAACX,8BAA8B,qBAC3BH,KAAA,CAAAc,aAAA,CAACT,kCAAkC,QAC9BI,MAAM,CAACa,IACwB,CAAC,EACpCb,MAAM,CAACc,IAAI,iBACRvB,KAAA,CAAAc,aAAA,CAACV,kCAAkC,QAC9BK,MAAM,CAACc,IACwB,CAEZ,CACX,CAAC;AAElC,CAAC;AAEDhB,iBAAiB,CAACiB,WAAW,GAAG,mBAAmB;AAEnD,eAAejB,iBAAiB","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+export const StyledMentionFinderItem = styled.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: 10px 8px;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid
+            rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.15);
+    }
+
+    ${({
+  $isActive,
+  theme
+}) => $isActive && css`
+            background-color: ${theme['102']} !important;
+        `}
+`;
+export const StyledMentionFinderItemImage = styled.img`
+    background-color: rgba(
+        ${({
+  theme
+}) => theme['text-rgb']},
+        0.1
+    );
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : 'initial'};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+export const StyledMentionFinderItemContent = styled.div`
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+    margin-left: 10px;
+    min-width: 0;
+`;
+export const StyledMentionFinderItemContentName = styled.div``;
+export const StyledMentionFinderItemContentInfo = styled.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+//# sourceMappingURL=MentionFinderItem.styles.js.map

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","theme","$isActive","StyledMentionFinderItemImage","img","$shouldShowRoundImage","StyledMentionFinderItemContent","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 10px 8px;\n\n    &:not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    ${({ $isActive, theme }) =>\n        $isActive &&\n        css`\n            background-color: ${theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACTJ,GAAG;AACX,gCAAgCG,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMD,OAAO,MAAME,4BAA4B,GAAGN,MAAM,CAACO,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEH;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEI;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACM,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGX,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMS,kCAAkC,GAAGZ,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}