@selfcommunity/react-ui 1.2.13-alpha.1 → 1.2.14-alpha.0

package/lib/esm/components/LeaderboardPositionWidget/LeaderboardPositionWidget.d.ts

@@ -0,0 +1,40 @@
+import { WidgetProps } from '../Widget';
+import { SCLeaderboardEntry } from '@selfcommunity/types';
+export interface LeaderboardPositionWidgetProps extends WidgetProps {
+    position: SCLeaderboardEntry;
+    isLoading?: boolean;
+}
+/**
+ * > API documentation for the Community-JS Leaderboard Position Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a widget showing the current logged user position in the leaderboard.
+ * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardPositionWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardPositionWidget` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardPositionWidget-root|Styles applied to the root element.|
+ |title|.SCLeaderboardPositionWidget-title|Styles applied to the title element.|
+ |user|.SCLeaderboardPositionWidget-user|Styles applied to the user element.|
+ |userAvatar|.SCLeaderboardPositionWidget-user-avatar|Styles applied to the user avatar element.|
+ |userName|.SCLeaderboardPositionWidget-user-name|Styles applied to the username element.|
+ |footer|.SCLeaderboardPositionWidget-footer|Styles applied to the footer element.|
+ |position|.SCLeaderboardPositionWidget-position|Styles applied to the position element.|
+ |score|.SCLeaderboardPositionWidget-score|Styles applied to the score element.|
+ *
+ * @param inProps
+ */
+export default function LeaderboardPositionWidget(inProps: LeaderboardPositionWidgetProps): JSX.Element;

package/lib/esm/components/LeaderboardPositionWidget/LeaderboardPositionWidget.js

@@ -0,0 +1,90 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Avatar, CardContent, Stack, Typography, styled } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Widget from '../Widget';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { Link, SCPreferences, SCRoutes, SCUserContext, useSCPreferenceEnabled, useSCRouting } from '@selfcommunity/react-core';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import LeaderboardPositionWidgetSkeleton from './Skeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    title: `${PREFIX}-title`,
+    user: `${PREFIX}-user`,
+    userAvatar: `${PREFIX}-user-avatar`,
+    userName: `${PREFIX}-user-name`,
+    footer: `${PREFIX}-footer`,
+    position: `${PREFIX}-position`,
+    score: `${PREFIX}-score`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Leaderboard Position Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a widget showing the current logged user position in the leaderboard.
+ * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardPositionWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardPositionWidget` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardPositionWidget-root|Styles applied to the root element.|
+ |title|.SCLeaderboardPositionWidget-title|Styles applied to the title element.|
+ |user|.SCLeaderboardPositionWidget-user|Styles applied to the user element.|
+ |userAvatar|.SCLeaderboardPositionWidget-user-avatar|Styles applied to the user avatar element.|
+ |userName|.SCLeaderboardPositionWidget-user-name|Styles applied to the username element.|
+ |footer|.SCLeaderboardPositionWidget-footer|Styles applied to the footer element.|
+ |position|.SCLeaderboardPositionWidget-position|Styles applied to the position element.|
+ |score|.SCLeaderboardPositionWidget-score|Styles applied to the score element.|
+ *
+ * @param inProps
+ */
+export default function LeaderboardPositionWidget(inProps) {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, position, isLoading = true } = props, rest = __rest(props, ["className", "position", "isLoading"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    const scRoutingContext = useSCRouting();
+    // PREFERENCES
+    const leaderboardsEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    /**
+     * Renders nothing if the user is not authenticated or the leaderboard feature is disabled
+     */
+    if (!scUserContext.user || !leaderboardsEnabled) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    /**
+     * Renders the skeleton while fetching the position data
+     */
+    if (isLoading) {
+        return _jsx(LeaderboardPositionWidgetSkeleton, {});
+    }
+    /**
+     * Renders nothing if there's no position data
+     */
+    if (!position) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.title", defaultMessage: "ui.leaderboardPositionWidget.title" }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: position.user.id }), className: classes.user }, { children: [_jsx(Avatar, { alt: position.user.username, src: position.user.avatar, className: classes.userAvatar }), _jsx(Typography, Object.assign({ variant: "body1", fontWeight: 600, className: classes.userName }, { children: position.user.real_name || position.user.username }))] })), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.position }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.position", defaultMessage: "ui.leaderboardPositionWidget.position", values: { position: position.position } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.score }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.score", defaultMessage: "ui.leaderboardPositionWidget.score", values: { score: position.total_score } }) }))] }))] }) })));
+}

package/lib/esm/components/LeaderboardPositionWidget/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS Leaderboard Position Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardPositionWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardPositionWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardPositionWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function LeaderboardPositionWidgetSkeleton(): JSX.Element;

package/lib/esm/components/LeaderboardPositionWidget/Skeleton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Skeleton, Stack, styled } from '@mui/material';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    header: `${PREFIX}-header`,
+    user: `${PREFIX}-user`,
+    footer: `${PREFIX}-footer`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Leaderboard Position Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardPositionWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardPositionWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardPositionWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function LeaderboardPositionWidgetSkeleton() {
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 28, width: "50%", variant: "rectangular", className: classes.header }), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", className: classes.user }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", width: 40, height: 40 }), _jsx(Skeleton, { animation: "wave", height: 20, width: "60%", variant: "rectangular" })] })), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [_jsx(Skeleton, { animation: "wave", height: 32, width: 40, variant: "rectangular" }), _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "rectangular" })] }))] }) })));
+}

package/lib/esm/components/LeaderboardPositionWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLeaderboardPositionWidget";

package/lib/esm/components/LeaderboardPositionWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCLeaderboardPositionWidget';

package/lib/esm/components/LeaderboardPositionWidget/index.d.ts

@@ -0,0 +1,4 @@
+import LeaderboardPositionWidget, { LeaderboardPositionWidgetProps } from './LeaderboardPositionWidget';
+import LeaderboardPositionWidgetSkeleton from './Skeleton';
+export default LeaderboardPositionWidget;
+export { LeaderboardPositionWidgetProps, LeaderboardPositionWidgetSkeleton };

package/lib/esm/components/LeaderboardPositionWidget/index.js

@@ -0,0 +1,4 @@
+import LeaderboardPositionWidget from './LeaderboardPositionWidget';
+import LeaderboardPositionWidgetSkeleton from './Skeleton';
+export default LeaderboardPositionWidget;
+export { LeaderboardPositionWidgetSkeleton };

package/lib/esm/components/LeaderboardWidget/LeaderboardWidget.d.ts

@@ -0,0 +1,79 @@
+import { WidgetProps } from '../Widget';
+import { SCLeaderboardEntry } from '@selfcommunity/types';
+export type LeaderboardWidgetVariant = 'full' | 'podium';
+export type LeaderboardWidgetPeriod = 'week' | 'month' | 'year';
+export interface LeaderboardWidgetProps extends WidgetProps {
+    /**
+     * The widget mode.
+     * `full` renders the podium and the general ranking list, `podium` renders the podium only.
+     * @default 'full'
+     */
+    mode?: LeaderboardWidgetVariant;
+    /**
+     * The period the podium refers to.
+     * @default 'month'
+     */
+    period?: LeaderboardWidgetPeriod;
+    /**
+     * The leaderboard entries to render. The top 3 entries (by position) are rendered in the podium,
+     * the full list is rendered in the general ranking (for the `full` mode).
+     */
+    entries?: SCLeaderboardEntry[];
+    /**
+     * If true, shows the skeleton in place of the widget content.
+     * @default true
+     */
+    isLoading?: boolean;
+    /**
+     * Callback fired when the user clicks on the "see more" action.
+     */
+    onSeeMoreClick?: () => void;
+}
+/**
+ * > API documentation for the Community-JS Leaderboard Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
+ * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardWidget` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardWidget-root|Styles applied to the root element.|
+ |podiumHeader|.SCLeaderboardWidget-podium-header|Styles applied to the podium header element.|
+ |podiumTitle|.SCLeaderboardWidget-podium-title|Styles applied to the podium title element.|
+ |podium|.SCLeaderboardWidget-podium|Styles applied to the podium element.|
+ |podiumItem|.SCLeaderboardWidget-podium-item|Styles applied to the single podium item.|
+ |podiumCrown|.SCLeaderboardWidget-podium-crown|Styles applied to the crown icon of the first podium item.|
+ |podiumAvatarWrap|.SCLeaderboardWidget-podium-avatar-wrap|Styles applied to the avatar wrapper of the single podium item.|
+ |podiumAvatar|.SCLeaderboardWidget-podium-avatar|Styles applied to the avatar of the single podium item.|
+ |podiumBadge|.SCLeaderboardWidget-podium-badge|Styles applied to the position badge of the single podium item.|
+ |podiumName|.SCLeaderboardWidget-podium-name|Styles applied to the name of the single podium item.|
+ |podiumScore|.SCLeaderboardWidget-podium-score|Styles applied to the score of the single podium item.|
+ |rankingHeader|.SCLeaderboardWidget-ranking-header|Styles applied to the ranking header element.|
+ |rankingTitle|.SCLeaderboardWidget-ranking-title|Styles applied to the ranking title element.|
+ |rankingList|.SCLeaderboardWidget-ranking-list|Styles applied to the ranking list element.|
+ |rankingItem|.SCLeaderboardWidget-ranking-item|Styles applied to the single ranking item.|
+ |rankingItemActive|.SCLeaderboardWidget-ranking-item-active|Styles applied to the single ranking item when it belongs to the logged user.|
+ |rankingPosition|.SCLeaderboardWidget-ranking-position|Styles applied to the position of the single ranking item.|
+ |rankingAvatar|.SCLeaderboardWidget-ranking-avatar|Styles applied to the avatar of the single ranking item.|
+ |rankingName|.SCLeaderboardWidget-ranking-name|Styles applied to the name of the single ranking item.|
+ |rankingScore|.SCLeaderboardWidget-ranking-score|Styles applied to the score of the single ranking item.|
+ |seeMore|.SCLeaderboardWidget-see-more|Styles applied to the "see more" action element.|
+ *
+ * @param inProps
+ */
+export default function LeaderboardWidget(inProps: LeaderboardWidgetProps): JSX.Element;

package/lib/esm/components/LeaderboardWidget/LeaderboardWidget.js

@@ -0,0 +1,121 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Avatar, Box, CardContent, Stack, Typography, styled } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Widget from '../Widget';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import crownIcon from '../../assets/leaderboard/crown';
+import { SCPreferences, SCUserContext, useSCPreferenceEnabled } from '@selfcommunity/react-core';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import LeaderboardWidgetSkeleton from './Skeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    podiumHeader: `${PREFIX}-podium-header`,
+    podiumTitle: `${PREFIX}-podium-title`,
+    podium: `${PREFIX}-podium`,
+    podiumItem: `${PREFIX}-podium-item`,
+    podiumCrown: `${PREFIX}-podium-crown`,
+    podiumAvatarWrap: `${PREFIX}-podium-avatar-wrap`,
+    podiumAvatar: `${PREFIX}-podium-avatar`,
+    podiumBadge: `${PREFIX}-podium-badge`,
+    podiumName: `${PREFIX}-podium-name`,
+    podiumScore: `${PREFIX}-podium-score`,
+    rankingHeader: `${PREFIX}-ranking-header`,
+    rankingTitle: `${PREFIX}-ranking-title`,
+    rankingList: `${PREFIX}-ranking-list`,
+    rankingItem: `${PREFIX}-ranking-item`,
+    rankingItemActive: `${PREFIX}-ranking-item-active`,
+    rankingPosition: `${PREFIX}-ranking-position`,
+    rankingAvatar: `${PREFIX}-ranking-avatar`,
+    rankingName: `${PREFIX}-ranking-name`,
+    rankingScore: `${PREFIX}-ranking-score`,
+    seeMore: `${PREFIX}-see-more`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Leaderboard Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
+ * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardWidget` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardWidget-root|Styles applied to the root element.|
+ |podiumHeader|.SCLeaderboardWidget-podium-header|Styles applied to the podium header element.|
+ |podiumTitle|.SCLeaderboardWidget-podium-title|Styles applied to the podium title element.|
+ |podium|.SCLeaderboardWidget-podium|Styles applied to the podium element.|
+ |podiumItem|.SCLeaderboardWidget-podium-item|Styles applied to the single podium item.|
+ |podiumCrown|.SCLeaderboardWidget-podium-crown|Styles applied to the crown icon of the first podium item.|
+ |podiumAvatarWrap|.SCLeaderboardWidget-podium-avatar-wrap|Styles applied to the avatar wrapper of the single podium item.|
+ |podiumAvatar|.SCLeaderboardWidget-podium-avatar|Styles applied to the avatar of the single podium item.|
+ |podiumBadge|.SCLeaderboardWidget-podium-badge|Styles applied to the position badge of the single podium item.|
+ |podiumName|.SCLeaderboardWidget-podium-name|Styles applied to the name of the single podium item.|
+ |podiumScore|.SCLeaderboardWidget-podium-score|Styles applied to the score of the single podium item.|
+ |rankingHeader|.SCLeaderboardWidget-ranking-header|Styles applied to the ranking header element.|
+ |rankingTitle|.SCLeaderboardWidget-ranking-title|Styles applied to the ranking title element.|
+ |rankingList|.SCLeaderboardWidget-ranking-list|Styles applied to the ranking list element.|
+ |rankingItem|.SCLeaderboardWidget-ranking-item|Styles applied to the single ranking item.|
+ |rankingItemActive|.SCLeaderboardWidget-ranking-item-active|Styles applied to the single ranking item when it belongs to the logged user.|
+ |rankingPosition|.SCLeaderboardWidget-ranking-position|Styles applied to the position of the single ranking item.|
+ |rankingAvatar|.SCLeaderboardWidget-ranking-avatar|Styles applied to the avatar of the single ranking item.|
+ |rankingName|.SCLeaderboardWidget-ranking-name|Styles applied to the name of the single ranking item.|
+ |rankingScore|.SCLeaderboardWidget-ranking-score|Styles applied to the score of the single ranking item.|
+ |seeMore|.SCLeaderboardWidget-see-more|Styles applied to the "see more" action element.|
+ *
+ * @param inProps
+ */
+export default function LeaderboardWidget(inProps) {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, mode = 'full', period = 'month', entries = [], isLoading = true, onSeeMoreClick } = props, rest = __rest(props, ["className", "mode", "period", "entries", "isLoading", "onSeeMoreClick"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // PREFERENCES
+    const leaderboardsEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    /**
+     * Renders nothing if the leaderboard feature is disabled
+     */
+    if (!leaderboardsEnabled) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    /**
+     * Renders the skeleton while the leaderboard data is loading
+     */
+    if (isLoading) {
+        return _jsx(LeaderboardWidgetSkeleton, { mode: mode });
+    }
+    const podium = entries.filter((entry) => entry.position <= 3);
+    /**
+     * Renders nothing if there's no podium data
+     */
+    if (!podium.length) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.podiumTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.title", defaultMessage: "ui.leaderboardWidget.podium.title", values: { period } }) })) })), _jsx(Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", className: classes.podium }, { children: podium.map((entry) => (_jsxs(Stack, Object.assign({ alignItems: "center", className: classNames(classes.podiumItem, `${classes.podiumItem}-${entry.position}`) }, { children: [entry.position === 1 && (_jsx(Box, { component: "span", className: classes.podiumCrown, style: { maskImage: `url(${crownIcon})`, WebkitMaskImage: `url(${crownIcon})` } })), _jsxs(Box, Object.assign({ className: classes.podiumAvatarWrap }, { children: [_jsx(Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.podiumAvatar }), _jsx(Box, Object.assign({ component: "span", className: classes.podiumBadge }, { children: entry.position }))] })), _jsx(Typography, Object.assign({ variant: "body2", fontWeight: 600, className: classes.podiumName }, { children: entry.user.real_name || entry.user.username })), _jsx(Typography, Object.assign({ variant: "caption", className: classes.podiumScore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.score", defaultMessage: "ui.leaderboardWidget.podium.score", values: { score: entry.total_score } }) }))] }), entry.user.id))) })), mode === 'full' && entries.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.rankingTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.title", defaultMessage: "ui.leaderboardWidget.ranking.title" }) })) })), _jsx(Stack, Object.assign({ className: classes.rankingList }, { children: entries.map((entry) => {
+                                const isMe = Boolean(scUserContext.user) && entry.user.id === scUserContext.user.id;
+                                return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", className: classNames(classes.rankingItem, { [classes.rankingItemActive]: isMe }) }, { children: [_jsx(Typography, Object.assign({ variant: "body2", className: classes.rankingPosition }, { children: entry.position })), _jsx(Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.rankingAvatar }), _jsx(Typography, Object.assign({ variant: "body2", fontWeight: isMe ? 600 : 400, className: classes.rankingName }, { children: isMe ? (_jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.you", defaultMessage: "ui.leaderboardWidget.ranking.you" })) : (entry.user.real_name || entry.user.username) })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.rankingScore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.score", defaultMessage: "ui.leaderboardWidget.ranking.score", values: { score: entry.total_score } }) }))] }), entry.user.id));
+                            }) })), _jsx(Typography, Object.assign({ component: "span", role: "button", tabIndex: 0, onClick: onSeeMoreClick, className: classes.seeMore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.seeMore", defaultMessage: "ui.leaderboardWidget.ranking.seeMore" }) }))] }))] }) })));
+}

package/lib/esm/components/LeaderboardWidget/Skeleton.d.ts

@@ -0,0 +1,29 @@
+import { LeaderboardWidgetVariant } from './LeaderboardWidget';
+export interface LeaderboardWidgetSkeletonProps {
+    /**
+     * The widget mode.
+     * @default 'full'
+     */
+    mode?: LeaderboardWidgetVariant;
+}
+/**
+ * > API documentation for the Community-JS Leaderboard Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function LeaderboardWidgetSkeleton({ mode }: LeaderboardWidgetSkeletonProps): JSX.Element;

package/lib/esm/components/LeaderboardWidget/Skeleton.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CardContent, Skeleton, Stack, styled } from '@mui/material';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    podiumHeader: `${PREFIX}-podium-header`,
+    podium: `${PREFIX}-podium`,
+    podiumItem: `${PREFIX}-podium-item`,
+    rankingHeader: `${PREFIX}-ranking-header`,
+    rankingList: `${PREFIX}-ranking-list`,
+    rankingItem: `${PREFIX}-ranking-item`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Leaderboard Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LeaderboardWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLeaderboardWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLeaderboardWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function LeaderboardWidgetSkeleton({ mode = 'full' }) {
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: _jsx(Skeleton, { animation: "wave", height: 28, width: "50%", variant: "rectangular" }) })), _jsx(Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", spacing: 2, className: classes.podium }, { children: [1, 2, 3].map((item) => (_jsxs(Stack, Object.assign({ spacing: 1, alignItems: "center", className: classes.podiumItem }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", width: 56, height: 56 }), _jsx(Skeleton, { animation: "wave", height: 16, width: 60, variant: "rectangular" }), _jsx(Skeleton, { animation: "wave", height: 14, width: 40, variant: "rectangular" })] }), item))) })), mode === 'full' && (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: _jsx(Skeleton, { animation: "wave", height: 28, width: "50%", variant: "rectangular" }) })), _jsx(Stack, Object.assign({ spacing: 1, className: classes.rankingList }, { children: [1, 2, 3, 4, 5].map((item) => (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", className: classes.rankingItem }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", width: 36, height: 36 }), _jsx(Skeleton, { animation: "wave", height: 16, width: "60%", variant: "rectangular" })] }), item))) }))] }))] }) })));
+}

package/lib/esm/components/LeaderboardWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLeaderboardWidget";

package/lib/esm/components/LeaderboardWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCLeaderboardWidget';

package/lib/esm/components/LeaderboardWidget/index.d.ts

@@ -0,0 +1,4 @@
+import LeaderboardWidget, { LeaderboardWidgetProps, LeaderboardWidgetVariant } from './LeaderboardWidget';
+import LeaderboardWidgetSkeleton from './Skeleton';
+export default LeaderboardWidget;
+export { LeaderboardWidgetProps, LeaderboardWidgetVariant, LeaderboardWidgetSkeleton };

package/lib/esm/components/LeaderboardWidget/index.js

@@ -0,0 +1,4 @@
+import LeaderboardWidget from './LeaderboardWidget';
+import LeaderboardWidgetSkeleton from './Skeleton';
+export default LeaderboardWidget;
+export { LeaderboardWidgetSkeleton };

package/lib/esm/index.d.ts

@@ -87,6 +87,9 @@ import IncubatorSubscribeButton, { IncubatorSubscribeButtonProps } from './compo
 import IncubatorSuggestionWidget, { IncubatorSuggestionWidgetProps } from './components/IncubatorSuggestionWidget';
 import InlineComposerWidget, { InlineComposerWidgetProps, InlineComposerWidgetSkeleton } from './components/InlineComposerWidget';
 import InviteUserEventButton, { InviteUserEventButtonProps } from './components/InviteUserEventButton';
+import LeaderboardInfoWidget, { LeaderboardInfoWidgetProps } from './components/LeaderboardInfoWidget';
+import LeaderboardPositionWidget, { LeaderboardPositionWidgetProps, LeaderboardPositionWidgetSkeleton } from './components/LeaderboardPositionWidget';
+import LeaderboardWidget, { LeaderboardWidgetProps, LeaderboardWidgetSkeleton, LeaderboardWidgetVariant } from './components/LeaderboardWidget';
 import LessonAppbar, { LessonAppbarProps } from './components/LessonAppbar';
 import LessonDrawer, { LessonDrawerProps } from './components/LessonDrawer';
 import LessonEditForm, { LessonEditFormProps } from './components/LessonEditForm';
@@ -235,4 +238,4 @@ import DefaultCoverSelfCommunity from './assets/deafultCover';
 /**
  * List all exports
  */
-export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, generateRoomId, randomString, decodePassphrase, encodePassphrase, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, SCCourseEditTabType, Course, CourseProps, CourseSkeleton, CourseSkeletonProps, CourseJoinButton, CourseJoinButtonProps, Courses, CoursesProps, CoursesSkeleton, CoursesSkeletonProps, CourseTypePopover, CourseTypePopoverProps, CreateCourseButton, CreateCourseButtonProps, CourseContentMenu, CourseContentMenuProps, CourseDashboard, TeacherCourseDashboardProps, TeacherSkeleton, StudentCourseDashboardProps, StudentSkeleton, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, DefaultDrawerSkeleton, DefaultDrawerSkeletonProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, EditCourse, EditCourseProps, EditCourseSkeleton, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, getUrlLesson, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, AccordionLessons, AccordionLessonsProps, AccordionLessonsSkeleton, AddUsersButton, AddUsersButtonProps, CourseUsersTable, CourseUsersTableProps, CourseUsersTableSkeleton, EmptyStatus, EmptyStatusProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, LessonAppbar, LessonAppbarProps, LessonDrawer, LessonDrawerProps, LessonEditForm, LessonEditFormProps, LessonObject, LessonObjectProps, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, CourseCompletedDialogProps, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, DefaultCoverSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, SCCourseFormStepType, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, TagAutocomplete, TagAutocompleteProps, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserCreatedCoursesWidget, UserCreatedCoursesWidgetProps, UserCreatedCoursesWidgetSkeleton, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserAutocomplete, UserAutocompleteProps, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, UserLiveStreamWidget, UserLiveStreamWidgetProps, UserLiveStreamWidgetSkeleton, UserPaymentMethodsPortal, UserPaymentMethodsPortalProps, UserPaymentMethodsPortalSkeleton, useStickyBox, UseStickyBoxProps, LiveStream, LiveStreamProps, LiveStreamSkeletonProps, LiveStreamSkeleton, LiveStreamInfoDetails, LiveStreamInfoDetailsProps, UpScalingTierBadge, UpScalingTierProps, CreateLiveStreamDialog, CreateLiveStreamDialogProps, CreateLiveStreamButton, CreateLiveStreamButtonProps, LiveStreamForm, LiveStreamFormProps, LiveStreamRoom, LiveStreamRoomProps, LiveStreamVideoConference, LiveStreamVideoConferenceProps, VirtualScrollerItemProps, SCCourseTemplateType, SCLessonActionsType, SCLessonModeType, Widget, WidgetProps, X_SHARE, PROVIDER_ICONS_CONTAINED, PROVIDER_ICONS_OUTLINED, PROVIDER_ENTRAID_ALTERNATIVE_NAME, getDefaultLocale, getDefaultPaymentMethodConfiguration, getDefaultAppearanceStyle, getConvertedAmount, PaywallsDialog, PaywallsDialogProps, PaywallsConfigurator, PaywallsConfiguratorProps, PaywallsConfiguratorSkeleton, PaymentProducts, PaymentProductsProps, PaymentProduct, PaymentProductProps, PaymentOrder, PaymentOrderProps, PaymentOrderPdfButton, PaymentOrderPdfButtonProps, PaymentDetailDialog, PaymentDetailDialogProps, PaymentOrders, PaymentOrdersProps, PaymentProductPrice, PaymentProductPriceProps, PdfPreviewDialog, PdfPreviewDialogProps, PdfPreview, PdfPreviewProps, UserPaymentMethods, UserPaymentMethodsProps, UserPaymentMethodsSkeleton, UserAddPaymentMethodForm, UserAddPaymentMethodFormProps, UserAddPaymentMethodDialog, UserAddPaymentMethodDialogProps, UserChangeAddressDialog, UserChangeAddressDialogProps, UserBillingInfo, UserBillingInfoProps, UserBillingInfoSkeleton, Checkout, CheckoutProps, CheckoutReturnDialog, CheckoutReturnDialogProps, HiddenPurchasableContent, CommunityPaywalls, CommunityPaywallsProps, CommunityPaywallsSkeleton, FooterWidget, FooterWidgetProps };
+export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, generateRoomId, randomString, decodePassphrase, encodePassphrase, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, SCCourseEditTabType, Course, CourseProps, CourseSkeleton, CourseSkeletonProps, CourseJoinButton, CourseJoinButtonProps, Courses, CoursesProps, CoursesSkeleton, CoursesSkeletonProps, CourseTypePopover, CourseTypePopoverProps, CreateCourseButton, CreateCourseButtonProps, CourseContentMenu, CourseContentMenuProps, CourseDashboard, TeacherCourseDashboardProps, TeacherSkeleton, StudentCourseDashboardProps, StudentSkeleton, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, DefaultDrawerSkeleton, DefaultDrawerSkeletonProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, EditCourse, EditCourseProps, EditCourseSkeleton, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, getUrlLesson, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, AccordionLessons, AccordionLessonsProps, AccordionLessonsSkeleton, AddUsersButton, AddUsersButtonProps, CourseUsersTable, CourseUsersTableProps, CourseUsersTableSkeleton, EmptyStatus, EmptyStatusProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, LeaderboardInfoWidget, LeaderboardInfoWidgetProps, LeaderboardPositionWidget, LeaderboardPositionWidgetProps, LeaderboardPositionWidgetSkeleton, LeaderboardWidget, LeaderboardWidgetProps, LeaderboardWidgetSkeleton, LeaderboardWidgetVariant, LessonAppbar, LessonAppbarProps, LessonDrawer, LessonDrawerProps, LessonEditForm, LessonEditFormProps, LessonObject, LessonObjectProps, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, CourseCompletedDialogProps, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, DefaultCoverSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, SCCourseFormStepType, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, TagAutocomplete, TagAutocompleteProps, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserCreatedCoursesWidget, UserCreatedCoursesWidgetProps, UserCreatedCoursesWidgetSkeleton, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserAutocomplete, UserAutocompleteProps, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, UserLiveStreamWidget, UserLiveStreamWidgetProps, UserLiveStreamWidgetSkeleton, UserPaymentMethodsPortal, UserPaymentMethodsPortalProps, UserPaymentMethodsPortalSkeleton, useStickyBox, UseStickyBoxProps, LiveStream, LiveStreamProps, LiveStreamSkeletonProps, LiveStreamSkeleton, LiveStreamInfoDetails, LiveStreamInfoDetailsProps, UpScalingTierBadge, UpScalingTierProps, CreateLiveStreamDialog, CreateLiveStreamDialogProps, CreateLiveStreamButton, CreateLiveStreamButtonProps, LiveStreamForm, LiveStreamFormProps, LiveStreamRoom, LiveStreamRoomProps, LiveStreamVideoConference, LiveStreamVideoConferenceProps, VirtualScrollerItemProps, SCCourseTemplateType, SCLessonActionsType, SCLessonModeType, Widget, WidgetProps, X_SHARE, PROVIDER_ICONS_CONTAINED, PROVIDER_ICONS_OUTLINED, PROVIDER_ENTRAID_ALTERNATIVE_NAME, getDefaultLocale, getDefaultPaymentMethodConfiguration, getDefaultAppearanceStyle, getConvertedAmount, PaywallsDialog, PaywallsDialogProps, PaywallsConfigurator, PaywallsConfiguratorProps, PaywallsConfiguratorSkeleton, PaymentProducts, PaymentProductsProps, PaymentProduct, PaymentProductProps, PaymentOrder, PaymentOrderProps, PaymentOrderPdfButton, PaymentOrderPdfButtonProps, PaymentDetailDialog, PaymentDetailDialogProps, PaymentOrders, PaymentOrdersProps, PaymentProductPrice, PaymentProductPriceProps, PdfPreviewDialog, PdfPreviewDialogProps, PdfPreview, PdfPreviewProps, UserPaymentMethods, UserPaymentMethodsProps, UserPaymentMethodsSkeleton, UserAddPaymentMethodForm, UserAddPaymentMethodFormProps, UserAddPaymentMethodDialog, UserAddPaymentMethodDialogProps, UserChangeAddressDialog, UserChangeAddressDialogProps, UserBillingInfo, UserBillingInfoProps, UserBillingInfoSkeleton, Checkout, CheckoutProps, CheckoutReturnDialog, CheckoutReturnDialogProps, HiddenPurchasableContent, CommunityPaywalls, CommunityPaywallsProps, CommunityPaywallsSkeleton, FooterWidget, FooterWidgetProps };

package/lib/esm/index.js

@@ -87,6 +87,9 @@ import IncubatorSubscribeButton from './components/IncubatorSubscribeButton';
 import IncubatorSuggestionWidget from './components/IncubatorSuggestionWidget';
 import InlineComposerWidget, { InlineComposerWidgetSkeleton } from './components/InlineComposerWidget';
 import InviteUserEventButton from './components/InviteUserEventButton';
+import LeaderboardInfoWidget from './components/LeaderboardInfoWidget';
+import LeaderboardPositionWidget, { LeaderboardPositionWidgetSkeleton } from './components/LeaderboardPositionWidget';
+import LeaderboardWidget, { LeaderboardWidgetSkeleton } from './components/LeaderboardWidget';
 import LessonAppbar from './components/LessonAppbar';
 import LessonDrawer from './components/LessonDrawer';
 import LessonEditForm from './components/LessonEditForm';
@@ -242,6 +245,6 @@ DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WI
 /* EVENTS */
 Event, EventActionsMenu, EventHeader, EventHeaderSkeleton, EventInfoDetails, EventInfoWidget, EventInviteButton, EventLocationWidget, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetSkeleton, EventParticipantsButton, Events, EventSkeleton, EventsSkeleton, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectSkeleton, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetSkeleton, File, FollowUserButton, Footer, FooterSkeleton, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, getUrlLesson, Group, GroupActionsMenu, GroupForm, GroupHeader, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInvitedWidget, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersWidget, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSkeleton, GroupsSkeleton, GroupSubscribeButton, 
 /* SC UI SHARED */
-AccordionLessons, AccordionLessonsSkeleton, AddUsersButton, CourseUsersTable, CourseUsersTableSkeleton, EmptyStatus, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorListWidget, IncubatorSubscribeButton, IncubatorSuggestionWidget, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetSkeleton, InviteUserEventButton, LessonAppbar, LessonDrawer, LessonEditForm, LessonObject, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, Lightbox, Link, LINKEDIN_SHARE, LocationAutocomplete, 
+AccordionLessons, AccordionLessonsSkeleton, AddUsersButton, CourseUsersTable, CourseUsersTableSkeleton, EmptyStatus, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorListWidget, IncubatorSubscribeButton, IncubatorSuggestionWidget, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetSkeleton, InviteUserEventButton, LeaderboardInfoWidget, LeaderboardPositionWidget, LeaderboardPositionWidgetSkeleton, LeaderboardWidget, LeaderboardWidgetSkeleton, LessonAppbar, LessonDrawer, LessonEditForm, LessonObject, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, Lightbox, Link, LINKEDIN_SHARE, LocationAutocomplete, 
 /* Assets */
 LogoSelfCommunity, DefaultCoverSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, SCCourseFormStepType, MediaChunkUploader, MessageUploaderUtils, MetadataField, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuHeader, NavigationMenuIconButton, NavigationSettingsIconButton, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileSkeleton, NavigationToolbarSkeleton, Notification, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetSkeleton, PollSuggestionWidget, PrivateMessageComponent, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSnippetItem, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemSkeleton, PrivateMessageThreadSkeleton, ProgressBar, RelatedEventsWidget, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchDialog, Share, SnippetNotifications, SnippetNotificationsSkeleton, StickyBox, SuggestedEventsWidget, TagAutocomplete, SuggestedEventsWidgetSkeleton, TagChip, ToastNotifications, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserAvatar, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetSkeleton, UserCounters, UserCreatedCoursesWidget, UserCreatedCoursesWidgetSkeleton, UserDeletedSnackBar, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileEdit, UserProfileEditSectionAccount, UserProfileEditSectionPublicInfo, UserProfileEditSectionSettings, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderSkeleton, UserAutocomplete, UserSkeleton, UserSocialAssociation, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetSkeleton, UserLiveStreamWidget, UserLiveStreamWidgetSkeleton, UserPaymentMethodsPortal, UserPaymentMethodsPortalSkeleton, useStickyBox, LiveStream, LiveStreamSkeleton, LiveStreamInfoDetails, UpScalingTierBadge, CreateLiveStreamDialog, CreateLiveStreamButton, LiveStreamForm, LiveStreamRoom, LiveStreamVideoConference, SCCourseTemplateType, SCLessonActionsType, SCLessonModeType, Widget, X_SHARE, PROVIDER_ICONS_CONTAINED, PROVIDER_ICONS_OUTLINED, PROVIDER_ENTRAID_ALTERNATIVE_NAME, getDefaultLocale, getDefaultPaymentMethodConfiguration, getDefaultAppearanceStyle, getConvertedAmount, PaywallsDialog, PaywallsConfigurator, PaywallsConfiguratorSkeleton, PaymentProducts, PaymentProduct, PaymentOrder, PaymentOrderPdfButton, PaymentDetailDialog, PaymentOrders, PaymentProductPrice, PdfPreviewDialog, PdfPreview, UserPaymentMethods, UserPaymentMethodsSkeleton, UserAddPaymentMethodForm, UserAddPaymentMethodDialog, UserChangeAddressDialog, UserBillingInfo, UserBillingInfoSkeleton, Checkout, CheckoutReturnDialog, HiddenPurchasableContent, CommunityPaywalls, CommunityPaywallsSkeleton, FooterWidget };