@chayns-components/core 5.0.0-beta.37 → 5.0.0-beta.38

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -4,69 +4,114 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
-
 var _framerMotion = require("framer-motion");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _alignment = require("../constants/alignment");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ", ";\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ", "\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n"])), _ref => {
+const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme['001'];
-}, _ref2 => {
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    color: ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.text;
-}, _ref3 => {
+}};
+    position: absolute;
+    z-index: 0;
+
+    ::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-bottom-right-radius: 2px;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref3 => {
   let {
     position
   } = _ref3;
-
   switch (position) {
     case _alignment.ContextMenuAlignment.TopLeft:
-      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        bottom: -8px;
+                        right: 13px;
+                        transform: rotate(45deg);
+                    `;
     case _alignment.ContextMenuAlignment.BottomLeft:
-      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        top: -8px;
+                        right: 13px;
+                        transform: rotate(225deg);
+                    `;
     case _alignment.ContextMenuAlignment.TopRight:
-      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        transform: rotate(45deg);
+                        bottom: -8px;
+                        left: 13px;
+                    `;
     case _alignment.ContextMenuAlignment.BottomRight:
-      return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        transform: rotate(225deg);
+                        top: -8px;
+                        left: 13px;
+                    `;
     default:
       return undefined;
   }
-});
+}}
+    }
+
+    ::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
 exports.StyledMotionContextMenuContent = StyledMotionContextMenuContent;
-
-const StyledContextMenuContentItem = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ", ";\n    }\n"])), _ref4 => {
+const StyledContextMenuContentItem = _styledComponents.default.div`
+    cursor: pointer;
+    display: flex;
+    padding: 5px 8px 5px 5px;
+    transition: background-color 0.3s ease;
+
+    :hover {
+        background-color: ${_ref4 => {
   let {
     theme
   } = _ref4;
   return theme['secondary-103'];
-});
-
+}};
+    }
+`;
 exports.StyledContextMenuContentItem = StyledContextMenuContentItem;
-
-const StyledContextMenuContentItemIconWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n"])));
-
+const StyledContextMenuContentItemIconWrapper = _styledComponents.default.div`
+    flex: 0 0 auto;
+    margin: 0 8px 0 3px;
+    width: 20px;
+`;
 exports.StyledContextMenuContentItemIconWrapper = StyledContextMenuContentItemIconWrapper;
-
-const StyledContextMenuContentItemText = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    white-space: nowrap;\n"])));
-
+const StyledContextMenuContentItemText = _styledComponents.default.div`
+    flex: 0 0 auto;
+    white-space: nowrap;
+`;
 exports.StyledContextMenuContentItemText = StyledContextMenuContentItemText;
 //# sourceMappingURL=ContextMenuContent.styles.js.map

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.styles.js","names":["StyledMotionContextMenuContent","styled","motion","div","theme","text","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ position }) => {\n            switch (position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAMO,MAAMA,8BAA8B,GAAG,IAAAC,yBAAA,EAC1CC,oBAAA,CAAOC,GADmC,CAAH,82BAGnB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAoDA,KAAK,CAAC,KAAD,CAAzD;AAAA,CAHmB,EAO9B;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAoDA,KAAK,CAACC,IAA1D;AAAA,CAP8B,EAuBjC,SAAkB;EAAA,IAAjB;IAAEC;EAAF,CAAiB;;EAChB,QAAQA,QAAR;IACI,KAAKC,+BAAA,CAAqBC,OAA1B;MACI,WAAOC,qBAAP;;IAKJ,KAAKF,+BAAA,CAAqBG,UAA1B;MACI,WAAOD,qBAAP;;IAKJ,KAAKF,+BAAA,CAAqBI,QAA1B;MACI,WAAOF,qBAAP;;IAKJ,KAAKF,+BAAA,CAAqBK,WAA1B;MACI,WAAOH,qBAAP;;IAKJ;MACI,OAAOI,SAAP;EA1BR;AA4BH,CApDkC,CAApC;;;AAqEA,MAAMC,4BAA4B,GAAGb,yBAAA,CAAOE,GAAV,wPAOb;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAChBA,KAAK,CAAC,eAAD,CADW;AAAA,CAPa,CAAlC;;;;AAYA,MAAMW,uCAAuC,GAAGd,yBAAA,CAAOE,GAAV,0IAA7C;;;;AAMA,MAAMa,gCAAgC,GAAGf,yBAAA,CAAOE,GAAV,wHAAtC"}
+{"version":3,"file":"ContextMenuContent.styles.js","names":["StyledMotionContextMenuContent","styled","motion","div","theme","text","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ position }) => {\n            switch (position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AAA8D;AAAA;AAMvD,MAAMA,8BAA8B,GAAG,IAAAC,yBAAM,EAChDC,oBAAM,CAACC,GAAG,CACyB;AACvC,wBAAwB;EAAA,IAAC;IAAEC;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzF;AACA;AACA;AACA,aAAa;EAAA,IAAC;IAAEA;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,SAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACX,QAAQA,QAAQ;IACZ,KAAKC,+BAAoB,CAACC,OAAO;MAC7B,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACG,UAAU;MAChC,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACI,QAAQ;MAC9B,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACK,WAAW;MACjC,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EAAC;AAE7B,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAIK,MAAMC,4BAA4B,GAAGb,yBAAM,CAACE,GAAuC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B;EAAA,IAAC;IAAEC;EAAyC,CAAC;EAAA,OAC7DA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACnC;AACA,CAAC;AAAC;AAEK,MAAMW,uCAAuC,GAAGd,yBAAM,CAACE,GAAI;AAClE;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMa,gCAAgC,GAAGf,yBAAM,CAACE,GAAI;AAC3D;AACA;AACA,CAAC;AAAC"}

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

@@ -4,15 +4,10 @@ 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 (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,
@@ -45,7 +40,6 @@ const 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,"file":"GridImage.js","names":["GridImage","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","displayName"],"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":";;;;;;;AAAA;;AACA;;;;;;AAwBA,MAAMA,SAA6B,GAAG,QAA4C;EAAA,IAA3C;IAAEC,MAAF;IAAUC,oBAAV;IAAgCC;EAAhC,CAA2C;EAC9E,MAAM,CAACC,kBAAD,EAAqBC,qBAArB,IAA8C,IAAAC,eAAA,EAAS,KAAT,CAApD;EACA,MAAM,CAACC,sBAAD,EAAyBC,yBAAzB,IAAsD,IAAAF,eAAA,EAAS,KAAT,CAA5D;EACA,MAAM,CAACG,yBAAD,EAA4BC,4BAA5B,IAA4D,IAAAJ,eAAA,EAAS,KAAT,CAAlE;EAEA,MAAMK,qBAAqB,GAAG,IAAAC,kBAAA,EAAY,MAAMP,qBAAqB,CAAC,IAAD,CAAvC,EAA+C,EAA/C,CAA9B;EAEA,MAAMQ,yBAAyB,GAAG,IAAAD,kBAAA,EAAY,MAAMJ,yBAAyB,CAAC,IAAD,CAA3C,EAAmD,EAAnD,CAAlC;EAEA,MAAMM,4BAA4B,GAAG,IAAAF,kBAAA,EAAY,MAAMF,4BAA4B,CAAC,IAAD,CAA9C,EAAsD,EAAtD,CAArC;EAEA,MAAMK,iBAAiB,GACnB,CAACX,kBAAD,IAAuB,CAACG,sBAAxB,IAAkD,CAACE,yBADvD;EAGA,oBACI,6BAAC,0BAAD;IAAiB,oBAAoB,EAAEP,oBAAvC;IAA6D,IAAI,EAAEC;EAAnE,gBACI,6BAAC,8BAAD;IACI,QAAQ,EAAEY,iBADd;IAEI,MAAM,EAAEJ,qBAFZ;IAGI,IAAI,EAAER,IAHV;IAII,GAAG,EAAEF,MAAM,CAAC,CAAD;EAJf,EADJ,eAOI,6BAAC,kCAAD;IACI,QAAQ,EAAEc,iBADd;IAEI,MAAM,EAAEF,yBAFZ;IAGI,IAAI,EAAEV,IAHV;IAII,GAAG,EAAEF,MAAM,CAAC,CAAD;EAJf,EAPJ,eAaI,6BAAC,qCAAD;IACI,QAAQ,EAAEc,iBADd;IAEI,MAAM,EAAED,4BAFZ;IAGI,GAAG,EAAEb,MAAM,CAAC,CAAD;EAHf,EAbJ,CADJ;AAqBH,CAnCD;;AAqCAD,SAAS,CAACgB,WAAV,GAAwB,WAAxB;eAEehB,S"}
+{"version":3,"file":"GridImage.js","names":["GridImage","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","displayName"],"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":";;;;;;AAAA;AACA;AAK4B;AAAA;AAmB5B,MAAMA,SAA6B,GAAG,QAA4C;EAAA,IAA3C;IAAEC,MAAM;IAAEC,oBAAoB;IAAEC;EAAK,CAAC;EACzE,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACnE,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3E,MAAM,CAACG,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAEjF,MAAMK,qBAAqB,GAAG,IAAAC,kBAAW,EAAC,MAAMP,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMQ,yBAAyB,GAAG,IAAAD,kBAAW,EAAC,MAAMJ,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMM,4BAA4B,GAAG,IAAAF,kBAAW,EAAC,MAAMF,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMK,iBAAiB,GACnB,CAACX,kBAAkB,IAAI,CAACG,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACI,6BAAC,0BAAe;IAAC,oBAAoB,EAAEP,oBAAqB;IAAC,IAAI,EAAEC;EAAK,gBACpE,6BAAC,8BAAmB;IAChB,QAAQ,EAAEY,iBAAkB;IAC5B,MAAM,EAAEJ,qBAAsB;IAC9B,IAAI,EAAER,IAAK;IACX,GAAG,EAAEF,MAAM,CAAC,CAAC;EAAE,EACjB,eACF,6BAAC,kCAAuB;IACpB,QAAQ,EAAEc,iBAAkB;IAC5B,MAAM,EAAEF,yBAA0B;IAClC,IAAI,EAAEV,IAAK;IACX,GAAG,EAAEF,MAAM,CAAC,CAAC;EAAE,EACjB,eACF,6BAAC,qCAA0B;IACvB,QAAQ,EAAEc,iBAAkB;IAC5B,MAAM,EAAED,4BAA6B;IACrC,GAAG,EAAEb,MAAM,CAAC,CAAC;EAAE,EACjB,CACY;AAE1B,CAAC;AAEDD,SAAS,CAACgB,WAAW,GAAG,WAAW;AAAC,eAErBhB,SAAS;AAAA"}

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

@@ -4,78 +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) } })); }
-
-const 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"])), _ref => {
+const StyledGridImage = _styledComponents.default.div`
+    background-color: rgba(${_ref => {
   let {
     theme
   } = _ref;
   return theme['text-rgb'];
-}, _ref2 => {
+}}, 0.1);
+    border-radius: ${_ref2 => {
   let {
     shouldShowRoundImage
   } = _ref2;
   return shouldShowRoundImage ? '50%' : undefined;
-}, _ref3 => {
+}};
+    box-shadow: 0 0 0 1px rgba(${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme['009-rgb'];
-}, _ref4 => {
+}}, 0.08) inset;
+    height: ${_ref4 => {
   let {
     size
   } = _ref4;
   return size;
-}, _ref5 => {
+}}px;
+    overflow: hidden;
+    position: relative;
+    transition: border-radius 0.3s ease;
+    width: ${_ref5 => {
   let {
     size
   } = _ref5;
   return size;
-});
-
+}}px;
+`;
 exports.StyledGridImage = StyledGridImage;
-
-const 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"])), _ref6 => {
+const StyledGridLeftImage = _styledComponents.default.img`
+    border-right: ${_ref6 => {
   let {
     size
   } = _ref6;
   return size / 40;
-}, _ref7 => {
+}}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;
-
-const 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"])), _ref8 => {
+const StyledGridTopRightImage = _styledComponents.default.img`
+    border-bottom: ${_ref8 => {
   let {
     size
   } = _ref8;
   return size / 40;
-}, _ref9 => {
+}}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;
-
-const 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"])), _ref10 => {
+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,"file":"GridImage.styles.js","names":["StyledGridImage","styled","div","theme","shouldShowRoundImage","undefined","size","StyledGridLeftImage","img","isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"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;;;;;;;;AAQO,MAAMA,eAAe,GAAGC,yBAAA,CAAOC,GAAV,gUACC;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAqCA,KAAK,CAAC,UAAD,CAA1C;AAAA,CADD,EAEP;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAA+BA,oBAAoB,GAAG,KAAH,GAAWC,SAA9D;AAAA,CAFO,EAGK;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAAqCA,KAAK,CAAC,SAAD,CAA1C;AAAA,CAHL,EAId;EAAA,IAAC;IAAEG;EAAF,CAAD;EAAA,OAAcA,IAAd;AAAA,CAJc,EAQf;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAcA,IAAd;AAAA,CARe,CAArB;;;;AAgBA,MAAMC,mBAAmB,GAAGN,yBAAA,CAAOO,GAAV,yRACZ;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAAcA,IAAI,GAAG,EAArB;AAAA,CADY,EAKjB;EAAA,IAAC;IAAEG;EAAF,CAAD;EAAA,OAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CALiB,CAAzB;;;;AAiBA,MAAMC,uBAAuB,GAAGT,yBAAA,CAAOO,GAAV,0RACf;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAAcA,IAAI,GAAG,EAArB;AAAA,CADe,EAIrB;EAAA,IAAC;IAAEG;EAAF,CAAD;EAAA,OAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAJqB,CAA7B;;;;AAgBA,MAAME,0BAA0B,GAAGV,yBAAA,CAAOO,GAAV,qPAIxB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAJwB,CAAhC"}
+{"version":3,"file":"GridImage.styles.js","names":["StyledGridImage","styled","div","theme","shouldShowRoundImage","undefined","size","StyledGridLeftImage","img","isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"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;AAAuC;AAQhC,MAAMA,eAAe,GAAGC,yBAAM,CAACC,GAA0B;AAChE,6BAA6B;EAAA,IAAC;IAAEC;EAA4B,CAAC;EAAA,OAAKA,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqB;EAAA,IAAC;IAAEC;EAAqB,CAAC;EAAA,OAAMA,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F,iCAAiC;EAAA,IAAC;IAAEF;EAA4B,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAc;EAAA,IAAC;IAAEG;EAAK,CAAC;EAAA,OAAKA,IAAI;AAAA,CAAC;AACjC;AACA;AACA;AACA,aAAa;EAAA,IAAC;IAAEA;EAAK,CAAC;EAAA,OAAKA,IAAI;AAAA,CAAC;AAChC,CAAC;AAAC;AAOK,MAAMC,mBAAmB,GAAGN,yBAAM,CAACO,GAA8B;AACxE,oBAAoB;EAAA,IAAC;IAAEF;EAAK,CAAC;EAAA,OAAKA,IAAI,GAAG,EAAE;AAAA,CAAC;AAC5C;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEG;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAAC;AAOK,MAAMC,uBAAuB,GAAGT,yBAAM,CAACO,GAAkC;AAChF,qBAAqB;EAAA,IAAC;IAAEF;EAAK,CAAC;EAAA,OAAKA,IAAI,GAAG,EAAE;AAAA,CAAC;AAC7C;AACA;AACA,eAAe;EAAA,IAAC;IAAEG;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAME,0BAA0B,GAAGV,yBAAM,CAACO,GAAqC;AACtF;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAAC"}

package/lib/components/icon/Icon.js

@@ -4,17 +4,11 @@ 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 }; }
-
 const Icon = _ref => {
   let {
     className,
@@ -27,31 +21,25 @@ const Icon = _ref => {
     size = 15,
     shouldStopPropagation
   } = _ref;
-
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onClick === 'function') {
       onClick(event);
     }
   };
-
   const handleDoubleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onDoubleClick === 'function') {
       onDoubleClick(event);
     }
   };
-
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
     const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-
     if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
       maxStackSizeFactor = stackSizeFactor;
     }
@@ -80,7 +68,6 @@ const Icon = _ref => {
     });
   }));
 };
-
 Icon.displayName = 'Icon';
 var _default = Icon;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","undefined","map","iconClasses","includes","displayName"],"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":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAyCA,MAAMA,IAAmB,GAAG,QAUtB;EAAA,IAVuB;IACzBC,SADyB;IAEzBC,KAFyB;IAGzBC,KAHyB;IAIzBC,UAJyB;IAKzBC,OALyB;IAMzBC,aANyB;IAOzBC,WAPyB;IAQzBC,IAAI,GAAG,EARkB;IASzBC;EATyB,CAUvB;;EACF,MAAMC,WAA+C,GAAIC,KAAD,IAAW;IAC/D,IAAIF,qBAAJ,EAA2B;MACvBE,KAAK,CAACC,eAAN;IACH;;IAED,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;MAC/BA,OAAO,CAACM,KAAD,CAAP;IACH;EACJ,CARD;;EAUA,MAAME,iBAAqD,GAAIF,KAAD,IAAW;IACrE,IAAIF,qBAAJ,EAA2B;MACvBE,KAAK,CAACC,eAAN;IACH;;IAED,IAAI,OAAON,aAAP,KAAyB,UAA7B,EAAyC;MACrCA,aAAa,CAACK,KAAD,CAAb;IACH;EACJ,CARD;;EAUA,IAAIG,kBAAkB,GAAG,CAAzB;EAEAX,KAAK,CAACY,OAAN,CAAeC,IAAD,IAAU;IACpB,MAAMC,eAAe,GAAG,IAAAC,yBAAA,EAAmBF,IAAnB,CAAxB;;IAEA,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;MACzDA,kBAAkB,GAAGG,eAArB;IACH;EACJ,CAND;EAQA,MAAME,oBAAoB,GAAGhB,KAAK,CAACiB,MAAN,GAAe,CAA5C;EAEA,MAAMC,cAAc,GAAG,IAAAC,aAAA,EACnB,kBADmB,EAEnBH,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBlB,SAHmB,CAAvB;EAMA,oBACI,6BAAC,uBAAD;IACI,SAAS,EAAEoB,cADf;IAEI,UAAU,EAAEjB,UAFhB;IAGI,OAAO,EAAE,OAAOC,OAAP,KAAmB,UAAnB,GAAgCK,WAAhC,GAA8Ca,SAH3D;IAII,aAAa,EAAE,OAAOjB,aAAP,KAAyB,UAAzB,GAAsCO,iBAAtC,GAA0DU,SAJ7E;IAKI,WAAW,EAAEhB,WALjB;IAMI,IAAI,EAAEC;EANV,GAQKL,KAAK,CAACqB,GAAN,CAAWR,IAAD,IAAU;IACjB,MAAMC,eAAe,GAAG,IAAAC,yBAAA,EAAmBF,IAAnB,CAAxB;IAEA,MAAMS,WAAW,GAAG,IAAAH,aAAA,EAAKN,IAAL,EAAWf,SAAX,EAAsB;MACtC,eAAekB,oBAAoB,IAAIF,eAAe,KAAKM;IADrB,CAAtB,CAApB;IAIA,oBACI,6BAAC,gBAAD;MACI,SAAS,EAAEE,WADf;MAEI,KAAK,EAAET,IAAI,CAACU,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCxB,KAFnD;MAGI,QAAQ,EAAG,CAACe,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDN,IAH9D;MAII,SAAS,EAAEW,oBAJf;MAKI,GAAG,EAAEH,IALT;MAMI,IAAI,EAAER;IANV,EADJ;EAUH,CAjBA,CARL,CADJ;AA6BH,CA9ED;;AAgFAR,IAAI,CAAC2B,WAAL,GAAmB,MAAnB;eAEe3B,I"}
+{"version":3,"file":"Icon.js","names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","undefined","map","iconClasses","includes","displayName"],"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":";;;;;;AAAA;AACA;AACA;AACA;AAA6C;AAyC7C,MAAMA,IAAmB,GAAG,QAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC;EACG,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,EAAE;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,EAAE;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,IAAIG,kBAAkB,GAAG,CAAC;EAE1BX,KAAK,CAACY,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SAAS,CACZ;EAED,oBACI,6BAAC,uBAAiB;IACd,SAAS,EAAEoB,cAAe;IAC1B,UAAU,EAAEjB,UAAW;IACvB,OAAO,EAAE,OAAOC,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGa,SAAU;IACjE,aAAa,EAAE,OAAOjB,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGU,SAAU;IACnF,WAAW,EAAEhB,WAAY;IACzB,IAAI,EAAEC;EAAK,GAEVL,KAAK,CAACqB,GAAG,CAAER,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;IAEhD,MAAMS,WAAW,GAAG,IAAAH,aAAI,EAACN,IAAI,EAAEf,SAAS,EAAE;MACtC,aAAa,EAAEkB,oBAAoB,IAAIF,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI,6BAAC,gBAAU;MACP,SAAS,EAAEE,WAAY;MACvB,KAAK,EAAET,IAAI,CAACU,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAGxB,KAAM;MACrD,QAAQ,EAAG,CAACe,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIN,IAAK;MAC/D,SAAS,EAAEW,oBAAqB;MAChC,GAAG,EAAEH,IAAK;MACV,IAAI,EAAER;IAAK,EACb;EAEV,CAAC,CAAC,CACc;AAE5B,CAAC;AAEDR,IAAI,CAAC2B,WAAW,GAAG,MAAM;AAAC,eAEX3B,IAAI;AAAA"}

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

@@ -4,65 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledIconWrapper = exports.StyledIcon = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
 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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-const StyledIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: inline-flex;\n    height: ", ";\n    justify-content: center;\n    opacity: ", ";\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ", ";\n"])), _ref => {
+const StyledIconWrapper = _styledComponents.default.span`
+    align-items: center;
+    cursor: ${_ref => {
   let {
     isDisabled,
     onClick
   } = _ref;
   return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit';
-}, _ref2 => {
+}};
+    display: inline-flex;
+    height: ${_ref2 => {
   let {
     size
   } = _ref2;
-  return "".concat(size, "px");
-}, _ref3 => {
+  return `${size}px`;
+}};
+    justify-content: center;
+    opacity: ${_ref3 => {
   let {
     isDisabled
   } = _ref3;
   return isDisabled ? 0.5 : 1;
-}, _ref4 => {
+}};
+    position: relative;
+    transition: opacity 0.3s ease;
+    width: ${_ref4 => {
   let {
     size
   } = _ref4;
-  return "".concat(size, "px");
-});
-
+  return `${size}px`;
+}};
+`;
 exports.StyledIconWrapper = StyledIconWrapper;
-
-const StyledIcon = _styledComponents.default.i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    display: ", ";\n    font-size: ", ";\n\n    ", "\n"])), _ref5 => {
+const StyledIcon = _styledComponents.default.i`
+    color: ${_ref5 => {
   let {
     color,
     theme
   } = _ref5;
   return color || theme.headline;
-}, _ref6 => {
+}};
+    display: ${_ref6 => {
   let {
     isStacked
   } = _ref6;
   return isStacked ? undefined : 'inline-flex';
-}, _ref7 => {
+}};
+    font-size: ${_ref7 => {
   let {
     fontSize
   } = _ref7;
-  return "".concat(fontSize, "px");
-}, _ref8 => {
+  return `${fontSize}px`;
+}};
+
+    ${_ref8 => {
   let {
     fontSize,
     size
   } = _ref8;
-  return fontSize !== size && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            top: 50%;\n            transform: translateY(-50%);\n        "])));
-});
-
+  return fontSize !== size && (0, _styledComponents.css)`
+            top: 50%;
+            transform: translateY(-50%);
+        `;
+}}
+`;
 exports.StyledIcon = StyledIcon;
 //# sourceMappingURL=Icon.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["StyledIconWrapper","styled","span","isDisabled","onClick","size","StyledIcon","i","color","theme","headline","isStacked","undefined","fontSize","css"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    isDisabled?: boolean;\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ isDisabled, onClick }) =>\n        typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    height: ${({ size }) => `${size}px`};\n    justify-content: center;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n    WithTheme<{\n        fontSize: number;\n        isStacked?: boolean;\n    }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n    display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ fontSize }) => `${fontSize}px`};\n\n    ${({ fontSize, size }) =>\n        fontSize !== size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n"],"mappings":";;;;;;;AACA;;;;;;;;;;AAUO,MAAMA,iBAAiB,GAAGC,yBAAA,CAAOC,IAAV,oSAEhB;EAAA,IAAC;IAAEC,UAAF;IAAcC;EAAd,CAAD;EAAA,OACN,OAAOA,OAAP,KAAmB,UAAnB,IAAiC,CAACD,UAAlC,GAA+C,SAA/C,GAA2D,SADrD;AAAA,CAFgB,EAKhB;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,iBAAiBA,IAAjB;AAAA,CALgB,EAOf;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAAqBA,UAAU,GAAG,GAAH,GAAS,CAAxC;AAAA,CAPe,EAUjB;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,iBAAiBA,IAAjB;AAAA,CAViB,CAAvB;;;;AAmBA,MAAMC,UAAU,GAAGL,yBAAA,CAAOM,CAAV,kJACV;EAAA,IAAC;IAAEC,KAAF;IAASC;EAAT,CAAD;EAAA,OAAuCD,KAAK,IAAIC,KAAK,CAACC,QAAtD;AAAA,CADU,EAER;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAoBA,SAAS,GAAGC,SAAH,GAAe,aAA5C;AAAA,CAFQ,EAGN;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,iBAAqBA,QAArB;AAAA,CAHM,EAKjB;EAAA,IAAC;IAAEA,QAAF;IAAYR;EAAZ,CAAD;EAAA,OACEQ,QAAQ,KAAKR,IAAb,QACAS,qBADA,mJADF;AAAA,CALiB,CAAhB"}
+{"version":3,"file":"Icon.styles.js","names":["StyledIconWrapper","styled","span","isDisabled","onClick","size","StyledIcon","i","color","theme","headline","isStacked","undefined","fontSize","css"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    isDisabled?: boolean;\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ isDisabled, onClick }) =>\n        typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    height: ${({ size }) => `${size}px`};\n    justify-content: center;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n    WithTheme<{\n        fontSize: number;\n        isStacked?: boolean;\n    }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n    display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ fontSize }) => `${fontSize}px`};\n\n    ${({ fontSize, size }) =>\n        fontSize !== size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n"],"mappings":";;;;;;AACA;AAAgD;AAAA;AAUzC,MAAMA,iBAAiB,GAAGC,yBAAM,CAACC,IAA6B;AACrE;AACA,cAAc;EAAA,IAAC;IAAEC,UAAU;IAAEC;EAAQ,CAAC;EAAA,OAC9B,OAAOA,OAAO,KAAK,UAAU,IAAI,CAACD,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AAC7E;AACA,cAAc;EAAA,IAAC;IAAEE;EAAK,CAAC;EAAA,OAAM,GAAEA,IAAK,IAAG;AAAA,CAAC;AACxC;AACA,eAAe;EAAA,IAAC;IAAEF;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,aAAa;EAAA,IAAC;IAAEE;EAAK,CAAC;EAAA,OAAM,GAAEA,IAAK,IAAG;AAAA,CAAC;AACvC,CAAC;AAAC;AAQK,MAAMC,UAAU,GAAGL,yBAAM,CAACM,CAAmB;AACpD,aAAa;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAuB,CAAC;EAAA,OAAKD,KAAK,IAAIC,KAAK,CAACC,QAAQ;AAAA,CAAC;AAC5E,eAAe;EAAA,IAAC;IAAEC;EAAU,CAAC;EAAA,OAAMA,SAAS,GAAGC,SAAS,GAAG,aAAa;AAAA,CAAE;AAC1E,iBAAiB;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAM,GAAEA,QAAS,IAAG;AAAA,CAAC;AACnD;AACA,MAAM;EAAA,IAAC;IAAEA,QAAQ;IAAER;EAAK,CAAC;EAAA,OACjBQ,QAAQ,KAAKR,IAAI,IACjB,IAAAS,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}

package/lib/components/icon/utils.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getStackSizeFactor = void 0;
-
 const getStackSizeFactor = icon => {
   var _icon$match;
-
   const sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
   return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;
 };
-
 exports.getStackSizeFactor = getStackSizeFactor;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","sizeFactorString","match","parseInt","undefined"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAD,IAAkB;EAAA;;EAChD,MAAMC,gBAAgB,kBAAGD,IAAI,CAACE,KAAL,CAAW,kBAAX,CAAH,gDAAG,YAAiC,CAAjC,CAAzB;EAEA,OAAO,OAAOD,gBAAP,KAA4B,QAA5B,GAAuCE,QAAQ,CAACF,gBAAD,EAAmB,EAAnB,CAA/C,GAAwEG,SAA/E;AACH,CAJM"}
+{"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","sizeFactorString","match","parseInt","undefined"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAY,IAAK;EAAA;EAChD,MAAMC,gBAAgB,kBAAGD,IAAI,CAACE,KAAK,CAAC,kBAAkB,CAAC,gDAA9B,YAAiC,CAAC,CAAC;EAE5D,OAAO,OAAOD,gBAAgB,KAAK,QAAQ,GAAGE,QAAQ,CAACF,gBAAgB,EAAE,EAAE,CAAC,GAAGG,SAAS;AAC5F,CAAC;AAAC"}