@universal-tennis/ui-shared 0.1.54 → 0.1.56

package/dist/components.d.ts

@@ -17,11 +17,14 @@ export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
 export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
 export { default as VisibilityIcon } from "./stories/atoms/Icons/VisibilityIcon";
 export { default as VisibilityOffIcon } from "./stories/atoms/Icons/VisibilityOffIcon";
+export { default as WinnerIndicatorIcon } from "./stories/atoms/Icons/WinnerIndicatorIcon";
 export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
 export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
 export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
 export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
 export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";
+export { default as TeamDrawCard } from "./stories/molecules/Cards/TeamDrawCard";
 export { default as DrawCardTable } from "./stories/organisms/Tables/DrawCardTable";
 export { default as FullPageModal } from "./stories/organisms/Modals/FullPageModal";
 export { default as SortableTable } from "./stories/organisms/Tables/SortableTable";
+export { default as TeamDrawCardTable } from "./stories/organisms/Tables/TeamDrawCardTable";

package/dist/components.js

@@ -20,14 +20,17 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
 export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
 export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
 export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
+export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
 export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
 // ORGANISMS 
 export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
 export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
 export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAEvF,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAE3F,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAC"}

package/dist/stories/atoms/Icons/AddIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function AddIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" }),
         React.createElement("path", { d: "M7.5 4.5C7.5 4.22386 7.72386 4 8 4V4C8.27614 4 8.5 4.22386 8.5 4.5V11.5C8.5 11.7761 8.27614 12 8 12V12C7.72386 12 7.5 11.7761 7.5 11.5V4.5Z" }),
         React.createElement("path", { d: "M4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8V8C12 8.27614 11.7761 8.5 11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8V8Z" })));

package/dist/stories/atoms/Icons/ClockIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function ClockIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3C8.27614 3 8.5 3.22386 8.5 3.5L8.5 8.5C8.5 8.77614 8.27614 9 8 9C7.72386 9 7.5 8.77614 7.5 8.5L7.5 3.5C7.5 3.22386 7.72386 3 8 3Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.4069 6.94146C11.5365 7.18528 11.4439 7.48803 11.2001 7.61767L8.34821 9.13406C8.10439 9.2637 7.80164 9.17114 7.672 8.92733C7.54236 8.68351 7.63492 8.38076 7.87874 8.25112L10.7307 6.73472C10.9745 6.60508 11.2772 6.69764 11.4069 6.94146Z" })));

package/dist/stories/atoms/Icons/Icons.stories.d.ts

@@ -18,3 +18,4 @@ export declare const Session: any;
 export declare const Swap: any;
 export declare const Visibility: any;
 export declare const VisibilityOff: any;
+export declare const WinnerIndicator: any;

package/dist/stories/atoms/Icons/Icons.stories.js

@@ -15,6 +15,7 @@ import SessionIcon from './SessionIcon';
 import SwapIcon from './SwapIcon';
 import VisibilityIcon from './VisibilityIcon';
 import VisibilityOffIcon from './VisibilityOffIcon';
+import WinnerIndicatorIcon from './WinnerIndicatorIcon';
 // Default
 export default {
     title: 'Atoms/Icons',
@@ -68,6 +69,9 @@ function VisibilityIconTemplate(args) {
 function VisibilityOffIconTemplate(args) {
     return React.createElement(VisibilityOffIcon, Object.assign({}, args));
 }
+function WinnerIndicatorIconTemplate(args) {
+    return React.createElement(WinnerIndicatorIcon, Object.assign({}, args));
+}
 // Stories
 export const Add = AddIconTemplate.bind({});
 Add.args = {
@@ -149,4 +153,8 @@ VisibilityOff.args = {
     size: 150,
     color: 'black'
 };
+export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
+WinnerIndicator.args = {
+    isBlack: true
+};
 //# sourceMappingURL=Icons.stories.js.map

package/dist/stories/atoms/Icons/Icons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/atoms/Icons/VisibilityIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function VisibilityIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" })));
 }

package/dist/stories/atoms/Icons/VisibilityOffIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function VisibilityOffIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.646522 15.6464C0.45126 15.4511 0.45126 15.1346 0.646522 14.9393L14.7887 0.797158C14.9839 0.601896 15.3005 0.601896 15.4958 0.797158C15.691 0.99242 15.691 1.309 15.4958 1.50426L1.35363 15.6464C1.15837 15.8417 0.841784 15.8417 0.646522 15.6464Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" })));

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WinnerIndicatorIconProps } from './sharedTypes';
+export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps): JSX.Element;

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+const arrowStyles = {
+    borderTop: '10px solid transparent',
+    borderBottom: '10px solid transparent',
+    borderLeft: '10px solid white',
+    height: 0,
+    width: 0
+};
+const rectangleStyles = {
+    background: 'white',
+    height: 20,
+    width: 3
+};
+const blackArrowStyles = {
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+    borderLeft: '8px solid black',
+    height: 0,
+    width: 0
+};
+const blackRectangleStyles = {
+    background: 'black',
+    height: 16,
+    width: 3
+};
+export default function WinnerIndicatorIcon({ sx, isBlack }) {
+    return (React.createElement(Box, { sx: sx, display: "flex" },
+        React.createElement(Box, { style: isBlack ? blackRectangleStyles : rectangleStyles }),
+        React.createElement(Box, { style: isBlack ? blackArrowStyles : arrowStyles })));
+}
+//# sourceMappingURL=WinnerIndicatorIcon.js.map

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WinnerIndicatorIcon.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/WinnerIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAGpC,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,wBAAwB;IACnC,YAAY,EAAE,wBAAwB;IACtC,UAAU,EAAE,kBAAkB;IAC9B,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AACF,MAAM,eAAe,GAAG;IACtB,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,SAAS,EAAE,uBAAuB;IAClC,YAAY,EAAE,uBAAuB;IACrC,UAAU,EAAE,iBAAiB;IAC7B,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,oBAAoB,GAAG;IAC3B,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,EAAE,EAAE,OAAO,EAA4B;IACnF,OAAO,CACH,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM;QACvB,oBAAC,GAAG,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,eAAe,GAAI;QAChE,oBAAC,GAAG,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,GAAI,CACtD,CACT,CAAC;AACJ,CAAC"}

package/dist/stories/atoms/Icons/sharedTypes.d.ts

@@ -1,4 +1,9 @@
+import { SxProps } from '@mui/material';
 export interface IconProps {
     size: number;
     color: string;
 }
+export interface WinnerIndicatorIconProps {
+    sx?: SxProps;
+    isBlack?: boolean;
+}

package/dist/stories/molecules/Cards/TeamDrawCard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TeamDrawCardProps } from "./sharedTypes";
+export default function TeamDrawCard({ dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team, ...props }: TeamDrawCardProps): JSX.Element;

package/dist/stories/molecules/Cards/TeamDrawCard.js

@@ -0,0 +1,94 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
+const StyledCard = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px 24px',
+    width: '100%',
+    height: '100px',
+    backgroundColor: 'var(--white)',
+    border: '1px solid var(--cool-grey-600)',
+    marginLeft: '25px',
+    marginRight: '25px',
+    position: 'relative'
+});
+const BottomGrid = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: '8px',
+});
+export default function TeamDrawCard(_a) {
+    var { dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team } = _a, props = __rest(_a, ["dateLabel", "locationLabel", "timeLabel", "matchInfo", "isPosition1Winner", "isPosition2Winner", "isScorelessMatch", "position1Team", "position2Team"]);
+    const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
+    const { SECONDARY } = CATEGORY_ENUM;
+    return (React.createElement(StyledCard, Object.assign({ className: "team-draw-card" }, props),
+        React.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 0.5 },
+            isPosition1Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 20 } }),
+            React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
+                React.createElement(SquareAvatarWithName, { name: position1Team === null || position1Team === void 0 ? void 0 : position1Team.name, fontSize: isPosition1Winner ? MediumMedium : MediumBook, href: position1Team.href, isBye: !(position1Team === null || position1Team === void 0 ? void 0 : position1Team.name) }),
+                React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
+                    "(", position1Team === null || position1Team === void 0 ? void 0 :
+                    position1Team.record,
+                    ")")),
+            React.createElement(Typography, { category: SECONDARY, size: isPosition1Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
+        React.createElement(Box, { display: "flex", justifyContent: "space-between" },
+            isPosition2Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 50 } }),
+            React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
+                React.createElement(SquareAvatarWithName, { name: position2Team === null || position2Team === void 0 ? void 0 : position2Team.name, fontSize: isPosition2Winner ? MediumMedium : MediumBook, href: position2Team.href, isBye: !(position2Team === null || position2Team === void 0 ? void 0 : position2Team.name) }),
+                React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
+                    "(", position2Team === null || position2Team === void 0 ? void 0 :
+                    position2Team.record,
+                    ")")),
+            React.createElement(Typography, { category: SECONDARY, size: isPosition2Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)),
+        React.createElement(BottomGrid, null,
+            React.createElement(Box, null,
+                React.createElement(Box, { display: "flex" },
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, dateLabel),
+                    React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, timeLabel),
+                    React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, matchInfo)),
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                    }, category: SECONDARY, size: XSmallBook }, locationLabel)))));
+}
+//# sourceMappingURL=TeamDrawCard.js.map

package/dist/stories/molecules/Cards/TeamDrawCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":"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"}

package/dist/stories/molecules/Cards/sharedTypes.d.ts

@@ -13,6 +13,8 @@ type OnChangeArgs = {
 type PositionTeam = {
     name: string;
     points: number;
+    href?: string;
+    record?: number;
 };
 export type DrawCardProps = {
     options: Options;
@@ -33,6 +35,17 @@ export type DrawCardProps = {
     onViewClick?: VoidFunction;
     onChange: ({ position, id }: OnChangeArgs) => void;
 };
+export type TeamDrawCardProps = {
+    dateLabel: string;
+    locationLabel: string;
+    timeLabel: string;
+    matchInfo?: string;
+    isPosition1Winner?: boolean;
+    isPosition2Winner?: boolean;
+    isScorelessMatch?: boolean;
+    position1Team: PositionTeam;
+    position2Team: PositionTeam;
+};
 export interface TeamCardProps {
     title: string;
     description: string;

package/dist/stories/organisms/Tables/Tables.stories.d.ts

@@ -3,4 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const DrawTable: any;
+export declare const TeamDrawTable: any;
+export declare const MobileTeamDrawTable: any;
 export declare const SortableTable: any;

package/dist/stories/organisms/Tables/Tables.stories.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
 import DrawCard from '../../molecules/Cards/DrawCard';
 import DrawCardTable from './DrawCardTable';
-import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA } from './mockData';
+import TeamDrawCardTable from './TeamDrawCardTable';
+import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA } from './mockData';
 const onOrderPropertyChange = () => { };
 // Default
 export default {
@@ -11,6 +13,9 @@ export default {
 function DrawCardTableTemplate(args) {
     return React.createElement(DrawCardTable, Object.assign({}, args));
 }
+function TeamDrawCardTableTemplate(args) {
+    return React.createElement(TeamDrawCardTable, Object.assign({}, args));
+}
 const headerRows = [
     { name: 'Round 1' },
     { name: 'Quarterfinal' },
@@ -41,12 +46,38 @@ const tableRows = [
         React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
     ],
 ];
+const teamTableRows = [
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+];
 // Stories
 export const DrawTable = DrawCardTableTemplate.bind({});
 DrawTable.args = {
     headerRows,
     tableRows,
 };
+export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
+TeamDrawTable.args = {
+    headerRows,
+    tableRows: teamTableRows,
+};
+export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
+MobileTeamDrawTable.args = {
+    headerRows,
+    tableRows: teamTableRows,
+    isMobile: true
+};
 export const SortableTable = DrawCardTableTemplate.bind({});
 SortableTable.args = {
     headCells: MOCK_HEAD_CELLS,

package/dist/stories/organisms/Tables/Tables.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardTableProps } from './sharedTypes';
+export default function TeamDrawCardTable({ headerRows, tableRows, isMobile, ...props }: DrawCardTableProps): JSX.Element | null;

package/dist/stories/organisms/Tables/TeamDrawCardTable.js

@@ -0,0 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
+import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
+import ArrowBackIosOutlinedIcon from '@mui/icons-material/ArrowBackIosOutlined';
+import Typography from '../../atoms/Typography/Typography';
+const StyledHeader = styled(Grid)({
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+});
+const StyledGrid = styled(Grid)({
+    '&:nth-last-child(-n+2) .team-draw-card': {
+        '&:before': {
+            position: 'absolute',
+            content: '""',
+            width: '25px',
+            height: '1px',
+            left: 0,
+            top: '50%',
+            backgroundColor: 'var(--cool-grey-600)',
+            transform: 'translateX(-100%)',
+        },
+    },
+    '&:nth-child(-n+2) .team-draw-card': {
+        '&:after': {
+            position: 'absolute',
+            content: '""',
+            width: '25px',
+            height: '1px',
+            right: 0,
+            top: '50%',
+            backgroundColor: 'var(--cool-grey-600)',
+            transform: 'translateX(100%)',
+        },
+    },
+});
+const GridSections = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: '8px',
+    paddingBottom: '8px',
+});
+const TableMobileSection = styled(Grid) `
+  flex-direction: column;
+`;
+export default function TeamDrawCardTable(_a) {
+    var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
+    const [activeStep, setActiveStep] = React.useState(0);
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+    if (!headerRows || !tableRows)
+        return null;
+    const totalColumns = Math.floor(12 / headerRows.length);
+    const formatTableRows = tableRows.map((row, index) => {
+        if (index > 2)
+            return; // Table can only support 3 columns 
+        const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+        const sectionAmount = tableRows[index].length;
+        return (React.createElement(StyledGrid, { key: index, xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { key: idx, sx: { height: rowSectionsHeight } }, row[idx])))));
+    });
+    const formatDesktopRows = (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, sx: { height: '60px' } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
+            React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
+        React.createElement(Grid, { container: true }, formatTableRows)));
+    const formatMobileRows = (React.createElement(Box, null,
+        React.createElement(Grid, { container: true, justifyContent: "space-between" },
+            React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1, alignSelf: 'flex-start' } },
+                React.createElement(ArrowBackIosOutlinedIcon, null)),
+            React.createElement(StyledHeader, { xs: totalColumns },
+                React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, headerRows[activeStep].name)),
+            React.createElement(Button, { onClick: handleNext, disabled: activeStep === tableRows.length - 1 },
+                React.createElement(ArrowForwardIosOutlinedIcon, null))),
+        React.createElement(TableMobileSection, { container: true },
+            React.createElement(GridSections, { sx: { display: 'flex', flexDirection: 'column', gap: '10px' } }, tableRows[activeStep]))));
+    return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? formatMobileRows : formatDesktopRows));
+}
+//# sourceMappingURL=TeamDrawCardTable.js.map

package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/Tables/mockData.d.ts

@@ -47,4 +47,24 @@ export declare const SAMPLE_CARD_DATA: {
         points: number;
     };
 };
+export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
+    dateLabel: string;
+    timeLabel: string;
+    locationLabel: string;
+    matchInfo: string;
+    isPosition1Winner: boolean;
+    isPosition2Winner: boolean;
+    position1Team: {
+        name: string;
+        points: number;
+        href: string;
+        record: number;
+    };
+    position2Team: {
+        name: string;
+        points: number;
+        href: string;
+        record: number;
+    };
+};
 export {};

package/dist/stories/organisms/Tables/mockData.js

@@ -76,4 +76,24 @@ export const SAMPLE_CARD_DATA = {
         points: 4,
     }
 };
+export const SAMPLE_TEAM_PAGE_CARD_DATA = {
+    dateLabel: 'Dec 20',
+    timeLabel: '9:00pm',
+    locationLabel: 'Taube Tennis Center',
+    matchInfo: 'Round 1, Match 2',
+    isPosition1Winner: true,
+    isPosition2Winner: false,
+    position1Team: {
+        name: 'Apples',
+        points: 10,
+        href: 'https://www.reddit.com',
+        record: 2
+    },
+    position2Team: {
+        name: 'Pears',
+        points: 4,
+        href: 'https://www.reddit.com',
+        record: 2
+    }
+};
 //# sourceMappingURL=mockData.js.map

package/dist/stories/organisms/Tables/mockData.js.map

@@ -1 +1 @@
-{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkBhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAY,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1C,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,SAAS,IACN,SAAS,EAAC,IAAI,EACd,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,QAAQ;YAEhB,oBAAC,UAAU,QAAE,MAAM,CAAc,CACzB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,IAAI,CAAc,CACvB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,OAAO,CAAc,CAC1B,CACL,CAEd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE;IAC3D,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE;CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,kBAAkB;KAC5B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB;KAC7B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,eAAe;QACvB,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,EAAE,EAAE,GAAE,CAAC;IAChD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,GAAG;IAClB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,KAAK;IACxB,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE;KACX;IACD,aAAa,EAAE;QACb,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}
+{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/components.jsx

@@ -22,6 +22,7 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
 export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
 export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
 export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
+export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
 
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
@@ -29,8 +30,10 @@ export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
 
 // ORGANISMS 
 export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
 export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
 export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';

package/src/stories/atoms/Icons/AddIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function AddIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" />
           <path d="M7.5 4.5C7.5 4.22386 7.72386 4 8 4V4C8.27614 4 8.5 4.22386 8.5 4.5V11.5C8.5 11.7761 8.27614 12 8 12V12C7.72386 12 7.5 11.7761 7.5 11.5V4.5Z" />
           <path d="M4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8V8C12 8.27614 11.7761 8.5 11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8V8Z" />

package/src/stories/atoms/Icons/ClockIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function ClockIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M8 3C8.27614 3 8.5 3.22386 8.5 3.5L8.5 8.5C8.5 8.77614 8.27614 9 8 9C7.72386 9 7.5 8.77614 7.5 8.5L7.5 3.5C7.5 3.22386 7.72386 3 8 3Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M11.4069 6.94146C11.5365 7.18528 11.4439 7.48803 11.2001 7.61767L8.34821 9.13406C8.10439 9.2637 7.80164 9.17114 7.672 8.92733C7.54236 8.68351 7.63492 8.38076 7.87874 8.25112L10.7307 6.73472C10.9745 6.60508 11.2772 6.69764 11.4069 6.94146Z" />

package/src/stories/atoms/Icons/Icons.stories.tsx

@@ -16,7 +16,8 @@ import SessionIcon from './SessionIcon';
 import SwapIcon from './SwapIcon';
 import VisibilityIcon from './VisibilityIcon';
 import VisibilityOffIcon from './VisibilityOffIcon';
-import { IconProps } from './sharedTypes';
+import WinnerIndicatorIcon from './WinnerIndicatorIcon';
+import { IconProps, WinnerIndicatorIconProps } from './sharedTypes';
 
 // Default
 export default {
@@ -88,6 +89,10 @@ function VisibilityOffIconTemplate(args: IconProps) {
   return <VisibilityOffIcon {...args} />;  
 }
 
+function WinnerIndicatorIconTemplate(args: WinnerIndicatorIconProps) {
+  return <WinnerIndicatorIcon {...args} />;  
+}
+
 // Stories
 export const Add = AddIconTemplate.bind({});
 Add.args = {
@@ -184,3 +189,8 @@ VisibilityOff.args = {
   size: 150,
   color: 'black'
 };
+
+export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
+WinnerIndicator.args = {
+  isBlack: true
+};

package/src/stories/atoms/Icons/VisibilityIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function VisibilityIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
       </svg>

package/src/stories/atoms/Icons/VisibilityOffIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function VisibilityOffIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M0.646522 15.6464C0.45126 15.4511 0.45126 15.1346 0.646522 14.9393L14.7887 0.797158C14.9839 0.601896 15.3005 0.601896 15.4958 0.797158C15.691 0.99242 15.691 1.309 15.4958 1.50426L1.35363 15.6464C1.15837 15.8417 0.841784 15.8417 0.646522 15.6464Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />

package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { WinnerIndicatorIconProps } from './sharedTypes';
+
+const arrowStyles = {
+  borderTop: '10px solid transparent',
+  borderBottom: '10px solid transparent',
+  borderLeft: '10px solid white',
+  height: 0,
+  width: 0
+};
+const rectangleStyles = {
+  background: 'white',
+  height: 20,
+  width: 3
+};
+
+const blackArrowStyles = {
+  borderTop: '8px solid transparent',
+  borderBottom: '8px solid transparent',
+  borderLeft: '8px solid black',
+  height: 0,
+  width: 0
+};
+
+const blackRectangleStyles = {
+  background: 'black',
+  height: 16,
+  width: 3
+};
+
+export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps) {
+  return (
+      <Box sx={sx} display="flex">
+          <Box style={isBlack ? blackRectangleStyles : rectangleStyles} />
+          <Box style={isBlack ? blackArrowStyles : arrowStyles} />
+      </Box>
+  );
+}

package/src/stories/atoms/Icons/sharedTypes.tsx

@@ -1,4 +1,10 @@
+import { SxProps } from '@mui/material';
+
 export interface IconProps {
     size: number;
     color: string;
   }
+export interface WinnerIndicatorIconProps {
+  sx?: SxProps;
+  isBlack?: boolean;
+}

package/src/stories/molecules/Cards/TeamDrawCard.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
+import { TeamDrawCardProps } from "./sharedTypes";
+
+const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  height: '100px',
+  backgroundColor: 'var(--white)',
+  border: '1px solid var(--cool-grey-600)',
+  marginLeft: '25px',
+  marginRight: '25px',
+  position: 'relative'
+});
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '8px',
+});
+
+export default function TeamDrawCard({ 
+  dateLabel, locationLabel, timeLabel, matchInfo,
+  isPosition1Winner, isPosition2Winner,
+  isScorelessMatch, position1Team, position2Team, ...props
+}: TeamDrawCardProps) {
+  const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
+  const { SECONDARY } = CATEGORY_ENUM;
+
+  return (
+      <StyledCard className="team-draw-card" {...props}>
+          <Box display="flex" justifyContent="space-between" mb={0.5}>
+              {isPosition1Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 20 }} />}
+              <Box display="flex" alignItems="center" gap={0.5}>
+                  <SquareAvatarWithName 
+                      name={position1Team?.name} 
+                      fontSize={isPosition1Winner ? MediumMedium : MediumBook} 
+                      href={position1Team.href}
+                      isBye={!position1Team?.name}
+                  />
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      (
+                      {position1Team?.record}
+                      )
+                  </Typography>
+              </Box>
+              <Typography category={SECONDARY} size={isPosition1Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? '-' : position1Team?.points}
+              </Typography>
+          </Box>
+          <Box display="flex" justifyContent="space-between">
+              {isPosition2Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 50 }} />}
+              <Box display="flex" alignItems="center" gap={0.5}>
+                  <SquareAvatarWithName 
+                      name={position2Team?.name} 
+                      fontSize={isPosition2Winner ? MediumMedium : MediumBook} 
+                      href={position2Team.href}
+                      isBye={!position2Team?.name}
+                  />
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      (
+                      {position2Team?.record}
+                      )
+                  </Typography>
+              </Box>
+              <Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? '-' : position2Team?.points}
+              </Typography>
+          </Box>
+          <BottomGrid> 
+              <Box>
+                  <Box display="flex">
+                      <Typography 
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {dateLabel}
+                      </Typography>
+                      <Typography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                          pl={0.5}
+                          pr={0.5}
+                      >
+                          &bull;
+                      </Typography>
+                      <Typography
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {timeLabel}
+                      </Typography>
+                      <Typography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                          pl={0.5}
+                          pr={0.5}
+                      >
+                          &bull;
+                      </Typography>
+                      <Typography
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {matchInfo}
+                      </Typography>
+                  </Box>
+                  <Typography
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                      }}
+                      category={SECONDARY}
+                      size={XSmallBook}
+                  >
+                      {locationLabel}
+                  </Typography>
+              </Box>
+          </BottomGrid>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/sharedTypes.ts

@@ -18,6 +18,8 @@ type OnChangeArgs = {
 type PositionTeam = {
   name: string;
   points: number;
+  href?: string;
+  record?: number;
 }
 
 export type DrawCardProps = {
@@ -40,6 +42,18 @@ export type DrawCardProps = {
     onChange: ({ position, id }: OnChangeArgs) => void;
   }
 
+export type TeamDrawCardProps = {
+    dateLabel: string;
+    locationLabel: string;
+    timeLabel: string;
+    matchInfo?: string;
+    isPosition1Winner?: boolean;
+    isPosition2Winner?: boolean;
+    isScorelessMatch?: boolean;
+    position1Team: PositionTeam;
+    position2Team: PositionTeam;
+  }
+
 export interface TeamCardProps {
     title: string; 
     description: string;

package/src/stories/organisms/Tables/Tables.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
 import DrawCard from '../../molecules/Cards/DrawCard';
 import DrawCardTable from './DrawCardTable';
+import TeamDrawCardTable from './TeamDrawCardTable';
 import { DrawCardTableProps } from './sharedTypes';
 import {
-  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA 
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA
 } from './mockData';
 
 const onOrderPropertyChange = () => {};
@@ -18,6 +20,10 @@ function DrawCardTableTemplate(args: DrawCardTableProps) {
   return <DrawCardTable {...args} />;
 }
 
+function TeamDrawCardTableTemplate(args: DrawCardTableProps) {
+  return <TeamDrawCardTable {...args} />;
+}
+
 const headerRows = [
   { name: 'Round 1' },
   { name: 'Quarterfinal' },
@@ -50,6 +56,22 @@ const tableRows = [
   ],
 ];
 
+const teamTableRows = [
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+];
+
 // Stories
 export const DrawTable = DrawCardTableTemplate.bind({});
 DrawTable.args = {
@@ -57,6 +79,19 @@ DrawTable.args = {
   tableRows,
 };
 
+export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
+TeamDrawTable.args = {
+  headerRows,
+  tableRows: teamTableRows,
+};
+
+export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
+MobileTeamDrawTable.args = {
+  headerRows,
+  tableRows: teamTableRows,
+  isMobile: true
+};
+
 export const SortableTable = DrawCardTableTemplate.bind({});
 SortableTable.args = {
   headCells: MOCK_HEAD_CELLS,

package/src/stories/organisms/Tables/TeamDrawCardTable.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
+import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
+import ArrowBackIosOutlinedIcon from '@mui/icons-material/ArrowBackIosOutlined';
+import Typography from '../../atoms/Typography/Typography';
+import { DrawCardTableProps } from './sharedTypes';
+
+const StyledHeader = styled(Grid)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+});
+
+const StyledGrid = styled(Grid)({
+  '&:nth-last-child(-n+2) .team-draw-card': {
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      width: '25px',
+      height: '1px',
+      left: 0,
+      top: '50%',
+      backgroundColor: 'var(--cool-grey-600)',
+      transform: 'translateX(-100%)',
+    },
+  },
+  '&:nth-child(-n+2) .team-draw-card': {
+    '&:after': {
+      position: 'absolute',
+      content: '""',
+      width: '25px',
+      height: '1px',
+      right: 0,
+      top: '50%',
+      backgroundColor: 'var(--cool-grey-600)',
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+const GridSections = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: '8px',
+  paddingBottom: '8px',
+});
+
+const TableMobileSection = styled(Grid)`
+  flex-direction: column;
+`;
+
+export default function TeamDrawCardTable({
+  headerRows,
+  tableRows,
+  isMobile,
+  ...props
+}: DrawCardTableProps) {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  if (!headerRows || !tableRows) return null;
+
+  const totalColumns = Math.floor(12 / headerRows.length); 
+
+  const formatTableRows = tableRows.map((row, index) => {
+    if (index > 2) return; // Table can only support 3 columns 
+    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+
+    return (
+        <StyledGrid key={index} xs={totalColumns}>
+            {[...Array(sectionAmount)].map((section, idx) => (
+                <GridSections key={idx} sx={{ height: rowSectionsHeight }}>
+                    {row[idx]}
+                </GridSections>
+            ))}
+        </StyledGrid>
+    );
+  });
+
+  const formatDesktopRows = (
+      <>  
+          <Grid container sx={{ height: '60px' }}>
+              {headerRows.map((row) => (
+                  <StyledHeader key={row.name} xs={totalColumns}>
+                      <Typography category="secondary" size="small-medium-cap">{row.name}</Typography>
+                  </StyledHeader>
+              ))}
+          </Grid>
+          <Grid container>
+              {formatTableRows}
+          </Grid>
+      </> 
+  );
+  
+  const formatMobileRows = (
+      <Box>
+          <Grid container justifyContent="space-between">
+              <Button
+                  color="inherit"
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  sx={{ mr: 1, alignSelf: 'flex-start' }}
+              >
+                  <ArrowBackIosOutlinedIcon />
+              </Button>
+              <StyledHeader xs={totalColumns}>
+                  <Typography category="secondary" size="small-medium-cap">{headerRows[activeStep].name}</Typography>
+              </StyledHeader>
+              <Button onClick={handleNext} disabled={activeStep === tableRows.length - 1}>
+                  <ArrowForwardIosOutlinedIcon />
+              </Button>
+          </Grid>
+          <TableMobileSection container>
+              <GridSections sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                  {tableRows[activeStep]}
+              </GridSections>
+          </TableMobileSection>
+      </Box>
+  );
+
+  return (
+      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+          {isMobile ? formatMobileRows : formatDesktopRows}
+      </Box>
+  );
+}

package/src/stories/organisms/Tables/mockData.tsx

@@ -107,3 +107,24 @@ export const SAMPLE_CARD_DATA = {
     points: 4,
   }
 };
+
+export const SAMPLE_TEAM_PAGE_CARD_DATA = {
+  dateLabel: 'Dec 20',
+  timeLabel: '9:00pm',
+  locationLabel: 'Taube Tennis Center',
+  matchInfo: 'Round 1, Match 2',
+  isPosition1Winner: true, 
+  isPosition2Winner: false,
+  position1Team: {
+    name: 'Apples',
+    points: 10,
+    href: 'https://www.reddit.com',
+    record: 2
+  },
+  position2Team: {
+    name: 'Pears',
+    points: 4,
+    href: 'https://www.reddit.com',
+    record: 2
+  }
+};