@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -1,14 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledListItemHead = _styledComponents.default.div`
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledListItemHead = styled.div`
     align-items: center;
     color: ${_ref => {
   let {
@@ -22,15 +14,14 @@ const StyledListItemHead = _styledComponents.default.div`
 
     ${_ref2 => {
   let {
-    isClickable
+    $isClickable
   } = _ref2;
-  return isClickable && (0, _styledComponents.css)`
+  return $isClickable && css`
             cursor: pointer;
         `;
 }}
 `;
-exports.StyledListItemHead = StyledListItemHead;
-const StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)`
+export const StyledMotionListItemHeadIndicator = styled(motion.div)`
     align-items: center;
     display: flex;
     flex: 0 0 auto;
@@ -38,73 +29,63 @@ const StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framer
     justify-content: center;
     width: 26px;
 `;
-exports.StyledMotionListItemHeadIndicator = StyledMotionListItemHeadIndicator;
-const StyledListItemHeadContent = _styledComponents.default.div`
+export const StyledListItemHeadContent = styled.div`
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     font-weight: ${_ref3 => {
   let {
-    isOpen
+    $isOpen
   } = _ref3;
-  return isOpen ? 'bold' : 'normal';
+  return $isOpen ? 'bold' : 'normal';
 }};
     justify-content: center;
     line-height: normal;
     margin-left: ${_ref4 => {
   let {
-    isIconOrImageGiven
+    $isIconOrImageGiven
   } = _ref4;
-  return isIconOrImageGiven ? '10px' : undefined;
+  return $isIconOrImageGiven ? '10px' : undefined;
 }};
     min-width: 0;
 `;
-exports.StyledListItemHeadContent = StyledListItemHeadContent;
-const StyledListItemHeadTitle = _styledComponents.default.div`
+export const StyledListItemHeadTitle = styled.div`
     align-items: center;
     display: flex;
     justify-content: space-between;
 `;
-exports.StyledListItemHeadTitle = StyledListItemHeadTitle;
-const StyledListItemHeadTitleText = _styledComponents.default.span`
+export const StyledListItemHeadTitleText = styled.span`
     flex: 1 1 auto;
     min-width: 0;
 `;
-exports.StyledListItemHeadTitleText = StyledListItemHeadTitleText;
-const StyledListItemHeadSubtitle = _styledComponents.default.div`
+export const StyledListItemHeadSubtitle = styled.div`
     align-items: center;
     display: flex;
     justify-content: space-between;
     margin-top: 2px;
     opacity: 0.75;
 `;
-exports.StyledListItemHeadSubtitle = StyledListItemHeadSubtitle;
-const StyledListItemHeadSubtitleText = _styledComponents.default.span`
+export const StyledListItemHeadSubtitleText = styled.span`
     flex: 1 1 auto;
     font-size: 85%;
     min-width: 0;
 `;
-exports.StyledListItemHeadSubtitleText = StyledListItemHeadSubtitleText;
-const StyledListItemHeadTopRightElement = _styledComponents.default.div`
+export const StyledListItemHeadTopRightElement = styled.div`
     flex: 0 0 auto;
     font-size: 85%;
     margin-left: 8px;
     opacity: 0.75;
 `;
-exports.StyledListItemHeadTopRightElement = StyledListItemHeadTopRightElement;
-const StyledListItemHeadBottomRightElement = _styledComponents.default.div`
+export const StyledListItemHeadBottomRightElement = styled.div`
     flex: 0 0 auto;
     margin-left: 8px;
     font-size: 85%;
 `;
-exports.StyledListItemHeadBottomRightElement = StyledListItemHeadBottomRightElement;
-const StyledListItemHeadRightElement = _styledComponents.default.div`
+export const StyledListItemHeadRightElement = styled.div`
     flex: 0 0 auto;
     margin-left: 8px;
 `;
-exports.StyledListItemHeadRightElement = StyledListItemHeadRightElement;
-const StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+export const StyledMotionListItemHeadHoverItem = styled(motion.div)`
     overflow: hidden;
 `;
-exports.StyledMotionListItemHeadHoverItem = StyledMotionListItemHeadHoverItem;
 //# sourceMappingURL=ListItemHead.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.styles.js","names":["StyledListItemHead","styled","div","theme","text","isClickable","css","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadContent","isOpen","isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ isClickable }) =>\n        isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)`\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};\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: center;\n    line-height: normal;\n    margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\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 StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAgD;AAAA;AAOzC,MAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAA6B;AACtE;AACA,aAAa;EAAA,IAAC;IAAEC;EAA+B,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAM;EAAA,IAAC;IAAEC;EAAY,CAAC;EAAA,OACdA,WAAW,IACX,IAAAC,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC;AAEK,MAAMC,iCAAiC,GAAG,IAAAN,yBAAM,EAACO,oBAAM,CAACN,GAAG,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAOK,MAAMO,yBAAyB,GAAGR,yBAAM,CAACC,GAAoC;AACpF;AACA;AACA;AACA,mBAAmB;EAAA,IAAC;IAAEQ;EAAO,CAAC;EAAA,OAAMA,MAAM,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAChE;AACA;AACA,mBAAmB;EAAA,IAAC;IAAEC;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AACzF;AACA,CAAC;AAAC;AAEK,MAAMC,uBAAuB,GAAGZ,yBAAM,CAACC,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMY,2BAA2B,GAAGb,yBAAM,CAACc,IAAK;AACvD;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,0BAA0B,GAAGf,yBAAM,CAACC,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMe,8BAA8B,GAAGhB,yBAAM,CAACc,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMG,iCAAiC,GAAGjB,yBAAM,CAACC,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMiB,oCAAoC,GAAGlB,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMkB,8BAA8B,GAAGnB,yBAAM,CAACC,GAAI;AACzD;AACA;AACA,CAAC;AAAC;AAEK,MAAMmB,iCAAiC,GAAG,IAAApB,yBAAM,EAACO,oBAAM,CAACN,GAAG,CAAE;AACpE;AACA,CAAC;AAAC"}
+{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref3","$isOpen","_ref4","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\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}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ $isClickable }) =>\n        $isClickable &&\n        css`\n            cursor: pointer;\n        `}\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};\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: center;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\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 StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMQ,iCAAiC,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,yBAAyB,GAAGV,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBQ,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGhB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,2BAA2B,GAAGjB,MAAM,CAACkB,IAAK;AACvD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGnB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,8BAA8B,GAAGpB,MAAM,CAACkB,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,iCAAiC,GAAGrB,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,oCAAoC,GAAGtB,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,8BAA8B,GAAGvB,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,iCAAiC,GAAGxB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}

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

@@ -1,23 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Icon = _interopRequireDefault(require("../../../../icon/Icon"));
-var _ListItemIcon = require("./ListItemIcon.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import Icon from '../../../../icon/Icon';
+import { StyledListItemIcon } from './ListItemIcon.styles';
 const ListItemIcon = _ref => {
   let {
     icons
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_ListItemIcon.StyledListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  return /*#__PURE__*/React.createElement(StyledListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
     size: 22
   }));
 };
 ListItemIcon.displayName = 'ListItemIcon';
-var _default = ListItemIcon;
-exports.default = _default;
+export default ListItemIcon;
 //# sourceMappingURL=ListItemIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemIcon.js","names":["ListItemIcon","icons","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};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({ icons }) => {\n    return (\n        <StyledListItemIcon>\n            <Icon icons={icons} size={22} />\n        </StyledListItemIcon>\n    );\n};\n\nListItemIcon.displayName = 'ListItemIcon';\n\nexport default ListItemIcon;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAA2D;AAM3D,MAAMA,YAAyC,GAAG,QAAe;EAAA,IAAd;IAAEC;EAAM,CAAC;EACxD,oBACI,6BAAC,gCAAkB,qBACf,6BAAC,aAAI;IAAC,KAAK,EAAEA,KAAM;IAAC,IAAI,EAAE;EAAG,EAAG,CACf;AAE7B,CAAC;AAEDD,YAAY,CAACE,WAAW,GAAG,cAAc;AAAC,eAE3BF,YAAY;AAAA"}
+{"version":3,"file":"ListItemIcon.js","names":["React","Icon","StyledListItemIcon","ListItemIcon","_ref","icons","createElement","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};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({ icons }) => (\n    <StyledListItemIcon>\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;AAM1D,MAAMC,YAAyC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,oBACxDJ,KAAA,CAAAM,aAAA,CAACJ,kBAAkB,qBACfF,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACI,KAAK,EAAEA,KAAM;IAACE,IAAI,EAAE;EAAG,CAAE,CACf,CAAC;AAAA,CACxB;AAEDJ,YAAY,CAACK,WAAW,GAAG,cAAc;AAEzC,eAAeL,YAAY"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts

@@ -1 +1,2 @@
-export declare const StyledListItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const StyledListItemIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

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

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledListItemIcon = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledListItemIcon = _styledComponents.default.div`
+import styled from 'styled-components';
+export const StyledListItemIcon = styled.div`
     align-items: center;
     background-color: rgba(${_ref => {
   let {
@@ -28,5 +21,4 @@ const StyledListItemIcon = _styledComponents.default.div`
     margin-right: 10px;
     width: 40px;
 `;
-exports.StyledListItemIcon = StyledListItemIcon;
 //# sourceMappingURL=ListItemIcon.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemIcon.styles.js","names":["StyledListItemIcon","styled","div","theme"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAKhC,MAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAI;AAC7C;AACA,6BAA6B;EAAA,IAAC;IAAEC;EAA+B,CAAC;EAAA,OAAKA,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiC;EAAA,IAAC;IAAEA;EAA+B,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"ListItemIcon.styles.js","names":["styled","StyledListItemIcon","div","_ref","theme","_ref2"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAI;AAC7C;AACA,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAA+B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

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

@@ -1,37 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _GridImage = _interopRequireDefault(require("../../../../grid-image/GridImage"));
-var _ListItemImage = require("./ListItemImage.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+import React, { useCallback, useState } from 'react';
+import GridImage from '../../../../grid-image/GridImage';
+import { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
 const ListItemImage = _ref => {
   let {
     images,
     shouldShowRoundImage
   } = _ref;
-  const [hasLoadedImage, setHasLoadedImage] = (0, _react.useState)(false);
-  const handleImageLoaded = (0, _react.useCallback)(() => {
+  const [hasLoadedImage, setHasLoadedImage] = useState(false);
+  const handleImageLoaded = useCallback(() => {
     setHasLoadedImage(true);
   }, []);
   if (images && images[0] && images[1] && images[2]) {
     const gridImages = [images[0], images[1], images[2]];
-    return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
+    return /*#__PURE__*/React.createElement(GridImage, {
       images: gridImages,
       shouldShowRoundImage: shouldShowRoundImage,
       size: 40
     });
   }
   if (images && images[0]) {
-    return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
-      shouldShowRoundImage: shouldShowRoundImage
-    }, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {
-      isHidden: !hasLoadedImage,
+    return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
+      $shouldShowRoundImage: shouldShowRoundImage
+    }, /*#__PURE__*/React.createElement(StyledListItemHeadImage, {
+      $isHidden: !hasLoadedImage,
       onLoad: handleImageLoaded,
       src: images[0]
     }));
@@ -39,6 +30,5 @@ const ListItemImage = _ref => {
   return null;
 };
 ListItemImage.displayName = 'ListItemImage';
-var _default = ListItemImage;
-exports.default = _default;
+export default ListItemImage;
 //# sourceMappingURL=ListItemImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["ListItemImage","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","gridImages","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                <StyledListItemHeadImage\n                    isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAiG;AAAA;AAAA;AAOjG,MAAMA,aAA2C,GAAG,QAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC;EACjF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACxCH,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMO,UAAU,GAAG,CAACP,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACI,6BAAC,kBAAS;MAAC,MAAM,EAAEO,UAAW;MAAC,oBAAoB,EAAEN,oBAAqB;MAAC,IAAI,EAAE;IAAG,EAAG;EAE/F;EAEA,IAAID,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACI,6BAAC,6CAA8B;MAAC,oBAAoB,EAAEC;IAAqB,gBACvE,6BAAC,sCAAuB;MACpB,QAAQ,EAAE,CAACC,cAAe;MAC1B,MAAM,EAAEG,iBAAkB;MAC1B,GAAG,EAAEL,MAAM,CAAC,CAAC;IAAE,EACjB,CAC2B;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDD,aAAa,CAACS,WAAW,GAAG,eAAe;AAAC,eAE7BT,aAAa;AAAA"}
+{"version":3,"file":"ListItemImage.js","names":["React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","handleImageLoaded","gridImages","createElement","size","$shouldShowRoundImage","$isHidden","onLoad","src","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper $shouldShowRoundImage={shouldShowRoundImage}>\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,kCAAkC;AACxD,SAASC,uBAAuB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAOhG,MAAMC,aAA2C,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EACjF,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMU,iBAAiB,GAAGX,WAAW,CAAC,MAAM;IACxCU,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMK,UAAU,GAAG,CAACL,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACIR,KAAA,CAAAc,aAAA,CAACX,SAAS;MAACK,MAAM,EAAEK,UAAW;MAACJ,oBAAoB,EAAEA,oBAAqB;MAACM,IAAI,EAAE;IAAG,CAAE,CAAC;EAE/F;EAEA,IAAIP,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACIR,KAAA,CAAAc,aAAA,CAACT,8BAA8B;MAACW,qBAAqB,EAAEP;IAAqB,gBACxET,KAAA,CAAAc,aAAA,CAACV,uBAAuB;MACpBa,SAAS,EAAE,CAACP,cAAe;MAC3BQ,MAAM,EAAEN,iBAAkB;MAC1BO,GAAG,EAAEX,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDF,aAAa,CAACc,WAAW,GAAG,eAAe;AAE3C,eAAed,aAAa"}

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

@@ -1,10 +1,11 @@
-export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
-    shouldShowRoundImage?: boolean | undefined;
-} & {
-    theme: import("../../../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
+/// <reference types="react" />
+import type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';
+type StyledListItemHeadImageWrapperProps = WithTheme<{
+    $shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledListItemHeadImageWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledListItemHeadImageWrapperProps>>;
 type StyledListItemHeadImageProps = {
-    isHidden: boolean;
+    $isHidden: boolean;
 };
-export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
+export declare const StyledListItemHeadImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListItemHeadImageProps>>;
 export {};

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

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledListItemHeadImageWrapper = _styledComponents.default.div`
+import styled from 'styled-components';
+export const StyledListItemHeadImageWrapper = styled.div`
     background-color: rgba(
         ${_ref => {
   let {
@@ -18,9 +11,9 @@ const StyledListItemHeadImageWrapper = _styledComponents.default.div`
     );
     border-radius: ${_ref2 => {
   let {
-    shouldShowRoundImage
+    $shouldShowRoundImage
   } = _ref2;
-  return shouldShowRoundImage ? '50%' : undefined;
+  return $shouldShowRoundImage ? '50%' : undefined;
 }};
     box-shadow: 0 0 0 1px
         rgba(${_ref3 => {
@@ -35,18 +28,16 @@ const StyledListItemHeadImageWrapper = _styledComponents.default.div`
     transition: border-radius 0.3s ease;
     width: 40px;
 `;
-exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
-const StyledListItemHeadImage = _styledComponents.default.img`
+export const StyledListItemHeadImage = styled.img`
     height: 100%;
     object-fit: cover;
     opacity: ${_ref4 => {
   let {
-    isHidden
+    $isHidden
   } = _ref4;
-  return isHidden ? 0 : 1;
+  return $isHidden ? 0 : 1;
 }};
     transition: opacity 0.4s ease;
     width: 100%;
 `;
-exports.StyledListItemHeadImage = StyledListItemHeadImage;
 //# sourceMappingURL=ListItemImage.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.styles.js","names":["StyledListItemHeadImageWrapper","styled","div","theme","shouldShowRoundImage","undefined","StyledListItemHeadImage","img","isHidden"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => 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 StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAOhC,MAAMA,8BAA8B,GAAGC,yBAAM,CAACC,GAAyC;AAC9F;AACA,UAAU;EAAA,IAAC;IAAEC;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA,qBAAqB;EAAA,IAAC;IAAEC;EAAqB,CAAC;EAAA,OAAMA,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F;AACA,eAAe;EAAA,IAAC;IAAEF;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMG,uBAAuB,GAAGL,yBAAM,CAACM,GAAkC;AAChF;AACA;AACA,eAAe;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"ListItemImage.styles.js","names":["styled","StyledListItemHeadImageWrapper","div","_ref","theme","_ref2","$shouldShowRoundImage","undefined","_ref3","StyledListItemHeadImage","img","_ref4","$isHidden"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => 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 StyledListItemHeadImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAOtC,OAAO,MAAMC,8BAA8B,GAAGD,MAAM,CAACE,GAAyC;AAC9F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAChG;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAA2C,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,uBAAuB,GAAGT,MAAM,CAACU,GAAkC;AAChF;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACtD;AACA;AACA,CAAC"}

package/lib/components/mention-finder/MentionFinder.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
+export type MentionMember = {
+    id: string;
+    info: string;
+    imageUrl: string;
+    name: string;
+};
+export type MentionFinderProps = {
+    /**
+     * The text from the input field
+     */
+    inputValue: string;
+    /**
+     * Members that can be selected
+     */
+    members: MentionMember[];
+    /**
+     * Function to be executed when a member is selected
+     */
+    onSelect: ({ fullMatch, member }: {
+        fullMatch: string;
+        member: MentionMember;
+    }) => void;
+    /**
+     * Alignment of the popup
+     */
+    popupAlignment: MentionFinderPopupAlignment;
+};
+declare const MentionFinder: FC<MentionFinderProps>;
+export default MentionFinder;

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

@@ -0,0 +1,130 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import MentionFinderItem from './mention-finder-item/MentionFinderItem';
+import { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
+const MentionFinder = _ref => {
+  let {
+    inputValue,
+    members,
+    onSelect,
+    popupAlignment
+  } = _ref;
+  const [activeMember, setActiveMember] = useState(members[0]);
+  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(_ref2 => {
+    let {
+      id,
+      info,
+      name
+    } = _ref2;
+    return id.toLowerCase().includes(searchString) || info.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString);
+  }) : members, [members, searchString]);
+  const handleKeyDown = useCallback(event => {
+    let shouldPreventDefault = false;
+    if (event.key === 'ArrowUp') {
+      const currentIndex = filteredMembers.findIndex(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === activeMember?.id;
+      });
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const member = filteredMembers[prevIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'ArrowDown') {
+      const currentIndex = filteredMembers.findIndex(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id === activeMember?.id;
+      });
+      const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
+      const member = filteredMembers[nextIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'Enter') {
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+        shouldPreventDefault = true;
+      }
+    }
+    if (shouldPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [activeMember, filteredMembers, 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(_ref5 => {
+        let {
+          id
+        } = _ref5;
+        return 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, {
+    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
+    }
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+export default MentionFinder;
+//# sourceMappingURL=MentionFinder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","shouldPreventDefault","key","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","preventDefault","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref5","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 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, 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};\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\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            let shouldPreventDefault = false;\n\n            if (event.key === 'ArrowUp') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'ArrowDown') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'Enter') {\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n\n                    shouldPreventDefault = true;\n                }\n            }\n\n            if (shouldPreventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        },\n        [activeMember, filteredMembers, 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                        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                    >\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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"}