@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_FilterButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FilterButton","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","$isSelected","$size","onClick","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","StyledFilterButtonItemLabelCount","toLocaleString","StyledFilterButtonItemBorder","$shape","$color","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledFilterButtonItem,\n    StyledFilterButtonItemBorder,\n    StyledFilterButtonItemLabel,\n    StyledFilterButtonItemLabelCount,\n    StyledFilterButtonItemLabelText,\n    StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n    color?: CSSProperties['color'];\n    icons?: string[];\n    isSelected: boolean;\n    shape: FilterButtonItemShape;\n    size: FilterButtonSize;\n    count?: number;\n    text: string;\n    id: string;\n    onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n    icons,\n    size,\n    shape,\n    text,\n    color,\n    count,\n    isSelected,\n    id,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect(id);\n    }, [id, onSelect]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem $isSelected={isSelected} $size={size} onClick={handleClick}>\n                <StyledFilterButtonItemLabel>\n                    {icons && <Icon icons={icons} size={15} />}\n                    <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n                    {typeof count === 'number' && (\n                        <StyledFilterButtonItemLabelCount>\n                            {count.toLocaleString()}\n                        </StyledFilterButtonItemLabelCount>\n                    )}\n                </StyledFilterButtonItemLabel>\n                <StyledFilterButtonItemBorder\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n                <StyledMotionFilterButtonItemBackground\n                    $isSelected={isSelected}\n                    $shape={shape}\n                    $color={color}\n                />\n            </StyledFilterButtonItem>\n        ),\n        [color, count, handleClick, icons, isSelected, shape, size, text],\n    );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabelCount = exports.StyledFilterButtonItemLabel = exports.StyledFilterButtonItemBorder = exports.StyledFilterButtonItem = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _filterButtons = require("../../../types/filterButtons");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
+    position: relative;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    padding: ${({
+  $size
+}) => $size === _filterButtons.FilterButtonSize.Normal ? '8px 14px' : '4px 8px'};
+
+    display: flex;
+    align-items: center;
+
+    &:hover > div:last-child {
+        ${({
+  $isSelected
+}) => !$isSelected && (0, _styledComponents.css)`
+                opacity: 0.2;
+            `}
+    }
+`;
+const StyledFilterButtonItemLabel = exports.StyledFilterButtonItemLabel = _styledComponents.default.div`
+    display: flex;
+    gap: 5px;
+    align-items: baseline;
+    position: relative;
+    z-index: 1;
+`;
+const StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabelText = _styledComponents.default.p`
+    color: ${({
+  theme
+}) => theme.text};
+    margin: 0;
+    line-height: 1;
+`;
+const StyledFilterButtonItemLabelCount = exports.StyledFilterButtonItemLabelCount = _styledComponents.default.p`
+    color: ${({
+  theme
+}) => theme.text};
+    margin: 0;
+    line-height: 1;
+    font-weight: bold;
+`;
+const StyledFilterButtonItemBorder = exports.StyledFilterButtonItemBorder = _styledComponents.default.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.4;
+    z-index: 0;
+    border-radius: ${({
+  $shape
+}) => $shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 3}px;
+
+    ${({
+  $color,
+  theme,
+  $isSelected
+}) => !$isSelected && (0, _styledComponents.css)`
+            border-width: 1px;
+            border-style: solid;
+            border-color: ${$color ?? theme.headline};
+        `};
+`;
+const StyledMotionFilterButtonItemBackground = exports.StyledMotionFilterButtonItemBackground = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+    opacity: ${({
+  $isSelected
+}) => $isSelected ? 0.4 : 0};
+    transition: opacity 0.5s ease;
+    border-radius: ${({
+  $shape
+}) => $shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 3}px;
+    background-color: ${({
+  $color,
+  theme
+}) => $color ?? theme.headline};
+`;
+//# sourceMappingURL=FilterButton.styles.js.map

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_filterButtons","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","$size","FilterButtonSize","Normal","$isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$shape","FilterButtonItemShape","Round","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{ $size: FilterButtonSize; $isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\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: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\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: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\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: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAuF,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKhF,MAAMW,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAKC,+BAAgB,CAACC,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAY,CAAC,KACd,CAACA,WAAW,IACZ,IAAAC,qBAAG;AACf;AACA,aAAa;AACb;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAR,OAAA,CAAAQ,2BAAA,GAAGP,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMO,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAGR,yBAAM,CAACS,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAIM,MAAMC,gCAAgC,GAAAb,OAAA,CAAAa,gCAAA,GAAGZ,yBAAM,CAACS,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQM,MAAME,4BAA4B,GAAAd,OAAA,CAAAc,4BAAA,GAAGb,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEa;AAAO,CAAC,KAAMA,MAAM,KAAKC,oCAAqB,CAACC,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;EAAEC,MAAM;EAAEP,KAAK;EAAEL;AAA+C,CAAC,KAChE,CAACA,WAAW,IACZ,IAAAC,qBAAG;AACX;AACA;AACA,4BAA4BW,MAAM,IAAIP,KAAK,CAACQ,QAAQ;AACpD,SAAS;AACT,CAAC;AAQM,MAAMC,sCAAsC,GAAApB,OAAA,CAAAoB,sCAAA,GAAG,IAAAnB,yBAAM,EACxDoB,oBAAM,CAACnB,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;EAAES;AAAO,CAAC,KAAMA,MAAM,KAAKC,oCAAqB,CAACC,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;EAAEC,MAAM;EAAEP;AAA6C,CAAC,KACzEO,MAAM,IAAIP,KAAK,CAACQ,QAAQ;AAChC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GridImage = require("./GridImage.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridImage = ({
+  background,
+  images,
+  shouldShowRoundImage,
+  size,
+  onClick
+}) => {
+  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, {
+    $background: background,
+    $shouldShowRoundImage: shouldShowRoundImage,
+    $size: size,
+    onClick: typeof onClick === 'function' ? onClick : undefined
+  }, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    $size: size,
+    src: images[0]
+  }), /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTopRightImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleTopRightImageLoaded,
+    $size: size,
+    src: images[1]
+  }), /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridBottomRightImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleBottomRightImageLoaded,
+    src: images[2]
+  }));
+};
+GridImage.displayName = 'GridImage';
+var _default = exports.default = GridImage;
+//# sourceMappingURL=GridImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GridImage","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","$background","$shouldShowRoundImage","$size","undefined","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, 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> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n}) => {\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\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={typeof onClick === 'function' ? onClick : undefined}\n        >\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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","ignoreList":[]}

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
+    background: ${({
+  $background,
+  theme
+}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : undefined};
+    box-shadow: 0 0 0 1px rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    height: ${({
+  $size
+}) => $size}px;
+    overflow: hidden;
+    position: relative;
+    transition: border-radius 0.3s ease;
+    width: ${({
+  $size
+}) => $size}px;
+    flex: 0 0 auto;
+`;
+const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
+    border-right: ${({
+  $size
+}) => $size / 40}px solid white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 60%;
+`;
+const StyledGridTopRightImage = exports.StyledGridTopRightImage = _styledComponents.default.img`
+    border-bottom: ${({
+  $size
+}) => $size / 40}px solid white;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
+const StyledGridBottomRightImage = exports.StyledGridBottomRightImage = _styledComponents.default.img`
+    bottom: 0;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
+//# sourceMappingURL=GridImage.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 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    flex: 0 0 auto;\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":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAShC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA,CAAC;AAOM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,uBAAuB,GAAAX,OAAA,CAAAW,uBAAA,GAAGV,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAME,0BAA0B,GAAAZ,OAAA,CAAAY,0BAAA,GAAGX,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/{components → cjs/components}/icon/Icon.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _icon = require("../../utils/icon");
 var _Icon = require("./Icon.styles");
-var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Icon = _ref => {
-  let {
-    className,
-    color,
-    icons,
-    isDisabled,
-    onClick,
-    onDoubleClick,
-    onMouseDown,
-    size = 15,
-    shouldStopPropagation
-  } = _ref;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Icon = ({
+  className,
+  color,
+  icons,
+  isDisabled,
+  onClick,
+  onDoubleClick,
+  onMouseDown,
+  size = 15,
+  shouldStopPropagation
+}) => {
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -37,9 +37,10 @@ const Icon = _ref => {
       onDoubleClick(event);
     }
   };
+  const theme = (0, _styledComponents.useTheme)();
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
-    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
+    const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
     if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
       maxStackSizeFactor = stackSizeFactor;
     }
@@ -48,27 +49,35 @@ const Icon = _ref => {
   const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
     className: wrapperClasses,
-    isDisabled: isDisabled,
+    $isDisabled: isDisabled,
     onClick: typeof onClick === 'function' ? handleClick : undefined,
+    $isOnClick: typeof onClick === 'function',
     onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
     onMouseDown: onMouseDown,
-    size: size
+    $size: size
   }, icons.map(icon => {
-    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-    const iconClasses = (0, _clsx.default)(icon, className, {
+    const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
+
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+
+    const iconClasses = (0, _clsx.default)(icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
       className: iconClasses,
-      color: icon.includes('fa-inverse') ? 'white' : color,
-      fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
-      isStacked: shouldUseStackedIcon,
+      $color: icon.includes('fa-inverse') ? 'white' : color,
+      $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
+      $isStacked: shouldUseStackedIcon,
       key: icon,
-      size: size
+      $size: size
     });
   }));
 };
 Icon.displayName = 'Icon';
-var _default = Icon;
-exports.default = _default;
+var _default = exports.default = Icon;
 //# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","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 { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\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    const theme = useTheme();\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            $isOnClick={typeof onClick === 'function'}\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 isIconStyleGiven =\n                //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n                //\n                // const iconStyle = isIconStyleGiven\n                //     ? undefined\n                //     : (theme?.iconStyle as string) ?? 'fa-regular';\n\n                const iconClasses = clsx(icon, {\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,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAA8D,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyC9D,MAAMG,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;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,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,IAAIC,kBAAkB,GAAG,CAAC;EAE1Bb,KAAK,CAACc,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGlB,KAAK,CAACmB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCpB,SACJ,CAAC;EAED,oBACIR,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,CAAA8B,iBAAiB;IACdzB,SAAS,EAAEsB,cAAe;IAC1BI,WAAW,EAAEvB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGkB,SAAU;IACjEC,UAAU,EAAE,OAAOxB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGe,SAAU;IACnFrB,WAAW,EAAEA,WAAY;IACzBuB,KAAK,EAAEtB;EAAK,GAEXL,KAAK,CAAC4B,GAAG,CAAEb,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMc,WAAW,GAAG,IAAAR,aAAI,EAACN,IAAI,EAAE;MAC3B,aAAa,EAAEG,oBAAoB,IAAIF,eAAe,KAAKS;IAC/D,CAAC,CAAC;IAEF,oBACInC,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,CAAAqC,UAAU;MACPhC,SAAS,EAAE+B,WAAY;MACvBE,MAAM,EAAEhB,IAAI,CAACiB,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAGjC,KAAM;MACtDkC,SAAS,EAAG,CAACjB,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIR,IAAK;MAChE6B,UAAU,EAAEhB,oBAAqB;MACjCiB,GAAG,EAAEpB,IAAK;MACVY,KAAK,EAAEtB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDR,IAAI,CAACuC,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAEXC,IAAI","ignoreList":[]}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledIconWrapper = exports.StyledIcon = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.span`
+    align-items: center;
+    cursor: ${({
+  $isDisabled,
+  $isOnClick
+}) => $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};
+    display: inline-flex;
+    min-height: ${({
+  $size
+}) => `${$size}px`};
+    justify-content: center;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
+    transition: opacity 0.3s ease;
+    min-width: ${({
+  $size
+}) => `${$size}px`};
+
+    // To insure that stacked icons have the same size as normal icons.
+    &&.fa-stack {
+        height: fit-content;
+        width: fit-content;
+        line-height: ${({
+  $size
+}) => $size}px;
+    }
+`;
+const StyledIcon = exports.StyledIcon = _styledComponents.default.i`
+    color: ${({
+  $color,
+  theme
+}) => $color || theme.headline};
+    display: ${({
+  $isStacked
+}) => $isStacked ? undefined : 'inline-flex'};
+    font-size: ${({
+  $fontSize
+}) => `${$fontSize}px`};
+
+    ${({
+  $fontSize,
+  $size
+}) => $fontSize !== $size && (0, _styledComponents.css)`
+            top: 50%;
+            transform: translateY(-50%);
+        `}
+`;
+//# sourceMappingURL=Icon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","headline","$isStacked","undefined","$fontSize","css"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-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    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\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":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACJ,CAAkB;AACnD,aAAa,CAAC;EAAEU,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAC7E,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAEP;AAAM,CAAC,KACnBO,SAAS,KAAKP,KAAK,IACnB,IAAAQ,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/input/Input.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputSize = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _useElementSize = require("../../hooks/useElementSize");
+var _AreaContextProvider = require("../area-provider/AreaContextProvider");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Input = require("./Input.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let InputSize = exports.InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
+const Input = /*#__PURE__*/(0, _react.forwardRef)(({
+  leftElement,
+  inputMode,
+  isDisabled,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onPaste,
+  placeholder,
+  rightElement,
+  shouldShowOnlyBottomBorder,
+  shouldRemainPlaceholder = false,
+  shouldShowClearIcon = false,
+  shouldShowCenteredContent = false,
+  size = InputSize.Medium,
+  type = 'text',
+  value,
+  shouldUseAutoFocus = false,
+  isInvalid = false,
+  shouldPreventPlaceholderAnimation = false,
+  id
+}, ref) => {
+  var _rightElement$props;
+  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
+  const [placeholderWidth, setPlaceholderWidth] = (0, _react.useState)(0);
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const theme = (0, _styledComponents.useTheme)();
+  const inputRef = (0, _react.useRef)(null);
+  const placeholderRef = (0, _react.useRef)(null);
+  const placeholderSize = (0, _useElementSize.useElementSize)(placeholderRef);
+  (0, _react.useEffect)(() => {
+    if (placeholderSize && shouldShowOnlyBottomBorder) {
+      setPlaceholderWidth(placeholderSize.width + 5);
+    }
+  }, [placeholderSize, shouldShowOnlyBottomBorder]);
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const handleClearIconClick = (0, _react.useCallback)(() => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      setHasValue(false);
+      if (typeof onChange === 'function') {
+        onChange({
+          target: inputRef.current
+        });
+      }
+    }
+  }, [onChange]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
+  const handleInputFieldChange = (0, _react.useCallback)(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    }
+  }), []);
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  const labelPosition = (0, _react.useMemo)(() => {
+    if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
+      return shouldShowOnlyBottomBorder ? {
+        right: 3,
+        top: -1.5
+      } : {
+        bottom: size === InputSize.Small ? -4 : -10,
+        right: -6
+      };
+    }
+    return {
+      left: -1
+    };
+  }, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
+  return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
+    className: "beta-chayns-input",
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
+    $shouldChangeColor: shouldChangeColor,
+    $isInvalid: isInvalid,
+    $shouldRoundRightCorners: shouldShowBorder,
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size
+  }, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    $placeholderWidth: placeholderWidth,
+    id: id,
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    onPaste: onPaste,
+    ref: inputRef,
+    type: type,
+    value: value,
+    autoFocus: shouldUseAutoFocus,
+    inputMode: inputMode,
+    $isInvalid: isInvalid,
+    $shouldShowCenteredContent: shouldShowCenteredContent
+  }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabelWrapper, {
+    animate: shouldPreventPlaceholderAnimation ? {
+      opacity: hasValue ? 0 : 1
+    } : {
+      fontSize: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? '9px' : `${Number(theme.fontSize)}px`
+    },
+    initial: false,
+    layout: true,
+    ref: placeholderRef,
+    style: {
+      ...labelPosition
+    },
+    transition: {
+      type: 'tween',
+      duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size,
+    animate: {
+      opacity: hasValue ? 1 : 0
+    },
+    initial: false,
+    onClick: handleClearIconClick,
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-times'],
+    color: isInvalid ? theme.wrong : undefined
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement));
+});
+Input.displayName = 'Input';
+var _default = exports.default = Input;
+//# sourceMappingURL=Input.js.map