@chayns-components/core 5.0.0-beta.25 → 5.0.0-beta.252

package/lib/components/filter-button/filter-button-item/FilterButtonItem.styles.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabel = exports.StyledFilterButtonItemBorder = exports.StyledFilterButtonItem = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _types = require("../types");
+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 StyledFilterButtonItem = _styledComponents.default.div`
+    position: relative;
+    font-size: ${_ref => {
+  let {
+    size
+  } = _ref;
+  return size === _types.FilterButtonSize.Normal ? 15 : 12;
+}}px;
+    cursor: pointer;
+    user-select: none;
+    padding: 3px 14px;
+
+    &:hover > div:last-child {
+        ${_ref2 => {
+  let {
+    isSelected
+  } = _ref2;
+  return !isSelected && (0, _styledComponents.css)`
+                opacity: 0.2;
+            `;
+}}
+    }
+`;
+exports.StyledFilterButtonItem = StyledFilterButtonItem;
+const StyledFilterButtonItemLabel = _styledComponents.default.div`
+    display: flex;
+    gap: 5px;
+    align-items: center;
+`;
+exports.StyledFilterButtonItemLabel = StyledFilterButtonItemLabel;
+const StyledFilterButtonItemLabelText = _styledComponents.default.p`
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+    margin-top: 2px;
+`;
+exports.StyledFilterButtonItemLabelText = StyledFilterButtonItemLabelText;
+const StyledFilterButtonItemBorder = _styledComponents.default.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.4;
+    z-index: -1;
+    border-radius: ${_ref4 => {
+  let {
+    shape
+  } = _ref4;
+  return shape === _types.FilterButtonItemShape.Round ? 100 : 0;
+}}px;
+    ${_ref5 => {
+  let {
+    color,
+    theme,
+    isSelected
+  } = _ref5;
+  return !isSelected && (0, _styledComponents.css)`
+            border-width: 1px;
+            border-style: solid;
+            border-color: ${color !== null && color !== void 0 ? color : theme.headline};
+        `;
+}};
+`;
+exports.StyledFilterButtonItemBorder = StyledFilterButtonItemBorder;
+const StyledMotionFilterButtonItemBackground = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+    opacity: ${_ref6 => {
+  let {
+    isSelected
+  } = _ref6;
+  return isSelected ? 0.4 : 0;
+}};
+    transition: opacity 0.5s ease;
+    border-radius: ${_ref7 => {
+  let {
+    shape
+  } = _ref7;
+  return shape === _types.FilterButtonItemShape.Round ? 100 : 0;
+}}px;
+    background-color: ${_ref8 => {
+  let {
+    color,
+    theme
+  } = _ref8;
+  return color !== null && color !== void 0 ? color : theme.headline;
+}};
+`;
+exports.StyledMotionFilterButtonItemBackground = StyledMotionFilterButtonItemBackground;
+//# sourceMappingURL=FilterButtonItem.styles.js.map

package/lib/components/filter-button/filter-button-item/FilterButtonItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_types","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledFilterButtonItem","styled","div","_ref","size","FilterButtonSize","Normal","_ref2","isSelected","css","exports","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemBorder","_ref4","shape","FilterButtonItemShape","Round","_ref5","color","headline","StyledMotionFilterButtonItemBackground","motion","_ref6","_ref7","_ref8"],"sources":["../../../../src/components/filter-button/filter-button-item/FilterButtonItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FilterButtonItemShape, FilterButtonSize } from '../types';\n\ntype StyledFilterButtonItemProps = WithTheme<{ size: FilterButtonSize; isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    font-size: ${({ size }) => (size === FilterButtonSize.Normal ? 15 : 12)}px;\n    cursor: pointer;\n    user-select: none;\n    padding: 3px 14px;\n\n    &:hover > div:last-child {\n        ${({ isSelected }) =>\n            !isSelected &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: center;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin-top: 2px;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: -1;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    ${({ color, theme, isSelected }: StyledFilterButtonItemBorderProps) =>\n        !isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: -1;\n    opacity: ${({ isSelected }) => (isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    background-color: ${({ color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        color ?? theme.headline};\n`;\n"],"mappings":"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"}

package/lib/components/filter-button/types.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+export declare enum FilterButtonItemShape {
+    Round = 0,
+    Rectangular = 1
+}
+export declare enum FilterButtonSize {
+    Small = 0,
+    Normal = 1
+}
+export interface IFilterButtonItem {
+    id: string;
+    text: string;
+    color?: CSSProperties['color'];
+    icons?: string[];
+}

package/lib/components/filter-button/types.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterButtonSize = exports.FilterButtonItemShape = void 0;
+let FilterButtonItemShape = /*#__PURE__*/function (FilterButtonItemShape) {
+  FilterButtonItemShape[FilterButtonItemShape["Round"] = 0] = "Round";
+  FilterButtonItemShape[FilterButtonItemShape["Rectangular"] = 1] = "Rectangular";
+  return FilterButtonItemShape;
+}({});
+exports.FilterButtonItemShape = FilterButtonItemShape;
+let FilterButtonSize = /*#__PURE__*/function (FilterButtonSize) {
+  FilterButtonSize[FilterButtonSize["Small"] = 0] = "Small";
+  FilterButtonSize[FilterButtonSize["Normal"] = 1] = "Normal";
+  return FilterButtonSize;
+}({});
+exports.FilterButtonSize = FilterButtonSize;
+//# sourceMappingURL=types.js.map

package/lib/components/filter-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["FilterButtonItemShape","exports","FilterButtonSize"],"sources":["../../../src/components/filter-button/types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum FilterButtonItemShape {\n    Round,\n    Rectangular,\n}\nexport enum FilterButtonSize {\n    Small,\n    Normal,\n}\n\nexport interface IFilterButtonItem {\n    id: string;\n    text: string;\n    color?: CSSProperties['color'];\n    icons?: string[];\n}\n"],"mappings":";;;;;;IAEYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAAAC,OAAA,CAAAD,qBAAA,GAAAA,qBAAA;AAAA,IAIrBE,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA;AAAAD,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}

package/lib/components/grid-image/GridImage.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-declare type GridImageProps = {
+type GridImageProps = {
     /**
      * The images to be displayed in the `GridImage`. Only the first three
      * images are displayed.

package/lib/components/grid-image/GridImage.js

@@ -1,62 +1,26 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _GridImage = require("./GridImage.styles");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var GridImage = function GridImage(_ref) {
-  var images = _ref.images,
-      shouldShowRoundImage = _ref.shouldShowRoundImage,
-      size = _ref.size;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasLoadedLeftImage = _useState2[0],
-      setHasLoadedLeftImage = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasLoadedTopRightImage = _useState4[0],
-      setHasLoadedTopRightImage = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasLoadedBottomRightImage = _useState6[0],
-      setHasLoadedBottomRightImage = _useState6[1];
-
-  var handleLeftImageLoaded = (0, _react.useCallback)(function () {
-    return setHasLoadedLeftImage(true);
-  }, []);
-  var handleTopRightImageLoaded = (0, _react.useCallback)(function () {
-    return setHasLoadedTopRightImage(true);
-  }, []);
-  var handleBottomRightImageLoaded = (0, _react.useCallback)(function () {
-    return setHasLoadedBottomRightImage(true);
-  }, []);
-  var isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+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 GridImage = _ref => {
+  let {
+    images,
+    shouldShowRoundImage,
+    size
+  } = _ref;
+  const [hasLoadedLeftImage, setHasLoadedLeftImage] = (0, _react.useState)(false);
+  const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = (0, _react.useState)(false);
+  const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = (0, _react.useState)(false);
+  const handleLeftImageLoaded = (0, _react.useCallback)(() => setHasLoadedLeftImage(true), []);
+  const handleTopRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedTopRightImage(true), []);
+  const handleBottomRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedBottomRightImage(true), []);
+  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
   return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
     shouldShowRoundImage: shouldShowRoundImage,
     size: size
@@ -76,7 +40,6 @@ var GridImage = function GridImage(_ref) {
     src: images[2]
   }));
 };
-
 GridImage.displayName = 'GridImage';
 var _default = GridImage;
 exports.default = _default;

package/lib/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/grid-image/GridImage.tsx"],"names":["GridImage","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;AAwBA,IAAMA,SAA6B,GAAG,SAAhCA,SAAgC,OAA4C;AAAA,MAAzCC,MAAyC,QAAzCA,MAAyC;AAAA,MAAjCC,oBAAiC,QAAjCA,oBAAiC;AAAA,MAAXC,IAAW,QAAXA,IAAW;;AAC9E,kBAAoD,qBAAS,KAAT,CAApD;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,qBAA3B;;AACA,mBAA4D,qBAAS,KAAT,CAA5D;AAAA;AAAA,MAAOC,sBAAP;AAAA,MAA+BC,yBAA/B;;AACA,mBAAkE,qBAAS,KAAT,CAAlE;AAAA;AAAA,MAAOC,yBAAP;AAAA,MAAkCC,4BAAlC;;AAEA,MAAMC,qBAAqB,GAAG,wBAAY;AAAA,WAAML,qBAAqB,CAAC,IAAD,CAA3B;AAAA,GAAZ,EAA+C,EAA/C,CAA9B;AAEA,MAAMM,yBAAyB,GAAG,wBAAY;AAAA,WAAMJ,yBAAyB,CAAC,IAAD,CAA/B;AAAA,GAAZ,EAAmD,EAAnD,CAAlC;AAEA,MAAMK,4BAA4B,GAAG,wBAAY;AAAA,WAAMH,4BAA4B,CAAC,IAAD,CAAlC;AAAA,GAAZ,EAAsD,EAAtD,CAArC;AAEA,MAAMI,iBAAiB,GACnB,CAACT,kBAAD,IAAuB,CAACE,sBAAxB,IAAkD,CAACE,yBADvD;AAGA,sBACI,6BAAC,0BAAD;AAAiB,IAAA,oBAAoB,EAAEN,oBAAvC;AAA6D,IAAA,IAAI,EAAEC;AAAnE,kBACI,6BAAC,8BAAD;AACI,IAAA,QAAQ,EAAEU,iBADd;AAEI,IAAA,MAAM,EAAEH,qBAFZ;AAGI,IAAA,IAAI,EAAEP,IAHV;AAII,IAAA,GAAG,EAAEF,MAAM,CAAC,CAAD;AAJf,IADJ,eAOI,6BAAC,kCAAD;AACI,IAAA,QAAQ,EAAEY,iBADd;AAEI,IAAA,MAAM,EAAEF,yBAFZ;AAGI,IAAA,IAAI,EAAER,IAHV;AAII,IAAA,GAAG,EAAEF,MAAM,CAAC,CAAD;AAJf,IAPJ,eAaI,6BAAC,qCAAD;AACI,IAAA,QAAQ,EAAEY,iBADd;AAEI,IAAA,MAAM,EAAED,4BAFZ;AAGI,IAAA,GAAG,EAAEX,MAAM,CAAC,CAAD;AAHf,IAbJ,CADJ;AAqBH,CAnCD;;AAqCAD,SAAS,CAACc,WAAV,GAAwB,WAAxB;eAEed,S","sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage shouldShowRoundImage={shouldShowRoundImage} size={size}>\n            <StyledGridLeftImage\n                isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"file":"GridImage.js"}
+{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridImage","_ref","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","StyledGridLeftImage","isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage shouldShowRoundImage={shouldShowRoundImage} size={size}>\n            <StyledGridLeftImage\n                isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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"}

package/lib/components/grid-image/GridImage.styles.d.ts

@@ -4,17 +4,17 @@ export declare const StyledGridImage: import("styled-components").StyledComponen
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
-declare type StyledGridLeftImageProps = {
+type StyledGridLeftImageProps = {
     isHidden: boolean;
     size: number;
 };
 export declare const StyledGridLeftImage: import("styled-components").StyledComponent<"img", any, StyledGridLeftImageProps, never>;
-declare type StyledGridTopRightImageProps = {
+type StyledGridTopRightImageProps = {
     isHidden: boolean;
     size: number;
 };
 export declare const StyledGridTopRightImage: import("styled-components").StyledComponent<"img", any, StyledGridTopRightImageProps, never>;
-declare type StyledGridBottomRightImageProps = {
+type StyledGridBottomRightImageProps = {
     isHidden: boolean;
 };
 export declare const StyledGridBottomRightImage: import("styled-components").StyledComponent<"img", any, StyledGridBottomRightImageProps, never>;

package/lib/components/grid-image/GridImage.styles.js

@@ -4,58 +4,102 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledGridImage = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: rgba(", ", 0.1);\n    border-radius: ", ";\n    box-shadow: 0 0 0 1px rgba(", ", 0.08) inset;\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ", "px;\n"])), function (_ref) {
-  var theme = _ref.theme;
+const StyledGridImage = _styledComponents.default.div`
+    background-color: rgba(${_ref => {
+  let {
+    theme
+  } = _ref;
   return theme['text-rgb'];
-}, function (_ref2) {
-  var shouldShowRoundImage = _ref2.shouldShowRoundImage;
+}}, 0.1);
+    border-radius: ${_ref2 => {
+  let {
+    shouldShowRoundImage
+  } = _ref2;
   return shouldShowRoundImage ? '50%' : undefined;
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}};
+    box-shadow: 0 0 0 1px rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme['009-rgb'];
-}, function (_ref4) {
-  var size = _ref4.size;
+}}, 0.08) inset;
+    height: ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   return size;
-}, function (_ref5) {
-  var size = _ref5.size;
+}}px;
+    overflow: hidden;
+    position: relative;
+    transition: border-radius 0.3s ease;
+    width: ${_ref5 => {
+  let {
+    size
+  } = _ref5;
   return size;
-});
-
+}}px;
+`;
 exports.StyledGridImage = StyledGridImage;
-
-var StyledGridLeftImage = _styledComponents.default.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border-right: ", "px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ", ";\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n"])), function (_ref6) {
-  var size = _ref6.size;
+const StyledGridLeftImage = _styledComponents.default.img`
+    border-right: ${_ref6 => {
+  let {
+    size
+  } = _ref6;
   return size / 40;
-}, function (_ref7) {
-  var isHidden = _ref7.isHidden;
+}}px solid white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${_ref7 => {
+  let {
+    isHidden
+  } = _ref7;
   return isHidden ? 0 : 1;
-});
-
+}};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 60%;
+`;
 exports.StyledGridLeftImage = StyledGridLeftImage;
-
-var StyledGridTopRightImage = _styledComponents.default.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border-bottom: ", "px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ", ";\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n"])), function (_ref8) {
-  var size = _ref8.size;
+const StyledGridTopRightImage = _styledComponents.default.img`
+    border-bottom: ${_ref8 => {
+  let {
+    size
+  } = _ref8;
   return size / 40;
-}, function (_ref9) {
-  var isHidden = _ref9.isHidden;
+}}px solid white;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${_ref9 => {
+  let {
+    isHidden
+  } = _ref9;
   return isHidden ? 0 : 1;
-});
-
+}};
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
 exports.StyledGridTopRightImage = StyledGridTopRightImage;
-
-var StyledGridBottomRightImage = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ", ";\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n"])), function (_ref10) {
-  var isHidden = _ref10.isHidden;
+const StyledGridBottomRightImage = _styledComponents.default.img`
+    bottom: 0;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${_ref10 => {
+  let {
+    isHidden
+  } = _ref10;
   return isHidden ? 0 : 1;
-});
-
+}};
+    position: absolute;
+    right: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
 exports.StyledGridBottomRightImage = StyledGridBottomRightImage;
 //# sourceMappingURL=GridImage.styles.js.map

package/lib/components/grid-image/GridImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"names":["StyledGridImage","styled","div","theme","shouldShowRoundImage","undefined","size","StyledGridLeftImage","img","isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"mappings":";;;;;;;AAAA;;;;;;;;AAQO,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,gUACC;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAqCA,KAAK,CAAC,UAAD,CAA1C;AAAA,CADD,EAEP;AAAA,MAAGC,oBAAH,SAAGA,oBAAH;AAAA,SAA+BA,oBAAoB,GAAG,KAAH,GAAWC,SAA9D;AAAA,CAFO,EAGK;AAAA,MAAGF,KAAH,SAAGA,KAAH;AAAA,SAAqCA,KAAK,CAAC,SAAD,CAA1C;AAAA,CAHL,EAId;AAAA,MAAGG,IAAH,SAAGA,IAAH;AAAA,SAAcA,IAAd;AAAA,CAJc,EAQf;AAAA,MAAGA,IAAH,SAAGA,IAAH;AAAA,SAAcA,IAAd;AAAA,CARe,CAArB;;;;AAgBA,IAAMC,mBAAmB,GAAGN,0BAAOO,GAAV,yRACZ;AAAA,MAAGF,IAAH,SAAGA,IAAH;AAAA,SAAcA,IAAI,GAAG,EAArB;AAAA,CADY,EAKjB;AAAA,MAAGG,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CALiB,CAAzB;;;;AAiBA,IAAMC,uBAAuB,GAAGT,0BAAOO,GAAV,0RACf;AAAA,MAAGF,IAAH,SAAGA,IAAH;AAAA,SAAcA,IAAI,GAAG,EAArB;AAAA,CADe,EAIrB;AAAA,MAAGG,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAJqB,CAA7B;;;;AAgBA,IAAME,0BAA0B,GAAGV,0BAAOO,GAAV,qPAIxB;AAAA,MAAGC,QAAH,UAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAJwB,CAAhC","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n    size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ size }) => size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ size }) => size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ size }) => size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ size }) => size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"file":"GridImage.styles.js"}
+{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGridImage","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","_ref4","size","_ref5","exports","StyledGridLeftImage","img","_ref6","_ref7","isHidden","StyledGridTopRightImage","_ref8","_ref9","StyledGridBottomRightImage","_ref10"],"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n    size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ size }) => size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ size }) => size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ size }) => size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ size }) => size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQhC,MAAMG,eAAe,GAAGC,yBAAM,CAACC,GAA0B;AAChE,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F,iCAAiCC,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,KAAA;EAAA,OAAKC,IAAI;AAAA,CAAC;AACjC;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAK,CAAC,GAAAC,KAAA;EAAA,OAAKD,IAAI;AAAA,CAAC;AAChC,CAAC;AAACE,OAAA,CAAAZ,eAAA,GAAAA,eAAA;AAOK,MAAMa,mBAAmB,GAAGZ,yBAAM,CAACa,GAA8B;AACxE,oBAAoBC,KAAA;EAAA,IAAC;IAAEL;EAAK,CAAC,GAAAK,KAAA;EAAA,OAAKL,IAAI,GAAG,EAAE;AAAA,CAAC;AAC5C;AACA;AACA;AACA,eAAeM,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAOK,MAAMK,uBAAuB,GAAGjB,yBAAM,CAACa,GAAkC;AAChF,qBAAqBK,KAAA;EAAA,IAAC;IAAET;EAAK,CAAC,GAAAS,KAAA;EAAA,OAAKT,IAAI,GAAG,EAAE;AAAA,CAAC;AAC7C;AACA;AACA,eAAeU,KAAA;EAAA,IAAC;IAAEH;EAAS,CAAC,GAAAG,KAAA;EAAA,OAAMH,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAM,uBAAA,GAAAA,uBAAA;AAMK,MAAMG,0BAA0B,GAAGpB,yBAAM,CAACa,GAAqC;AACtF;AACA;AACA;AACA,eAAeQ,MAAA;EAAA,IAAC;IAAEL;EAAS,CAAC,GAAAK,MAAA;EAAA,OAAML,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAS,0BAAA,GAAAA,0BAAA"}

package/lib/components/icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler } from 'react';
-export declare type IconProps = {
+export type IconProps = {
     /**
      * Additional class names for the root element
      */
@@ -21,7 +21,7 @@ export declare type IconProps = {
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Function to be executed when the icon was double clicked
+     * Function to be executed when the icon was double-clicked
      */
     onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
     /**

package/lib/components/icon/Icon.js

@@ -4,59 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Icon = require("./Icon.styles");
-
 var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Icon = function Icon(_ref) {
-  var className = _ref.className,
-      color = _ref.color,
-      icons = _ref.icons,
-      isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick,
-      onDoubleClick = _ref.onDoubleClick,
-      onMouseDown = _ref.onMouseDown,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 15 : _ref$size,
-      shouldStopPropagation = _ref.shouldStopPropagation;
-
-  var handleClick = function handleClick(event) {
+const Icon = _ref => {
+  let {
+    className,
+    color,
+    icons,
+    isDisabled,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    size = 15,
+    shouldStopPropagation
+  } = _ref;
+  const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onClick === 'function') {
       onClick(event);
     }
   };
-
-  var handleDoubleClick = function handleDoubleClick(event) {
+  const handleDoubleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onDoubleClick === 'function') {
       onDoubleClick(event);
     }
   };
-
-  var maxStackSizeFactor = 1;
-  icons.forEach(function (icon) {
-    var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-
+  let maxStackSizeFactor = 1;
+  icons.forEach(icon => {
+    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
     if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
       maxStackSizeFactor = stackSizeFactor;
     }
   });
-  var shouldUseStackedIcon = icons.length > 1;
-  var wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
+  const shouldUseStackedIcon = icons.length > 1;
+  const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
     className: wrapperClasses,
     isDisabled: isDisabled,
@@ -64,9 +53,9 @@ var Icon = function Icon(_ref) {
     onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
     onMouseDown: onMouseDown,
     size: size
-  }, icons.map(function (icon) {
-    var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-    var iconClasses = (0, _clsx.default)(icon, className, {
+  }, icons.map(icon => {
+    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
+    const iconClasses = (0, _clsx.default)(icon, className, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
@@ -79,7 +68,6 @@ var Icon = function Icon(_ref) {
     });
   }));
 };
-
 Icon.displayName = 'Icon';
 var _default = Icon;
 exports.default = _default;

package/lib/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/Icon.tsx"],"names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","undefined","map","iconClasses","includes","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAyCA,IAAMA,IAAmB,GAAG,SAAtBA,IAAsB,OAUtB;AAAA,MATFC,SASE,QATFA,SASE;AAAA,MARFC,KAQE,QARFA,KAQE;AAAA,MAPFC,KAOE,QAPFA,KAOE;AAAA,MANFC,UAME,QANFA,UAME;AAAA,MALFC,OAKE,QALFA,OAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,WAGE,QAHFA,WAGE;AAAA,uBAFFC,IAEE;AAAA,MAFFA,IAEE,0BAFK,EAEL;AAAA,MADFC,qBACE,QADFA,qBACE;;AACF,MAAMC,WAA+C,GAAG,SAAlDA,WAAkD,CAACC,KAAD,EAAW;AAC/D,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACM,KAAD,CAAP;AACH;AACJ,GARD;;AAUA,MAAME,iBAAqD,GAAG,SAAxDA,iBAAwD,CAACF,KAAD,EAAW;AACrE,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAON,aAAP,KAAyB,UAA7B,EAAyC;AACrCA,MAAAA,aAAa,CAACK,KAAD,CAAb;AACH;AACJ,GARD;;AAUA,MAAIG,kBAAkB,GAAG,CAAzB;AAEAX,EAAAA,KAAK,CAACY,OAAN,CAAc,UAACC,IAAD,EAAU;AACpB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;;AAEA,QAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;AACzDA,MAAAA,kBAAkB,GAAGG,eAArB;AACH;AACJ,GAND;AAQA,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAN,GAAe,CAA5C;AAEA,MAAMC,cAAc,GAAG,mBACnB,kBADmB,EAEnBF,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBjB,SAHmB,CAAvB;AAMA,sBACI,6BAAC,uBAAD;AACI,IAAA,SAAS,EAAEmB,cADf;AAEI,IAAA,UAAU,EAAEhB,UAFhB;AAGI,IAAA,OAAO,EAAE,OAAOC,OAAP,KAAmB,UAAnB,GAAgCK,WAAhC,GAA8CW,SAH3D;AAII,IAAA,aAAa,EAAE,OAAOf,aAAP,KAAyB,UAAzB,GAAsCO,iBAAtC,GAA0DQ,SAJ7E;AAKI,IAAA,WAAW,EAAEd,WALjB;AAMI,IAAA,IAAI,EAAEC;AANV,KAQKL,KAAK,CAACmB,GAAN,CAAU,UAACN,IAAD,EAAU;AACjB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;AAEA,QAAMO,WAAW,GAAG,mBAAKP,IAAL,EAAWf,SAAX,EAAsB;AACtC,qBAAeiB,oBAAoB,IAAID,eAAe,KAAKI;AADrB,KAAtB,CAApB;AAIA,wBACI,6BAAC,gBAAD;AACI,MAAA,SAAS,EAAEE,WADf;AAEI,MAAA,KAAK,EAAEP,IAAI,CAACQ,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCtB,KAFnD;AAGI,MAAA,QAAQ,EAAG,CAACe,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDN,IAH9D;AAII,MAAA,SAAS,EAAEU,oBAJf;AAKI,MAAA,GAAG,EAAEF,IALT;AAMI,MAAA,IAAI,EAAER;AANV,MADJ;AAUH,GAjBA,CARL,CADJ;AA6BH,CA9ED;;AAgFAR,IAAI,CAACyB,WAAL,GAAmB,MAAnB;eAEezB,I","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"file":"Icon.js"}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_utils","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double-clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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"}