@popmenu/dashboard 0.126.0 → 0.126.2

package/build/esm/components/ClickableTile/ClickableTile.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Card, CardActionArea, CardContent } from '@material-ui/core';
+import { useClickableTileStyles } from './ClickableTileStyles.js';
+
+var ClickableTile = function (props) {
+    var children = props.children, CardContentProps = props.CardContentProps, link = props.link, restProps = __rest(props, ["children", "CardContentProps", "link"]);
+    var classes = useClickableTileStyles(props);
+    return (React.createElement(Card, __assign({ classes: { root: classes.root } }, restProps),
+        React.createElement(CardActionArea, { component: link ? 'a' : 'div' },
+            React.createElement(CardContent, __assign({ classes: { root: classes.content } }, CardContentProps), children))));
+};
+ClickableTile.defaultProps = {
+    link: false,
+};
+
+export { ClickableTile };
+//# sourceMappingURL=ClickableTile.js.map

package/build/esm/components/ClickableTile/ClickableTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableTile.js","sources":["../../../../src/components/ClickableTile/ClickableTile.tsx"],"sourcesContent":["import React from 'react'\nimport { Card, CardActionArea, CardContent } from '@material-ui/core'\nimport { ClickableTileProps } from './ClickableTileProps'\nimport { useClickableTileStyles } from './ClickableTileStyles'\n\nexport const ClickableTile = (props: ClickableTileProps) => {\n  const { children, CardContentProps, link, ...restProps } = props\n  const classes = useClickableTileStyles(props)\n\n  return (\n    <Card classes={{ root: classes.root }} {...restProps}>\n      <CardActionArea component={link ? 'a' : 'div'}>\n        <CardContent classes={{ root: classes.content }} {...CardContentProps}>\n          {children}\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  )\n}\n\nClickableTile.defaultProps = {\n  link: false,\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAC7C,IAAA,QAAQ,GAA2C,KAAK,CAAA,QAAhD,EAAE,gBAAgB,GAAyB,KAAK,CAA9B,gBAAA,EAAE,IAAI,GAAmB,KAAK,KAAxB,EAAK,SAAS,UAAK,KAAK,EAA1D,CAAkD,UAAA,EAAA,kBAAA,EAAA,MAAA,CAAA,CAAF;AACtD,IAAA,IAAM,OAAO,GAAG,sBAAsB,CAAC,KAAK,CAAC;AAE7C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAM,SAAS,CAAA;AAClD,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,IAAI,GAAG,GAAG,GAAG,KAAK,EAAA;AAC3C,YAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,QAAA,CAAA,EAAA,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,EAAA,EAAM,gBAAgB,CAClE,EAAA,QAAQ,CACG,CACC,CACZ;AAEX;AAEA,aAAa,CAAC,YAAY,GAAG;AAC3B,IAAA,IAAI,EAAE,KAAK;CACZ;;;;"}

package/build/esm/components/ClickableTile/ClickableTileProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TileProps } from '../Tile';
+export interface ClickableTileProps extends TileProps {
+    /** transforms the root DOM node an anchor element when true */
+    link: boolean;
+    /** callback invoked for a click event */
+    onClick: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+}

package/build/esm/components/ClickableTile/ClickableTileStyles.d.ts

@@ -0,0 +1 @@
+export declare const useClickableTileStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "content">;

package/build/esm/components/ClickableTile/ClickableTileStyles.js

@@ -0,0 +1,16 @@
+import { makeStyles } from '@material-ui/core';
+
+var useClickableTileStyles = makeStyles(function (theme) { return ({
+    root: {
+        textDecoration: 'none',
+        borderRadius: theme.spacing(1),
+        width: '100%',
+    },
+    content: {
+        padding: theme.spacing(3),
+        height: '100%',
+    },
+}); });
+
+export { useClickableTileStyles };
+//# sourceMappingURL=ClickableTileStyles.js.map

package/build/esm/components/ClickableTile/ClickableTileStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableTileStyles.js","sources":["../../../../src/components/ClickableTile/ClickableTileStyles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\nexport const useClickableTileStyles = makeStyles((theme) => ({\n  root: {\n    textDecoration: 'none',\n    borderRadius: theme.spacing(1),\n    width: '100%',\n  },\n  content: {\n    padding: theme.spacing(3),\n    height: '100%',\n  },\n}))\n"],"names":[],"mappings":";;AAEa,IAAA,sBAAsB,GAAG,UAAU,CAAC,UAAC,KAAK,EAAK,EAAA,QAAC;AAC3D,IAAA,IAAI,EAAE;AACJ,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;CACF,EAAC,EAAA;;;;"}

package/build/esm/components/DashboardContainer/DashboardContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps as DashboardContainerProps } from '@popmenu/common-ui';
+export declare const DashboardContainer: (props: DashboardContainerProps) => JSX.Element;

package/build/esm/components/DashboardContainer/index.d.ts

@@ -0,0 +1 @@
+export { DashboardContainer } from './DashboardContainer';

package/build/esm/components/KpiMetric/KpiMetric.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { KpiMetricProps } from './KpiMetricProps';
+declare const defaultProps: {
+    trendStatus: string;
+};
+export declare const KpiMetric: {
+    (props: KpiMetricProps & typeof defaultProps): JSX.Element;
+    defaultProps: {
+        trendStatus: string;
+    };
+};
+export {};

package/build/esm/components/KpiMetric/KpiMetric.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, Icon, Typography } from '@popmenu/common-ui';
+import { Trend, TrendDown, GitCommit } from '@popmenu/web-icons';
+import { useKpiMetricStyles } from './KpiMetricStyles.js';
+
+var defaultProps = {
+    trendStatus: 'natural',
+};
+var KpiMetric = function (props) {
+    var KpiIcon = props.Icon, metric = props.metric, value = props.value, trend = props.trend, trendMessage = props.trendMessage, trendStatus = props.trendStatus;
+    var classes = useKpiMetricStyles(props);
+    var trendColors = trendStatus === 'natural' ? ['success', 'warning', 'grey.500'] : ['warning', 'success', 'grey.500'];
+    var trendColorMap = { up: 0, down: 1, level: 2 };
+    return (React.createElement(Box, { className: classes.root },
+        KpiIcon && (React.createElement(Box, { className: classes.iconContainer },
+            React.createElement(Icon, { icon: KpiIcon, size: "inherit" }))),
+        React.createElement(Typography, { color: "secondary.light", variant: "body2" }, metric),
+        React.createElement(Typography, { color: "secondary", variant: "h4" }, value ? value : '-'),
+        trendMessage && (React.createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
+            trend === 'up' && React.createElement(Icon, { className: classes.trendIcon, icon: Trend, size: "inherit" }),
+            trend === 'down' && React.createElement(Icon, { className: classes.trendIcon, icon: TrendDown, size: "inherit" }),
+            trend === 'level' && React.createElement(Icon, { className: classes.trendIcon, icon: GitCommit, size: "inherit" }),
+            trendMessage))));
+};
+KpiMetric.defaultProps = defaultProps;
+
+export { KpiMetric };
+//# sourceMappingURL=KpiMetric.js.map

package/build/esm/components/KpiMetric/KpiMetric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiMetric.js","sources":["../../../../src/components/KpiMetric/KpiMetric.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Icon, ThemeColors, Typography } from '@popmenu/common-ui'\nimport { GitCommit, Trend, TrendDown } from '@popmenu/web-icons'\nimport { KpiMetricProps } from './KpiMetricProps'\nimport { useKpiMetricStyles } from './KpiMetricStyles'\n\nconst defaultProps = {\n  trendStatus: 'natural',\n}\n\nexport const KpiMetric = (props: KpiMetricProps & typeof defaultProps) => {\n  const { Icon: KpiIcon, metric, value, trend, trendMessage, trendStatus } = props\n  const classes = useKpiMetricStyles(props)\n  const trendColors: Array<ThemeColors> =\n    trendStatus === 'natural' ? ['success', 'warning', 'grey.500'] : ['warning', 'success', 'grey.500']\n  const trendColorMap = { up: 0, down: 1, level: 2 }\n  return (\n    <Box className={classes.root}>\n      {KpiIcon && (\n        <Box className={classes.iconContainer}>\n          <Icon icon={KpiIcon} size=\"inherit\" />\n        </Box>\n      )}\n      <Typography color=\"secondary.light\" variant=\"body2\">\n        {metric}\n      </Typography>\n      <Typography color=\"secondary\" variant=\"h4\">\n        {value ? value : '-'}\n      </Typography>\n      {trendMessage && (\n        <Typography\n          style={{ fontSize: 'inherit' }}\n          variant=\"body2\"\n          color={trend ? trendColors[trendColorMap[trend]] : 'grey.500'}\n        >\n          {trend === 'up' && <Icon className={classes.trendIcon} icon={Trend} size=\"inherit\" />}\n          {trend === 'down' && <Icon className={classes.trendIcon} icon={TrendDown} size=\"inherit\" />}\n          {trend === 'level' && <Icon className={classes.trendIcon} icon={GitCommit} size=\"inherit\" />}\n          {trendMessage}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n\nKpiMetric.defaultProps = defaultProps\n"],"names":[],"mappings":";;;;;AAMA,IAAM,YAAY,GAAG;AACnB,IAAA,WAAW,EAAE,SAAS;CACvB;AAEM,IAAM,SAAS,GAAG,UAAC,KAA2C,EAAA;AAC3D,IAAA,IAAM,OAAO,GAAsD,KAAK,CAAA,IAA3D,EAAE,MAAM,GAA8C,KAAK,CAAnD,MAAA,EAAE,KAAK,GAAuC,KAAK,CAAA,KAA5C,EAAE,KAAK,GAAgC,KAAK,CAArC,KAAA,EAAE,YAAY,GAAkB,KAAK,CAAA,YAAvB,EAAE,WAAW,GAAK,KAAK,YAAV;AACtE,IAAA,IAAM,OAAO,GAAG,kBAAkB,CAAC,KAAK,CAAC;IACzC,IAAM,WAAW,GACf,WAAW,KAAK,SAAS,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC;AACrG,IAAA,IAAM,aAAa,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;IAClD,QACE,oBAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAA;QACzB,OAAO,KACN,KAAC,CAAA,aAAA,CAAA,GAAG,IAAC,SAAS,EAAE,OAAO,CAAC,aAAa,EAAA;YACnC,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA,CAClC,CACP;QACD,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAChD,EAAA,MAAM,CACI;AACb,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,IAAI,IACvC,KAAK,GAAG,KAAK,GAAG,GAAG,CACT;AACZ,QAAA,YAAY,KACX,KAAC,CAAA,aAAA,CAAA,UAAU,IACT,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAC9B,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,EAAA;AAE5D,YAAA,KAAK,KAAK,IAAI,IAAI,oBAAC,IAAI,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA;AACpF,YAAA,KAAK,KAAK,MAAM,IAAI,oBAAC,IAAI,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA;AAC1F,YAAA,KAAK,KAAK,OAAO,IAAI,oBAAC,IAAI,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA;AAC3F,YAAA,YAAY,CACF,CACd,CACG;AAEV;AAEA,SAAS,CAAC,YAAY,GAAG,YAAY;;;;"}

package/build/esm/components/KpiMetric/KpiMetricProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface KpiMetricProps {
+    /** The icon from @popmenu/web-icons to be rendered */
+    Icon?: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    /** A KPI metric name */
+    metric: string;
+    /** A KPI metric measurement */
+    value: string | undefined;
+    /** A KPI metric trend direction */
+    trend: 'up' | 'down' | 'level' | undefined;
+    /** A KPI metric trend description */
+    trendMessage: string | undefined;
+    /** Determines if the trend direction is diplayed as success or warning. When "natural", a trend of "up" is successful*/
+    trendStatus: 'natural' | 'inverted' | undefined;
+}

package/build/esm/components/KpiMetric/KpiMetricStyles.d.ts

@@ -0,0 +1,2 @@
+import { KpiMetricProps } from './KpiMetricProps';
+export declare const useKpiMetricStyles: (props: KpiMetricProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/KpiMetric/KpiMetricStyles.js

@@ -0,0 +1,30 @@
+import { makeStyles } from '@material-ui/core';
+
+var useKpiMetricStyles = makeStyles(function (theme) { return ({
+    iconContainer: {
+        fontSize: theme.spacing(3),
+        display: 'flex',
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.secondary.light,
+        borderRadius: '50%',
+        padding: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+    },
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+        justifyContent: 'space-between',
+        textAlign: 'center',
+        fontSize: '0.75rem',
+    },
+    trendIcon: {
+        '&&': {
+            paddingInlineEnd: theme.spacing(1),
+        },
+    },
+}); });
+
+export { useKpiMetricStyles };
+//# sourceMappingURL=KpiMetricStyles.js.map

package/build/esm/components/KpiMetric/KpiMetricStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiMetricStyles.js","sources":["../../../../src/components/KpiMetric/KpiMetricStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { KpiMetricProps } from './KpiMetricProps'\n\nexport const useKpiMetricStyles = makeStyles<Theme, KpiMetricProps>((theme) => ({\n  iconContainer: {\n    fontSize: theme.spacing(3),\n    display: 'flex',\n    backgroundColor: theme.palette.grey[100],\n    color: theme.palette.secondary.light,\n    borderRadius: '50%',\n    padding: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n  },\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    height: '100%',\n    justifyContent: 'space-between',\n    textAlign: 'center',\n    fontSize: '0.75rem',\n  },\n  trendIcon: {\n    '&&': {\n      paddingInlineEnd: theme.spacing(1),\n    },\n  },\n}))\n"],"names":[],"mappings":";;AAGa,IAAA,kBAAkB,GAAG,UAAU,CAAwB,UAAC,KAAK,EAAK,EAAA,QAAC;AAC9E,IAAA,aAAa,EAAE;AACb,QAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC1B,QAAA,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK;AACpC,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/B,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,QAAQ,EAAE,SAAS;AACpB,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE;AACJ,YAAA,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACnC,SAAA;AACF,KAAA;CACF,EAAC,EAAA;;;;"}

package/build/esm/components/KpiMetric/index.d.ts

@@ -0,0 +1,2 @@
+export { KpiMetric } from './KpiMetric';
+export { KpiMetricProps } from './KpiMetricProps';

package/build/esm/components/KpiMetricTile/KpiMetricTile.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { KpiMetricTileProps } from './KpiMetricTileProps';
+export declare const KpiMetricTile: (props: KpiMetricTileProps) => JSX.Element;

package/build/esm/components/KpiMetricTile/KpiMetricTile.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { KpiMetric } from '../KpiMetric/KpiMetric.js';
+import { ClickableTile } from '../ClickableTile/ClickableTile.js';
+import { Tile } from '../Tile/Tile.js';
+
+var KpiMetricTile = function (props) {
+    var TileProps = props.TileProps, restProps = __rest(props, ["TileProps"]);
+    var DynamicTile = typeof (TileProps === null || TileProps === void 0 ? void 0 : TileProps.onClick) === 'function' ? ClickableTile : Tile;
+    return (React.createElement(DynamicTile, __assign({}, TileProps),
+        React.createElement(KpiMetric, __assign({}, restProps))));
+};
+
+export { KpiMetricTile };
+//# sourceMappingURL=KpiMetricTile.js.map

package/build/esm/components/KpiMetricTile/KpiMetricTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiMetricTile.js","sources":["../../../../src/components/KpiMetricTile/KpiMetricTile.tsx"],"sourcesContent":["import React from 'react'\nimport { KpiMetricTileProps } from './KpiMetricTileProps'\nimport { KpiMetric } from '../KpiMetric/KpiMetric'\nimport { ClickableTile } from '../ClickableTile/ClickableTile'\nimport { Tile } from '../Tile'\n\nexport const KpiMetricTile = (props: KpiMetricTileProps) => {\n  const { TileProps, ...restProps } = props\n  const DynamicTile = typeof TileProps?.onClick === 'function' ? ClickableTile : Tile\n\n  return (\n    <DynamicTile {...TileProps}>\n      <KpiMetric {...restProps} />\n    </DynamicTile>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAMO,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAC7C,IAAA,SAAS,GAAmB,KAAK,CAAxB,SAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAnC,CAA2B,WAAA,CAAA,CAAF;IAC/B,IAAM,WAAW,GAAG,QAAO,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,OAAO,CAAA,KAAK,UAAU,GAAG,aAAa,GAAG,IAAI;AAEnF,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAA;AACxB,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAK,QAAA,CAAA,EAAA,EAAA,SAAS,CAAI,CAAA,CAChB;AAElB;;;;"}

package/build/esm/components/KpiMetricTile/KpiMetricTileProps.d.ts

@@ -0,0 +1,6 @@
+import { ClickableTileProps } from '../ClickableTile/ClickableTileProps';
+import { KpiMetricProps } from '../KpiMetric/KpiMetricProps';
+import { TileProps } from '../Tile';
+export interface KpiMetricTileProps extends KpiMetricProps {
+    TileProps: TileProps | ClickableTileProps;
+}

package/build/esm/components/KpiMetricTile/index.d.ts

@@ -0,0 +1,2 @@
+export { KpiMetricTile } from './KpiMetricTile';
+export { KpiMetricTileProps } from './KpiMetricTileProps';

package/build/esm/components/Leaderboard/Leaderboard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LeaderboardProps } from './LeaderboardProps';
+export declare const Leaderboard: (props: LeaderboardProps) => JSX.Element;

package/build/esm/components/Leaderboard/Leaderboard.js

@@ -0,0 +1,78 @@
+import { __assign } from 'tslib';
+import React, { useState } from 'react';
+import { Menu, MenuItem } from '@material-ui/core';
+import { Box, Typography, List, Icon, ListItem, ListItemAvatar, Avatar, ListItemText } from '@popmenu/common-ui';
+import { Link } from 'react-router-dom';
+import { ChevronDown } from '@popmenu/web-icons';
+import { useLeaderboardStyles, useLeaderboardFilterStyles, useLeaderboardListItemStyles, useMoreLinkStyles } from './LeaderboardStyles.js';
+
+var Leaderboard = function (props) {
+    var data = props.data, EmptyState = props.EmptyState, filterProps = props.filterProps, title = props.title, moreLink = props.moreLink, subtitle = props.subtitle;
+    var classes = useLeaderboardStyles(props);
+    var isEmpty = data.length === 0;
+    var slicedData = data.slice(0, 5);
+    var isOverflow = data.length > 5;
+    var showMoreButton = !isEmpty && ((moreLink === null || moreLink === void 0 ? void 0 : moreLink.show) || isOverflow);
+    return (React.createElement(Box, { display: "flex", flexDirection: "column" },
+        React.createElement(Box, { alignItems: "left" },
+            React.createElement(Typography, { variant: "h5" }, title),
+            React.createElement(Typography, { className: classes.text }, subtitle),
+            filterProps && React.createElement(LeaderboardFilter, __assign({}, filterProps))),
+        !isEmpty ? (React.createElement(List, { classes: classes }, slicedData.map(function (itemProps, index) { return (React.createElement(LeaderboardListItem, __assign({ key: "tile-list-item-" + index }, itemProps))); }))) : (EmptyState),
+        moreLink && showMoreButton && React.createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
+};
+var LeaderboardListItem = function (props) {
+    var ItemIcon = props.Icon, image = props.image, to = props.to, subtitle = props.subtitle, title = props.title;
+    var classes = useLeaderboardListItemStyles(props);
+    var routeProps = { component: Link, to: to };
+    var showListItemAvatar = image || ItemIcon;
+    return (React.createElement(Box, __assign({}, (to && routeProps), { className: to && routeProps ? classes.link : '' }),
+        React.createElement(ListItem, null,
+            showListItemAvatar && (React.createElement(ListItemAvatar, null,
+                React.createElement(Avatar, __assign({ classes: { colorDefault: classes.fallbackIcon } }, image), ItemIcon && React.createElement(Icon, { icon: ItemIcon })))),
+            React.createElement(ListItemText, { classes: { secondary: classes.subtitle }, primary: title, primaryTypographyProps: {
+                    noWrap: true,
+                }, secondary: subtitle }))));
+};
+var LeaderboardFilter = function (props) {
+    var onChange = props.onChange, options = props.options, text = props.text;
+    var classes = useLeaderboardFilterStyles(props);
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var _b = useState(null), menuAnchor = _b[0], setMenuAnchor = _b[1];
+    var _c = useState(null), selection = _c[0], setSelection = _c[1];
+    var handleOpen = function (event) {
+        setMenuAnchor(event.currentTarget);
+        setOpen(true);
+    };
+    var handleClose = function () {
+        setMenuAnchor(null);
+        setOpen(false);
+    };
+    var handleSelection = function (label, value) {
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+        setSelection(label);
+        handleClose();
+    };
+    if (options.length < 1)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: classes.filterWrapper, pt: 1, onClick: handleOpen },
+            React.createElement(Typography, { className: classes.text }, selection || text),
+            React.createElement(Icon, { icon: ChevronDown })),
+        React.createElement(Menu, { anchorEl: menuAnchor, onClose: handleClose, open: open }, options.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (React.createElement(MenuItem, { key: value, onClick: function () { return handleSelection(label, value); } }, label));
+        }))));
+};
+var MoreLink = function (props) {
+    var text = props.text, to = props.to;
+    var classes = useMoreLinkStyles(props);
+    var routeProps = { component: Link, to: to };
+    return (React.createElement(Box, __assign({ display: "flex", justifyContent: "center" }, routeProps, { className: classes.link }),
+        React.createElement(Typography, { variant: "body2" }, text)));
+};
+
+export { Leaderboard };
+//# sourceMappingURL=Leaderboard.js.map

package/build/esm/components/Leaderboard/Leaderboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Leaderboard.js","sources":["../../../../src/components/Leaderboard/Leaderboard.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Menu, MenuItem } from '@material-ui/core'\nimport { Icon } from '@popmenu/common-ui'\nimport { Link as RouterLink } from 'react-router-dom'\nimport { Avatar, Box, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@popmenu/common-ui'\nimport { ChevronDown } from '@popmenu/web-icons'\n\nimport { LeaderboardFilterProps, LeaderboardListItemProps, LeaderboardProps, MoreLinkProps } from './LeaderboardProps'\nimport {\n  useLeaderboardStyles,\n  useLeaderboardListItemStyles,\n  useLeaderboardFilterStyles,\n  useMoreLinkStyles,\n} from './LeaderboardStyles'\n\nexport const Leaderboard = (props: LeaderboardProps) => {\n  const { data, EmptyState, filterProps, title, moreLink, subtitle } = props\n  const classes = useLeaderboardStyles(props)\n  const isEmpty = data.length === 0\n  const slicedData = data.slice(0, 5)\n  const isOverflow = data.length > 5\n  const showMoreButton = !isEmpty && (moreLink?.show || isOverflow)\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <Box alignItems=\"left\">\n        <Typography variant=\"h5\">{title}</Typography>\n        <Typography className={classes.text}>{subtitle}</Typography>\n        {filterProps && <LeaderboardFilter {...filterProps} />}\n      </Box>\n      {!isEmpty ? (\n        <List classes={classes}>\n          {slicedData.map((itemProps, index) => (\n            <LeaderboardListItem key={`tile-list-item-${index}`} {...itemProps} />\n          ))}\n        </List>\n      ) : (\n        EmptyState\n      )}\n      {moreLink && showMoreButton && <MoreLink text={moreLink.text} to={moreLink.to} />}\n    </Box>\n  )\n}\n\nconst LeaderboardListItem = (props: LeaderboardListItemProps) => {\n  const { Icon: ItemIcon, image, to, subtitle, title } = props\n  const classes = useLeaderboardListItemStyles(props)\n  const routeProps = { component: RouterLink, to }\n  const showListItemAvatar = image || ItemIcon\n\n  return (\n    <Box {...(to && routeProps)} className={to && routeProps ? classes.link : ''}>\n      <ListItem>\n        {showListItemAvatar && (\n          <ListItemAvatar>\n            <Avatar classes={{ colorDefault: classes.fallbackIcon }} {...image}>\n              {ItemIcon && <Icon icon={ItemIcon} />}\n            </Avatar>\n          </ListItemAvatar>\n        )}\n        <ListItemText\n          classes={{ secondary: classes.subtitle }}\n          primary={title}\n          primaryTypographyProps={{\n            noWrap: true,\n          }}\n          secondary={subtitle}\n        />\n      </ListItem>\n    </Box>\n  )\n}\n\nconst LeaderboardFilter = (props: LeaderboardFilterProps) => {\n  const { onChange, options, text } = props\n  const classes = useLeaderboardFilterStyles(props)\n  const [open, setOpen] = useState(false)\n  const [menuAnchor, setMenuAnchor] = useState<Element | null>(null)\n  const [selection, setSelection] = useState<string | null>(null)\n\n  const handleOpen = (event: React.SyntheticEvent) => {\n    setMenuAnchor(event.currentTarget)\n    setOpen(true)\n  }\n\n  const handleClose = () => {\n    setMenuAnchor(null)\n    setOpen(false)\n  }\n\n  const handleSelection = (label: string, value: string) => {\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n    setSelection(label)\n    handleClose()\n  }\n\n  if (options.length < 1) return null\n\n  return (\n    <>\n      <Box className={classes.filterWrapper} pt={1} onClick={handleOpen}>\n        <Typography className={classes.text}>{selection || text}</Typography>\n        <Icon icon={ChevronDown} />\n      </Box>\n      <Menu anchorEl={menuAnchor} onClose={handleClose} open={open}>\n        {options.map(({ label, value }) => (\n          <MenuItem key={value} onClick={() => handleSelection(label, value)}>\n            {label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  )\n}\n\nconst MoreLink = (props: MoreLinkProps) => {\n  const { text, to } = props\n  const classes = useMoreLinkStyles(props)\n  const routeProps = { component: RouterLink, to }\n  return (\n    <Box display=\"flex\" justifyContent=\"center\" {...routeProps} className={classes.link}>\n      <Typography variant=\"body2\">{text}</Typography>\n    </Box>\n  )\n}\n"],"names":["RouterLink"],"mappings":"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"}

package/build/esm/components/Leaderboard/LeaderboardProps.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { MenuProps } from '@material-ui/core';
+export interface LeaderboardFilterOptionProps {
+    label: string;
+    value: string;
+}
+export interface LeaderboardFilterProps extends MenuProps {
+    onChange: (event: any) => void;
+    options: LeaderboardFilterOptionProps[];
+    text: string;
+}
+export interface LeaderboardListItemProps {
+    /** The icon to be displayed. Should be an icon component from popmenu/web-icons */
+    Icon?: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    /** The image to be displayed. */
+    image?: {
+        /** alt attribute for the html img. */
+        alt: string;
+        /** src attribute for the html img. */
+        src: string;
+    };
+    /** Index used for styling */
+    index: number;
+    /** The subtitle to be displayed */
+    subtitle?: string;
+    /** The title to be displayed */
+    title: string;
+    /** Optional link to be attached to the list item */
+    to?: string;
+}
+export interface LeaderboardProps {
+    /** Data to be shown for each leaderboard list item */
+    data: LeaderboardListItemProps[];
+    /** Component to display when no data is present */
+    EmptyState: React.ReactNode;
+    /** Optional props for filter after the title/subtitle */
+    filterProps: LeaderboardFilterProps;
+    /** Optional link at bottom to redirect to another page. Intended as a link to more data within the leaderboard. */
+    moreLink?: {
+        /** Will display regardless of overflow */
+        show?: boolean;
+        /** Path to route to. */
+        to: string;
+        /** Text the link will have. */
+        text: string;
+    };
+    /** Subtitle to be displayed */
+    subtitle: string;
+    /** The title to be displayed */
+    title: string;
+}
+export interface MoreLinkProps {
+    show?: boolean;
+    text: string;
+    to: string;
+}

package/build/esm/components/Leaderboard/LeaderboardStyles.d.ts

@@ -0,0 +1,5 @@
+import { LeaderboardProps, LeaderboardListItemProps, LeaderboardFilterProps, MoreLinkProps } from './LeaderboardProps';
+export declare const useLeaderboardStyles: (props: LeaderboardProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useLeaderboardListItemStyles: (props: LeaderboardListItemProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useLeaderboardFilterStyles: (props: LeaderboardFilterProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useMoreLinkStyles: (props: MoreLinkProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/Leaderboard/LeaderboardStyles.js

@@ -0,0 +1,44 @@
+import { makeStyles } from '@material-ui/core';
+
+var useLeaderboardStyles = makeStyles(function (theme) { return ({
+    root: {
+        '& >:nth-child(even) > li': {
+            background: theme.palette.grey[100],
+        },
+    },
+}); });
+var useLeaderboardListItemStyles = makeStyles(function (theme) { return ({
+    fallbackIcon: {
+        background: 'white',
+        border: "1px solid " + theme.palette.grey[300],
+        color: theme.palette.grey[500],
+    },
+    link: {
+        color: theme.palette.info.main,
+        textDecoration: 'none',
+    },
+    subtitle: {
+        color: theme.palette.secondary.light,
+    },
+}); });
+var useLeaderboardFilterStyles = makeStyles(function (theme) { return ({
+    filterWrapper: {
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+    },
+    text: {
+        color: theme.palette.secondary.main,
+        fontSize: '.75rem',
+        paddingRight: theme.spacing(1),
+    },
+}); });
+var useMoreLinkStyles = makeStyles(function (theme) { return ({
+    link: {
+        color: theme.palette.info.main,
+        textDecoration: 'none',
+    },
+}); });
+
+export { useLeaderboardFilterStyles, useLeaderboardListItemStyles, useLeaderboardStyles, useMoreLinkStyles };
+//# sourceMappingURL=LeaderboardStyles.js.map

package/build/esm/components/Leaderboard/LeaderboardStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeaderboardStyles.js","sources":["../../../../src/components/Leaderboard/LeaderboardStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { LeaderboardProps, LeaderboardListItemProps, LeaderboardFilterProps, MoreLinkProps } from './LeaderboardProps'\n\nexport const useLeaderboardStyles = makeStyles<Theme, LeaderboardProps>((theme) => ({\n  root: {\n    '& >:nth-child(even) > li': {\n      background: theme.palette.grey[100],\n    },\n  },\n}))\n\nexport const useLeaderboardListItemStyles = makeStyles<Theme, LeaderboardListItemProps>((theme) => ({\n  fallbackIcon: {\n    background: 'white',\n    border: `1px solid ${theme.palette.grey[300]}`,\n    color: theme.palette.grey[500],\n  },\n  link: {\n    color: theme.palette.info.main,\n    textDecoration: 'none',\n  },\n  subtitle: {\n    color: theme.palette.secondary.light,\n  },\n}))\n\nexport const useLeaderboardFilterStyles = makeStyles<Theme, LeaderboardFilterProps>((theme) => ({\n  filterWrapper: {\n    alignItems: 'center',\n    cursor: 'pointer',\n    display: 'flex',\n  },\n  text: {\n    color: theme.palette.secondary.main,\n    fontSize: '.75rem',\n    paddingRight: theme.spacing(1),\n  },\n}))\n\nexport const useMoreLinkStyles = makeStyles<Theme, MoreLinkProps>((theme) => ({\n  link: {\n    color: theme.palette.info.main,\n    textDecoration: 'none',\n  },\n}))\n"],"names":[],"mappings":";;AAGa,IAAA,oBAAoB,GAAG,UAAU,CAA0B,UAAC,KAAK,EAAK,EAAA,QAAC;AAClF,IAAA,IAAI,EAAE;AACJ,QAAA,0BAA0B,EAAE;YAC1B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpC,SAAA;AACF,KAAA;CACF,EAAC,EAAA;AAEW,IAAA,4BAA4B,GAAG,UAAU,CAAkC,UAAC,KAAK,EAAK,EAAA,QAAC;AAClG,IAAA,YAAY,EAAE;AACZ,QAAA,UAAU,EAAE,OAAO;QACnB,MAAM,EAAE,eAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAG;QAC9C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,QAAA,cAAc,EAAE,MAAM;AACvB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK;AACrC,KAAA;CACF,EAAC,EAAA;AAEW,IAAA,0BAA0B,GAAG,UAAU,CAAgC,UAAC,KAAK,EAAK,EAAA,QAAC;AAC9F,IAAA,aAAa,EAAE;AACb,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,OAAO,EAAE,MAAM;AAChB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI;AACnC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/B,KAAA;CACF,EAAC,EAAA;AAEW,IAAA,iBAAiB,GAAG,UAAU,CAAuB,UAAC,KAAK,EAAK,EAAA,QAAC;AAC5E,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,QAAA,cAAc,EAAE,MAAM;AACvB,KAAA;CACF,EAAC,EAAA;;;;"}

package/build/esm/components/Leaderboard/index.d.ts

@@ -0,0 +1,2 @@
+export { Leaderboard } from './Leaderboard';
+export { LeaderboardProps } from './LeaderboardProps';

package/build/esm/components/LeaderboardTile/LeaderboardTile.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LeaderboardTileProps } from './LeaderboardTileProps';
+export declare const LeaderboardTile: (props: LeaderboardTileProps) => JSX.Element;

package/build/esm/components/LeaderboardTile/LeaderboardTile.js

@@ -0,0 +1,13 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Tile } from '../Tile/Tile.js';
+import { Leaderboard } from '../Leaderboard/Leaderboard.js';
+
+var LeaderboardTile = function (props) {
+    var TileProps = props.TileProps, restProps = __rest(props, ["TileProps"]);
+    return (React.createElement(Tile, __assign({}, TileProps),
+        React.createElement(Leaderboard, __assign({}, restProps))));
+};
+
+export { LeaderboardTile };
+//# sourceMappingURL=LeaderboardTile.js.map

package/build/esm/components/LeaderboardTile/LeaderboardTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeaderboardTile.js","sources":["../../../../src/components/LeaderboardTile/LeaderboardTile.tsx"],"sourcesContent":["import React from 'react'\nimport { LeaderboardTileProps } from './LeaderboardTileProps'\nimport { Tile } from '../Tile'\nimport { Leaderboard } from '../Leaderboard'\n\nexport const LeaderboardTile = (props: LeaderboardTileProps) => {\n  const { TileProps, ...restProps } = props\n\n  return (\n    <Tile {...TileProps}>\n      <Leaderboard {...restProps} />\n    </Tile>\n  )\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,eAAe,GAAG,UAAC,KAA2B,EAAA;IACjD,IAAA,SAAS,GAAmB,KAAK,CAAxB,SAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAnC,CAA2B,WAAA,CAAA,CAAF;AAE/B,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAA;AACjB,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAK,QAAA,CAAA,EAAA,EAAA,SAAS,CAAI,CAAA,CACzB;AAEX;;;;"}

package/build/esm/components/LeaderboardTile/LeaderboardTileProps.d.ts

@@ -0,0 +1,5 @@
+import { TileProps } from '../Tile/TileProps';
+import { LeaderboardProps } from '../Leaderboard/LeaderboardProps';
+export interface LeaderboardTileProps extends LeaderboardProps {
+    TileProps: TileProps;
+}

package/build/esm/components/LeaderboardTile/index.d.ts

@@ -0,0 +1,2 @@
+export { LeaderboardTile } from './LeaderboardTile';
+export { LeaderboardTileProps } from './LeaderboardTileProps';

package/build/esm/components/Tile/Tile.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TileProps } from './TileProps';
+export declare const Tile: (props: TileProps) => JSX.Element;

package/build/esm/components/Tile/Tile.js

@@ -0,0 +1,14 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Card, CardContent } from '@popmenu/common-ui';
+import { useTileStyles } from './TileStyles.js';
+
+var Tile = function (props) {
+    var children = props.children, CardContentProps = props.CardContentProps, restProps = __rest(props, ["children", "CardContentProps"]);
+    var classes = useTileStyles(props);
+    return (React.createElement(Card, __assign({ classes: { root: classes.root } }, restProps),
+        React.createElement(CardContent, __assign({ classes: { root: classes.content } }, CardContentProps), children)));
+};
+
+export { Tile };
+//# sourceMappingURL=Tile.js.map

package/build/esm/components/Tile/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sources":["../../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react'\nimport { Card } from '@popmenu/common-ui'\nimport { CardContent } from '@popmenu/common-ui'\nimport { TileProps } from './TileProps'\nimport { useTileStyles } from './TileStyles'\n\nexport const Tile = (props: TileProps) => {\n  const { children, CardContentProps, ...restProps } = props\n  const classes = useTileStyles(props)\n  return (\n    <Card classes={{ root: classes.root }} {...restProps}>\n      <CardContent classes={{ root: classes.content }} {...CardContentProps}>\n        {children}\n      </CardContent>\n    </Card>\n  )\n}\n"],"names":[],"mappings":";;;;;AAMO,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;AAC3B,IAAA,IAAA,QAAQ,GAAqC,KAAK,CAA1C,QAAA,EAAE,gBAAgB,GAAmB,KAAK,CAAxB,gBAAA,EAAK,SAAS,GAAK,MAAA,CAAA,KAAK,EAApD,CAAA,UAAA,EAAA,kBAAA,CAA4C,CAAF;AAChD,IAAA,IAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC;AACpC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAM,SAAS,CAAA;AAClD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,QAAA,CAAA,EAAA,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,IAAM,gBAAgB,CAAA,EAClE,QAAQ,CACG,CACT;AAEX;;;;"}

package/build/esm/components/Tile/TileProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CardProps, CardContentProps } from '@popmenu/common-ui';
+export interface TileProps extends CardProps {
+    /** Props applied to the built in CardContent component */
+    CardContentProps?: CardContentProps;
+    /** Content of the Tile */
+    children?: React.ReactNode;
+}

package/build/esm/components/Tile/TileStyles.d.ts

@@ -0,0 +1 @@
+export declare const useTileStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "content">;

package/build/esm/components/Tile/TileStyles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from '@material-ui/core';
+
+var useTileStyles = makeStyles(function (theme) { return ({
+    root: {
+        borderRadius: theme.spacing(1),
+        width: '100%',
+    },
+    content: {
+        padding: theme.spacing(3),
+        height: '100%',
+    },
+}); });
+
+export { useTileStyles };
+//# sourceMappingURL=TileStyles.js.map

package/build/esm/components/Tile/TileStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileStyles.js","sources":["../../../../src/components/Tile/TileStyles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\nexport const useTileStyles = makeStyles((theme) => ({\n  root: {\n    borderRadius: theme.spacing(1),\n    width: '100%',\n  },\n  content: {\n    padding: theme.spacing(3),\n    height: '100%',\n  },\n}))\n"],"names":[],"mappings":";;AAEa,IAAA,aAAa,GAAG,UAAU,CAAC,UAAC,KAAK,EAAK,EAAA,QAAC;AAClD,IAAA,IAAI,EAAE;AACJ,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;CACF,EAAC,EAAA;;;;"}

package/build/esm/components/Tile/index.d.ts

@@ -0,0 +1,2 @@
+export { Tile } from './Tile';
+export { TileProps } from './TileProps';

package/build/esm/components/index.d.ts

@@ -0,0 +1,5 @@
+export { Leaderboard, LeaderboardProps } from './Leaderboard';
+export { LeaderboardTile, LeaderboardTileProps } from './LeaderboardTile';
+export { KpiMetric, KpiMetricProps } from './KpiMetric';
+export { KpiMetricTile, KpiMetricTileProps } from './KpiMetricTile';
+export { Tile, TileProps } from './Tile';

package/build/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/build/esm/index.js

@@ -0,0 +1,6 @@
+export { Leaderboard } from './components/Leaderboard/Leaderboard.js';
+export { LeaderboardTile } from './components/LeaderboardTile/LeaderboardTile.js';
+export { KpiMetric } from './components/KpiMetric/KpiMetric.js';
+export { KpiMetricTile } from './components/KpiMetricTile/KpiMetricTile.js';
+export { Tile } from './components/Tile/Tile.js';
+//# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@popmenu/dashboard",
-  "version": "0.126.0",
+  "version": "0.126.2",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React dashboard components for admin app.",
-  "main": "./build/index.js",
-  "module": "./build/index.es.js",
-  "types": "./build/index.d.ts",
+  "main": "./build/cjs/index.js",
+  "module": "./build/esm/index.js",
+  "types": "./build/esm/index.d.ts",
+  "type": "module",
   "files": [
     "/build"
   ],
@@ -24,10 +25,12 @@
   "peerDependencies": {
     "@material-ui/core": "^4.12.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@popmenu/common-ui": "^0.125.0",
+    "@popmenu/web-icons": "^0.125.0",
     "react": "17.x",
     "react-router-dom": "^5.2.0",
     "react-table": "^7.7.0"
   },
   "sideEffects": false,
-  "gitHead": "41f682c20fba98382fb86cf2a3d1809d64fad750"
+  "gitHead": "1cfb282646479bcc4baa627d2b2dfdd20b75a63d"
 }