@scrippsproduct/networks-ui-library 1.1.0-alpha.1 → 1.1.0-alpha.3

package/dist/components/ScheduleList/ScheduleList.js

@@ -1,22 +1,51 @@
-import { jsx as _ } from "react/jsx-runtime";
-import "react";
-import { getMinutesFromStr as j } from "../../utils/helpers.js";
-import { SportsItem as w } from "./schedule-list-items/SportsItem.js";
-import { SeriesItem as $ } from "./schedule-list-items/SeriesItem.js";
-import { MovieItem as k } from "./schedule-list-items/MovieItem.js";
-import '../../assets/ScheduleList.css';const g = {
-  "schedule-list__item": "_schedule-list__item_10j6g_1",
-  "schedule-list__airdate": "_schedule-list__airdate_10j6g_12",
-  "schedule-list": "_schedule-list_10j6g_1",
-  "fade-in": "_fade-in_10j6g_1",
-  "fade-out": "_fade-out_10j6g_1"
-}, f = (r) => {
-  var o, p, i, a, n, t, v, y, x, b, S;
-  return (o = r.video) != null && o.brightcove_id ? {
+import { jsx as t, jsxs as q } from "react/jsx-runtime";
+import { useReducer as S, useState as R, useRef as w, useCallback as A, useEffect as d } from "react";
+import { classes as T, getMinutesFromStr as L } from "../../utils/helpers.js";
+import { useScheduleContext as x } from "../ScheduleLayout/useScheduleContext.js";
+import { Loading as b } from "../Loading/Loading.js";
+import { SportsItem as u } from "./schedule-list-items/SportsItem.js";
+import { SeriesItem as D } from "./schedule-list-items/SeriesItem.js";
+import { MovieItem as M } from "./schedule-list-items/MovieItem.js";
+import '../../assets/ScheduleList.css';const l = {
+  "schedule-list__item": "_schedule-list__item_wmqq1_1",
+  "schedule-list__airdate": "_schedule-list__airdate_wmqq1_14",
+  "airdate-formatter__date": "_airdate-formatter__date_wmqq1_22",
+  "airdate-formatter__day": "_airdate-formatter__day_wmqq1_23",
+  "airdate-formatter__time-wrap": "_airdate-formatter__time-wrap_wmqq1_26",
+  "schedule-list": "_schedule-list_wmqq1_1",
+  "fade-out": "_fade-out_wmqq1_1",
+  "fade-in": "_fade-in_wmqq1_1",
+  "schedule-list__no-schedule": "_schedule-list__no-schedule_wmqq1_50",
+  "schedule-content-constrainer": "_schedule-content-constrainer_wmqq1_102",
+  "date-navigation__weekday": "_date-navigation__weekday_wmqq1_110",
+  "date-navigation__date": "_date-navigation__date_wmqq1_113",
+  "image-card__content": "_image-card__content_wmqq1_122"
+};
+function c(r) {
+  return typeof r == "object" && !Array.isArray(r) && "queryStatus" in r && r.queryStatus === "no-results";
+}
+function k(r, a) {
+  switch (a.type) {
+    case "START_EXIT":
+      return "exiting";
+    case "EXIT_COMPLETE":
+      return "loading";
+    case "SCHEDULE_LOADED":
+      return "entering";
+    case "ENTER_COMPLETE":
+      return "idle";
+    default:
+      return r;
+  }
+}
+const E = (r) => {
+  var a, s, n, p, o, y, f, _, e, i, g;
+  return (a = r.video) != null && a.brightcove_id ? {
     label: "Watch Preview",
     type: "play-video",
     href: "",
     relatedResourceId: r.video.brightcove_id,
+    relatedResourceType: "video",
     position: "inline"
   } : r != null && r.showUpcoming && (r == null ? void 0 : r.program_class) === "Episode" ? {
     label: "",
@@ -28,7 +57,7 @@ import '../../assets/ScheduleList.css';const g = {
     //determineSeriesPrefix(scheduleItem.series_prefix),
     relatedResourceType: "",
     //'series',
-    position: ""
+    position: void 0
     //'inline',
   } : r != null && r.showUpcoming && (r == null ? void 0 : r.program_class) === "Film" ? {
     label: "",
@@ -40,61 +69,125 @@ import '../../assets/ScheduleList.css';const g = {
     //scheduleItem.title_code,
     relatedResourceType: "",
     //'film',
-    position: ""
+    position: void 0
     //'inline',
-  } : (((p = r == null ? void 0 : r.content) == null ? void 0 : p.external_link) !== void 0 && ((i = r == null ? void 0 : r.content) == null ? void 0 : i.external_link) !== "" || ((a = r == null ? void 0 : r.content) == null ? void 0 : a.slug) !== void 0 && ((n = r == null ? void 0 : r.content) == null ? void 0 : n.slug) !== "") && !((t = r == null ? void 0 : r.content) != null && t.prevent_detail_page) ? {
+  } : (((s = r == null ? void 0 : r.content) == null ? void 0 : s.external_link) !== void 0 && ((n = r == null ? void 0 : r.content) == null ? void 0 : n.external_link) !== "" || ((p = r == null ? void 0 : r.content) == null ? void 0 : p.slug) !== void 0 && ((o = r == null ? void 0 : r.content) == null ? void 0 : o.slug) !== "") && !((y = r == null ? void 0 : r.content) != null && y.prevent_detail_page) ? {
     label: (r == null ? void 0 : r.program_class) === "Episode" ? "View Series Details" : (r == null ? void 0 : r.program_class) === "Film" ? "View Movie Details" : "Learn More",
-    type: (v = r == null ? void 0 : r.content) != null && v.external_link ? "external-link" : "internal-link",
-    href: (y = r == null ? void 0 : r.content) != null && y.external_link ? (x = r == null ? void 0 : r.content) == null ? void 0 : x.external_link : r.program_class === "Episode" ? `/show/${(b = r == null ? void 0 : r.content) == null ? void 0 : b.slug}` : `/movie/${(S = r == null ? void 0 : r.content) == null ? void 0 : S.slug}`,
+    type: (f = r == null ? void 0 : r.content) != null && f.external_link ? "external-link" : "internal-link",
+    href: (_ = r == null ? void 0 : r.content) != null && _.external_link ? (e = r == null ? void 0 : r.content) == null ? void 0 : e.external_link : r.program_class === "Episode" ? `/show/${(i = r == null ? void 0 : r.content) == null ? void 0 : i.slug}` : `/movie/${(g = r == null ? void 0 : r.content) == null ? void 0 : g.slug}`,
     position: "inline"
   } : {
     label: "",
     type: "",
     href: "",
-    position: ""
+    position: void 0
   };
 };
-function A({
-  schedule: r = [],
-  handleClicks: o = () => !0,
-  exiting: p = !1
+function j({
+  handleClicks: r = () => !0
 }) {
-  return /* @__PURE__ */ _("ul", { className: `${g["schedule-list"]} schedule-list`, "data-state": p ? "exiting" : "idle", children: r.length !== 0 && r.map((i) => {
-    const a = j(i.element_length), n = f(i).type === "" ? [a, i.rating] : [a, i.rating, " "];
-    return i.program_class === "Episode" ? /* @__PURE__ */ _(
-      $,
-      {
-        determineCTA: f,
-        handleClicks: o,
-        scheduleItem: i,
-        strListArr: n,
-        styles: g
-      },
-      `schedule-list-${i.id}`
-    ) : i.program_class === "Film" || i.program_class === "Movie" || i.program_class === "Special" ? /* @__PURE__ */ _(
-      k,
-      {
-        determineCTA: f,
-        handleClicks: o,
-        scheduleItem: i,
-        strListArr: n,
-        styles: g
-      },
-      `schedule-list-${i.id}`
-    ) : i.program_class === "Sports" ? /* @__PURE__ */ _(
-      w,
-      {
-        determineCTA: f,
-        handleClicks: o,
-        scheduleItem: i,
-        strListArr: n,
-        styles: g
+  const { schedule: a, isLoading: s } = x(), [n, p] = S(k, "idle"), [o, y] = R(a), f = w(null), _ = w(null), e = A(() => {
+    _.current && (clearTimeout(_.current), _.current = null), n === "exiting" ? p({ type: "EXIT_COMPLETE" }) : n === "entering" && p({ type: "ENTER_COMPLETE" });
+  }, [n]);
+  return d(() => {
+    const i = f.current;
+    if (i)
+      return i.addEventListener("animationend", e), () => {
+        i.removeEventListener("animationend", e);
+      };
+  }, [e]), d(() => {
+    s && n === "idle" && p({ type: "START_EXIT" });
+  }, [s, n]), d(() => {
+    const i = c(a) || Array.isArray(a) && a.length >= 0;
+    !s && n === "loading" && i && (y(a), p({ type: "SCHEDULE_LOADED" }));
+  }, [s, n, a]), d(() => () => {
+    _.current && clearTimeout(_.current);
+  }, []), n === "loading" ? /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        display: "grid",
+        alignContent: "start",
+        minHeight: "100dvh",
+        paddingTop: "6rem"
       },
-      `schedule-list-${i.id}`
-    ) : null;
-  }) });
+      children: /* @__PURE__ */ t(b, {})
+    }
+  ) : c(o) ? /* @__PURE__ */ q(
+    "div",
+    {
+      className: T([
+        l["schedule-list__no-schedule"],
+        "schedule-list__no-schedule"
+      ]),
+      "data-state": n,
+      style: { animationDelay: "500ms" },
+      children: [
+        /* @__PURE__ */ t("h2", { children: "There are no shows scheduled for this day." }),
+        /* @__PURE__ */ q("p", { children: [
+          "Please try again later. If this problem persists report it at ",
+          /* @__PURE__ */ t("a", { href: "https://support.iontelevision.com/support/home", children: "our support page" }),
+          "."
+        ] })
+      ]
+    }
+  ) : Array.isArray(o) && o.length === 0 ? /* @__PURE__ */ q(
+    "div",
+    {
+      className: T([
+        l["schedule-list__no-schedule"],
+        "schedule-list__no-schedule"
+      ]),
+      "data-state": n,
+      children: [
+        /* @__PURE__ */ t("h2", { children: "Our programming schedule for today has completed." }),
+        /* @__PURE__ */ t("p", { children: "Our programming will restart at 6am." })
+      ]
+    }
+  ) : /* @__PURE__ */ t(
+    "ul",
+    {
+      className: `${l["schedule-list"]} schedule-list`,
+      "data-state": n,
+      ref: f,
+      children: Array.isArray(o) && o.map((i) => {
+        const g = L(i.element_length), v = E(i).type === "" ? [g, i.rating] : [g, i.rating, " "];
+        return i.program_class === "Episode" ? /* @__PURE__ */ t(
+          D,
+          {
+            determineCTA: E,
+            handleClicks: r,
+            scheduleItem: i,
+            strListArr: v,
+            styles: l
+          },
+          `schedule-list-${i.id}`
+        ) : i.program_class === "Film" || i.program_class === "Movie" || i.program_class === "Special" ? /* @__PURE__ */ t(
+          M,
+          {
+            determineCTA: E,
+            handleClicks: r,
+            scheduleItem: i,
+            strListArr: v,
+            styles: l
+          },
+          `schedule-list-${i.id}`
+        ) : i.program_class === "Sports" ? /* @__PURE__ */ t(
+          u,
+          {
+            determineCTA: E,
+            handleClicks: r,
+            scheduleItem: i,
+            strListArr: v,
+            styles: l
+          },
+          `schedule-list-${i.id}`
+        ) : null;
+      })
+    }
+  );
 }
 export {
-  A as ScheduleList,
-  A as default
+  j as ScheduleList,
+  j as default
 };

package/dist/components/ScheduleList/index.d.ts

@@ -1 +1,2 @@
-export { ScheduleList, ScheduleList as default } from './ScheduleList';
+export { ScheduleList } from './ScheduleList';
+export { ScheduleList as default } from './ScheduleList';

package/dist/components/ScheduleList/schedule-list-items/AirDateSegment.d.ts

@@ -1,5 +1,7 @@
-export function AirDateSegment({ scheduleItem, styles }: {
-    scheduleItem: any;
-    styles: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { ScheduleItem } from '../../../types';
+type AirDateSegmentProps = {
+    scheduleItem: ScheduleItem;
+    styles: Record<string, string>;
+};
+export declare function AirDateSegment({ scheduleItem, styles, }: AirDateSegmentProps): JSX.Element;
 export default AirDateSegment;

package/dist/components/ScheduleList/schedule-list-items/AirDateSegment.js

@@ -1,21 +1,32 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import "react";
-import { determineIfShowIsOnNow as o } from "../../../utils/date-helpers.js";
-import { classes as s, convert12to24 as e } from "../../../utils/helpers.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { determineIfShowIsOnNow as s } from "../../../utils/date-helpers.js";
+import { classes as a, convert12to24 as i } from "../../../utils/helpers.js";
 import { AirDateFormatter as n } from "../../AirDateFormatter/AirDateFormatter.js";
-function f({ scheduleItem: t, styles: a }) {
-  return /* @__PURE__ */ i("div", { className: s([a["schedule-list__airdate"], "schedule-list__airdate"]), children: [
-    o(`${t.start_date_parse}T${e(t.start_time)}`, t.element_length) && /* @__PURE__ */ r("div", { className: "schedule-list__on-now", children: "On Now" }),
-    /* @__PURE__ */ r(
-      n,
-      {
-        airdateStr: `${t.start_date} ${e(t.start_time)}`,
-        separatorType: "line-break"
-      }
-    )
-  ] });
+function p({
+  scheduleItem: t,
+  styles: r
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: a([r["schedule-list__airdate"], "schedule-list__airdate"]),
+      children: [
+        s(
+          `${t.start_date_parse}T${i(t.start_time)}`,
+          t.element_length
+        ) && /* @__PURE__ */ e("div", { className: a([r["schedule-list__on-now"], "schedule-list__on-now"]), children: "On Now" }),
+        /* @__PURE__ */ e(
+          n,
+          {
+            airdateStr: `${t.start_date} ${i(t.start_time)}`,
+            separatorType: "line-break"
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  f as AirDateSegment,
-  f as default
+  p as AirDateSegment,
+  p as default
 };

package/dist/components/ScheduleList/schedule-list-items/MovieItem.d.ts

@@ -1,8 +1,10 @@
-export function MovieItem({ scheduleItem, styles, handleClicks, strListArr, determineCTA }: {
-    scheduleItem: any;
-    styles: any;
-    handleClicks: any;
-    strListArr: any;
-    determineCTA: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { ScheduleItem, HandleClicksDetails, CTA } from '../../../types.d.ts';
+type MovieItemProps = {
+    scheduleItem: ScheduleItem;
+    styles: Record<string, string>;
+    handleClicks: (details: HandleClicksDetails) => boolean | void;
+    strListArr: (string | undefined)[];
+    determineCTA: (scheduleItem: ScheduleItem) => CTA;
+};
+export declare function MovieItem({ scheduleItem, styles, handleClicks, strListArr, determineCTA, }: MovieItemProps): JSX.Element;
 export default MovieItem;

package/dist/components/ScheduleList/schedule-list-items/MovieItem.js

@@ -1,39 +1,51 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import "react";
-import { classes as f } from "../../../utils/helpers.js";
-import { StringList as l } from "../../StringList/StringList.js";
-import { Concat as e } from "../../Concat/Concat.js";
-import { AirDateSegment as g } from "./AirDateSegment.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { classes as g } from "../../../utils/helpers.js";
+import { StringList as f } from "../../StringList/StringList.js";
+import { Concat as l } from "../../Concat/Concat.js";
+import { AirDateSegment as _ } from "./AirDateSegment.js";
 import { ImageCard as C } from "../../ImageCard/ImageCard.js";
-function j({ scheduleItem: i, styles: r, handleClicks: a, strListArr: n, determineCTA: p }) {
-  var o;
-  const m = [
-    `<div>${i.program_synopsis}</div>`,
-    /* @__PURE__ */ t(l, { list: n, separatorType: "pipe" })
+function d({
+  scheduleItem: i,
+  styles: o,
+  handleClicks: a,
+  strListArr: n,
+  determineCTA: p
+}) {
+  var t;
+  const s = [
+    i.program_synopsis !== null && i.program_synopsis !== void 0 ? `<div>${i.program_synopsis}</div>` : "",
+    /* @__PURE__ */ r(f, { list: n, separatorType: "pipe" })
   ];
-  return /* @__PURE__ */ s("li", { className: f([r["schedule-list__item"], "schedule-list__item"]), children: [
-    /* @__PURE__ */ t(g, { scheduleItem: i, styles: r }),
-    /* @__PURE__ */ t(
-      C,
-      {
-        id: i.id,
-        image: {
-          url: ((o = i == null ? void 0 : i.content) == null ? void 0 : o.image) ?? "",
-          altText: "",
-          aspectRatio: 543 / 305
-        },
-        title: i.program,
-        content: /* @__PURE__ */ t(e, { list: m }),
-        cta: p(i),
-        clampContentLines: !0,
-        numberOfLinesToClamp: 5,
-        displayInline: !0,
-        handleClicks: a
-      }
-    )
-  ] }, `schedule-list-${i.id}`);
+  return /* @__PURE__ */ m(
+    "li",
+    {
+      className: g([o["schedule-list__item"], "schedule-list__item"]),
+      children: [
+        /* @__PURE__ */ r(_, { scheduleItem: i, styles: o }),
+        /* @__PURE__ */ r(
+          C,
+          {
+            clampContentLines: !0,
+            displayInline: !0,
+            content: /* @__PURE__ */ r(l, { list: s }),
+            cta: p(i),
+            handleClicks: a,
+            id: i.id,
+            image: {
+              url: ((t = i == null ? void 0 : i.content) == null ? void 0 : t.image) ?? "",
+              altText: "",
+              aspectRatio: 543 / 305
+            },
+            numberOfLinesToClamp: 5,
+            title: i.program
+          }
+        )
+      ]
+    },
+    `schedule-list-${i.id}`
+  );
 }
 export {
-  j as MovieItem,
-  j as default
+  d as MovieItem,
+  d as default
 };

package/dist/components/ScheduleList/schedule-list-items/SeriesItem.d.ts

@@ -1,8 +1,10 @@
-export function SeriesItem({ scheduleItem, styles, strListArr, handleClicks, determineCTA }: {
-    scheduleItem: any;
-    styles: any;
-    strListArr: any;
-    handleClicks: any;
-    determineCTA: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { ScheduleItem, HandleClicksDetails, CTA } from '../../../types.d.ts';
+type SeriesItemProps = {
+    scheduleItem: ScheduleItem;
+    styles: Record<string, string>;
+    strListArr: (string | undefined)[];
+    handleClicks: (details: HandleClicksDetails) => boolean | void;
+    determineCTA: (scheduleItem: ScheduleItem) => CTA;
+};
+export declare function SeriesItem({ scheduleItem, styles, strListArr, handleClicks, determineCTA, }: SeriesItemProps): JSX.Element;
 export default SeriesItem;

package/dist/components/ScheduleList/schedule-list-items/SeriesItem.js

@@ -1,41 +1,57 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import "react";
-import { classes as l } from "../../../utils/helpers.js";
-import { determineProgramTitle as n } from "../../../utils/program-helpers.js";
-import { Concat as C } from "../../Concat/Concat.js";
-import { StringList as e } from "../../StringList/StringList.js";
-import { AirDateSegment as y } from "./AirDateSegment.js";
-import { ImageCard as $ } from "../../ImageCard/ImageCard.js";
-function N({ scheduleItem: i, styles: o, strListArr: a, handleClicks: p, determineCTA: m }) {
-  var t;
-  const s = i.episode_number ? `${i.episode_number}:` : "", g = i.program_synopsis !== null ? i.program_synopsis : "", _ = [
-    i.title_name.trim() !== n(i).trim() ? `<div>${s} ${i.title_name}</div>` : "",
-    i.program_synopsis !== null ? `<div>${g}</div>` : "",
-    /* @__PURE__ */ r(e, { list: a, separatorType: "pipe" })
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { classes as e } from "../../../utils/helpers.js";
+import { determineProgramTitle as a } from "../../../utils/program-helpers.js";
+import { Concat as y } from "../../Concat/Concat.js";
+import { StringList as C } from "../../StringList/StringList.js";
+import { AirDateSegment as S } from "./AirDateSegment.js";
+import { ImageCard as v } from "../../ImageCard/ImageCard.js";
+import { l as p } from "../../../logger-C0N7U0YY.mjs";
+p.setComponent("SeriesItem");
+function D({
+  scheduleItem: i,
+  styles: o,
+  strListArr: m,
+  handleClicks: s,
+  determineCTA: g
+}) {
+  var n;
+  const _ = i.episode_number ? `${i.episode_number}:` : "", t = i.program_synopsis !== null ? i.program_synopsis : "";
+  p.log("SeriesItem - programSynopsis: ", t), i.title_name && (i.title_name = i.title_name.trim());
+  const f = [
+    i.title_name !== a(i).trim() ? `<div>${_} ${i.title_name}</div>` : "",
+    i.program_synopsis !== null && i.program_synopsis !== void 0 ? `<div>${t}</div>` : "",
+    /* @__PURE__ */ r(C, { list: m, separatorType: "pipe" })
   ];
-  return /* @__PURE__ */ f("li", { className: l([o["schedule-list__item"], "schedule-list__item"]), children: [
-    /* @__PURE__ */ r(y, { scheduleItem: i, styles: o }),
-    /* @__PURE__ */ r(
-      $,
-      {
-        id: i.id,
-        image: {
-          url: ((t = i == null ? void 0 : i.content) == null ? void 0 : t.image) ?? "",
-          altText: "",
-          aspectRatio: 543 / 305
-        },
-        title: n(i),
-        content: /* @__PURE__ */ r(C, { list: _ }),
-        cta: m(i),
-        clampContentLines: !0,
-        numberOfLinesToClamp: 5,
-        displayInline: !0,
-        handleClicks: p
-      }
-    )
-  ] }, `schedule-list-${i.id}`);
+  return /* @__PURE__ */ l(
+    "li",
+    {
+      className: e([o["schedule-list__item"], "schedule-list__item"]),
+      children: [
+        /* @__PURE__ */ r(S, { scheduleItem: i, styles: o }),
+        /* @__PURE__ */ r(
+          v,
+          {
+            clampContentLines: !0,
+            displayInline: !0,
+            content: /* @__PURE__ */ r(y, { list: f }),
+            cta: g(i),
+            handleClicks: s,
+            id: i.id,
+            image: {
+              url: ((n = i == null ? void 0 : i.content) == null ? void 0 : n.image) ?? "",
+              altText: "",
+              aspectRatio: 543 / 305
+            },
+            numberOfLinesToClamp: 5,
+            title: a(i)
+          }
+        )
+      ]
+    },
+    `schedule-list-${i.id}`
+  );
 }
 export {
-  N as SeriesItem,
-  N as default
+  D as SeriesItem,
+  D as default
 };

package/dist/components/ScheduleList/schedule-list-items/SportsItem.d.ts

@@ -1,8 +1,10 @@
-export function SportsItem({ scheduleItem, styles, strListArr, handleClicks, determineCTA }: {
-    scheduleItem: any;
-    styles: any;
-    strListArr: any;
-    handleClicks: any;
-    determineCTA: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { ScheduleItem, HandleClicksDetails, CTA } from '../../../types.d.ts';
+type SportsItemProps = {
+    scheduleItem: ScheduleItem;
+    styles: Record<string, string>;
+    strListArr: (string | undefined)[];
+    handleClicks: (details: HandleClicksDetails) => boolean | void;
+    determineCTA: (scheduleItem: ScheduleItem) => CTA;
+};
+export declare function SportsItem({ scheduleItem, styles, strListArr, handleClicks, determineCTA, }: SportsItemProps): JSX.Element;
 export default SportsItem;

package/dist/components/ScheduleList/schedule-list-items/SportsItem.js

@@ -1,39 +1,51 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import "react";
-import { classes as l } from "../../../utils/helpers.js";
-import { Concat as e } from "../../Concat/Concat.js";
-import { StringList as f } from "../../StringList/StringList.js";
-import { AirDateSegment as g } from "./AirDateSegment.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { classes as g } from "../../../utils/helpers.js";
+import { Concat as f } from "../../Concat/Concat.js";
+import { StringList as l } from "../../StringList/StringList.js";
+import { AirDateSegment as _ } from "./AirDateSegment.js";
 import { ImageCard as C } from "../../ImageCard/ImageCard.js";
-function j({ scheduleItem: i, styles: r, strListArr: a, handleClicks: n, determineCTA: p }) {
-  var o;
-  const m = [
-    `<div>${i.title_name}</div>`,
-    /* @__PURE__ */ t(f, { list: a, separatorType: "pipe" })
+function c({
+  scheduleItem: i,
+  styles: o,
+  strListArr: a,
+  handleClicks: n,
+  determineCTA: p
+}) {
+  var t;
+  const s = [
+    i.program_synopsis !== null && i.program_synopsis !== void 0 ? `<div>${i.program_synopsis}</div>` : "",
+    /* @__PURE__ */ r(l, { list: a, separatorType: "pipe" })
   ];
-  return /* @__PURE__ */ s("li", { className: l([r["schedule-list__item"], "schedule-list__item"]), children: [
-    /* @__PURE__ */ t(g, { scheduleItem: i, styles: r }),
-    /* @__PURE__ */ t(
-      C,
-      {
-        id: i.id,
-        image: {
-          url: ((o = i == null ? void 0 : i.content) == null ? void 0 : o.image) ?? "",
-          altText: "",
-          aspectRatio: 543 / 305
-        },
-        title: i.program,
-        content: /* @__PURE__ */ t(e, { list: m }),
-        cta: p(i),
-        clampContentLines: !0,
-        numberOfLinesToClamp: 5,
-        displayInline: !0,
-        handleClicks: n
-      }
-    )
-  ] }, `schedule-list-${i.id}`);
+  return /* @__PURE__ */ m(
+    "li",
+    {
+      className: g([o["schedule-list__item"], "schedule-list__item"]),
+      children: [
+        /* @__PURE__ */ r(_, { scheduleItem: i, styles: o }),
+        /* @__PURE__ */ r(
+          C,
+          {
+            clampContentLines: !0,
+            displayInline: !0,
+            content: /* @__PURE__ */ r(f, { list: s }),
+            cta: p(i),
+            handleClicks: n,
+            id: i.id,
+            image: {
+              url: ((t = i == null ? void 0 : i.content) == null ? void 0 : t.image) ?? "",
+              altText: "",
+              aspectRatio: 543 / 305
+            },
+            numberOfLinesToClamp: 5,
+            title: i.program
+          }
+        )
+      ]
+    },
+    `schedule-list-${i.id}`
+  );
 }
 export {
-  j as SportsItem,
-  j as default
+  c as SportsItem,
+  c as default
 };