tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,304 @@
+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={1401} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+          <col width={35} span={6} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[0]}
+              teamStyle={teamIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </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}>1</td>
+            <td className={styles.borderBottomLeft} style={{borderLeft: 'none'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopRight} style={{borderTop: 'none'}} />
+          </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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderRight}>5</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderTop} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[2]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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}>2</td>
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[3]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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 className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.xl01}>7</td>
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.borderTopLeft} style={{borderTop: 'none'}} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[4]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </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.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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}>3</td>
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[5]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </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.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </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 rowSpan={2} className={styles.borderRight}>6</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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'}}>
+            <Team
+              team={teams[6]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none', borderLeft: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <Team
+              team={teams[7]}
+              teamStyle={teamIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}} />
+          </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/08-Team/CollapsedRight.jsx

@@ -0,0 +1,232 @@
+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={1015} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={35} span={4} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+        </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} />
+            <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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+          </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 rowSpan={2} className={styles.borderLeft}>1</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.borderTopLeft} />
+          </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.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.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}>5</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} />
+          </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} />
+            <td className={styles.xl01} />
+            <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.borderLeft} />
+            <td className={styles.borderLeft} />
+            <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.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>2</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.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.borderLeft} />
+            <td className={styles.xl01} />
+            <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} />
+          </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}>7</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.borderLeft} />
+            <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.borderLeft} />
+            <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 rowSpan={2} className={styles.borderLeft}>3</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} />
+            <td className={styles.borderTopLeft} />
+          </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.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.borderLeft} />
+            <td className={styles.borderLeft} />
+            <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} />
+          </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}>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.borderLeft} />
+            <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.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <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.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'}} />
+          </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.borderRBL} />
+            <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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}