@chayns-components/ranking 5.0.0-beta.1225

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/core.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/core?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the core part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/person-finder
+
+# Yarn
+yarn add @chayns-components/person-finder
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/cjs/components/ranking/Ranking.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Ranking = require("./Ranking.styles");
+var _core = require("@chayns-components/core");
+var _RankingEntry = _interopRequireDefault(require("./ranking-entry/RankingEntry"));
+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 Ranking = ({
+  title = 'Rangliste',
+  entries,
+  onFriendRemove,
+  onFriendAdd,
+  shouldShowOnlyFriends,
+  friendPersonIds,
+  onSearchChange,
+  searchValue,
+  onFriendVisibleChange
+}) => {
+  const content = (0, _react.useMemo)(() => entries.map(({
+    content: entryContent,
+    rank,
+    personId,
+    points,
+    name,
+    icons
+  }) => /*#__PURE__*/_react.default.createElement(_RankingEntry.default, {
+    key: `ranking-entry--${personId}`,
+    rank: rank,
+    personId: personId,
+    name: name,
+    icons: icons,
+    points: points,
+    content: entryContent,
+    onFriendAdd: onFriendAdd,
+    onFriendRemove: onFriendRemove,
+    isFriend: friendPersonIds === null || friendPersonIds === void 0 ? void 0 : friendPersonIds.includes(personId)
+  })), [entries, friendPersonIds, onFriendAdd, onFriendRemove]);
+  const handleSearchChange = (0, _react.useCallback)(event => {
+    if (typeof onSearchChange === 'function') {
+      onSearchChange(event.target.value);
+    }
+  }, [onSearchChange]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Ranking.StyledRanking, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
+    title: title,
+    onSearchChange: handleSearchChange,
+    searchValue: searchValue,
+    rightElement: /*#__PURE__*/_react.default.createElement(_core.Icon, {
+      icons: shouldShowOnlyFriends ? ['fas fa-star'] : ['far fa-star'],
+      size: 15,
+      onClick: onFriendVisibleChange
+    })
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionGroup, null, content))), [content, handleSearchChange, onFriendVisibleChange, searchValue, shouldShowOnlyFriends, title]);
+};
+Ranking.displayName = 'Ranking';
+var _default = exports.default = Ranking;
+//# sourceMappingURL=Ranking.js.map

package/lib/cjs/components/ranking/Ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ranking.js","names":["_react","_interopRequireWildcard","require","_Ranking","_core","_RankingEntry","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Ranking","title","entries","onFriendRemove","onFriendAdd","shouldShowOnlyFriends","friendPersonIds","onSearchChange","searchValue","onFriendVisibleChange","content","useMemo","map","entryContent","rank","personId","points","name","icons","createElement","key","isFriend","includes","handleSearchChange","useCallback","event","target","value","StyledRanking","Accordion","rightElement","Icon","size","onClick","AccordionGroup","displayName","_default","exports"],"sources":["../../../../src/components/ranking/Ranking.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useMemo } from 'react';\nimport { StyledRanking } from './Ranking.styles';\nimport { IRankingEntry } from '../../types/ranking';\nimport { Accordion, AccordionGroup, Icon } from '@chayns-components/core';\nimport RankingEntry from './ranking-entry/RankingEntry';\n\nexport type RankingProps = {\n    /**\n     * Array of ranking entries to be displayed in the ranking list.\n     */\n    entries: IRankingEntry[];\n    /**\n     * Array of personIds that represent the user's friends.\n     */\n    friendPersonIds: string[];\n    /**\n     * Callback function triggered when a friend is added to the friends list.\n     * @param personId - The ID of the person to be added as friend\n     */\n    onFriendAdd?: (personId: string) => void;\n    /**\n     * Callback function triggered when a friend is removed from the friends list.\n     * @param personId - The ID of the person to be removed from friends\n     */\n    onFriendRemove?: (personId: string) => void;\n    /**\n     * Callback function triggered when the visibility of friends is toggled.\n     */\n    onFriendVisibleChange?: () => void;\n    /**\n     * Callback function triggered when the search input value changes.\n     * @param value - The current search input value\n     */\n    onSearchChange?: (value: string) => void;\n    /**\n     * The current value of the search input field.\n     */\n    searchValue?: string;\n    /**\n     * Whether only the friends of the user should be displayed (filtering and fetching the correct data is done by you).\n     */\n    shouldShowOnlyFriends?: boolean;\n    /**\n     * The title of the top Accordion.\n     */\n    title?: string;\n};\n\nconst Ranking: FC<RankingProps> = ({\n    title = 'Rangliste',\n    entries,\n    onFriendRemove,\n    onFriendAdd,\n    shouldShowOnlyFriends,\n    friendPersonIds,\n    onSearchChange,\n    searchValue,\n    onFriendVisibleChange,\n}) => {\n    const content = useMemo(\n        () =>\n            entries.map(({ content: entryContent, rank, personId, points, name, icons }) => (\n                <RankingEntry\n                    key={`ranking-entry--${personId}`}\n                    rank={rank}\n                    personId={personId}\n                    name={name}\n                    icons={icons}\n                    points={points}\n                    content={entryContent}\n                    onFriendAdd={onFriendAdd}\n                    onFriendRemove={onFriendRemove}\n                    isFriend={friendPersonIds?.includes(personId)}\n                />\n            )),\n        [entries, friendPersonIds, onFriendAdd, onFriendRemove],\n    );\n\n    const handleSearchChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (typeof onSearchChange === 'function') {\n                onSearchChange(event.target.value);\n            }\n        },\n        [onSearchChange],\n    );\n\n    return useMemo(\n        () => (\n            <StyledRanking>\n                <Accordion\n                    title={title}\n                    onSearchChange={handleSearchChange}\n                    searchValue={searchValue}\n                    rightElement={\n                        <Icon\n                            icons={shouldShowOnlyFriends ? ['fas fa-star'] : ['far fa-star']}\n                            size={15}\n                            onClick={onFriendVisibleChange}\n                        />\n                    }\n                >\n                    <AccordionGroup>{content}</AccordionGroup>\n                </Accordion>\n            </StyledRanking>\n        ),\n        [\n            content,\n            handleSearchChange,\n            onFriendVisibleChange,\n            searchValue,\n            shouldShowOnlyFriends,\n            title,\n        ],\n    );\n};\n\nRanking.displayName = 'Ranking';\n\nexport default Ranking;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/ranking/Ranking.styles.js

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

package/lib/cjs/components/ranking/Ranking.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ranking.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledRanking","exports","styled","div"],"sources":["../../../../src/components/ranking/Ranking.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledRanking = styled.div``;\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,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/components/ranking/ranking-entry/RankingEntry.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _RankingEntry = require("./RankingEntry.styles");
+var _core = require("@chayns-components/core");
+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 RankingEntry = ({
+  rank,
+  name: fullName,
+  personId,
+  icons,
+  points,
+  isFriend,
+  content,
+  onFriendRemove,
+  onFriendAdd
+}) => {
+  const handleIconClick = (0, _react.useCallback)(() => {
+    if (isFriend && typeof onFriendRemove === 'function') {
+      onFriendRemove(personId);
+    } else if (typeof onFriendAdd === 'function') {
+      onFriendAdd(personId);
+    }
+  }, [isFriend, onFriendAdd, onFriendRemove, personId]);
+  const {
+    title,
+    rightElement
+  } = (0, _react.useMemo)(() => {
+    const titleElement = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("strong", null, rank, ". "), fullName);
+    const rightElements = /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryRightElement, null, /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryRightElementPoints, null, points), icons && /*#__PURE__*/_react.default.createElement(_core.Icon, {
+      icons: icons
+    }), /*#__PURE__*/_react.default.createElement(_core.Icon, {
+      icons: isFriend ? ['fas fa-star'] : ['far fa-star'],
+      size: 15,
+      onClick: handleIconClick
+    }));
+    return {
+      title: titleElement,
+      rightElement: rightElements
+    };
+  }, [handleIconClick, icons, isFriend, fullName, points, rank]);
+  const entryContent = (0, _react.useMemo)(() => {
+    if (!content) return null;
+    return content.map(({
+      name,
+      value,
+      headline,
+      id
+    }) => {
+      if (typeof headline === 'string') {
+        return /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryContentHeadline, {
+          key: id
+        }, headline);
+      }
+      return /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryContentEntry, {
+        key: id
+      }, /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryContentEntryName, null, name), /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryContentEntryValue, null, value));
+    });
+  }, [content]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntry, {
+    $shouldShowLines: !entryContent
+  }, entryContent ? /*#__PURE__*/_react.default.createElement(_core.Accordion, {
+    title: "",
+    titleElement: title,
+    rightElement: rightElement
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionContent, null, /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryContent, null, entryContent))) : /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryElement, null, /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryElementLeft, null, title), /*#__PURE__*/_react.default.createElement(_RankingEntry.StyledRankingEntryElementRight, null, rightElement))), [entryContent, rightElement, title]);
+};
+RankingEntry.displayName = 'RankingEntry';
+var _default = exports.default = RankingEntry;
+//# sourceMappingURL=RankingEntry.js.map

package/lib/cjs/components/ranking/ranking-entry/RankingEntry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingEntry.js","names":["_react","_interopRequireWildcard","require","_RankingEntry","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RankingEntry","rank","name","fullName","personId","icons","points","isFriend","content","onFriendRemove","onFriendAdd","handleIconClick","useCallback","title","rightElement","useMemo","titleElement","createElement","rightElements","StyledRankingEntryRightElement","StyledRankingEntryRightElementPoints","Icon","size","onClick","entryContent","map","value","headline","id","StyledRankingEntryContentHeadline","key","StyledRankingEntryContentEntry","StyledRankingEntryContentEntryName","StyledRankingEntryContentEntryValue","StyledRankingEntry","$shouldShowLines","Accordion","AccordionContent","StyledRankingEntryContent","StyledRankingEntryElement","StyledRankingEntryElementLeft","StyledRankingEntryElementRight","displayName","_default","exports"],"sources":["../../../../../src/components/ranking/ranking-entry/RankingEntry.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport {\n    StyledRankingEntry,\n    StyledRankingEntryContent,\n    StyledRankingEntryContentEntry,\n    StyledRankingEntryContentEntryName,\n    StyledRankingEntryContentEntryValue,\n    StyledRankingEntryContentHeadline,\n    StyledRankingEntryElement,\n    StyledRankingEntryElementLeft,\n    StyledRankingEntryElementRight,\n    StyledRankingEntryRightElement,\n    StyledRankingEntryRightElementPoints,\n} from './RankingEntry.styles';\nimport { Accordion, AccordionContent, Icon } from '@chayns-components/core';\nimport { IRankingEntry, RankingContentEntry, RankingContentHeadline } from '../../../types/ranking';\n\nexport type RankingEntryProps = {\n    onFriendAdd?: (personId: string) => void;\n    onFriendRemove?: (personId: string) => void;\n    isFriend?: boolean;\n    content?: IRankingEntry['content'];\n    rank: IRankingEntry['rank'];\n    personId: IRankingEntry['personId'];\n    points: IRankingEntry['points'];\n    name: IRankingEntry['name'];\n    icons: IRankingEntry['icons'];\n};\n\nconst RankingEntry: FC<RankingEntryProps> = ({\n    rank,\n    name: fullName,\n    personId,\n    icons,\n    points,\n    isFriend,\n    content,\n    onFriendRemove,\n    onFriendAdd,\n}) => {\n    const handleIconClick = useCallback(() => {\n        if (isFriend && typeof onFriendRemove === 'function') {\n            onFriendRemove(personId);\n        } else if (typeof onFriendAdd === 'function') {\n            onFriendAdd(personId);\n        }\n    }, [isFriend, onFriendAdd, onFriendRemove, personId]);\n\n    const { title, rightElement } = useMemo(() => {\n        const titleElement = (\n            <span>\n                <strong>{rank}. </strong>\n                {fullName}\n            </span>\n        );\n\n        const rightElements = (\n            <StyledRankingEntryRightElement>\n                <StyledRankingEntryRightElementPoints>\n                    {points}\n                </StyledRankingEntryRightElementPoints>\n                {icons && <Icon icons={icons} />}\n                <Icon\n                    icons={isFriend ? ['fas fa-star'] : ['far fa-star']}\n                    size={15}\n                    onClick={handleIconClick}\n                />\n            </StyledRankingEntryRightElement>\n        );\n\n        return { title: titleElement, rightElement: rightElements };\n    }, [handleIconClick, icons, isFriend, fullName, points, rank]);\n\n    const entryContent = useMemo(() => {\n        if (!content) return null;\n\n        return (content as (RankingContentHeadline & RankingContentEntry)[]).map(\n            ({ name, value, headline, id }) => {\n                if (typeof headline === 'string') {\n                    return (\n                        <StyledRankingEntryContentHeadline key={id}>\n                            {headline}\n                        </StyledRankingEntryContentHeadline>\n                    );\n                }\n\n                return (\n                    <StyledRankingEntryContentEntry key={id}>\n                        <StyledRankingEntryContentEntryName>\n                            {name}\n                        </StyledRankingEntryContentEntryName>\n                        <StyledRankingEntryContentEntryValue>\n                            {value}\n                        </StyledRankingEntryContentEntryValue>\n                    </StyledRankingEntryContentEntry>\n                );\n            },\n        );\n    }, [content]);\n\n    return useMemo(\n        () => (\n            <StyledRankingEntry $shouldShowLines={!entryContent}>\n                {entryContent ? (\n                    <Accordion title=\"\" titleElement={title} rightElement={rightElement}>\n                        <AccordionContent>\n                            <StyledRankingEntryContent>{entryContent}</StyledRankingEntryContent>\n                        </AccordionContent>\n                    </Accordion>\n                ) : (\n                    <StyledRankingEntryElement>\n                        <StyledRankingEntryElementLeft>{title}</StyledRankingEntryElementLeft>\n                        <StyledRankingEntryElementRight>\n                            {rightElement}\n                        </StyledRankingEntryElementRight>\n                    </StyledRankingEntryElement>\n                )}\n            </StyledRankingEntry>\n        ),\n        [entryContent, rightElement, title],\n    );\n};\n\nRankingEntry.displayName = 'RankingEntry';\n\nexport default RankingEntry;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/ranking/ranking-entry/RankingEntry.styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRankingEntryRightElementPoints = exports.StyledRankingEntryRightElement = exports.StyledRankingEntryElementRight = exports.StyledRankingEntryElementLeft = exports.StyledRankingEntryElement = exports.StyledRankingEntryContentHeadline = exports.StyledRankingEntryContentEntryValue = exports.StyledRankingEntryContentEntryName = exports.StyledRankingEntryContentEntry = exports.StyledRankingEntryContent = exports.StyledRankingEntry = 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 StyledRankingEntry = exports.StyledRankingEntry = _styledComponents.default.div`
+    ${({
+  theme,
+  $shouldShowLines
+}) => theme.accordionLines && $shouldShowLines && (0, _styledComponents.css)`
+            &:not(:last-child) {
+                border-bottom: 1px solid rgba(${theme['headline-rgb']}, 0.5);
+            }
+        `}
+`;
+const StyledRankingEntryElement = exports.StyledRankingEntryElement = _styledComponents.default.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+
+    padding: 4px 6px;
+`;
+const StyledRankingEntryElementLeft = exports.StyledRankingEntryElementLeft = _styledComponents.default.div``;
+const StyledRankingEntryElementRight = exports.StyledRankingEntryElementRight = _styledComponents.default.div``;
+const StyledRankingEntryRightElement = exports.StyledRankingEntryRightElement = _styledComponents.default.div`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+`;
+const StyledRankingEntryRightElementPoints = exports.StyledRankingEntryRightElementPoints = _styledComponents.default.div`
+    line-height: 15px;
+`;
+const StyledRankingEntryContent = exports.StyledRankingEntryContent = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+
+    gap: 8px;
+`;
+const StyledRankingEntryContentHeadline = exports.StyledRankingEntryContentHeadline = _styledComponents.default.div`
+    font-weight: bold;
+    font-size: 80%;
+
+    margin-bottom: -8px;
+`;
+const StyledRankingEntryContentEntry = exports.StyledRankingEntryContentEntry = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+const StyledRankingEntryContentEntryName = exports.StyledRankingEntryContentEntryName = _styledComponents.default.div``;
+const StyledRankingEntryContentEntryValue = exports.StyledRankingEntryContentEntryValue = _styledComponents.default.div``;
+//# sourceMappingURL=RankingEntry.styles.js.map

package/lib/cjs/components/ranking/ranking-entry/RankingEntry.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingEntry.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","StyledRankingEntry","exports","styled","div","theme","$shouldShowLines","accordionLines","css","StyledRankingEntryElement","StyledRankingEntryElementLeft","StyledRankingEntryElementRight","StyledRankingEntryRightElement","StyledRankingEntryRightElementPoints","StyledRankingEntryContent","StyledRankingEntryContentHeadline","StyledRankingEntryContentEntry","StyledRankingEntryContentEntryName","StyledRankingEntryContentEntryValue"],"sources":["../../../../../src/components/ranking/ranking-entry/RankingEntry.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '@chayns-components/core';\n\ntype StyledRankingEntryProps = WithTheme<{\n    $shouldShowLines: boolean;\n}>;\n\nexport const StyledRankingEntry = styled.div<StyledRankingEntryProps>`\n    ${({ theme, $shouldShowLines }) =>\n        theme.accordionLines &&\n        $shouldShowLines &&\n        css`\n            &:not(:last-child) {\n                border-bottom: 1px solid rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}\n`;\n\nexport const StyledRankingEntryElement = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n\n    padding: 4px 6px;\n`;\n\nexport const StyledRankingEntryElementLeft = styled.div``;\n\nexport const StyledRankingEntryElementRight = styled.div``;\n\nexport const StyledRankingEntryRightElement = styled.div`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledRankingEntryRightElementPoints = styled.div`\n    line-height: 15px;\n`;\n\nexport const StyledRankingEntryContent = styled.div`\n    display: flex;\n    flex-direction: column;\n\n    gap: 8px;\n`;\n\nexport const StyledRankingEntryContentHeadline = styled.div`\n    font-weight: bold;\n    font-size: 80%;\n\n    margin-bottom: -8px;\n`;\n\nexport const StyledRankingEntryContentEntry = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n`;\n\nexport const StyledRankingEntryContentEntryName = styled.div``;\n\nexport const StyledRankingEntryContentEntryValue = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOzC,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,MAAM,CAAC;EAAEC,KAAK;EAAEC;AAAiB,CAAC,KAC1BD,KAAK,CAACE,cAAc,IACpBD,gBAAgB,IAChB,IAAAE,qBAAG;AACX;AACA,gDAAgDH,KAAK,CAAC,cAAc,CAAC;AACrE;AACA,SAAS;AACT,CAAC;AAEM,MAAMI,yBAAyB,GAAAP,OAAA,CAAAO,yBAAA,GAAGN,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMM,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACC,GAAG,EAAE;AAElD,MAAMO,8BAA8B,GAAAT,OAAA,CAAAS,8BAAA,GAAGR,yBAAM,CAACC,GAAG,EAAE;AAEnD,MAAMQ,8BAA8B,GAAAV,OAAA,CAAAU,8BAAA,GAAGT,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAEM,MAAMS,oCAAoC,GAAAX,OAAA,CAAAW,oCAAA,GAAGV,yBAAM,CAACC,GAAG;AAC9D;AACA,CAAC;AAEM,MAAMU,yBAAyB,GAAAZ,OAAA,CAAAY,yBAAA,GAAGX,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMW,iCAAiC,GAAAb,OAAA,CAAAa,iCAAA,GAAGZ,yBAAM,CAACC,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMY,8BAA8B,GAAAd,OAAA,CAAAc,8BAAA,GAAGb,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAEM,MAAMa,kCAAkC,GAAAf,OAAA,CAAAe,kCAAA,GAAGd,yBAAM,CAACC,GAAG,EAAE;AAEvD,MAAMc,mCAAmC,GAAAhB,OAAA,CAAAgB,mCAAA,GAAGf,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/components/ranking-overview/RankingOverview.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _RankingOverview = require("./RankingOverview.styles");
+var _core = require("@chayns-components/core");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RankingOverview = ({
+  userRank,
+  totalPlayers,
+  suffix
+}) => /*#__PURE__*/_react.default.createElement(_RankingOverview.StyledRankingOverview, null, /*#__PURE__*/_react.default.createElement(_RankingOverview.StyledRankingOverviewTitle, null, "Platz ", /*#__PURE__*/_react.default.createElement(_core.AnimatedNumber, {
+  value: userRank
+})), /*#__PURE__*/_react.default.createElement(_RankingOverview.StyledRankingOverviewSubtitle, null, suffix, " von ", /*#__PURE__*/_react.default.createElement(_core.AnimatedNumber, {
+  value: totalPlayers
+}), " Mitspielern"));
+RankingOverview.displayName = 'RankingOverview';
+var _default = exports.default = RankingOverview;
+//# sourceMappingURL=RankingOverview.js.map

package/lib/cjs/components/ranking-overview/RankingOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingOverview.js","names":["_react","_interopRequireDefault","require","_RankingOverview","_core","e","__esModule","default","RankingOverview","userRank","totalPlayers","suffix","createElement","StyledRankingOverview","StyledRankingOverviewTitle","AnimatedNumber","value","StyledRankingOverviewSubtitle","displayName","_default","exports"],"sources":["../../../../src/components/ranking-overview/RankingOverview.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledRankingOverview,\n    StyledRankingOverviewSubtitle,\n    StyledRankingOverviewTitle,\n} from './RankingOverview.styles';\nimport { AnimatedNumber } from '@chayns-components/core';\n\nexport type RankingOverviewProps = {\n    /**\n     * A suffix that will be displayed before the total players.\n     */\n    suffix: string;\n    /**\n     * The amount of the total players.\n     */\n    totalPlayers: number;\n    /**\n     * The Rank of the current user.\n     */\n    userRank: number;\n};\n\nconst RankingOverview: FC<RankingOverviewProps> = ({ userRank, totalPlayers, suffix }) => (\n    <StyledRankingOverview>\n        <StyledRankingOverviewTitle>\n            Platz <AnimatedNumber value={userRank} />\n        </StyledRankingOverviewTitle>\n        <StyledRankingOverviewSubtitle>\n            {suffix} von <AnimatedNumber value={totalPlayers} /> Mitspielern\n        </StyledRankingOverviewSubtitle>\n    </StyledRankingOverview>\n);\n\nRankingOverview.displayName = 'RankingOverview';\n\nexport default RankingOverview;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AAAyD,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAiBzD,MAAMG,eAAyC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAO,CAAC,kBACjFX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,qBAAqB,qBAClBb,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAW,0BAA0B,QAAC,QAClB,eAAAd,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,KAAA,CAAAW,cAAc;EAACC,KAAK,EAAEP;AAAS,CAAE,CAChB,CAAC,eAC7BT,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAc,6BAA6B,QACzBN,MAAM,EAAC,OAAK,eAAAX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,KAAA,CAAAW,cAAc;EAACC,KAAK,EAAEN;AAAa,CAAE,CAAC,gBACzB,CACZ,CAC1B;AAEDF,eAAe,CAACU,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEjCC,eAAe","ignoreList":[]}

package/lib/cjs/components/ranking-overview/RankingOverview.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRankingOverviewTitle = exports.StyledRankingOverviewSubtitle = exports.StyledRankingOverview = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledRankingOverview = exports.StyledRankingOverview = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+
+    text-align: center;
+
+    padding: 16px;
+`;
+const StyledRankingOverviewTitle = exports.StyledRankingOverviewTitle = _styledComponents.default.div`
+    font-weight: bold;
+    font-size: 200%;
+`;
+const StyledRankingOverviewSubtitle = exports.StyledRankingOverviewSubtitle = _styledComponents.default.div``;
+//# sourceMappingURL=RankingOverview.styles.js.map

package/lib/cjs/components/ranking-overview/RankingOverview.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingOverview.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledRankingOverview","exports","styled","div","StyledRankingOverviewTitle","StyledRankingOverviewSubtitle"],"sources":["../../../../src/components/ranking-overview/RankingOverview.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledRankingOverview = styled.div`\n    display: flex;\n    flex-direction: column;\n\n    text-align: center;\n\n    padding: 16px;\n`;\n\nexport const StyledRankingOverviewTitle = styled.div`\n    font-weight: bold;\n    font-size: 200%;\n`;\n\nexport const StyledRankingOverviewSubtitle = styled.div``;\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,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAH,OAAA,CAAAG,0BAAA,GAAGF,yBAAM,CAACC,GAAG;AACpD;AACA;AACA,CAAC;AAEM,MAAME,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Ranking", {
+  enumerable: true,
+  get: function () {
+    return _Ranking.default;
+  }
+});
+Object.defineProperty(exports, "RankingOverview", {
+  enumerable: true,
+  get: function () {
+    return _RankingOverview.default;
+  }
+});
+var _Ranking = _interopRequireDefault(require("./components/ranking/Ranking"));
+var _RankingOverview = _interopRequireDefault(require("./components/ranking-overview/RankingOverview"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Ranking","_interopRequireDefault","require","_RankingOverview","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Ranking } from './components/ranking/Ranking';\nexport { default as RankingOverview } from './components/ranking-overview/RankingOverview';\nexport type {\n    IRankingEntry as RankingEntry,\n    RankingContentEntry,\n    RankingContentHeadline,\n    RankingContent,\n} from './types/ranking';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA2F,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/cjs/types/ranking.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ranking.js.map

package/lib/cjs/types/ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranking.js","names":[],"sources":["../../../src/types/ranking.ts"],"sourcesContent":["export interface IRankingEntry {\n    rank: number;\n    name: string;\n    personId: string;\n    points: number;\n    content?: RankingContent[];\n    icons?: string[];\n}\n\nexport type RankingContent = RankingContentHeadline | RankingContentEntry;\n\nexport interface RankingContentHeadline {\n    headline: string;\n    id: string;\n}\n\nexport interface RankingContentEntry {\n    id: string;\n    name: string;\n    value: string;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/ranking/Ranking.js

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledRanking } from './Ranking.styles';
+import { Accordion, AccordionGroup, Icon } from '@chayns-components/core';
+import RankingEntry from './ranking-entry/RankingEntry';
+const Ranking = ({
+  title = 'Rangliste',
+  entries,
+  onFriendRemove,
+  onFriendAdd,
+  shouldShowOnlyFriends,
+  friendPersonIds,
+  onSearchChange,
+  searchValue,
+  onFriendVisibleChange
+}) => {
+  const content = useMemo(() => entries.map(({
+    content: entryContent,
+    rank,
+    personId,
+    points,
+    name,
+    icons
+  }) => /*#__PURE__*/React.createElement(RankingEntry, {
+    key: `ranking-entry--${personId}`,
+    rank: rank,
+    personId: personId,
+    name: name,
+    icons: icons,
+    points: points,
+    content: entryContent,
+    onFriendAdd: onFriendAdd,
+    onFriendRemove: onFriendRemove,
+    isFriend: friendPersonIds?.includes(personId)
+  })), [entries, friendPersonIds, onFriendAdd, onFriendRemove]);
+  const handleSearchChange = useCallback(event => {
+    if (typeof onSearchChange === 'function') {
+      onSearchChange(event.target.value);
+    }
+  }, [onSearchChange]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledRanking, null, /*#__PURE__*/React.createElement(Accordion, {
+    title: title,
+    onSearchChange: handleSearchChange,
+    searchValue: searchValue,
+    rightElement: /*#__PURE__*/React.createElement(Icon, {
+      icons: shouldShowOnlyFriends ? ['fas fa-star'] : ['far fa-star'],
+      size: 15,
+      onClick: onFriendVisibleChange
+    })
+  }, /*#__PURE__*/React.createElement(AccordionGroup, null, content))), [content, handleSearchChange, onFriendVisibleChange, searchValue, shouldShowOnlyFriends, title]);
+};
+Ranking.displayName = 'Ranking';
+export default Ranking;
+//# sourceMappingURL=Ranking.js.map

package/lib/esm/components/ranking/Ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ranking.js","names":["React","useCallback","useMemo","StyledRanking","Accordion","AccordionGroup","Icon","RankingEntry","Ranking","title","entries","onFriendRemove","onFriendAdd","shouldShowOnlyFriends","friendPersonIds","onSearchChange","searchValue","onFriendVisibleChange","content","map","entryContent","rank","personId","points","name","icons","createElement","key","isFriend","includes","handleSearchChange","event","target","value","rightElement","size","onClick","displayName"],"sources":["../../../../src/components/ranking/Ranking.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useMemo } from 'react';\nimport { StyledRanking } from './Ranking.styles';\nimport { IRankingEntry } from '../../types/ranking';\nimport { Accordion, AccordionGroup, Icon } from '@chayns-components/core';\nimport RankingEntry from './ranking-entry/RankingEntry';\n\nexport type RankingProps = {\n    /**\n     * Array of ranking entries to be displayed in the ranking list.\n     */\n    entries: IRankingEntry[];\n    /**\n     * Array of personIds that represent the user's friends.\n     */\n    friendPersonIds: string[];\n    /**\n     * Callback function triggered when a friend is added to the friends list.\n     * @param personId - The ID of the person to be added as friend\n     */\n    onFriendAdd?: (personId: string) => void;\n    /**\n     * Callback function triggered when a friend is removed from the friends list.\n     * @param personId - The ID of the person to be removed from friends\n     */\n    onFriendRemove?: (personId: string) => void;\n    /**\n     * Callback function triggered when the visibility of friends is toggled.\n     */\n    onFriendVisibleChange?: () => void;\n    /**\n     * Callback function triggered when the search input value changes.\n     * @param value - The current search input value\n     */\n    onSearchChange?: (value: string) => void;\n    /**\n     * The current value of the search input field.\n     */\n    searchValue?: string;\n    /**\n     * Whether only the friends of the user should be displayed (filtering and fetching the correct data is done by you).\n     */\n    shouldShowOnlyFriends?: boolean;\n    /**\n     * The title of the top Accordion.\n     */\n    title?: string;\n};\n\nconst Ranking: FC<RankingProps> = ({\n    title = 'Rangliste',\n    entries,\n    onFriendRemove,\n    onFriendAdd,\n    shouldShowOnlyFriends,\n    friendPersonIds,\n    onSearchChange,\n    searchValue,\n    onFriendVisibleChange,\n}) => {\n    const content = useMemo(\n        () =>\n            entries.map(({ content: entryContent, rank, personId, points, name, icons }) => (\n                <RankingEntry\n                    key={`ranking-entry--${personId}`}\n                    rank={rank}\n                    personId={personId}\n                    name={name}\n                    icons={icons}\n                    points={points}\n                    content={entryContent}\n                    onFriendAdd={onFriendAdd}\n                    onFriendRemove={onFriendRemove}\n                    isFriend={friendPersonIds?.includes(personId)}\n                />\n            )),\n        [entries, friendPersonIds, onFriendAdd, onFriendRemove],\n    );\n\n    const handleSearchChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (typeof onSearchChange === 'function') {\n                onSearchChange(event.target.value);\n            }\n        },\n        [onSearchChange],\n    );\n\n    return useMemo(\n        () => (\n            <StyledRanking>\n                <Accordion\n                    title={title}\n                    onSearchChange={handleSearchChange}\n                    searchValue={searchValue}\n                    rightElement={\n                        <Icon\n                            icons={shouldShowOnlyFriends ? ['fas fa-star'] : ['far fa-star']}\n                            size={15}\n                            onClick={onFriendVisibleChange}\n                        />\n                    }\n                >\n                    <AccordionGroup>{content}</AccordionGroup>\n                </Accordion>\n            </StyledRanking>\n        ),\n        [\n            content,\n            handleSearchChange,\n            onFriendVisibleChange,\n            searchValue,\n            shouldShowOnlyFriends,\n            title,\n        ],\n    );\n};\n\nRanking.displayName = 'Ranking';\n\nexport default Ranking;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAqBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACpE,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,SAAS,EAAEC,cAAc,EAAEC,IAAI,QAAQ,yBAAyB;AACzE,OAAOC,YAAY,MAAM,8BAA8B;AA4CvD,MAAMC,OAAyB,GAAGA,CAAC;EAC/BC,KAAK,GAAG,WAAW;EACnBC,OAAO;EACPC,cAAc;EACdC,WAAW;EACXC,qBAAqB;EACrBC,eAAe;EACfC,cAAc;EACdC,WAAW;EACXC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGhB,OAAO,CACnB,MACIQ,OAAO,CAACS,GAAG,CAAC,CAAC;IAAED,OAAO,EAAEE,YAAY;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,kBACvEzB,KAAA,CAAA0B,aAAA,CAACnB,YAAY;IACToB,GAAG,EAAE,kBAAkBL,QAAQ,EAAG;IAClCD,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBE,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA,MAAO;IACfL,OAAO,EAAEE,YAAa;IACtBR,WAAW,EAAEA,WAAY;IACzBD,cAAc,EAAEA,cAAe;IAC/BiB,QAAQ,EAAEd,eAAe,EAAEe,QAAQ,CAACP,QAAQ;EAAE,CACjD,CACJ,CAAC,EACN,CAACZ,OAAO,EAAEI,eAAe,EAAEF,WAAW,EAAED,cAAc,CAC1D,CAAC;EAED,MAAMmB,kBAAkB,GAAG7B,WAAW,CACjC8B,KAAoC,IAAK;IACtC,IAAI,OAAOhB,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACgB,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;IACtC;EACJ,CAAC,EACD,CAAClB,cAAc,CACnB,CAAC;EAED,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAA0B,aAAA,CAACvB,aAAa,qBACVH,KAAA,CAAA0B,aAAA,CAACtB,SAAS;IACNK,KAAK,EAAEA,KAAM;IACbM,cAAc,EAAEe,kBAAmB;IACnCd,WAAW,EAAEA,WAAY;IACzBkB,YAAY,eACRlC,KAAA,CAAA0B,aAAA,CAACpB,IAAI;MACDmB,KAAK,EAAEZ,qBAAqB,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,aAAa,CAAE;MACjEsB,IAAI,EAAE,EAAG;MACTC,OAAO,EAAEnB;IAAsB,CAClC;EACJ,gBAEDjB,KAAA,CAAA0B,aAAA,CAACrB,cAAc,QAAEa,OAAwB,CAClC,CACA,CAClB,EACD,CACIA,OAAO,EACPY,kBAAkB,EAClBb,qBAAqB,EACrBD,WAAW,EACXH,qBAAqB,EACrBJ,KAAK,CAEb,CAAC;AACL,CAAC;AAEDD,OAAO,CAAC6B,WAAW,GAAG,SAAS;AAE/B,eAAe7B,OAAO","ignoreList":[]}

package/lib/esm/components/ranking/Ranking.styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+export const StyledRanking = styled.div``;
+//# sourceMappingURL=Ranking.styles.js.map

package/lib/esm/components/ranking/Ranking.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ranking.styles.js","names":["styled","StyledRanking","div"],"sources":["../../../../src/components/ranking/Ranking.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledRanking = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}

package/lib/esm/components/ranking/ranking-entry/RankingEntry.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledRankingEntry, StyledRankingEntryContent, StyledRankingEntryContentEntry, StyledRankingEntryContentEntryName, StyledRankingEntryContentEntryValue, StyledRankingEntryContentHeadline, StyledRankingEntryElement, StyledRankingEntryElementLeft, StyledRankingEntryElementRight, StyledRankingEntryRightElement, StyledRankingEntryRightElementPoints } from './RankingEntry.styles';
+import { Accordion, AccordionContent, Icon } from '@chayns-components/core';
+const RankingEntry = ({
+  rank,
+  name: fullName,
+  personId,
+  icons,
+  points,
+  isFriend,
+  content,
+  onFriendRemove,
+  onFriendAdd
+}) => {
+  const handleIconClick = useCallback(() => {
+    if (isFriend && typeof onFriendRemove === 'function') {
+      onFriendRemove(personId);
+    } else if (typeof onFriendAdd === 'function') {
+      onFriendAdd(personId);
+    }
+  }, [isFriend, onFriendAdd, onFriendRemove, personId]);
+  const {
+    title,
+    rightElement
+  } = useMemo(() => {
+    const titleElement = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, rank, ". "), fullName);
+    const rightElements = /*#__PURE__*/React.createElement(StyledRankingEntryRightElement, null, /*#__PURE__*/React.createElement(StyledRankingEntryRightElementPoints, null, points), icons && /*#__PURE__*/React.createElement(Icon, {
+      icons: icons
+    }), /*#__PURE__*/React.createElement(Icon, {
+      icons: isFriend ? ['fas fa-star'] : ['far fa-star'],
+      size: 15,
+      onClick: handleIconClick
+    }));
+    return {
+      title: titleElement,
+      rightElement: rightElements
+    };
+  }, [handleIconClick, icons, isFriend, fullName, points, rank]);
+  const entryContent = useMemo(() => {
+    if (!content) return null;
+    return content.map(({
+      name,
+      value,
+      headline,
+      id
+    }) => {
+      if (typeof headline === 'string') {
+        return /*#__PURE__*/React.createElement(StyledRankingEntryContentHeadline, {
+          key: id
+        }, headline);
+      }
+      return /*#__PURE__*/React.createElement(StyledRankingEntryContentEntry, {
+        key: id
+      }, /*#__PURE__*/React.createElement(StyledRankingEntryContentEntryName, null, name), /*#__PURE__*/React.createElement(StyledRankingEntryContentEntryValue, null, value));
+    });
+  }, [content]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledRankingEntry, {
+    $shouldShowLines: !entryContent
+  }, entryContent ? /*#__PURE__*/React.createElement(Accordion, {
+    title: "",
+    titleElement: title,
+    rightElement: rightElement
+  }, /*#__PURE__*/React.createElement(AccordionContent, null, /*#__PURE__*/React.createElement(StyledRankingEntryContent, null, entryContent))) : /*#__PURE__*/React.createElement(StyledRankingEntryElement, null, /*#__PURE__*/React.createElement(StyledRankingEntryElementLeft, null, title), /*#__PURE__*/React.createElement(StyledRankingEntryElementRight, null, rightElement))), [entryContent, rightElement, title]);
+};
+RankingEntry.displayName = 'RankingEntry';
+export default RankingEntry;
+//# sourceMappingURL=RankingEntry.js.map

package/lib/esm/components/ranking/ranking-entry/RankingEntry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingEntry.js","names":["React","useCallback","useMemo","StyledRankingEntry","StyledRankingEntryContent","StyledRankingEntryContentEntry","StyledRankingEntryContentEntryName","StyledRankingEntryContentEntryValue","StyledRankingEntryContentHeadline","StyledRankingEntryElement","StyledRankingEntryElementLeft","StyledRankingEntryElementRight","StyledRankingEntryRightElement","StyledRankingEntryRightElementPoints","Accordion","AccordionContent","Icon","RankingEntry","rank","name","fullName","personId","icons","points","isFriend","content","onFriendRemove","onFriendAdd","handleIconClick","title","rightElement","titleElement","createElement","rightElements","size","onClick","entryContent","map","value","headline","id","key","$shouldShowLines","displayName"],"sources":["../../../../../src/components/ranking/ranking-entry/RankingEntry.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport {\n    StyledRankingEntry,\n    StyledRankingEntryContent,\n    StyledRankingEntryContentEntry,\n    StyledRankingEntryContentEntryName,\n    StyledRankingEntryContentEntryValue,\n    StyledRankingEntryContentHeadline,\n    StyledRankingEntryElement,\n    StyledRankingEntryElementLeft,\n    StyledRankingEntryElementRight,\n    StyledRankingEntryRightElement,\n    StyledRankingEntryRightElementPoints,\n} from './RankingEntry.styles';\nimport { Accordion, AccordionContent, Icon } from '@chayns-components/core';\nimport { IRankingEntry, RankingContentEntry, RankingContentHeadline } from '../../../types/ranking';\n\nexport type RankingEntryProps = {\n    onFriendAdd?: (personId: string) => void;\n    onFriendRemove?: (personId: string) => void;\n    isFriend?: boolean;\n    content?: IRankingEntry['content'];\n    rank: IRankingEntry['rank'];\n    personId: IRankingEntry['personId'];\n    points: IRankingEntry['points'];\n    name: IRankingEntry['name'];\n    icons: IRankingEntry['icons'];\n};\n\nconst RankingEntry: FC<RankingEntryProps> = ({\n    rank,\n    name: fullName,\n    personId,\n    icons,\n    points,\n    isFriend,\n    content,\n    onFriendRemove,\n    onFriendAdd,\n}) => {\n    const handleIconClick = useCallback(() => {\n        if (isFriend && typeof onFriendRemove === 'function') {\n            onFriendRemove(personId);\n        } else if (typeof onFriendAdd === 'function') {\n            onFriendAdd(personId);\n        }\n    }, [isFriend, onFriendAdd, onFriendRemove, personId]);\n\n    const { title, rightElement } = useMemo(() => {\n        const titleElement = (\n            <span>\n                <strong>{rank}. </strong>\n                {fullName}\n            </span>\n        );\n\n        const rightElements = (\n            <StyledRankingEntryRightElement>\n                <StyledRankingEntryRightElementPoints>\n                    {points}\n                </StyledRankingEntryRightElementPoints>\n                {icons && <Icon icons={icons} />}\n                <Icon\n                    icons={isFriend ? ['fas fa-star'] : ['far fa-star']}\n                    size={15}\n                    onClick={handleIconClick}\n                />\n            </StyledRankingEntryRightElement>\n        );\n\n        return { title: titleElement, rightElement: rightElements };\n    }, [handleIconClick, icons, isFriend, fullName, points, rank]);\n\n    const entryContent = useMemo(() => {\n        if (!content) return null;\n\n        return (content as (RankingContentHeadline & RankingContentEntry)[]).map(\n            ({ name, value, headline, id }) => {\n                if (typeof headline === 'string') {\n                    return (\n                        <StyledRankingEntryContentHeadline key={id}>\n                            {headline}\n                        </StyledRankingEntryContentHeadline>\n                    );\n                }\n\n                return (\n                    <StyledRankingEntryContentEntry key={id}>\n                        <StyledRankingEntryContentEntryName>\n                            {name}\n                        </StyledRankingEntryContentEntryName>\n                        <StyledRankingEntryContentEntryValue>\n                            {value}\n                        </StyledRankingEntryContentEntryValue>\n                    </StyledRankingEntryContentEntry>\n                );\n            },\n        );\n    }, [content]);\n\n    return useMemo(\n        () => (\n            <StyledRankingEntry $shouldShowLines={!entryContent}>\n                {entryContent ? (\n                    <Accordion title=\"\" titleElement={title} rightElement={rightElement}>\n                        <AccordionContent>\n                            <StyledRankingEntryContent>{entryContent}</StyledRankingEntryContent>\n                        </AccordionContent>\n                    </Accordion>\n                ) : (\n                    <StyledRankingEntryElement>\n                        <StyledRankingEntryElementLeft>{title}</StyledRankingEntryElementLeft>\n                        <StyledRankingEntryElementRight>\n                            {rightElement}\n                        </StyledRankingEntryElementRight>\n                    </StyledRankingEntryElement>\n                )}\n            </StyledRankingEntry>\n        ),\n        [entryContent, rightElement, title],\n    );\n};\n\nRankingEntry.displayName = 'RankingEntry';\n\nexport default RankingEntry;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/ranking/ranking-entry/RankingEntry.styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+export const StyledRankingEntry = styled.div`
+    ${({
+  theme,
+  $shouldShowLines
+}) => theme.accordionLines && $shouldShowLines && css`
+            &:not(:last-child) {
+                border-bottom: 1px solid rgba(${theme['headline-rgb']}, 0.5);
+            }
+        `}
+`;
+export const StyledRankingEntryElement = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+
+    padding: 4px 6px;
+`;
+export const StyledRankingEntryElementLeft = styled.div``;
+export const StyledRankingEntryElementRight = styled.div``;
+export const StyledRankingEntryRightElement = styled.div`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+`;
+export const StyledRankingEntryRightElementPoints = styled.div`
+    line-height: 15px;
+`;
+export const StyledRankingEntryContent = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    gap: 8px;
+`;
+export const StyledRankingEntryContentHeadline = styled.div`
+    font-weight: bold;
+    font-size: 80%;
+
+    margin-bottom: -8px;
+`;
+export const StyledRankingEntryContentEntry = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+export const StyledRankingEntryContentEntryName = styled.div``;
+export const StyledRankingEntryContentEntryValue = styled.div``;
+//# sourceMappingURL=RankingEntry.styles.js.map

package/lib/esm/components/ranking/ranking-entry/RankingEntry.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingEntry.styles.js","names":["styled","css","StyledRankingEntry","div","theme","$shouldShowLines","accordionLines","StyledRankingEntryElement","StyledRankingEntryElementLeft","StyledRankingEntryElementRight","StyledRankingEntryRightElement","StyledRankingEntryRightElementPoints","StyledRankingEntryContent","StyledRankingEntryContentHeadline","StyledRankingEntryContentEntry","StyledRankingEntryContentEntryName","StyledRankingEntryContentEntryValue"],"sources":["../../../../../src/components/ranking/ranking-entry/RankingEntry.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '@chayns-components/core';\n\ntype StyledRankingEntryProps = WithTheme<{\n    $shouldShowLines: boolean;\n}>;\n\nexport const StyledRankingEntry = styled.div<StyledRankingEntryProps>`\n    ${({ theme, $shouldShowLines }) =>\n        theme.accordionLines &&\n        $shouldShowLines &&\n        css`\n            &:not(:last-child) {\n                border-bottom: 1px solid rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}\n`;\n\nexport const StyledRankingEntryElement = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n\n    padding: 4px 6px;\n`;\n\nexport const StyledRankingEntryElementLeft = styled.div``;\n\nexport const StyledRankingEntryElementRight = styled.div``;\n\nexport const StyledRankingEntryRightElement = styled.div`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledRankingEntryRightElementPoints = styled.div`\n    line-height: 15px;\n`;\n\nexport const StyledRankingEntryContent = styled.div`\n    display: flex;\n    flex-direction: column;\n\n    gap: 8px;\n`;\n\nexport const StyledRankingEntryContentHeadline = styled.div`\n    font-weight: bold;\n    font-size: 80%;\n\n    margin-bottom: -8px;\n`;\n\nexport const StyledRankingEntryContentEntry = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n`;\n\nexport const StyledRankingEntryContentEntryName = styled.div``;\n\nexport const StyledRankingEntryContentEntryValue = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE,MAAM,CAAC;EAAEC,KAAK;EAAEC;AAAiB,CAAC,KAC1BD,KAAK,CAACE,cAAc,IACpBD,gBAAgB,IAChBJ,GAAG;AACX;AACA,gDAAgDG,KAAK,CAAC,cAAc,CAAC;AACrE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,yBAAyB,GAAGP,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,6BAA6B,GAAGR,MAAM,CAACG,GAAG,EAAE;AAEzD,OAAO,MAAMM,8BAA8B,GAAGT,MAAM,CAACG,GAAG,EAAE;AAE1D,OAAO,MAAMO,8BAA8B,GAAGV,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,oCAAoC,GAAGX,MAAM,CAACG,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGb,MAAM,CAACG,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMW,8BAA8B,GAAGd,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,kCAAkC,GAAGf,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMa,mCAAmC,GAAGhB,MAAM,CAACG,GAAG,EAAE","ignoreList":[]}

package/lib/esm/components/ranking-overview/RankingOverview.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyledRankingOverview, StyledRankingOverviewSubtitle, StyledRankingOverviewTitle } from './RankingOverview.styles';
+import { AnimatedNumber } from '@chayns-components/core';
+const RankingOverview = ({
+  userRank,
+  totalPlayers,
+  suffix
+}) => /*#__PURE__*/React.createElement(StyledRankingOverview, null, /*#__PURE__*/React.createElement(StyledRankingOverviewTitle, null, "Platz ", /*#__PURE__*/React.createElement(AnimatedNumber, {
+  value: userRank
+})), /*#__PURE__*/React.createElement(StyledRankingOverviewSubtitle, null, suffix, " von ", /*#__PURE__*/React.createElement(AnimatedNumber, {
+  value: totalPlayers
+}), " Mitspielern"));
+RankingOverview.displayName = 'RankingOverview';
+export default RankingOverview;
+//# sourceMappingURL=RankingOverview.js.map

package/lib/esm/components/ranking-overview/RankingOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingOverview.js","names":["React","StyledRankingOverview","StyledRankingOverviewSubtitle","StyledRankingOverviewTitle","AnimatedNumber","RankingOverview","userRank","totalPlayers","suffix","createElement","value","displayName"],"sources":["../../../../src/components/ranking-overview/RankingOverview.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledRankingOverview,\n    StyledRankingOverviewSubtitle,\n    StyledRankingOverviewTitle,\n} from './RankingOverview.styles';\nimport { AnimatedNumber } from '@chayns-components/core';\n\nexport type RankingOverviewProps = {\n    /**\n     * A suffix that will be displayed before the total players.\n     */\n    suffix: string;\n    /**\n     * The amount of the total players.\n     */\n    totalPlayers: number;\n    /**\n     * The Rank of the current user.\n     */\n    userRank: number;\n};\n\nconst RankingOverview: FC<RankingOverviewProps> = ({ userRank, totalPlayers, suffix }) => (\n    <StyledRankingOverview>\n        <StyledRankingOverviewTitle>\n            Platz <AnimatedNumber value={userRank} />\n        </StyledRankingOverviewTitle>\n        <StyledRankingOverviewSubtitle>\n            {suffix} von <AnimatedNumber value={totalPlayers} /> Mitspielern\n        </StyledRankingOverviewSubtitle>\n    </StyledRankingOverview>\n);\n\nRankingOverview.displayName = 'RankingOverview';\n\nexport default RankingOverview;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,qBAAqB,EACrBC,6BAA6B,EAC7BC,0BAA0B,QACvB,0BAA0B;AACjC,SAASC,cAAc,QAAQ,yBAAyB;AAiBxD,MAAMC,eAAyC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAO,CAAC,kBACjFR,KAAA,CAAAS,aAAA,CAACR,qBAAqB,qBAClBD,KAAA,CAAAS,aAAA,CAACN,0BAA0B,QAAC,QAClB,eAAAH,KAAA,CAAAS,aAAA,CAACL,cAAc;EAACM,KAAK,EAAEJ;AAAS,CAAE,CAChB,CAAC,eAC7BN,KAAA,CAAAS,aAAA,CAACP,6BAA6B,QACzBM,MAAM,EAAC,OAAK,eAAAR,KAAA,CAAAS,aAAA,CAACL,cAAc;EAACM,KAAK,EAAEH;AAAa,CAAE,CAAC,gBACzB,CACZ,CAC1B;AAEDF,eAAe,CAACM,WAAW,GAAG,iBAAiB;AAE/C,eAAeN,eAAe","ignoreList":[]}

package/lib/esm/components/ranking-overview/RankingOverview.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+export const StyledRankingOverview = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    text-align: center;
+
+    padding: 16px;
+`;
+export const StyledRankingOverviewTitle = styled.div`
+    font-weight: bold;
+    font-size: 200%;
+`;
+export const StyledRankingOverviewSubtitle = styled.div``;
+//# sourceMappingURL=RankingOverview.styles.js.map

package/lib/esm/components/ranking-overview/RankingOverview.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingOverview.styles.js","names":["styled","StyledRankingOverview","div","StyledRankingOverviewTitle","StyledRankingOverviewSubtitle"],"sources":["../../../../src/components/ranking-overview/RankingOverview.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledRankingOverview = styled.div`\n    display: flex;\n    flex-direction: column;\n\n    text-align: center;\n\n    padding: 16px;\n`;\n\nexport const StyledRankingOverviewTitle = styled.div`\n    font-weight: bold;\n    font-size: 200%;\n`;\n\nexport const StyledRankingOverviewSubtitle = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGH,MAAM,CAACE,GAAG;AACpD;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}

package/lib/esm/index.js

@@ -0,0 +1,3 @@
+export { default as Ranking } from './components/ranking/Ranking';
+export { default as RankingOverview } from './components/ranking-overview/RankingOverview';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Ranking","RankingOverview"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Ranking } from './components/ranking/Ranking';\nexport { default as RankingOverview } from './components/ranking-overview/RankingOverview';\nexport type {\n    IRankingEntry as RankingEntry,\n    RankingContentEntry,\n    RankingContentHeadline,\n    RankingContent,\n} from './types/ranking';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,8BAA8B;AACjE,SAASD,OAAO,IAAIE,eAAe,QAAQ,+CAA+C","ignoreList":[]}

package/lib/esm/types/ranking.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ranking.js.map

package/lib/esm/types/ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranking.js","names":[],"sources":["../../../src/types/ranking.ts"],"sourcesContent":["export interface IRankingEntry {\n    rank: number;\n    name: string;\n    personId: string;\n    points: number;\n    content?: RankingContent[];\n    icons?: string[];\n}\n\nexport type RankingContent = RankingContentHeadline | RankingContentEntry;\n\nexport interface RankingContentHeadline {\n    headline: string;\n    id: string;\n}\n\nexport interface RankingContentEntry {\n    id: string;\n    name: string;\n    value: string;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/types/components/ranking/Ranking.d.ts

@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import { IRankingEntry } from '../../types/ranking';
+export type RankingProps = {
+    /**
+     * Array of ranking entries to be displayed in the ranking list.
+     */
+    entries: IRankingEntry[];
+    /**
+     * Array of personIds that represent the user's friends.
+     */
+    friendPersonIds: string[];
+    /**
+     * Callback function triggered when a friend is added to the friends list.
+     * @param personId - The ID of the person to be added as friend
+     */
+    onFriendAdd?: (personId: string) => void;
+    /**
+     * Callback function triggered when a friend is removed from the friends list.
+     * @param personId - The ID of the person to be removed from friends
+     */
+    onFriendRemove?: (personId: string) => void;
+    /**
+     * Callback function triggered when the visibility of friends is toggled.
+     */
+    onFriendVisibleChange?: () => void;
+    /**
+     * Callback function triggered when the search input value changes.
+     * @param value - The current search input value
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * The current value of the search input field.
+     */
+    searchValue?: string;
+    /**
+     * Whether only the friends of the user should be displayed (filtering and fetching the correct data is done by you).
+     */
+    shouldShowOnlyFriends?: boolean;
+    /**
+     * The title of the top Accordion.
+     */
+    title?: string;
+};
+declare const Ranking: FC<RankingProps>;
+export default Ranking;

package/lib/types/components/ranking/Ranking.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledRanking: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/ranking/ranking-entry/RankingEntry.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { IRankingEntry } from '../../../types/ranking';
+export type RankingEntryProps = {
+    onFriendAdd?: (personId: string) => void;
+    onFriendRemove?: (personId: string) => void;
+    isFriend?: boolean;
+    content?: IRankingEntry['content'];
+    rank: IRankingEntry['rank'];
+    personId: IRankingEntry['personId'];
+    points: IRankingEntry['points'];
+    name: IRankingEntry['name'];
+    icons: IRankingEntry['icons'];
+};
+declare const RankingEntry: FC<RankingEntryProps>;
+export default RankingEntry;

package/lib/types/components/ranking/ranking-entry/RankingEntry.styles.d.ts

@@ -0,0 +1,16 @@
+import { WithTheme } from '@chayns-components/core';
+type StyledRankingEntryProps = WithTheme<{
+    $shouldShowLines: boolean;
+}>;
+export declare const StyledRankingEntry: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRankingEntryProps>> & string;
+export declare const StyledRankingEntryElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryElementLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryElementRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryRightElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryRightElementPoints: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryContentHeadline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryContentEntry: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryContentEntryName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingEntryContentEntryValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/lib/types/components/ranking-overview/RankingOverview.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+export type RankingOverviewProps = {
+    /**
+     * A suffix that will be displayed before the total players.
+     */
+    suffix: string;
+    /**
+     * The amount of the total players.
+     */
+    totalPlayers: number;
+    /**
+     * The Rank of the current user.
+     */
+    userRank: number;
+};
+declare const RankingOverview: FC<RankingOverviewProps>;
+export default RankingOverview;

package/lib/types/components/ranking-overview/RankingOverview.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledRankingOverview: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingOverviewTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledRankingOverviewSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Ranking } from './components/ranking/Ranking';
+export { default as RankingOverview } from './components/ranking-overview/RankingOverview';
+export type { IRankingEntry as RankingEntry, RankingContentEntry, RankingContentHeadline, RankingContent, } from './types/ranking';

package/lib/types/types/ranking.d.ts

@@ -0,0 +1,18 @@
+export interface IRankingEntry {
+    rank: number;
+    name: string;
+    personId: string;
+    points: number;
+    content?: RankingContent[];
+    icons?: string[];
+}
+export type RankingContent = RankingContentHeadline | RankingContentEntry;
+export interface RankingContentHeadline {
+    headline: string;
+    id: string;
+}
+export interface RankingContentEntry {
+    id: string;
+    name: string;
+    value: string;
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+    "name": "@chayns-components/ranking",
+    "version": "5.0.0-beta.1225",
+    "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "sideEffects": false,
+    "browserslist": [
+        ">0.5%",
+        "not dead",
+        "not op_mini all",
+        "not IE 11"
+    ],
+    "keywords": [
+        "chayns",
+        "react",
+        "components"
+    ],
+    "author": "Tobit.Software",
+    "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/ranking#readme",
+    "license": "MIT",
+    "types": "lib/types/index.d.ts",
+    "main": "lib/cjs/index.js",
+    "module": "lib/esm/index.js",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "require": "./lib/cjs/index.js",
+            "import": "./lib/esm/index.js"
+        }
+    },
+    "directories": {
+        "lib": "lib",
+        "test": "__tests__"
+    },
+    "files": [
+        "lib"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/TobitSoftware/chayns-components.git"
+    },
+    "scripts": {
+        "build": "npm run build:cjs && npm run build:esm && npm run build:types",
+        "build:types": "tsc",
+        "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "prepublishOnly": "npm run build",
+        "watch:js": "npm run build:esm -- --watch",
+        "link": "npm link && npm run watch:js"
+    },
+    "bugs": {
+        "url": "https://github.com/TobitSoftware/chayns-components/issues"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.28.3",
+        "@babel/core": "^7.28.3",
+        "@babel/preset-env": "^7.28.3",
+        "@babel/preset-react": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
+        "@types/lodash.throttle": "^4.1.9",
+        "@types/react": "^18.3.24",
+        "@types/react-dom": "^18.3.7",
+        "@types/styled-components": "^5.1.34",
+        "@types/uuid": "^10.0.0",
+        "babel-loader": "^9.2.1",
+        "cross-env": "^7.0.3",
+        "lerna": "^8.2.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "styled-components": "^6.1.19",
+        "typescript": "^5.9.2"
+    },
+    "dependencies": {
+        "@chayns-components/core": "^5.0.0-beta.1225"
+    },
+    "peerDependencies": {
+        "chayns-api": ">=2.2.0",
+        "motion": ">=12.4.1",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "styled-components": ">=5.3.11"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "56619e84ba448c2b2a0d770e9ea8805278131a54"
+}