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

package/lib/cjs/components/filter-buttons/FilterButtons.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _filterButtons = require("../../types/filterButtons");
+var _FilterButton = _interopRequireDefault(require("./filter-button/FilterButton"));
+var _FilterButtons = require("./FilterButtons.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FilterButtons = ({
+  allCount,
+  selectedItemIds,
+  onSelect,
+  items,
+  shouldCalcCountForAll = false,
+  size = _filterButtons.FilterButtonSize.Normal
+}) => {
+  const [selectedIds, setSelectedIds] = (0, _react.useState)(['all']);
+
+  /**
+   * This function set the selectedItemKey
+   */
+  (0, _react.useEffect)(() => {
+    if (selectedItemIds) {
+      setSelectedIds(selectedItemIds);
+    }
+  }, [selectedItemIds]);
+
+  /**
+   * Function to update the selected items
+   */
+  const handleSelect = (0, _react.useCallback)(id => {
+    let newIds;
+    if (id === 'all') {
+      newIds = selectedIds.includes('all') ? ['all'] : [];
+    } else {
+      newIds = selectedIds.includes(id) ? selectedIds.filter(filteredId => filteredId !== id) : [...selectedIds.filter(filteredId => filteredId !== 'all'), id];
+    }
+    if (newIds.length === 0) {
+      newIds = ['all'];
+    }
+    setSelectedIds(newIds);
+    if (typeof onSelect === 'function') {
+      onSelect(newIds.filter(selectedId => selectedId !== 'all'));
+    }
+  }, [onSelect, selectedIds]);
+  const reactItems = (0, _react.useMemo)(() => {
+    if (items.length === 0) {
+      return null;
+    }
+    let allButtonCount = allCount;
+    if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {
+      allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);
+    }
+    const array = [/*#__PURE__*/_react.default.createElement(_FilterButton.default, {
+      count: allButtonCount,
+      id: "all",
+      key: "all",
+      onSelect: handleSelect,
+      isSelected: selectedIds.includes('all') || Array.isArray(selectedIds) && selectedIds.length === 0,
+      shape: _filterButtons.FilterButtonItemShape.Rectangular,
+      size: size,
+      text: "Alle"
+    })];
+    items.forEach(({
+      icons,
+      text,
+      color,
+      count,
+      id,
+      isDisabled
+    }) => {
+      array.push(/*#__PURE__*/_react.default.createElement(_FilterButton.default, {
+        color: color,
+        icons: icons,
+        id: id,
+        key: id,
+        count: count,
+        onSelect: handleSelect,
+        isSelected: selectedIds.includes(id),
+        shape: _filterButtons.FilterButtonItemShape.Round,
+        size: size,
+        text: text,
+        isDisabled: isDisabled
+      }));
+    });
+    return array;
+  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButtons.StyledFilterButton, null, reactItems), [reactItems]);
+};
+FilterButtons.displayName = 'FilterButtons';
+var _default = exports.default = FilterButtons;
+//# sourceMappingURL=FilterButtons.js.map

package/lib/cjs/components/filter-buttons/FilterButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtons.js","names":["_react","_interopRequireWildcard","require","_filterButtons","_FilterButton","_interopRequireDefault","_FilterButtons","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","FilterButtonSize","Normal","selectedIds","setSelectedIds","useState","useEffect","handleSelect","useCallback","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","useMemo","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","FilterButtonItemShape","Rectangular","text","forEach","icons","color","isDisabled","push","Round","StyledFilterButton","displayName","_default","exports"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n    FilterButtonItemShape,\n    FilterButtonSize,\n    IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n    /**\n     * The number that should be displayed as count in the \"all\" button.\n     */\n    allCount?: number;\n    /**\n     * The items that should be displayed.\n     */\n    items: IFilterButtonItem[];\n    /**\n     * A function that should be executed when an item is selected.\n     */\n    onSelect?: (keys: string[]) => void;\n    /**\n     * The keys of items that should be selected.\n     */\n    selectedItemIds?: string[];\n    /**\n     * If true, the count of all items will be shown in the \"all\" button.\n     */\n    shouldCalcCountForAll?: boolean;\n    /**\n     * The size auf the filter buttons. Use the FilterButtonSize enum.\n     */\n    size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n    allCount,\n    selectedItemIds,\n    onSelect,\n    items,\n    shouldCalcCountForAll = false,\n    size = FilterButtonSize.Normal,\n}) => {\n    const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n    /**\n     * This function set the selectedItemKey\n     */\n    useEffect(() => {\n        if (selectedItemIds) {\n            setSelectedIds(selectedItemIds);\n        }\n    }, [selectedItemIds]);\n\n    /**\n     * Function to update the selected items\n     */\n    const handleSelect = useCallback(\n        (id: string) => {\n            let newIds: string[];\n\n            if (id === 'all') {\n                newIds = selectedIds.includes('all') ? ['all'] : [];\n            } else {\n                newIds = selectedIds.includes(id)\n                    ? selectedIds.filter((filteredId) => filteredId !== id)\n                    : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n            }\n\n            if (newIds.length === 0) {\n                newIds = ['all'];\n            }\n\n            setSelectedIds(newIds);\n\n            if (typeof onSelect === 'function') {\n                onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n            }\n        },\n        [onSelect, selectedIds],\n    );\n\n    const reactItems = useMemo(() => {\n        if (items.length === 0) {\n            return null;\n        }\n\n        let allButtonCount = allCount;\n\n        if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n            allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n        }\n\n        const array: ReactElement[] = [\n            <FilterButton\n                count={allButtonCount}\n                id=\"all\"\n                key=\"all\"\n                onSelect={handleSelect}\n                isSelected={\n                    selectedIds.includes('all') ||\n                    (Array.isArray(selectedIds) && selectedIds.length === 0)\n                }\n                shape={FilterButtonItemShape.Rectangular}\n                size={size}\n                text=\"Alle\"\n            />,\n        ];\n\n        items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n            array.push(\n                <FilterButton\n                    color={color}\n                    icons={icons}\n                    id={id}\n                    key={id}\n                    count={count}\n                    onSelect={handleSelect}\n                    isSelected={selectedIds.includes(id)}\n                    shape={FilterButtonItemShape.Round}\n                    size={size}\n                    text={text}\n                    isDisabled={isDisabled}\n                />,\n            );\n        });\n\n        return array;\n    }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n    return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter-buttons/FilterButtons.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledFilterButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledFilterButton = exports.StyledFilterButton = _styledComponents.default.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+`;
+//# sourceMappingURL=FilterButtons.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtons.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterButton","exports","styled","div"],"sources":["../../../../src/components/filter-buttons/FilterButtons.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFilterButton = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _FilterButton = require("./FilterButton.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FilterButton = ({
+  icons,
+  size,
+  shape,
+  text,
+  color,
+  count,
+  isSelected,
+  id,
+  isDisabled,
+  onSelect
+}) => {
+  const handleClick = (0, _react.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
+    onSelect(id);
+  }, [id, isDisabled, onSelect]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItem, {
+    $isSelected: isSelected,
+    $isDisabled: isDisabled,
+    $size: size,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons,
+    size: 15
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabelText, null, text), typeof count === 'number' && /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabelCount, null, count.toLocaleString())), /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemBorder, {
+    $isSelected: isSelected,
+    $shape: shape,
+    $color: color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.StyledMotionFilterButtonItemBackground, {
+    $isSelected: isSelected,
+    $shape: shape,
+    $color: color
+  })), [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text]);
+};
+FilterButton.displayName = 'FilterButton';
+var _default = exports.default = FilterButton;
+//# sourceMappingURL=FilterButton.js.map

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","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","$isSelected","$isDisabled","$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    isDisabled?: boolean;\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    isDisabled,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        onSelect(id);\n    }, [id, isDisabled, onSelect]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem\n                $isSelected={isSelected}\n                $isDisabled={isDisabled}\n                $size={size}\n                onClick={handleClick}\n            >\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, isDisabled, 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,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabelCount = exports.StyledFilterButtonItemLabel = exports.StyledFilterButtonItemBorder = exports.StyledFilterButtonItem = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _filterButtons = require("../../../types/filterButtons");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
+    position: relative;
+    line-height: 1;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    user-select: none;
+    padding: ${({
+  $size
+}) => $size === _filterButtons.FilterButtonSize.Normal ? '8px 14px' : '4px 8px'};
+
+    display: flex;
+    align-items: center;
+
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? '.6' : '1'};
+
+    &:hover > div:last-child {
+        ${({
+  $isSelected,
+  $isDisabled
+}) => !$isSelected && !$isDisabled && (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)(_react.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":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilterButtonItem","exports","styled","div","$isDisabled","$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 'motion/react';\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<{\n    $size: FilterButtonSize;\n    $isSelected: boolean;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : '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    opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n    &:hover > div:last-child {\n        ${({ $isSelected, $isDisabled }) =>\n            !$isSelected &&\n            !$isDisabled &&\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":"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","ignoreList":[]}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GridImage = require("./GridImage.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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/cjs/components/grouped-image/GroupedImage.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GroupedImage = require("./GroupedImage.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const GroupedImage = ({
+  cornerImage,
+  height = '40px',
+  imageBackground,
+  images,
+  onClick,
+  shouldPreventBackground = false,
+  shouldShowRoundImage = false
+}) => {
+  const hasCornerImage = Boolean(cornerImage);
+  const hasMultipleImages = images.length > 1;
+  const imageSize = (0, _react.useMemo)(() => {
+    if (hasCornerImage) {
+      return hasMultipleImages ? _GroupedImage.ImageSize.GroupedSmall : _GroupedImage.ImageSize.Small;
+    }
+    return hasMultipleImages ? _GroupedImage.ImageSize.Grouped : _GroupedImage.ImageSize.Full;
+  }, [hasCornerImage, hasMultipleImages]);
+  const imageElements = images.slice(0, 2) // Limit to 2 images for grouping
+  .map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
+    $background: imageBackground,
+    $imageSize: imageSize,
+    $isSecondImage: index === 1,
+    $shouldPreventBackground: shouldPreventBackground,
+    $shouldShowRoundImage: shouldShowRoundImage
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: index,
+    src: src
+  }));
+  return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
+    onClick: onClick,
+    $height: height
+  }, imageElements, hasCornerImage && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerImage, {
+    $background: imageBackground,
+    $shouldPreventBackground: shouldPreventBackground,
+    src: cornerImage,
+    key: "corner-image"
+  }));
+};
+GroupedImage.displayName = 'GroupedImage';
+var _default = exports.default = GroupedImage;
+//# sourceMappingURL=GroupedImage.js.map

package/lib/cjs/components/grouped-image/GroupedImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","hasCornerImage","Boolean","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","StyledGroupedImage","$height","StyledCornerImage","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useMemo } from 'react';\nimport {\n    ImageSize,\n    StyledCornerImage,\n    StyledGroupedImage,\n    StyledGroupImageElement,\n} from './GroupedImage.styles';\n\ntype GroupedImageProps = {\n    /**\n     * Optional image to display in the bottom right corner of the grouped image.\n     */\n    cornerImage?: string;\n    /**\n     * Height of the grouped image container.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * Background for the single images.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n     */\n    images: string[];\n    /**\n     * Optional click handler for the grouped image.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Whether to prevent the background of the images from being set.\n     */\n    shouldPreventBackground?: boolean;\n    /**\n     * Whether to show the images in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n    cornerImage,\n    height = '40px',\n    imageBackground,\n    images,\n    onClick,\n    shouldPreventBackground = false,\n    shouldShowRoundImage = false,\n}) => {\n    const hasCornerImage = Boolean(cornerImage);\n    const hasMultipleImages = images.length > 1;\n\n    const imageSize = useMemo(() => {\n        if (hasCornerImage) {\n            return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n        }\n\n        return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n    }, [hasCornerImage, hasMultipleImages]);\n\n    const imageElements = images\n        .slice(0, 2) // Limit to 2 images for grouping\n        .map((src, index) => (\n            <StyledGroupImageElement\n                $background={imageBackground}\n                $imageSize={imageSize}\n                $isSecondImage={index === 1}\n                $shouldPreventBackground={shouldPreventBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n                // eslint-disable-next-line react/no-array-index-key\n                key={index}\n                src={src}\n            />\n        ));\n\n    return (\n        <StyledGroupedImage onClick={onClick} $height={height}>\n            {imageElements}\n            {hasCornerImage && (\n                <StyledCornerImage\n                    $background={imageBackground}\n                    $shouldPreventBackground={shouldPreventBackground}\n                    src={cornerImage}\n                    key=\"corner-image\"\n                />\n            )}\n        </StyledGroupedImage>\n    );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grouped-image/GroupedImage.styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledGroupedImage = exports.StyledGroupImageElement = exports.StyledCornerImage = exports.ImageSize = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.default.div`
+    flex: 0 0 auto;
+    height: ${({
+  $height
+}) => $height};
+    position: relative;
+    width: ${({
+  $height
+}) => $height};
+`;
+let ImageSize = exports.ImageSize = /*#__PURE__*/function (ImageSize) {
+  ImageSize["Full"] = "100%";
+  ImageSize["Small"] = "75%";
+  ImageSize["Grouped"] = "80%";
+  ImageSize["GroupedSmall"] = "65%";
+  return ImageSize;
+}({});
+const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.img`
+    aspect-ratio: 1;
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : '0'};
+    height: ${({
+  $imageSize
+}) => $imageSize};
+    object-fit: cover;
+    position: absolute;
+
+    ${({
+  $imageSize,
+  $isSecondImage
+}) => $isSecondImage ? (0, _styledComponents.css)`
+                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
+                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
+              ` : (0, _styledComponents.css)`
+                  top: 0;
+                  left: 0;
+              `}
+
+    ${({
+  $background,
+  $shouldPreventBackground,
+  theme
+}) => !$shouldPreventBackground && (0, _styledComponents.css)`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `}
+`;
+const StyledCornerImage = exports.StyledCornerImage = _styledComponents.default.img`
+    aspect-ratio: 1;
+    bottom: 0;
+    height: 50%;
+    position: absolute;
+    right: 0;
+
+    ${({
+  $background,
+  $shouldPreventBackground,
+  theme
+}) => !$shouldPreventBackground && (0, _styledComponents.css)`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `}
+`;
+//# sourceMappingURL=GroupedImage.styles.js.map

package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","ImageSize","StyledGroupImageElement","img","$shouldShowRoundImage","$imageSize","$isSecondImage","css","GroupedSmall","$background","$shouldPreventBackground","theme","StyledCornerImage"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height};\n    position: relative;\n    width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n    Full = '100%',\n    Small = '75%',\n    Grouped = '80%',\n    GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $imageSize: ImageSize;\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledGroupImageElement = styled.img<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    height: ${({ $imageSize }) => $imageSize};\n    object-fit: cover;\n    position: absolute;\n\n    ${({ $imageSize, $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: 50%;\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n"],"mappings":"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","ignoreList":[]}