tournament-brackets-ui 0.1.0

package/src/components/Teams/10-Team/CollapsedLeft.jsx

@@ -0,0 +1,269 @@
+import { Team } from '../../Team';
+import styles from '../stylesheet.module.css';
+
+export default function CollapsedLeft({
+  teams,
+  teamIDFontFamily,
+  teamIDColor,
+  teamIDFontSize,
+}) {
+  const teamIDStyle = {
+    fontFamily: teamIDFontFamily,
+    color:      teamIDColor,
+    fontSize:   teamIDFontSize ? `${teamIDFontSize}pt` : undefined,
+  };
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={944} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={5} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[4]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>3</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderTopRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[5]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderLeft} style={{height: '15.75pt', borderLeft: 'none'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>7</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[0]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>1</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[1]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>4</td>
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[6]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>9</td>
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[7]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>5</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderTopRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[8]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderLeft} style={{height: '15.75pt', borderLeft: 'none'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>8</td>
+            <td className={styles.borderRightBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[2]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>2</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[3]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRight}>6</td>
+            <td className={styles.borderRightBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[9]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRightBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}

package/src/components/Teams/10-Team/CollapsedRight.jsx

@@ -0,0 +1,304 @@
+import { Team } from '../../Team';
+import styles from '../stylesheet.module.css';
+
+export default function CollapsedRight({
+  teams,
+  teamIDFontFamily,
+  teamIDColor,
+  teamIDFontSize,
+}) {
+  const teamIDStyle = {
+    fontFamily: teamIDFontFamily,
+    color:      teamIDColor,
+    fontSize:   teamIDFontSize ? `${teamIDFontSize}pt` : undefined,
+  };
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={742} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={35} span={5} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <Team
+              team={teams[4]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>3</td>
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRBL} />
+            <Team
+              team={teams[5]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>7</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            <Team
+              team={teams[0]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>1</td>
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            <Team
+              team={teams[1]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>4</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            <Team
+              team={teams[6]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderLeft}>9</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <Team
+              team={teams[7]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>5</td>
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRBL} />
+            <Team
+              team={teams[8]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>8</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            <Team
+              team={teams[2]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>2</td>
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            <Team
+              team={teams[3]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>6</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            <Team
+              team={teams[9]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}