@times-components/ts-components 1.88.0 → 1.88.2-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.88.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.88.0...@times-components/ts-components@1.88.1) (2024-06-03)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
 # [1.88.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.87.0...@times-components/ts-components@1.88.0) (2024-05-31)
 
 

package/dist/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.js

@@ -45,7 +45,7 @@ export const OptaFootballFixturesTicker = React.memo(({ season, competition, dat
     isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-TeamName');
     return (React.createElement(React.Fragment, null,
         React.createElement(WidgetContainer, { ref: ref }),
-        !isReady && (React.createElement(PlaceholderContainer, { height: 100 },
+        !isReady && (React.createElement(PlaceholderContainer, { height: 80 },
             React.createElement(Placeholder, null)))));
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL2ZpeHR1cmVzLXRpY2tlci9PcHRhRm9vdGJhbGxGaXh0dXJlc1RpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDM0MsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFFeEYsTUFBTSxDQUFDLE1BQU0sMEJBQTBCLEdBUWxDLEtBQUssQ0FBQyxJQUFJLENBQ2IsQ0FBQyxFQUNDLE1BQU0sRUFDTixXQUFXLEVBQ1gsU0FBUyxFQUNULE9BQU8sRUFDUCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFDTixFQUFFLEVBQUU7SUFDSCxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsU0FBUyxFQUFrQixDQUFDO0lBRTlDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3ZELE1BQU0sY0FBYyxHQUFHLHFCQUFxQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRTFELFNBQVMsQ0FDUCxHQUFHLEVBQUU7UUFDSCxNQUFNLEtBQUssR0FBRyxVQUFVLENBQUM7UUFFekIsWUFBWSxFQUFFLENBQUM7UUFDZixjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdEIsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNyQixJQUFJLEdBQUcsQ0FBQyxPQUFPLEVBQUU7Z0JBQ2YsR0FBRyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsV0FBVyxDQUFDLGFBQWEsRUFBRTtvQkFDakQsS0FBSztvQkFDTCxNQUFNLEVBQUUsVUFBVTtvQkFDbEIsTUFBTTtvQkFDTixXQUFXO29CQUNYLFNBQVM7b0JBQ1QsT0FBTztvQkFDUCxVQUFVO29CQUNWLFdBQVc7b0JBQ1gsS0FBSztvQkFDTCxJQUFJLEVBQUUsSUFBSTtvQkFDVixnQkFBZ0IsRUFBRSxJQUFJO29CQUN0QixRQUFRLEVBQUUsT0FBTztvQkFDakIsV0FBVyxFQUFFLE9BQU87b0JBQ3BCLFlBQVksRUFBRSxLQUFLO29CQUNuQixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixhQUFhLEVBQUUsSUFBSTtvQkFDbkIsV0FBVyxFQUFFLENBQUMsY0FBYztvQkFDNUIsU0FBUyxFQUFFLElBQUk7b0JBQ2YsU0FBUyxFQUFFLElBQUk7b0JBQ2YsV0FBVyxFQUFFLFlBQVk7aUJBQzFCLENBQUMsQ0FBQyxTQUFTLENBQUM7Z0JBRWIsYUFBYSxFQUFFLENBQUM7Z0JBQ2hCLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNsQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxFQUNELENBQUMsR0FBRyxDQUFDLENBQ04sQ0FBQztJQUVGLGNBQWMsSUFBSSw0QkFBNEIsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDLENBQUM7SUFFckUsT0FBTyxDQUNMO1FBQ0Usb0JBQUMsZUFBZSxJQUFDLEdBQUcsRUFBRSxHQUFHLEdBQUk7UUFFNUIsQ0FBQyxPQUFPLElBQUksQ0FDWCxvQkFBQyxvQkFBb0IsSUFBQyxNQUFNLEVBQUUsR0FBRztZQUMvQixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUNBLENBQ0osQ0FBQztBQUNKLENBQUMsQ0FDRixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL2ZpeHR1cmVzLXRpY2tlci9PcHRhRm9vdGJhbGxGaXh0dXJlc1RpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDM0MsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFFeEYsTUFBTSxDQUFDLE1BQU0sMEJBQTBCLEdBUWxDLEtBQUssQ0FBQyxJQUFJLENBQ2IsQ0FBQyxFQUNDLE1BQU0sRUFDTixXQUFXLEVBQ1gsU0FBUyxFQUNULE9BQU8sRUFDUCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFDTixFQUFFLEVBQUU7SUFDSCxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsU0FBUyxFQUFrQixDQUFDO0lBRTlDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3ZELE1BQU0sY0FBYyxHQUFHLHFCQUFxQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRTFELFNBQVMsQ0FDUCxHQUFHLEVBQUU7UUFDSCxNQUFNLEtBQUssR0FBRyxVQUFVLENBQUM7UUFFekIsWUFBWSxFQUFFLENBQUM7UUFDZixjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdEIsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNyQixJQUFJLEdBQUcsQ0FBQyxPQUFPLEVBQUU7Z0JBQ2YsR0FBRyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsV0FBVyxDQUFDLGFBQWEsRUFBRTtvQkFDakQsS0FBSztvQkFDTCxNQUFNLEVBQUUsVUFBVTtvQkFDbEIsTUFBTTtvQkFDTixXQUFXO29CQUNYLFNBQVM7b0JBQ1QsT0FBTztvQkFDUCxVQUFVO29CQUNWLFdBQVc7b0JBQ1gsS0FBSztvQkFDTCxJQUFJLEVBQUUsSUFBSTtvQkFDVixnQkFBZ0IsRUFBRSxJQUFJO29CQUN0QixRQUFRLEVBQUUsT0FBTztvQkFDakIsV0FBVyxFQUFFLE9BQU87b0JBQ3BCLFlBQVksRUFBRSxLQUFLO29CQUNuQixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixhQUFhLEVBQUUsSUFBSTtvQkFDbkIsV0FBVyxFQUFFLENBQUMsY0FBYztvQkFDNUIsU0FBUyxFQUFFLElBQUk7b0JBQ2YsU0FBUyxFQUFFLElBQUk7b0JBQ2YsV0FBVyxFQUFFLFlBQVk7aUJBQzFCLENBQUMsQ0FBQyxTQUFTLENBQUM7Z0JBRWIsYUFBYSxFQUFFLENBQUM7Z0JBQ2hCLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNsQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxFQUNELENBQUMsR0FBRyxDQUFDLENBQ04sQ0FBQztJQUVGLGNBQWMsSUFBSSw0QkFBNEIsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDLENBQUM7SUFFckUsT0FBTyxDQUNMO1FBQ0Usb0JBQUMsZUFBZSxJQUFDLEdBQUcsRUFBRSxHQUFHLEdBQUk7UUFFNUIsQ0FBQyxPQUFPLElBQUksQ0FDWCxvQkFBQyxvQkFBb0IsSUFBQyxNQUFNLEVBQUUsRUFBRTtZQUM5QixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUNBLENBQ0osQ0FBQztBQUNKLENBQUMsQ0FDRixDQUFDIn0=

package/dist/components/opta/football/fixtures-ticker/styles.js

@@ -41,7 +41,37 @@ export const WidgetContainer = styled(WidgetContainerBase) `
     font-family: Roboto !important;
   }
 
+  .Opta-Scroll,
+  .Opta-Window {
+    height: 80px;
+  }
+
   @media (max-width: ${breakpoints.small}px) {
+    .Opta-Scroll {
+      &::before,
+      &::after {
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        z-index: 15;
+        transition: all 0.3s linear 0s;
+        background-image: linear-gradient(
+          -90deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgb(255, 255, 255) 100%
+        );
+        width: 64px;
+        height: 100%;
+        bottom: 0px;
+        left: 0;
+      }
+      &::after {
+        left: unset;
+        right: 0px;
+        transform: rotate(180deg);
+      }
+    }
+
     .Opta-Window {
       left: 0 !important;
       right: 0 !important;
@@ -50,10 +80,18 @@ export const WidgetContainer = styled(WidgetContainerBase) `
 
   .Opta-Scroller {
     background-color: white !important;
-
-    border: 1px solid #999999 !important;
+    border: 1px solid #999 !important;
     border-radius: 2px;
+    box-sizing: border-box;
     padding: 39px 0 !important;
+    width: 28px !important;
+
+    &:hover {
+      background-color: #f5f5f5 !important;
+    }
+    &:active {
+      background-color: #eee !important;
+    }
 
     &::after {
       background: rgba(0, 0, 0, 0)
@@ -78,11 +116,18 @@ export const WidgetContainer = styled(WidgetContainerBase) `
     @media (max-width: ${breakpoints.small}px) {
       display: none !important;
     }
+    @media (max-width: ${breakpoints.medium}px) {
+      width: 18px !important;
+    }
+    @media (max-width: ${breakpoints.wide}px) {
+      width: 24px !important;
+    }
   }
 
   .Opta-fixture {
-    background-color: #f5f5f5;
+    background-color: white;
     border-radius: 4px;
+    box-sizing: border-box;
     height: 80px;
     width: 160px !important;
     margin-inline: 4px;
@@ -106,16 +151,36 @@ export const WidgetContainer = styled(WidgetContainerBase) `
     .Opta-timings {
       height: 24px !important;
       order: -1;
-      color: #aaaaaa !important;
+      color: #696969 !important;
+    }
+
+    .Opta-timings .Opta-Time * {
+      font-weight: 700;
+      color: #01000d !important;
     }
 
     .Opta-TeamName,
     .Opta-Team-Score {
       color: #01000d !important;
-      font-weight: 700 !important;
+      font-family: 'Roboto-Medium' !important;
+    }
+
+    &.Opta-prematch {
+      background-color: #f5f5f5;
+      .Opta-Team-Score::after {
+        content: '-';
+      }
+      .Opta-timings .Opta-Time * {
+        font-weight: 400;
+        color: #696969 !important;
+      }
+    }
+
+    &.Opta-result {
+      border: 1px solid #ccc;
     }
-    &.Opta-prematch .Opta-Team-Score::after {
-      content: '-';
+    &.Opta-live {
+      border: 1px solid #01000d;
     }
 
     .Opta-Image-Team-Small {
@@ -338,4 +403,4 @@ export const WidgetContainer = styled(WidgetContainerBase) `
     }
   }
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10aWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTlFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRXZELE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7NkJBZXJDLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozs7bUNBU1IsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Q0FVcEQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTs7Ozs7dUJBS25DLFdBQVcsQ0FBQyxLQUFLOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3lCQWtDZixXQUFXLENBQUMsS0FBSzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2dDQXlEVixPQUFPLENBQUMsVUFBVSxDQUFDLG1CQUFtQjs7Ozs7dUJBSy9DLE9BQU8sQ0FBQyxVQUFVLENBQUMsV0FBVzs2QkFDeEIsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7Ozs7Ozs7bUNBYVYsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7O2lDQVdwQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozt1QkFPNUIsT0FBTyxDQUFDLFVBQVUsQ0FBQyxXQUFXOzZCQUN4QixLQUFLLENBQUMsUUFBUTs7Ozs7Ozs7eUJBUWxCLE9BQU8sQ0FBQyxPQUFPLENBQUMsS0FBSzsrQkFDZixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7cUNBUVYsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7OztxQ0FrQmxCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FDQXlCbEIsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUNBK0JsQixXQUFXLENBQUMsTUFBTTs7Ozs7O21DQU1wQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7O3VCQVk5QixPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU87NkJBQ3BCLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0FnQ1osT0FBTyxDQUFDLFVBQVUsQ0FBQyxPQUFPO3VDQUNwQixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7Ozs7bUNBV3BCLE9BQU8sQ0FBQyxPQUFPLENBQUMsS0FBSzs7Ozs7Ozs7Ozs7OztDQWF2RCxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10aWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTlFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRXZELE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7NkJBZXJDLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozs7bUNBU1IsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Q0FVcEQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTs7Ozs7Ozs7Ozt1QkFVbkMsV0FBVyxDQUFDLEtBQUs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7eUJBbUVmLFdBQVcsQ0FBQyxLQUFLOzs7eUJBR2pCLFdBQVcsQ0FBQyxNQUFNOzs7eUJBR2xCLFdBQVcsQ0FBQyxJQUFJOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Z0NBOEVULE9BQU8sQ0FBQyxVQUFVLENBQUMsbUJBQW1COzs7Ozt1QkFLL0MsT0FBTyxDQUFDLFVBQVUsQ0FBQyxXQUFXOzZCQUN4QixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7Ozs7OzttQ0FhVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7aUNBV3BCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7O3VCQU81QixPQUFPLENBQUMsVUFBVSxDQUFDLFdBQVc7NkJBQ3hCLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozt5QkFRbEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOytCQUNmLEtBQUssQ0FBQyxVQUFVOzs7Ozs7OztxQ0FRVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FDQWtCbEIsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUNBeUJsQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztxQ0ErQmxCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7bUNBTXBCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7Ozs7dUJBWTlCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs2QkFDcEIsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lDQWdDWixPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU87dUNBQ3BCLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7OzttQ0FXcEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOzs7Ozs7Ozs7Ozs7O0NBYXZELENBQUMifQ==

package/dist/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const OptaFootballFixturesTournament: React.FC<{
+    season: string;
+    competition: string;
+    date_from?: string;
+    date_to?: string;
+    round?: string;
+    full_width?: boolean;
+}>;

package/dist/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.js

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import { initSettings, initStyleSheet, initScript, initElement, initComponent } from '../../utils/config';
+import { Container, PlaceholderContainer } from '../shared-styles';
+import { WidgetContainer } from './styles';
+import { isNationalCompetition } from '../../utils/replaceNationalTeamDetails';
+import { useUpdateNationalTeamDetails } from '../../utils/useUpdateNationalTeamDetails';
+export const OptaFootballFixturesTournament = React.memo(({ season, competition, date_from, date_to, round, full_width }) => {
+    const ref = React.createRef();
+    const [isReady, setIsReady] = useState(false);
+    const isNationalComp = isNationalCompetition(competition);
+    useEffect(() => {
+        const sport = 'football';
+        initSettings();
+        initStyleSheet(sport);
+        initScript().then(() => {
+            if (ref.current) {
+                ref.current.innerHTML = initElement('opta-widget', {
+                    sport,
+                    widget: 'fixtures',
+                    season,
+                    competition,
+                    date_from,
+                    date_to,
+                    round,
+                    live: true,
+                    grouping: 'matchday',
+                    show_grouping: true,
+                    sub_grouping: 'date|matchday|group',
+                    show_subgrouping: true,
+                    show_crests: !isNationalComp,
+                    date_format: 'dddd MMMM D YYYY',
+                    breakpoints: 520
+                }, initElement('opta-widget', {
+                    sport,
+                    widget: 'match_summary',
+                    season: '',
+                    competition: '',
+                    match: '',
+                    live: true,
+                    show_crests: true,
+                    show_goals: true,
+                    show_cards: 'red',
+                    breakpoints: '520'
+                })).outerHTML;
+                initComponent();
+                setIsReady(true);
+            }
+        });
+    }, []);
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
+    return (React.createElement(Container, { border: isReady, fullWidth: full_width },
+        React.createElement(WidgetContainer, { ref: ref, isNationalComp: isNationalComp }),
+        !isReady && (React.createElement(PlaceholderContainer, null,
+            React.createElement(Placeholder, null)))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUb3VybmFtZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10b3VybmFtZW50L09wdGFGb290YmFsbEZpeHR1cmVzVG91cm5hbWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxTQUFTLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBRXhGLE1BQU0sQ0FBQyxNQUFNLDhCQUE4QixHQU90QyxLQUFLLENBQUMsSUFBSSxDQUNiLENBQUMsRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUU7SUFDakUsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLFNBQVMsRUFBa0IsQ0FBQztJQUU5QyxNQUFNLENBQUMsT0FBTyxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUN2RCxNQUFNLGNBQWMsR0FBRyxxQkFBcUIsQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUUxRCxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsTUFBTSxLQUFLLEdBQUcsVUFBVSxDQUFDO1FBRXpCLFlBQVksRUFBRSxDQUFDO1FBQ2YsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRXRCLFVBQVUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDckIsSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFO2dCQUNmLEdBQUcsQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLFdBQVcsQ0FDakMsYUFBYSxFQUNiO29CQUNFLEtBQUs7b0JBQ0wsTUFBTSxFQUFFLFVBQVU7b0JBQ2xCLE1BQU07b0JBQ04sV0FBVztvQkFDWCxTQUFTO29CQUNULE9BQU87b0JBQ1AsS0FBSztvQkFDTCxJQUFJLEVBQUUsSUFBSTtvQkFDVixRQUFRLEVBQUUsVUFBVTtvQkFDcEIsYUFBYSxFQUFFLElBQUk7b0JBQ25CLFlBQVksRUFBRSxxQkFBcUI7b0JBQ25DLGdCQUFnQixFQUFFLElBQUk7b0JBQ3RCLFdBQVcsRUFBRSxDQUFDLGNBQWM7b0JBQzVCLFdBQVcsRUFBRSxrQkFBa0I7b0JBQy9CLFdBQVcsRUFBRSxHQUFHO2lCQUNqQixFQUNELFdBQVcsQ0FBQyxhQUFhLEVBQUU7b0JBQ3pCLEtBQUs7b0JBQ0wsTUFBTSxFQUFFLGVBQWU7b0JBQ3ZCLE1BQU0sRUFBRSxFQUFFO29CQUNWLFdBQVcsRUFBRSxFQUFFO29CQUNmLEtBQUssRUFBRSxFQUFFO29CQUNULElBQUksRUFBRSxJQUFJO29CQUNWLFdBQVcsRUFBRSxJQUFJO29CQUNqQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsVUFBVSxFQUFFLEtBQUs7b0JBQ2pCLFdBQVcsRUFBRSxLQUFLO2lCQUNuQixDQUFDLENBQ0gsQ0FBQyxTQUFTLENBQUM7Z0JBRVosYUFBYSxFQUFFLENBQUM7Z0JBQ2hCLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNsQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsY0FBYyxJQUFJLDRCQUE0QixDQUFDLEdBQUcsRUFBRSxXQUFXLENBQUMsQ0FBQztJQUVqRSxPQUFPLENBQ0wsb0JBQUMsU0FBUyxJQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVU7UUFDL0Msb0JBQUMsZUFBZSxJQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsY0FBYyxFQUFFLGNBQWMsR0FBSTtRQUU1RCxDQUFDLE9BQU8sSUFBSSxDQUNYLG9CQUFDLG9CQUFvQjtZQUNuQixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUNTLENBQ2IsQ0FBQztBQUNKLENBQUMsQ0FDRixDQUFDIn0=

package/dist/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
+import { OptaFootballFixturesTournament } from './OptaFootballFixturesTournament';
+const showcase = {
+    children: [
+        {
+            decorator: (storyFn) => (React.createElement(ArticleHarness, null, storyFn())),
+            type: 'decorator'
+        },
+        {
+            component: () => (React.createElement(OptaFootballFixturesTournament, { season: "2020", competition: "3", round: "1", full_width: true })),
+            name: 'Fixture Tournament',
+            type: 'story'
+        }
+    ],
+    name: 'Typescript Component/In Article/Football/Fixtures'
+};
+// @ts-ignore
+showcaseConverter(module, showcase);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUb3VybmFtZW50LnN0b3JpZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL2ZpeHR1cmVzLXRvdXJuYW1lbnQvT3B0YUZvb3RiYWxsRml4dHVyZXNUb3VybmFtZW50LnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0scURBQXFELENBQUM7QUFDckYsT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFbEYsTUFBTSxRQUFRLEdBQUc7SUFDZixRQUFRLEVBQUU7UUFDUjtZQUNFLFNBQVMsRUFBRSxDQUFDLE9BQThCLEVBQUUsRUFBRSxDQUFDLENBQzdDLG9CQUFDLGNBQWMsUUFBRSxPQUFPLEVBQUUsQ0FBa0IsQ0FDN0M7WUFDRCxJQUFJLEVBQUUsV0FBVztTQUNsQjtRQUNEO1lBQ0UsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQ2Ysb0JBQUMsOEJBQThCLElBQzdCLE1BQU0sRUFBQyxNQUFNLEVBQ2IsV0FBVyxFQUFDLEdBQUcsRUFDZixLQUFLLEVBQUMsR0FBRyxFQUNULFVBQVUsU0FDVixDQUNIO1lBQ0QsSUFBSSxFQUFFLG9CQUFvQjtZQUMxQixJQUFJLEVBQUUsT0FBTztTQUNkO0tBQ0Y7SUFDRCxJQUFJLEVBQUUsbURBQW1EO0NBQzFELENBQUM7QUFFRixhQUFhO0FBQ2IsaUJBQWlCLENBQUMsTUFBTSxFQUFFLFFBQVEsQ0FBQyxDQUFDIn0=

package/dist/components/opta/football/fixtures-tournament/__tests__/OptaFootballFixtures.test.d.ts

@@ -0,0 +1,2 @@
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';

package/dist/components/opta/football/fixtures-tournament/__tests__/OptaFootballFixtures.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';
+jest.mock('@times-components/image', () => ({
+    Placeholder: () => React.createElement(React.Fragment, null, "Placeholder")
+}));
+const mockInitSettings = jest.fn();
+const mockInitStyleSheet = jest.fn();
+const mockInitComponent = jest.fn();
+const mockInitElement = () => {
+    const element = document.createElement('div');
+    element.appendChild(document.createTextNode('Widget'));
+    return element;
+};
+jest.mock('../../../utils/config', () => ({
+    initSettings: mockInitSettings,
+    initStyleSheet: mockInitStyleSheet,
+    initScript: () => new Promise(resolve => resolve({})),
+    initElement: mockInitElement,
+    initComponent: mockInitComponent
+}));
+import { OptaFootballFixturesTournament } from '../OptaFootballFixturesTournament';
+const requiredProps = {
+    season: '2023',
+    competition: '3'
+};
+describe('OptaFootballFixturesTournament', () => {
+    it('should render correctly', async () => {
+        const { asFragment, getByText } = render(React.createElement(OptaFootballFixturesTournament, Object.assign({}, requiredProps)));
+        expect(asFragment()).toMatchSnapshot();
+        await waitForElementToBeRemoved(getByText('Placeholder'));
+        expect(mockInitSettings).toHaveBeenCalledTimes(1);
+        expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+        expect(mockInitComponent).toHaveBeenCalledTimes(1);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXMudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL29wdGEvZm9vdGJhbGwvZml4dHVyZXMtdG91cm5hbWVudC9fX3Rlc3RzX18vT3B0YUZvb3RiYWxsRml4dHVyZXMudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUseUJBQXlCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUUzRSxPQUFPLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsSUFBSSxDQUFDLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO0lBQzFDLFdBQVcsRUFBRSxHQUFHLEVBQUUsQ0FBQyx3REFBZ0I7Q0FDcEMsQ0FBQyxDQUFDLENBQUM7QUFFSixNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztBQUNuQyxNQUFNLGtCQUFrQixHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztBQUNyQyxNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztBQUVwQyxNQUFNLGVBQWUsR0FBRyxHQUFHLEVBQUU7SUFDM0IsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QyxPQUFPLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztJQUN2RCxPQUFPLE9BQU8sQ0FBQztBQUNqQixDQUFDLENBQUM7QUFFRixJQUFJLENBQUMsSUFBSSxDQUFDLHVCQUF1QixFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFDeEMsWUFBWSxFQUFFLGdCQUFnQjtJQUM5QixjQUFjLEVBQUUsa0JBQWtCO0lBQ2xDLFVBQVUsRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNyRCxXQUFXLEVBQUUsZUFBZTtJQUM1QixhQUFhLEVBQUUsaUJBQWlCO0NBQ2pDLENBQUMsQ0FBQyxDQUFDO0FBRUosT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFFbkYsTUFBTSxhQUFhLEdBQUc7SUFDcEIsTUFBTSxFQUFFLE1BQU07SUFDZCxXQUFXLEVBQUUsR0FBRztDQUNqQixDQUFDO0FBRUYsUUFBUSxDQUFDLGdDQUFnQyxFQUFFLEdBQUcsRUFBRTtJQUM5QyxFQUFFLENBQUMseUJBQXlCLEVBQUUsS0FBSyxJQUFJLEVBQUU7UUFDdkMsTUFBTSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsR0FBRyxNQUFNLENBQ3RDLG9CQUFDLDhCQUE4QixvQkFBSyxhQUFhLEVBQUksQ0FDdEQsQ0FBQztRQUNGLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBRXZDLE1BQU0seUJBQXlCLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7UUFFMUQsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbEQsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDcEQsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFbkQsTUFBTSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekMsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDLENBQUMsQ0FBQyJ9

package/dist/components/opta/football/fixtures-tournament/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const WidgetContainerOverride: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WidgetContainer: import("styled-components").StyledComponent<"div", any, {
+    isNationalComp?: boolean | undefined;
+}, never>;

package/dist/components/opta/football/fixtures-tournament/styles.js

@@ -0,0 +1,266 @@
+import styled from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
+import { WidgetContainerBase } from '../shared-styles';
+export const WidgetContainerOverride = styled(WidgetContainerBase) `
+  .Opta {
+    h2 {
+      margin: 20px 0 0 0 !important;
+    }
+
+    .Opta-js-main {
+      table {
+        tbody {
+          td.Opta-title {
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+
+            h3 {
+              margin: 20px 0 0 0 !important;
+              font-family: ${fonts.headline} !important;
+              font-size: 16px !important;
+              line-height: 30px !important;
+              text-align: center;
+
+              span {
+                font-size: inherit;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 18px !important;
+                line-height: 40px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export const WidgetContainer = styled(WidgetContainerBase) `
+  .Opta {
+    .Opta-js-main {
+      padding: 0;
+      background-color: transparent;
+
+      table {
+        display: block;
+        @media (min-width: ${breakpoints.medium}px) {
+          column-count: 2;
+        }
+
+        tbody {
+          display: block;
+          break-inside: avoid;
+
+          &:has(h3) {
+            column-span: all;
+            display: block;
+            margin-top: 24px;
+          }
+
+          td.Opta-Nest.Opta-JS-Nest-Content.Opta-Expanded {
+            display: inline;
+          }
+
+          td.Opta-title {
+            display: block;
+            background-color: ${colours.functional.backgroundSecondary};
+
+            h3 {
+              height: auto;
+              margin: 0 0 0 10px;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 14px;
+              line-height: 14px;
+              font-weight: normal;
+              background-color: transparent;
+              border-bottom: 0;
+
+              span {
+                float: none;
+                padding: 0;
+                font-size: 13px;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                margin: 0 0 0 20px;
+              }
+            }
+          }
+
+          tr {
+            display: block;
+          }
+
+          tr.Opta-Scoreline {
+            height: 40px;
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            @media (min-width: ${breakpoints.medium}px) {
+              height: 50px;
+            }
+
+            td {
+              max-width: none !important;
+              color: ${colours.functional.brandColour} !important;
+              font-family: ${fonts.headline};
+              font-size: 14px;
+              line-height: 14px;
+              height: unset;
+              background-color: transparent;
+
+              &.Opta-Time {
+                padding-left: 10px;
+                color: ${colours.section.sport} !important;
+                font-family: ${fonts.supporting};
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  font-size: 13px;
+                  line-height: 14px;
+                }
+              }
+
+              &.Opta-Team {
+                background-position: center left;
+                width: 34%;
+                padding-left: ${({ isNationalComp }) => isNationalComp ? '38px;' : '10px;'}
+                  &.Opta-Home {
+                  background-position: center right;
+                  padding-right: ${({ isNationalComp }) => isNationalComp ? '38px;' : '10px;'};
+                  padding-left: 0;
+                  text-align: right;
+                }
+
+                ${({ isNationalComp }) => !isNationalComp &&
+    `
+                  @media (max-width: ${breakpoints.medium}px) {
+                    padding-left: 15px;
+
+                    &.Opta-Home {
+                      padding-right: 15px;
+                      padding-left: 0;
+                    }
+                  }
+                `};
+              }
+
+              &.Opta-Score {
+                font-size: 16px;
+                line-height: 16px;
+                text-align: center !important;
+                min-width: 25px;
+
+                span {
+                  font-size: inherit;
+                  line-height: inherit;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  font-size: 24px;
+                  line-height: 24px;
+                }
+              }
+
+              &.Opta-Crest {
+                img {
+                  width: 20px;
+                }
+              }
+
+              &.Opta-Divider {
+                text-align: center;
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+              }
+
+              &.Opta-Outer:not(.Opta-Time) {
+                padding-right: 10px;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 16px;
+                line-height: 16px;
+              }
+            }
+          }
+
+          tr.Opta-agg {
+            background-color: transparent !important;
+
+            td {
+              padding: 10px;
+              color: ${colours.functional.primary};
+              font-family: ${fonts.supporting};
+              font-size: 13px;
+              line-height: 16px;
+              background-color: transparent;
+
+              span {
+                font-size: inherit;
+                line-height: inherit;
+              }
+
+              span.Opta-agg-text {
+                text-transform: uppercase;
+              }
+            }
+          }
+
+          tr {
+            td.Opta-Nest {
+              padding: 0;
+
+              .Opta_W {
+                > .Opta-Cf {
+                  background-color: transparent;
+                  border-bottom: 1px solid #e4e4e4;
+
+                  .Opta-Events {
+                    padding: 10px 0 2px 0;
+
+                    li {
+                      padding: 0 0 8px 0;
+
+                      .Opta-Event-Text {
+                        color: ${colours.functional.primary};
+                        font-family: ${fonts.supporting};
+                        font-size: 13px;
+                        line-height: 16px;
+
+                        .Opta-Event-Player,
+                        .Opta-Event-Time {
+                          font-size: inherit;
+                          line-height: inherit;
+                        }
+
+                        .Opta-Event-Time {
+                          color: ${colours.section.sport};
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10b3VybmFtZW50L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUU5RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUV2RCxNQUFNLENBQUMsTUFBTSx1QkFBdUIsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7OzZCQWVyQyxLQUFLLENBQUMsUUFBUTs7Ozs7Ozs7O21DQVNSLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7O0NBVXBELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBRXhEOzs7Ozs7Ozs2QkFRMkIsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2dDQW9CZixPQUFPLENBQUMsVUFBVSxDQUFDLG1CQUFtQjs7Ozs7dUJBSy9DLE9BQU8sQ0FBQyxVQUFVLENBQUMsV0FBVzs2QkFDeEIsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7Ozs7Ozs7bUNBYVYsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0FrQnBCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7dUJBTTVCLE9BQU8sQ0FBQyxVQUFVLENBQUMsV0FBVzs2QkFDeEIsS0FBSyxDQUFDLFFBQVE7Ozs7Ozs7O3lCQVFsQixPQUFPLENBQUMsT0FBTyxDQUFDLEtBQUs7K0JBQ2YsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7O3FDQVFWLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7Z0NBU3ZCLENBQUMsRUFBRSxjQUFjLEVBQUUsRUFBRSxFQUFFLENBQ25DLGNBQWMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxPQUFPOzs7bUNBR25CLENBQUMsRUFBRSxjQUFjLEVBQUUsRUFBRSxFQUFFLENBQ3RDLGNBQWMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxPQUFPOzs7OztrQkFLcEMsQ0FBQyxFQUFFLGNBQWMsRUFBRSxFQUFFLEVBQUUsQ0FDdkIsQ0FBQyxjQUFjO0lBQ2Y7dUNBQ3FCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7OztpQkFReEM7Ozs7Ozs7Ozs7Ozs7O3FDQWNvQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7bUNBMEJwQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7O3VCQVk5QixPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU87NkJBQ3BCLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0FnQ1osT0FBTyxDQUFDLFVBQVUsQ0FBQyxPQUFPO3VDQUNwQixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7Ozs7bUNBV3BCLE9BQU8sQ0FBQyxPQUFPLENBQUMsS0FBSzs7Ozs7Ozs7Ozs7OztDQWF2RCxDQUFDIn0=

package/dist/components/opta/football/player-stats/OptaFootballPlayerStats.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const OptaFootballPlayerStats: React.FC<{
+    season: string;
+    competition: string;
+    match: string;
+    visible_categories: string;
+    full_width?: boolean;
+}>;

package/dist/components/opta/football/player-stats/OptaFootballPlayerStats.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import { initSettings, initStyleSheet, initScript, initElement, initComponent } from '../../utils/config';
+import { Container, PlaceholderContainer } from '../shared-styles';
+import { WidgetContainer } from './styles';
+import { isNationalCompetition } from '../../utils/replaceNationalTeamDetails';
+import { useUpdateNationalTeamDetails } from '../../utils/useUpdateNationalTeamDetails';
+export const OptaFootballPlayerStats = React.memo(({ season, competition, match, full_width, visible_categories }) => {
+    const ref = React.createRef();
+    const [isReady, setIsReady] = useState(false);
+    const isNationalComp = isNationalCompetition(competition);
+    useEffect(() => {
+        const sport = 'football';
+        initSettings();
+        initStyleSheet(sport);
+        initScript().then(() => {
+            if (ref.current) {
+                ref.current.innerHTML = initElement('opta-widget', {
+                    sport,
+                    widget: 'player_ranking',
+                    season,
+                    competition,
+                    match,
+                    template: 'normal',
+                    graph_style: 'relative',
+                    visible_categories,
+                    live: true,
+                    show_match_header: true,
+                    show_halftime_score: true,
+                    show_competition_name: true,
+                    show_date: true,
+                    show_crests: true,
+                    date_format: 'DD/MM/YYYY',
+                    breakpoints: '520'
+                }).outerHTML;
+                initComponent();
+                setIsReady(true);
+            }
+        });
+    }, [ref]);
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Image-Team');
+    return (React.createElement(Container, { border: isReady, fullWidth: full_width },
+        React.createElement(WidgetContainer, { ref: ref }),
+        !isReady && (React.createElement(PlaceholderContainer, null,
+            React.createElement(Placeholder, null)))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsUGxheWVyU3RhdHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL3BsYXllci1zdGF0cy9PcHRhRm9vdGJhbGxQbGF5ZXJTdGF0cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxTQUFTLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBRXhGLE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQU0vQixLQUFLLENBQUMsSUFBSSxDQUNiLENBQUMsRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsa0JBQWtCLEVBQUUsRUFBRSxFQUFFO0lBQ2pFLE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxTQUFTLEVBQWtCLENBQUM7SUFFOUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDdkQsTUFBTSxjQUFjLEdBQUcscUJBQXFCLENBQUMsV0FBVyxDQUFDLENBQUM7SUFFMUQsU0FBUyxDQUNQLEdBQUcsRUFBRTtRQUNILE1BQU0sS0FBSyxHQUFHLFVBQVUsQ0FBQztRQUV6QixZQUFZLEVBQUUsQ0FBQztRQUNmLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV0QixVQUFVLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ3JCLElBQUksR0FBRyxDQUFDLE9BQU8sRUFBRTtnQkFDZixHQUFHLENBQUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxXQUFXLENBQUMsYUFBYSxFQUFFO29CQUNqRCxLQUFLO29CQUNMLE1BQU0sRUFBRSxnQkFBZ0I7b0JBQ3hCLE1BQU07b0JBQ04sV0FBVztvQkFDWCxLQUFLO29CQUNMLFFBQVEsRUFBRSxRQUFRO29CQUNsQixXQUFXLEVBQUUsVUFBVTtvQkFDdkIsa0JBQWtCO29CQUNsQixJQUFJLEVBQUUsSUFBSTtvQkFDVixpQkFBaUIsRUFBRSxJQUFJO29CQUN2QixtQkFBbUIsRUFBRSxJQUFJO29CQUN6QixxQkFBcUIsRUFBRSxJQUFJO29CQUMzQixTQUFTLEVBQUUsSUFBSTtvQkFDZixXQUFXLEVBQUUsSUFBSTtvQkFDakIsV0FBVyxFQUFFLFlBQVk7b0JBQ3pCLFdBQVcsRUFBRSxLQUFLO2lCQUNuQixDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUViLGFBQWEsRUFBRSxDQUFDO2dCQUNoQixVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDbEI7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsRUFDRCxDQUFDLEdBQUcsQ0FBQyxDQUNOLENBQUM7SUFFRixjQUFjLElBQUksNEJBQTRCLENBQUMsR0FBRyxFQUFFLGlCQUFpQixDQUFDLENBQUM7SUFFdkUsT0FBTyxDQUNMLG9CQUFDLFNBQVMsSUFBQyxNQUFNLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVO1FBQy9DLG9CQUFDLGVBQWUsSUFBQyxHQUFHLEVBQUUsR0FBRyxHQUFJO1FBRTVCLENBQUMsT0FBTyxJQUFJLENBQ1gsb0JBQUMsb0JBQW9CO1lBQ25CLG9CQUFDLFdBQVcsT0FBRyxDQUNNLENBQ3hCLENBQ1MsQ0FDYixDQUFDO0FBQ0osQ0FBQyxDQUNGLENBQUMifQ==

package/dist/components/opta/football/player-stats/OptaFootballPlayerStats.stories.d.ts

@@ -0,0 +1 @@
+export {};