diff --git a/dist/cjs/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map b/dist/cjs/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
index 3f3733e..b7a88d5 100644
--- a/dist/cjs/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
+++ b/dist/cjs/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AAKA,wBAAgB,iBAAiB,gBAoBhC"}
\ No newline at end of file
+{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AAKA,wBAAgB,iBAAiB,gBAmBhC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts
new file mode 100644
index 0000000..1c069b5
--- /dev/null
+++ b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+import { DefaultProps, MantineNumberSize, Selectors } from '@mantine/core';
+export interface DemoMantineComponentStylesParams {
+    radius?: MantineNumberSize;
+}
+declare const useStyles: (params: DemoMantineComponentStylesParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+declare type DemoMantineComponentStylesNames = Selectors<typeof useStyles>;
+export interface DemoMantineComponentProps extends DefaultProps<DemoMantineComponentStylesNames, DemoMantineComponentStylesParams> {
+    radius?: MantineNumberSize;
+}
+export declare const DemoMantineComponent: React.FC<DemoMantineComponentProps>;
+export {};
+//# sourceMappingURL=DemoMantineComponent.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map
new file mode 100644
index 0000000..1af64de
--- /dev/null
+++ b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"DemoMantineComponent.d.ts","sourceRoot":"","sources":["../../src/DemoMantineComponent/DemoMantineComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EACZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,gCAAgC;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS;;;;;;CAKZ,CAAC;AAGJ,aAAK,+BAA+B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEnE,MAAM,WAAW,yBACf,SAAQ,YAAY,CAAC,+BAA+B,EAAE,gCAAgC,CAAC;IACvF,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAMD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBpE,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts
new file mode 100644
index 0000000..3c41147
--- /dev/null
+++ b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithClassNameRenaming(): JSX.Element;
+export declare function WithSXUsage(): JSX.Element;
+export declare function WithStylesUsage(): JSX.Element;
+//# sourceMappingURL=DemoMantineComponent.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map
new file mode 100644
index 0000000..f83a805
--- /dev/null
+++ b/dist/cjs/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"DemoMantineComponent.story.d.ts","sourceRoot":"","sources":["../../src/DemoMantineComponent/DemoMantineComponent.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAAiD;AAEjD,wBAAgB,qBAAqB,gBAEpC;AAED,wBAAgB,WAAW,gBAE1B;AAED,wBAAgB,eAAe,gBAQ9B"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/IconButton/IconButton.d.ts b/dist/cjs/declarations/IconButton/IconButton.d.ts
index b25d87e..cedf6dc 100644
--- a/dist/cjs/declarations/IconButton/IconButton.d.ts
+++ b/dist/cjs/declarations/IconButton/IconButton.d.ts
@@ -1,5 +1,5 @@
-import { Sx } from "@mantine/core";
-import React, { MouseEventHandler } from "react";
+import { Sx } from '@mantine/core';
+import React, { MouseEventHandler } from 'react';
 export interface IconButtonProps {
     label: React.ReactNode;
     className?: string;
diff --git a/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts
new file mode 100644
index 0000000..bb1361e
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerLossesProps {
+    losses: unknown;
+}
+export declare const PlayerLosses: React.FC<PlayerLossesProps>;
+//# sourceMappingURL=PlayerLosses.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map
new file mode 100644
index 0000000..90182b4
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerLosses.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerLosses/PlayerLosses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAepD,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts
new file mode 100644
index 0000000..13db2e6
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWin(): JSX.Element;
+export declare function WithAValidWinValue(): JSX.Element;
+export declare function WithNegative(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerLosses.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map
new file mode 100644
index 0000000..8048076
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerLosses.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerLosses/PlayerLosses.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA+C;AAE/C,wBAAgB,SAAS,gBAExB;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts
new file mode 100644
index 0000000..dd74ca1
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerRankProps {
+    rank: unknown;
+}
+export declare const PlayerRank: React.FC<PlayerRankProps>;
+//# sourceMappingURL=PlayerRank.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map
new file mode 100644
index 0000000..82bb030
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerRank.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerRank/PlayerRank.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAahD,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts
new file mode 100644
index 0000000..db8bf8c
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithAValidRank(): JSX.Element;
+export declare function WithNegativeOne(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerRank.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map
new file mode 100644
index 0000000..58d8fab
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerRank.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerRank/PlayerRank.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA6C;AAE7C,wBAAgB,cAAc,gBAE7B;AAED,wBAAgB,eAAe,gBAE9B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts
new file mode 100644
index 0000000..02956f7
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerStreakProps {
+    streak: unknown;
+}
+export declare const PlayerStreak: React.FC<PlayerStreakProps>;
+//# sourceMappingURL=PlayerStreak.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map
new file mode 100644
index 0000000..dc0bad1
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStreak.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerStreak/PlayerStreak.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqBpD,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts
new file mode 100644
index 0000000..84565f1
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoStreak(): JSX.Element;
+export declare function WithPositiveStreak(): JSX.Element;
+export declare function WithNegativeStreak(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerStreak.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map
new file mode 100644
index 0000000..6c15aef
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStreak.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerStreak/PlayerStreak.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA+C;AAE/C,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts
new file mode 100644
index 0000000..34ea909
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+export interface PlayerWinRatioProps {
+    wins: unknown;
+    losses: unknown;
+}
+export declare const PlayerWinRatio: React.FC<PlayerWinRatioProps>;
+//# sourceMappingURL=PlayerWinRatio.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map
new file mode 100644
index 0000000..90adc1c
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWinRatio.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWinRatio/PlayerWinRatio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts
new file mode 100644
index 0000000..04fb63c
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts
@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWinNoLoss(): JSX.Element;
+export declare function Usage(): JSX.Element;
+export declare function WithNegativeWins(): JSX.Element;
+export declare function WithNegativeLosses(): JSX.Element;
+export declare function WithUndefinedWins(): JSX.Element;
+export declare function WithUndefinedLosses(): JSX.Element;
+export declare function WithNullWins(): JSX.Element;
+export declare function WithNullLosses(): JSX.Element;
+//# sourceMappingURL=PlayerWinRatio.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map
new file mode 100644
index 0000000..4bb727b
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWinRatio.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAAiD;AAEjD,wBAAgB,eAAe,gBAE9B;AAED,wBAAgB,KAAK,gBAEpB;AAED,wBAAgB,gBAAgB,gBAE/B;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,iBAAiB,gBAEhC;AAED,wBAAgB,mBAAmB,gBAElC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,cAAc,gBAE7B"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts
new file mode 100644
index 0000000..71009b9
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerWinsProps {
+    wins: unknown;
+}
+export declare const PlayerWins: React.FC<PlayerWinsProps>;
+//# sourceMappingURL=PlayerWins.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map
new file mode 100644
index 0000000..de54a55
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWins.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWins/PlayerWins.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAehD,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts
new file mode 100644
index 0000000..23c4956
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWin(): JSX.Element;
+export declare function WithAValidWinValue(): JSX.Element;
+export declare function WithNegative(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerWins.story.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map
new file mode 100644
index 0000000..6ab8910
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWins.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWins/PlayerWins.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA6C;AAE7C,wBAAgB,SAAS,gBAExB;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/index.d.ts b/dist/cjs/declarations/PlayerStats/index.d.ts
new file mode 100644
index 0000000..122fc79
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/index.d.ts
@@ -0,0 +1,6 @@
+export { PlayerLosses } from "./PlayerLosses/PlayerLosses";
+export { PlayerWins } from "./PlayerWins/PlayerWins";
+export { PlayerWinRatio } from "./PlayerWinRatio/PlayerWinRatio";
+export { PlayerRank } from "./PlayerRank/PlayerRank";
+export { PlayerStreak } from "./PlayerStreak/PlayerStreak";
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/PlayerStats/index.d.ts.map b/dist/cjs/declarations/PlayerStats/index.d.ts.map
new file mode 100644
index 0000000..63f6c80
--- /dev/null
+++ b/dist/cjs/declarations/PlayerStats/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PlayerStats/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/declarations/index.d.ts b/dist/cjs/declarations/index.d.ts
index 8e397dd..c779013 100644
--- a/dist/cjs/declarations/index.d.ts
+++ b/dist/cjs/declarations/index.d.ts
@@ -1,6 +1,7 @@
 export { TestComponent } from './TestComponent/TestComponent';
 export type { TestComponentProps } from './TestComponent/TestComponent';
-export { IconButton } from "./IconButton/IconButton";
-export type { IconButtonProps } from "./IconButton/IconButton";
-export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle";
+export { IconButton } from './IconButton/IconButton';
+export type { IconButtonProps } from './IconButton/IconButton';
+export { ColorSchemeToggle } from './ColorSchemeToggle/ColorSchemeToggle';
+export * from "./PlayerStats";
 //# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/cjs/declarations/index.d.ts.map b/dist/cjs/declarations/index.d.ts.map
index 468de01..b6cd0bf 100644
--- a/dist/cjs/declarations/index.d.ts.map
+++ b/dist/cjs/declarations/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,cAAc,eAAe,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index b114886..496c381 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -44,12 +44,90 @@ function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1
 
 function ColorSchemeToggle() {
     const { colorScheme, toggleColorScheme } = core.useMantineColorScheme();
-    return (e__default["default"].createElement(IconButton, { label: colorScheme === "dark" ? "Light mode" : "Dark mode", onClick: () => toggleColorScheme(), sx: (theme) => ({
-            backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-            color: theme.colorScheme === "dark" ? theme.colors.yellow[4] : theme.colors.blue[6],
-        }) }, colorScheme === "dark" ? (e__default["default"].createElement(lIe, { size: 20, stroke: 1.5 })) : (e__default["default"].createElement(Uve, { size: 20, stroke: 1.5 }))));
+    return (e__default["default"].createElement(IconButton, { label: colorScheme === 'dark' ? 'Light mode' : 'Dark mode', onClick: () => toggleColorScheme(), sx: (theme) => ({
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+            color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+        }) }, colorScheme === 'dark' ? (e__default["default"].createElement(lIe, { size: 20, stroke: 1.5 })) : (e__default["default"].createElement(Uve, { size: 20, stroke: 1.5 }))));
 }
 
+const PlayerLosses = ({ losses }) => {
+    let content = '-';
+    let color;
+    if (losses !== undefined && losses !== null) {
+        const lossesNumber = Number(losses);
+        if (!isNaN(lossesNumber) && lossesNumber >= 0) {
+            content = lossesNumber + 'L';
+            color = 'red';
+        }
+    }
+    return (e__default["default"].createElement(e__default["default"].Fragment, null,
+        e__default["default"].createElement(core.Text, { color: color }, content)));
+};
+
+const PlayerWins = ({ wins }) => {
+    let content = '-';
+    let color;
+    if (wins !== undefined && wins !== null) {
+        const winsNumber = Number(wins);
+        if (!isNaN(winsNumber) && winsNumber >= 0) {
+            content = winsNumber + 'W';
+            color = 'green';
+        }
+    }
+    return (e__default["default"].createElement(e__default["default"].Fragment, null,
+        e__default["default"].createElement(core.Text, { color: color }, content)));
+};
+
+const PlayerWinRatio = ({ wins, losses }) => {
+    let content = '-';
+    if (wins !== undefined && wins !== null && losses !== undefined && losses !== null) {
+        const winsNumber = Number(wins);
+        const lossesNumber = Number(losses);
+        if (!isNaN(winsNumber) && winsNumber >= 0 && !isNaN(lossesNumber) && lossesNumber >= 0 && (lossesNumber + winsNumber > 0)) {
+            content = ((winsNumber / (winsNumber + lossesNumber)) * 100).toFixed(0) + '%';
+        }
+    }
+    return (e__default["default"].createElement(e__default["default"].Fragment, null,
+        e__default["default"].createElement(core.Text, null, content)));
+};
+
+const PlayerRank = ({ rank }) => {
+    let content = '-';
+    if (rank !== undefined && rank !== null) {
+        const rankNumber = Number(rank);
+        if (!isNaN(rankNumber) && rankNumber > -1) {
+            content = '#' + rankNumber;
+        }
+    }
+    return (e__default["default"].createElement(e__default["default"].Fragment, null,
+        e__default["default"].createElement(core.Text, null, content)));
+};
+
+const PlayerStreak = ({ streak }) => {
+    let content = '-';
+    let color;
+    if (streak !== undefined && streak !== null) {
+        const streakNumber = Number(streak);
+        if (!isNaN(streakNumber)) {
+            content = '' + streakNumber;
+            if (streakNumber > 0) {
+                color = 'green';
+                content = '+' + streakNumber;
+            }
+            if (streakNumber < 0) {
+                color = 'red';
+            }
+        }
+    }
+    return (e__default["default"].createElement(e__default["default"].Fragment, null,
+        e__default["default"].createElement(core.Text, { color: color }, content)));
+};
+
 exports.ColorSchemeToggle = ColorSchemeToggle;
 exports.IconButton = IconButton;
+exports.PlayerLosses = PlayerLosses;
+exports.PlayerRank = PlayerRank;
+exports.PlayerStreak = PlayerStreak;
+exports.PlayerWinRatio = PlayerWinRatio;
+exports.PlayerWins = PlayerWins;
 exports.TestComponent = TestComponent;
diff --git a/dist/esm/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map b/dist/esm/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
index 3f3733e..b7a88d5 100644
--- a/dist/esm/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
+++ b/dist/esm/declarations/ColorSchemeToggle/ColorSchemeToggle.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AAKA,wBAAgB,iBAAiB,gBAoBhC"}
\ No newline at end of file
+{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AAKA,wBAAgB,iBAAiB,gBAmBhC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts
new file mode 100644
index 0000000..1c069b5
--- /dev/null
+++ b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+import { DefaultProps, MantineNumberSize, Selectors } from '@mantine/core';
+export interface DemoMantineComponentStylesParams {
+    radius?: MantineNumberSize;
+}
+declare const useStyles: (params: DemoMantineComponentStylesParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+declare type DemoMantineComponentStylesNames = Selectors<typeof useStyles>;
+export interface DemoMantineComponentProps extends DefaultProps<DemoMantineComponentStylesNames, DemoMantineComponentStylesParams> {
+    radius?: MantineNumberSize;
+}
+export declare const DemoMantineComponent: React.FC<DemoMantineComponentProps>;
+export {};
+//# sourceMappingURL=DemoMantineComponent.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map
new file mode 100644
index 0000000..1af64de
--- /dev/null
+++ b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"DemoMantineComponent.d.ts","sourceRoot":"","sources":["../../src/DemoMantineComponent/DemoMantineComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EACZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,gCAAgC;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS;;;;;;CAKZ,CAAC;AAGJ,aAAK,+BAA+B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEnE,MAAM,WAAW,yBACf,SAAQ,YAAY,CAAC,+BAA+B,EAAE,gCAAgC,CAAC;IACvF,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAMD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBpE,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts
new file mode 100644
index 0000000..3c41147
--- /dev/null
+++ b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithClassNameRenaming(): JSX.Element;
+export declare function WithSXUsage(): JSX.Element;
+export declare function WithStylesUsage(): JSX.Element;
+//# sourceMappingURL=DemoMantineComponent.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map
new file mode 100644
index 0000000..f83a805
--- /dev/null
+++ b/dist/esm/declarations/DemoMantineComponent/DemoMantineComponent.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"DemoMantineComponent.story.d.ts","sourceRoot":"","sources":["../../src/DemoMantineComponent/DemoMantineComponent.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAAiD;AAEjD,wBAAgB,qBAAqB,gBAEpC;AAED,wBAAgB,WAAW,gBAE1B;AAED,wBAAgB,eAAe,gBAQ9B"}
\ No newline at end of file
diff --git a/dist/esm/declarations/IconButton/IconButton.d.ts b/dist/esm/declarations/IconButton/IconButton.d.ts
index b25d87e..cedf6dc 100644
--- a/dist/esm/declarations/IconButton/IconButton.d.ts
+++ b/dist/esm/declarations/IconButton/IconButton.d.ts
@@ -1,5 +1,5 @@
-import { Sx } from "@mantine/core";
-import React, { MouseEventHandler } from "react";
+import { Sx } from '@mantine/core';
+import React, { MouseEventHandler } from 'react';
 export interface IconButtonProps {
     label: React.ReactNode;
     className?: string;
diff --git a/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts
new file mode 100644
index 0000000..bb1361e
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerLossesProps {
+    losses: unknown;
+}
+export declare const PlayerLosses: React.FC<PlayerLossesProps>;
+//# sourceMappingURL=PlayerLosses.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map
new file mode 100644
index 0000000..90182b4
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerLosses.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerLosses/PlayerLosses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAepD,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts
new file mode 100644
index 0000000..13db2e6
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWin(): JSX.Element;
+export declare function WithAValidWinValue(): JSX.Element;
+export declare function WithNegative(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerLosses.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map
new file mode 100644
index 0000000..8048076
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerLosses/PlayerLosses.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerLosses.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerLosses/PlayerLosses.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA+C;AAE/C,wBAAgB,SAAS,gBAExB;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts
new file mode 100644
index 0000000..dd74ca1
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerRankProps {
+    rank: unknown;
+}
+export declare const PlayerRank: React.FC<PlayerRankProps>;
+//# sourceMappingURL=PlayerRank.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map
new file mode 100644
index 0000000..82bb030
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerRank.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerRank/PlayerRank.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAahD,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts
new file mode 100644
index 0000000..db8bf8c
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithAValidRank(): JSX.Element;
+export declare function WithNegativeOne(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerRank.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map
new file mode 100644
index 0000000..58d8fab
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerRank/PlayerRank.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerRank.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerRank/PlayerRank.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA6C;AAE7C,wBAAgB,cAAc,gBAE7B;AAED,wBAAgB,eAAe,gBAE9B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts
new file mode 100644
index 0000000..02956f7
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerStreakProps {
+    streak: unknown;
+}
+export declare const PlayerStreak: React.FC<PlayerStreakProps>;
+//# sourceMappingURL=PlayerStreak.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map
new file mode 100644
index 0000000..dc0bad1
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStreak.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerStreak/PlayerStreak.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqBpD,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts
new file mode 100644
index 0000000..84565f1
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoStreak(): JSX.Element;
+export declare function WithPositiveStreak(): JSX.Element;
+export declare function WithNegativeStreak(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerStreak.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map
new file mode 100644
index 0000000..6c15aef
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerStreak/PlayerStreak.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStreak.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerStreak/PlayerStreak.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA+C;AAE/C,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts
new file mode 100644
index 0000000..34ea909
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+export interface PlayerWinRatioProps {
+    wins: unknown;
+    losses: unknown;
+}
+export declare const PlayerWinRatio: React.FC<PlayerWinRatioProps>;
+//# sourceMappingURL=PlayerWinRatio.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map
new file mode 100644
index 0000000..90adc1c
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWinRatio.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWinRatio/PlayerWinRatio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts
new file mode 100644
index 0000000..04fb63c
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts
@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWinNoLoss(): JSX.Element;
+export declare function Usage(): JSX.Element;
+export declare function WithNegativeWins(): JSX.Element;
+export declare function WithNegativeLosses(): JSX.Element;
+export declare function WithUndefinedWins(): JSX.Element;
+export declare function WithUndefinedLosses(): JSX.Element;
+export declare function WithNullWins(): JSX.Element;
+export declare function WithNullLosses(): JSX.Element;
+//# sourceMappingURL=PlayerWinRatio.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map
new file mode 100644
index 0000000..4bb727b
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWinRatio.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWinRatio/PlayerWinRatio.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAAiD;AAEjD,wBAAgB,eAAe,gBAE9B;AAED,wBAAgB,KAAK,gBAEpB;AAED,wBAAgB,gBAAgB,gBAE/B;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,iBAAiB,gBAEhC;AAED,wBAAgB,mBAAmB,gBAElC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,cAAc,gBAE7B"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts
new file mode 100644
index 0000000..71009b9
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlayerWinsProps {
+    wins: unknown;
+}
+export declare const PlayerWins: React.FC<PlayerWinsProps>;
+//# sourceMappingURL=PlayerWins.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map
new file mode 100644
index 0000000..de54a55
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWins.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWins/PlayerWins.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAehD,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts
new file mode 100644
index 0000000..23c4956
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function WithNoWin(): JSX.Element;
+export declare function WithAValidWinValue(): JSX.Element;
+export declare function WithNegative(): JSX.Element;
+export declare function WithUndefined(): JSX.Element;
+export declare function WithNull(): JSX.Element;
+//# sourceMappingURL=PlayerWins.story.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map
new file mode 100644
index 0000000..6ab8910
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/PlayerWins/PlayerWins.story.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"PlayerWins.story.d.ts","sourceRoot":"","sources":["../../../src/PlayerStats/PlayerWins/PlayerWins.story.tsx"],"names":[],"mappings":";;;;AAGA,wBAA6C;AAE7C,wBAAgB,SAAS,gBAExB;AAED,wBAAgB,kBAAkB,gBAEjC;AAED,wBAAgB,YAAY,gBAE3B;AAED,wBAAgB,aAAa,gBAE5B;AAED,wBAAgB,QAAQ,gBAEvB"}
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/index.d.ts b/dist/esm/declarations/PlayerStats/index.d.ts
new file mode 100644
index 0000000..122fc79
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/index.d.ts
@@ -0,0 +1,6 @@
+export { PlayerLosses } from "./PlayerLosses/PlayerLosses";
+export { PlayerWins } from "./PlayerWins/PlayerWins";
+export { PlayerWinRatio } from "./PlayerWinRatio/PlayerWinRatio";
+export { PlayerRank } from "./PlayerRank/PlayerRank";
+export { PlayerStreak } from "./PlayerStreak/PlayerStreak";
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/PlayerStats/index.d.ts.map b/dist/esm/declarations/PlayerStats/index.d.ts.map
new file mode 100644
index 0000000..63f6c80
--- /dev/null
+++ b/dist/esm/declarations/PlayerStats/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PlayerStats/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/declarations/index.d.ts b/dist/esm/declarations/index.d.ts
index 8e397dd..c779013 100644
--- a/dist/esm/declarations/index.d.ts
+++ b/dist/esm/declarations/index.d.ts
@@ -1,6 +1,7 @@
 export { TestComponent } from './TestComponent/TestComponent';
 export type { TestComponentProps } from './TestComponent/TestComponent';
-export { IconButton } from "./IconButton/IconButton";
-export type { IconButtonProps } from "./IconButton/IconButton";
-export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle";
+export { IconButton } from './IconButton/IconButton';
+export type { IconButtonProps } from './IconButton/IconButton';
+export { ColorSchemeToggle } from './ColorSchemeToggle/ColorSchemeToggle';
+export * from "./PlayerStats";
 //# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/esm/declarations/index.d.ts.map b/dist/esm/declarations/index.d.ts.map
index 468de01..b6cd0bf 100644
--- a/dist/esm/declarations/index.d.ts.map
+++ b/dist/esm/declarations/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,cAAc,eAAe,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/index.js b/dist/esm/index.js
index 35b7091..28ca401 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -1,6 +1,6 @@
 import * as e from 'react';
 import e__default from 'react';
-import { useMantineTheme, Tooltip, ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { useMantineTheme, Tooltip, ActionIcon, useMantineColorScheme, Text } from '@mantine/core';
 
 function TestComponent({ color, children }) {
     const theme = useMantineTheme();
@@ -18,10 +18,83 @@ function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1
 
 function ColorSchemeToggle() {
     const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-    return (e__default.createElement(IconButton, { label: colorScheme === "dark" ? "Light mode" : "Dark mode", onClick: () => toggleColorScheme(), sx: (theme) => ({
-            backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-            color: theme.colorScheme === "dark" ? theme.colors.yellow[4] : theme.colors.blue[6],
-        }) }, colorScheme === "dark" ? (e__default.createElement(lIe, { size: 20, stroke: 1.5 })) : (e__default.createElement(Uve, { size: 20, stroke: 1.5 }))));
+    return (e__default.createElement(IconButton, { label: colorScheme === 'dark' ? 'Light mode' : 'Dark mode', onClick: () => toggleColorScheme(), sx: (theme) => ({
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+            color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+        }) }, colorScheme === 'dark' ? (e__default.createElement(lIe, { size: 20, stroke: 1.5 })) : (e__default.createElement(Uve, { size: 20, stroke: 1.5 }))));
 }
 
-export { ColorSchemeToggle, IconButton, TestComponent };
+const PlayerLosses = ({ losses }) => {
+    let content = '-';
+    let color;
+    if (losses !== undefined && losses !== null) {
+        const lossesNumber = Number(losses);
+        if (!isNaN(lossesNumber) && lossesNumber >= 0) {
+            content = lossesNumber + 'L';
+            color = 'red';
+        }
+    }
+    return (e__default.createElement(e__default.Fragment, null,
+        e__default.createElement(Text, { color: color }, content)));
+};
+
+const PlayerWins = ({ wins }) => {
+    let content = '-';
+    let color;
+    if (wins !== undefined && wins !== null) {
+        const winsNumber = Number(wins);
+        if (!isNaN(winsNumber) && winsNumber >= 0) {
+            content = winsNumber + 'W';
+            color = 'green';
+        }
+    }
+    return (e__default.createElement(e__default.Fragment, null,
+        e__default.createElement(Text, { color: color }, content)));
+};
+
+const PlayerWinRatio = ({ wins, losses }) => {
+    let content = '-';
+    if (wins !== undefined && wins !== null && losses !== undefined && losses !== null) {
+        const winsNumber = Number(wins);
+        const lossesNumber = Number(losses);
+        if (!isNaN(winsNumber) && winsNumber >= 0 && !isNaN(lossesNumber) && lossesNumber >= 0 && (lossesNumber + winsNumber > 0)) {
+            content = ((winsNumber / (winsNumber + lossesNumber)) * 100).toFixed(0) + '%';
+        }
+    }
+    return (e__default.createElement(e__default.Fragment, null,
+        e__default.createElement(Text, null, content)));
+};
+
+const PlayerRank = ({ rank }) => {
+    let content = '-';
+    if (rank !== undefined && rank !== null) {
+        const rankNumber = Number(rank);
+        if (!isNaN(rankNumber) && rankNumber > -1) {
+            content = '#' + rankNumber;
+        }
+    }
+    return (e__default.createElement(e__default.Fragment, null,
+        e__default.createElement(Text, null, content)));
+};
+
+const PlayerStreak = ({ streak }) => {
+    let content = '-';
+    let color;
+    if (streak !== undefined && streak !== null) {
+        const streakNumber = Number(streak);
+        if (!isNaN(streakNumber)) {
+            content = '' + streakNumber;
+            if (streakNumber > 0) {
+                color = 'green';
+                content = '+' + streakNumber;
+            }
+            if (streakNumber < 0) {
+                color = 'red';
+            }
+        }
+    }
+    return (e__default.createElement(e__default.Fragment, null,
+        e__default.createElement(Text, { color: color }, content)));
+};
+
+export { ColorSchemeToggle, IconButton, PlayerLosses, PlayerRank, PlayerStreak, PlayerWinRatio, PlayerWins, TestComponent };