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

package/dist/components/DeviceAndPlatformLists/DeviceAndPlatformLists.js

@@ -1,8 +1,8 @@
 import { jsxs as v, jsx as l } from "react/jsx-runtime";
 import "react";
+import { classes as a } from "../../utils/helpers.js";
 import { GridList as r } from "../GridList/GridList.js";
 import { LogoListItem as _ } from "../LogoListItem/LogoListItem.js";
-import { classes as a } from "../../utils/helpers.js";
 import '../../assets/DeviceAndPlatformLists.css';const t = {
   "devices-platforms": "_devices-platforms_1jzzl_1",
   "devices-platforms__column": "_devices-platforms__column_1jzzl_5",

package/dist/components/DrawerNavigation/DrawerNavigation.js

@@ -1,55 +1,53 @@
-import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { jsxs as t, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useState as v } from "react";
 import { classes as o } from "../../utils/helpers.js";
 import { NavList as b } from "../NavList/NavList.js";
-import { LogoNavigation as k } from "../LogoNavigation/LogoNavigation.js";
-import { ImageReplacementAnchor as N } from "../ImageReplacementAnchor/ImageReplacementAnchor.js";
+import { LogoNavigation as N } from "../LogoNavigation/LogoNavigation.js";
+import { ImageReplacementAnchor as k } from "../ImageReplacementAnchor/ImageReplacementAnchor.js";
 import { Overlay as x } from "../Overlay/Overlay.js";
-import '../../assets/DrawerNavigation.css';const A = "_clipPathOpen_5hknh_1", O = "_clipPathClose_5hknh_1", n = {
+import '../../assets/DrawerNavigation.css';const n = {
   "drawer-navigation__nav-bar": "_drawer-navigation__nav-bar_5hknh_1",
   "with-logo": "_with-logo_5hknh_11",
   "drawer-navigation__menu-toggle": "_drawer-navigation__menu-toggle_5hknh_15",
   "drawer-navigation__hamburger": "_drawer-navigation__hamburger_5hknh_22",
   "drawer-navigation__primary-navigation": "_drawer-navigation__primary-navigation_5hknh_54",
-  clipPathOpen: A,
-  clipPathClose: O,
   "drawer-navigation__separator": "_drawer-navigation__separator_5hknh_102",
   "visually-hidden": "_visually-hidden_5hknh_113"
 };
 function I({
   links: s = [],
-  items: l = [],
-  classname: v = "",
+  items: g = [],
+  classname: c = "",
   logo: i = {},
   clipPathStart: p = "circle(0% at top right)",
   clipPathEnd: u = "circle(250% at top right)",
   overlayAppendEl: w = document.querySelector("#root")
 }) {
-  const [a, y] = c(!1), [_, g] = c(null), h = document.querySelector("body"), d = () => {
-    if (y(!a), g("closing"), a) {
-      const t = document.querySelector("#overlay");
-      t == null || t.setAttribute("data-state", "exiting"), setTimeout(() => {
-        t == null || t.remove(), h.style.overflowY = "auto";
+  const [a, y] = v(!1), [d, l] = v(null), m = document.querySelector("body"), _ = () => {
+    if (y(!a), l("closing"), a) {
+      const r = document.querySelector("#overlay");
+      r == null || r.setAttribute("data-state", "exiting"), setTimeout(() => {
+        r == null || r.remove(), m.style.overflowY = "auto";
       }, 400);
     } else
-      h.style.overflowY = "hidden";
+      m.style.overflowY = "hidden";
   }, f = () => {
-    a || g(null);
+    a || l(null);
   };
-  return document.addEventListener("scripps:overlay:closed", d), // Ideally the parent for this component will be a <nav> for accessibility reasons
-  /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ r(
+  return document.addEventListener("scripps:overlay:closed", _), // Ideally the parent for this component will be a <nav> for accessibility reasons
+  /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ t(
       "div",
       {
         className: o([
           n["drawer-navigation__nav-bar"],
           "drawer-navigation__nav-bar",
           i.image && n["with-logo"],
-          `drawer-navigation__nav-bar--${a ? "expanded" : _ ? "closing" : "closed"}`
+          `drawer-navigation__nav-bar--${a ? "expanded" : d ? "closing" : "closed"}`
         ]),
         children: [
           i.image && /* @__PURE__ */ e(
-            N,
+            k,
             {
               href: i.href,
               image: i.image,
@@ -57,7 +55,7 @@ function I({
               baselineAdjustment: i.baselineAdjustment
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             "button",
             {
               className: o([
@@ -66,7 +64,7 @@ function I({
               ]),
               "aria-controls": "drawer-navigation__primary-navigation",
               "aria-expanded": a,
-              onClick: d,
+              onClick: _,
               children: [
                 /* @__PURE__ */ e("span", { className: n["visually-hidden"], children: "Menu" }),
                 /* @__PURE__ */ e(
@@ -85,7 +83,7 @@ function I({
         ]
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "div",
       {
         className: o([
@@ -93,15 +91,15 @@ function I({
           "drawer-navigation__primary-navigation"
         ]),
         id: "drawer-navigation__primary-navigation",
-        "data-state": a ? "opened" : _ || "closed",
+        "data-state": a ? "opened" : d || "closed",
         onAnimationEnd: f,
         style: {
           "--clip-path-start": p,
           "--clip-path-end": u
         },
         children: [
-          s.length > 0 && /* @__PURE__ */ e(b, { links: s, classname: v, toggleHandler: d }),
-          l.length > 0 && /* @__PURE__ */ r(m, { children: [
+          s.length > 0 && /* @__PURE__ */ e(b, { links: s, classname: c, toggleHandler: _ }),
+          g.length > 0 && /* @__PURE__ */ t(h, { children: [
             /* @__PURE__ */ e(
               "hr",
               {
@@ -111,12 +109,12 @@ function I({
                 ])
               }
             ),
-            /* @__PURE__ */ e(k, { items: l })
+            /* @__PURE__ */ e(N, { items: g })
           ] })
         ]
       }
     ),
-    a && /* @__PURE__ */ e(x, { appendToElement: w, state: _ === null && !a ? "exiting" : "entering" })
+    a && /* @__PURE__ */ e(x, { appendToElement: w, state: d === null && !a ? "exiting" : "entering" })
   ] });
 }
 export {

package/dist/components/ErrorHandler/ErrorHandler.js

@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
 import "react";
-import { p as _ } from "../../index-B0ARwqly.mjs";
+import { p as _ } from "../../index-VjANCDXC.mjs";
 import { classes as e } from "../../utils/helpers.js";
 import '../../assets/ErrorHandler.css';const s = {
   "error-handler__message": "_error-handler__message_4uq8z_1"

package/dist/components/FeaturedList/FeaturedList.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 import "react";
-import { ImageCard as i } from "../ImageCard/ImageCard.js";
-import { Loading as p } from "../Loading/Loading.js";
-import { AirDateFormatter as c } from "../AirDateFormatter/AirDateFormatter.js";
-import { convert12to24 as u } from "../../utils/helpers.js";
+import { convert12to24 as i } from "../../utils/helpers.js";
 import { determineSeriesPrefix as s } from "../../utils/program-helpers.js";
+import { ImageCard as p } from "../ImageCard/ImageCard.js";
+import { Loading as c } from "../Loading/Loading.js";
+import { AirDateFormatter as u } from "../AirDateFormatter/AirDateFormatter.js";
 import '../../assets/FeaturedList.css';function y({
   list: a = [],
   imageAspectRatio: n = 800 / 1393,
@@ -12,18 +12,18 @@ import '../../assets/FeaturedList.css';function y({
   handleClicks: d = () => {
   }
 }) {
-  if (a === null) return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(p, {}) });
+  if (a === null) return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, {}) });
   if (a.length) return /* @__PURE__ */ e("featured-list", { children: a.map((r) => {
     var l, t;
     return /* @__PURE__ */ e(
-      i,
+      p,
       {
         image: {
           url: ((l = r == null ? void 0 : r.content) == null ? void 0 : l.image) ?? "",
           aspectRatio: n,
           altText: r.program
         },
-        content: /* @__PURE__ */ e(c, { airdateStr: `${r.start_date} ${u(r.start_time)}`, separatorType: "pipe" }),
+        content: /* @__PURE__ */ e(u, { airdateStr: `${r.start_date} ${i(r.start_time)}`, separatorType: "pipe" }),
         fullCardClickable: !0,
         handleClicks: o ? () => {
         } : d,

package/dist/components/Figure/Figure.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import "react";
-import { p as o } from "../../index-B0ARwqly.mjs";
+import { p as o } from "../../index-VjANCDXC.mjs";
 import '../../assets/Figure2.css';const s = "_figure_1wcw1_1", c = {
   figure: s
 };

package/dist/components/FindUs/FindUs.js

@@ -1,10 +1,10 @@
 import { jsxs as s, jsx as e, Fragment as j } from "react/jsx-runtime";
 import { useState as v, useEffect as N } from "react";
+import { getViewingPlatforms as W } from "../../utils/getViewingPlatforms.js";
 import { ChannelSearch as b } from "../ChannelSearch/ChannelSearch.js";
-import { RescanInstructions as W } from "../RescanInstructions/RescanInstructions.js";
-import { DeviceAndPlatformLists as M } from "../DeviceAndPlatformLists/DeviceAndPlatformLists.js";
+import { RescanInstructions as M } from "../RescanInstructions/RescanInstructions.js";
+import { DeviceAndPlatformLists as x } from "../DeviceAndPlatformLists/DeviceAndPlatformLists.js";
 import { GeneralErrorBoundary as c } from "../../error-boundries/GeneralErrorBoundry.js";
-import { getViewingPlatforms as x } from "../../utils/getViewingPlatforms.js";
 import '../../assets/FindUs.css';const F = "_findus__column_mvuro_8", u = {
   "grid-wrapper": "_grid-wrapper_mvuro_1",
   findus__column: F
@@ -31,7 +31,7 @@ function G({
   const [r, w] = v(null), [g, I] = v(i ? a : 0);
   return N(() => {
     r === null && (async () => {
-      const o = await x({ network: t.platformsSlug, platformsApiUrl: m });
+      const o = await W({ network: t.platformsSlug, platformsApiUrl: m });
       w(o);
     })();
   }, [r, t.platformsSlug, m]), N(() => {
@@ -94,7 +94,7 @@ function G({
             }
           )
         ] }),
-        /* @__PURE__ */ e(W, { brandName: t.brand_name })
+        /* @__PURE__ */ e(M, { brandName: t.brand_name })
       ] }),
       /* @__PURE__ */ s(
         c,
@@ -102,7 +102,7 @@ function G({
           errorTitle: "We're sorry, there's currently an issue with our device and platform lists.",
           errorMessage: "Please try again later. If the problem persists please use the <strong>contact us</strong> link below to report the issue.",
           children: [
-            r !== null && r.size > 0 && r.get("error") === void 0 && /* @__PURE__ */ e(M, { platformResources: r, ..._ && { numberOfColumns: _ } }),
+            r !== null && r.size > 0 && r.get("error") === void 0 && /* @__PURE__ */ e(x, { platformResources: r, ..._ && { numberOfColumns: _ } }),
             r !== null && r.size === 0 && /* @__PURE__ */ e("div", { className: "find-us__error", children: /* @__PURE__ */ s("p", { className: "find-us__error-message", children: [
               "We couldn't find any viewing platforms for ",
               t.brand_name,

package/dist/components/GenericList/GenericList.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
-import { p as s } from "../../index-B0ARwqly.mjs";
+import { p as s } from "../../index-VjANCDXC.mjs";
 import { classes as o } from "../../utils/helpers.js";
 function u({
   list: p = [],

package/dist/components/GetAirdateWrapper/GetAirdateWrapper.js

@@ -1,9 +1,9 @@
 import { jsx as r, Fragment as d } from "react/jsx-runtime";
 import { useState as s } from "react";
-import A from "../../hooks/useGetUpcoming.js";
+import { convert12to24 as A } from "../../utils/helpers.js";
+import b from "../../hooks/useGetUpcoming.js";
 import { AirDateFormatter as c } from "../AirDateFormatter/AirDateFormatter.js";
-import { StringList as b } from "../StringList/StringList.js";
-import { convert12to24 as h } from "../../utils/helpers.js";
+import { StringList as h } from "../StringList/StringList.js";
 const N = (i) => {
   let n;
   for (let t = 0; t < i.title_code.length; t++)
@@ -22,12 +22,12 @@ function v({
   NETWORK: u
 }) {
   const [a, S] = s(null), [$, x] = s(null);
-  return A({ programId: i, programType: n, SCHEDULE_ENDPOINT: _, NETWORK: u }).then((e) => {
+  return b({ programId: i, programType: n, SCHEDULE_ENDPOINT: _, NETWORK: u }).then((e) => {
     var p, f;
     let l = null, o = null;
-    e.length && (l = `${e[0].start_date_parse} ${h(e[0].start_time)}`, m && ((p = e[0]) != null && p.episode_number ? o = `${(f = e[0]) == null ? void 0 : f.episode_number}: ${e[0].title_name}` : o = `${N(e[0])}: ${e[0].title_name}`)), S(l), x(o);
+    e.length && (l = `${e[0].start_date_parse} ${A(e[0].start_time)}`, m && ((p = e[0]) != null && p.episode_number ? o = `${(f = e[0]) == null ? void 0 : f.episode_number}: ${e[0].title_name}` : o = `${N(e[0])}: ${e[0].title_name}`)), S(l), x(o);
   }), a === null ? /* @__PURE__ */ r(d, {}) : i === "" ? /* @__PURE__ */ r(d, {}) : m ? /* @__PURE__ */ r(
-    b,
+    h,
     {
       list: [/* @__PURE__ */ r(c, { airdateStr: a, separatorType: t }), $],
       separatorType: "pipe"

package/dist/components/ImageCard/ImageCard.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
-import k from "./ImageCardCore.js";
-import { classes as x } from "../../utils/helpers.js";
+import { classes as k } from "../../utils/helpers.js";
+import x from "./ImageCardCore.js";
 import '../../assets/ImageCard.css';const l = {
   "image-card--clickable": "_image-card--clickable_1b3j4_13",
   "image-card__img-wrapper": "_image-card__img-wrapper_1b3j4_17",
@@ -55,7 +55,7 @@ import '../../assets/ImageCard.css';const l = {
   return c && (e == null ? void 0 : e.href) !== "" && ((e == null ? void 0 : e.type) === "internal-link" || (e == null ? void 0 : e.type) === "external-link") ? /* @__PURE__ */ n(
     "image-card",
     {
-      class: x([
+      class: k([
         c ? l["image-card--clickable"] : null,
         i ? l["image-card--inline"] : null,
         y
@@ -80,14 +80,14 @@ import '../../assets/ImageCard.css';const l = {
           target: e.type === "external-link" ? "_blank" : "_self",
           rel: e.type === "external-link" ? "noreferrer" : null,
           className: "image-card__full-card-link",
-          children: /* @__PURE__ */ n(k, { ..._, styles: l, ref: o })
+          children: /* @__PURE__ */ n(x, { ..._, styles: l, ref: o })
         }
       )
     }
   ) : /* @__PURE__ */ n(
     "image-card",
     {
-      class: x([
+      class: k([
         i ? l["image-card--inline"] : null,
         y
       ]),
@@ -103,7 +103,7 @@ import '../../assets/ImageCard.css';const l = {
       },
       onClick: c ? f : () => !0,
       "data-cursor": c ? "pointer" : "default",
-      children: /* @__PURE__ */ n(k, { ..._, styles: l, ref: o })
+      children: /* @__PURE__ */ n(x, { ..._, styles: l, ref: o })
     }
   );
 });

package/dist/components/ImageCard/ImageCardCore.js

@@ -1,6 +1,6 @@
 import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
 import { forwardRef as R } from "react";
-import { p as w } from "../../index-B0ARwqly.mjs";
+import { p as w } from "../../index-VjANCDXC.mjs";
 import { AnchorTag as x } from "../AnchorTag/AnchorTag.js";
 import { ButtonAnchor as c } from "../ButtonAnchor/ButtonAnchor.js";
 import { ResponsiveImage as k } from "../ResponsiveImage/ResponsiveImage.js";

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,43 +1,42 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useState as d, useRef as b, useEffect as m } from "react";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useState as b, useRef as d, useEffect as m } from "react";
 import { classes as i } from "../../utils/helpers.js";
 import { blockLayoutsMap as h } from "../../settings.js";
-import { C as k } from "../../chevron-left-DmvQntvu.mjs";
-import '../../assets/InfoPanel.css';const v = "_fade_1j4w6_1", s = {
+import { C as k } from "../../chevron-left-DRvpaLmK.mjs";
+import '../../assets/InfoPanel.css';const l = {
   "info-panel": "_info-panel_1j4w6_1",
-  fade: v,
   "info-panel__back-btn": "_info-panel__back-btn_1j4w6_19"
 };
 function N({
   layoutComponent: e = { layout: "", props: {} },
-  onBackClicked: l = () => {
+  onBackClicked: s = () => {
   },
   backButtonLabel: c = "Back to List",
   classname: y = ""
 }) {
-  const [f, L] = d(null), [t, u] = d("entering"), n = b(null), p = b(null), _ = (a) => {
-    p.current = a, u("exiting"), n.current.scrollTo({
+  const [f, L] = b(null), [t, u] = b("entering"), n = d(null), p = d(null), _ = (o) => {
+    p.current = o, u("exiting"), n.current.scrollTo({
       top: n.current.offsetTop,
       left: 0,
       behaviour: "instant"
     });
   };
   return m(() => {
-    async function a() {
+    async function o() {
       L(h.get(e.layout));
     }
-    a();
+    o();
   }, [e.layout]), m(() => {
     n.current !== null && (t === "exiting" && n.current.addEventListener("animationend", () => {
-      l(p.current);
+      s(p.current);
     }, { once: !0 }), t === "entering" && n.current.addEventListener("animationend", () => {
       u("idle");
     }, { once: !0 }));
-  }, [t, l]), /* @__PURE__ */ o("div", { className: i([s["info-panel"], `${y}`]), "data-state": t, ref: n, children: [
-    /* @__PURE__ */ o(
+  }, [t, s]), /* @__PURE__ */ a("div", { className: i([l["info-panel"], `${y}`]), "data-state": t, ref: n, children: [
+    /* @__PURE__ */ a(
       "button",
       {
-        className: i([s["info-panel__back-btn"], "info-panel__back-btn"]),
+        className: i([l["info-panel__back-btn"], "info-panel__back-btn"]),
         type: "button",
         onClick: _,
         children: [
@@ -47,10 +46,10 @@ function N({
       }
     ),
     f !== null && /* @__PURE__ */ r(f, { ...e.props }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ a(
       "button",
       {
-        className: i([s["info-panel__back-btn"], "info-panel__back-btn"]),
+        className: i([l["info-panel__back-btn"], "info-panel__back-btn"]),
         type: "button",
         onClick: _,
         children: [

package/dist/components/InlineNavigation/InlineNavigation.js

@@ -1,11 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
 import { NavList as o } from "../NavList/NavList.js";
-import '../../assets/InlineNavigation.css';const r = {
-  "inline-navigation": "_inline-navigation_3u114_1",
-  "anchor-tag--image": "_anchor-tag--image_3u114_10"
+import '../../assets/InlineNavigation.css';const l = {
+  "inline-navigation": "_inline-navigation_3u114_1"
 };
-function f({ links: t = [], classname: i = "", position: e = "left" }) {
+function c({ links: t = [], classname: i = "", position: e = "left" }) {
   const a = /* @__PURE__ */ new Map([
     ["left", "flex-start"],
     ["right", "flex-end"],
@@ -14,7 +13,7 @@ function f({ links: t = [], classname: i = "", position: e = "left" }) {
   return /* @__PURE__ */ n(
     "nav",
     {
-      className: r["inline-navigation"],
+      className: l["inline-navigation"],
       style: {
         "--inline-nav-justify-content": a.get(e)
       },
@@ -23,6 +22,6 @@ function f({ links: t = [], classname: i = "", position: e = "left" }) {
   );
 }
 export {
-  f as InlineNavigation,
-  f as default
+  c as InlineNavigation,
+  c as default
 };

package/dist/components/Input/Input.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as l } from "react/jsx-runtime";
 import { useState as s, useRef as b } from "react";
 import { classes as m, areaCodePhoneNumberMask as M } from "../../utils/helpers.js";
-import { s as t, C as V, A as $ } from "../../Form.module-DbpB9u1l.mjs";
+import { s as t, C as V, A as $ } from "../../Form.module-Cd8qH2rj.mjs";
 function B({
   name: i,
   label: h = "",

package/dist/components/InstructionsList/InstructionsList.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import "react";
-import { p as n } from "../../index-B0ARwqly.mjs";
+import { p as n } from "../../index-VjANCDXC.mjs";
 import '../../assets/InstructionsList.css';const s = {
   "instructions-list__list": "_instructions-list__list_suf45_1",
   "instructions-list__item": "_instructions-list__item_suf45_5"

package/dist/components/Loading/Loading.js

@@ -1,15 +1,12 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import "react";
 import { classes as t } from "../../utils/helpers.js";
-import '../../assets/Loading.css';const _ = "_spinner_4d38k_14", d = "_rot_4d38k_1", r = {
+import '../../assets/Loading.css';const d = "_spinner_4d38k_14", r = {
   "spinner-wrap": "_spinner-wrap_4d38k_14",
-  "fade-in": "_fade-in_4d38k_1",
-  "fade-out": "_fade-out_4d38k_1",
-  spinner: _,
-  rot: d,
+  spinner: d,
   "loading-wrapper__message": "_loading-wrapper__message_4d38k_44"
 };
-function f({
+function m({
   spinnerColor: s = "var(--theme-color-100)",
   spinnerSize: a = "3.125rem",
   spinnerTrackWidth: i = "6px",
@@ -34,6 +31,6 @@ function f({
   ] });
 }
 export {
-  f as Loading,
-  f as default
+  m as Loading,
+  m as default
 };

package/dist/components/ModalContainer/ModalContainer.js

@@ -1,52 +1,49 @@
-import { jsx as a, jsxs as E, Fragment as S } from "react/jsx-runtime";
-import P, { useState as s, useRef as k, useEffect as _, Suspense as $ } from "react";
-import { r as A } from "../../index-DC7FmJPK.mjs";
-import { classes as L } from "../../utils/helpers.js";
-import { blockLayoutsMap as w } from "../../settings.js";
-import { X as F } from "../../x-D8_C2o-U.mjs";
-import '../../assets/ModalContainer.css';const K = "_modal_1vlfz_1", M = "_reveal_1vlfz_1", N = "_hide_1vlfz_1", v = {
-  modal: K,
-  reveal: M,
-  hide: N,
-  "backdrop-reveal": "_backdrop-reveal_1vlfz_1",
+import { jsx as s, jsxs as E, Fragment as $ } from "react/jsx-runtime";
+import P, { useState as a, useRef as L, useEffect as g, Suspense as A } from "react";
+import { r as w } from "../../index-C-kn9Zhn.mjs";
+import { classes as k } from "../../utils/helpers.js";
+import { blockLayoutsMap as F } from "../../settings.js";
+import { X as K } from "../../x-C-QzJ-qD.mjs";
+import '../../assets/ModalContainer.css';const M = "_modal_1vlfz_1", y = {
+  modal: M,
   "modal__close-btn": "_modal__close-btn_1vlfz_48"
-}, R = (r) => {
+}, N = (r) => {
   if (!document.querySelector(`#${r}`)) {
     const t = document.createElement("div");
     t.setAttribute("id", r), document.querySelector("body").append(t);
   }
 };
-function G({
+function V({
   contentComponent: r = "BCVideoPlayer",
   airaLabel: h = "",
   modalId: t = "modal-container",
   onModalClose: x = () => !0,
   children: u
 }) {
-  const [d, B] = s(null), [z, g] = s("entering"), [y, b] = s(!1), [c, p] = s(null), [D, f] = s(!1), o = k(null), C = k(null), m = () => {
-    g("exiting"), b(!0), o.current !== null && setTimeout(() => {
-      o.current.close(), b(!1), g("entering"), x();
+  const [p, B] = a(null), [D, _] = a("entering"), [v, C] = a(!1), [c, m] = a(null), [O, d] = a(!1), o = L(null), b = L(null), f = () => {
+    _("exiting"), C(!0), o.current !== null && setTimeout(() => {
+      o.current.close(), C(!1), _("entering"), x();
     }, 750);
   }, i = (e) => {
-    [...o.current.attributes].findIndex((n) => n.name === "open") !== -1 && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), m());
-  }, O = (e) => {
-    e.target.classList.contains(`${v.modal}`) && m();
+    [...o.current.attributes].findIndex((n) => n.name === "open") !== -1 && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), f());
+  }, S = (e) => {
+    e.target.classList.contains(`${y.modal}`) && f();
   };
-  return R(t), _(() => {
+  return N(t), g(() => {
     document.getElementById(t).removeEventListener(`scripps:${t.replaceAll("-", "")}:change`, (n) => {
-      p(n.detail.componentProps), n.detail.forceOpen && f((l) => !l);
+      m(n.detail.componentProps), n.detail.forceOpen && d((l) => !l);
     });
     async function e() {
-      B(w.get(r));
+      B(F.get(r));
     }
     return r !== "" && e(), document.getElementById(t).addEventListener(`scripps:${t.replaceAll("-", "")}:change`, (n) => {
-      p(n.detail.componentProps), n.detail.forceOpen && f((l) => !l);
+      m(n.detail.componentProps), n.detail.forceOpen && d((l) => !l);
     }), () => {
       document.getElementById(t).removeEventListener(`scripps:${t.replaceAll("-", "")}:change`, (n) => {
-        p(n.detail.componentProps), n.detail.forceOpen && f((l) => !l);
+        m(n.detail.componentProps), n.detail.forceOpen && d((l) => !l);
       });
     };
-  }, [r, t]), _(() => {
+  }, [r, t]), g(() => {
     let e = null;
     const n = () => {
       const l = setInterval(() => {
@@ -56,46 +53,46 @@ function G({
     return o.current === null && n(), () => {
       e == null || e.close();
     };
-  }, [d]), _(() => {
-    o.current !== null && [...o.current.attributes].findIndex((e) => e.name === "open") === -1 && c !== null && (o.current.showModal(), C.current.blur());
-  }, [c, D]), A.createPortal(
-    /* @__PURE__ */ a($, { children: /* @__PURE__ */ E(
+  }, [p]), g(() => {
+    o.current !== null && [...o.current.attributes].findIndex((e) => e.name === "open") === -1 && c !== null && (o.current.showModal(), b.current.blur());
+  }, [c, O]), w.createPortal(
+    /* @__PURE__ */ s(A, { children: /* @__PURE__ */ E(
       "dialog",
       {
         ref: o,
-        "data-state": z,
-        className: L([v.modal, "modal"]),
+        "data-state": D,
+        className: k([y.modal, "modal"]),
         onKeyDown: i,
         onKeyUp: i,
-        onClick: O,
+        onClick: S,
         onCancel: (e) => e.preventDefault(),
         "aria-modal": "true",
         "aria-label": h,
         children: [
-          d !== null && u === void 0 && /* @__PURE__ */ a(
-            d,
+          p !== null && u === void 0 && /* @__PURE__ */ s(
+            p,
             {
               ...c,
-              containerClosing: y,
+              containerClosing: v,
               handleClosing: i
             }
           ),
-          u !== void 0 && /* @__PURE__ */ a(S, { children: P.Children.map(u, (e) => P.cloneElement(e, {
+          u !== void 0 && /* @__PURE__ */ s($, { children: P.Children.map(u, (e) => P.cloneElement(e, {
             ...c,
-            containerClosing: y,
+            containerClosing: v,
             handleClosing: i
           })) }),
           /* @__PURE__ */ E(
             "button",
             {
               type: "button",
-              onClick: m,
-              className: L([v["modal__close-btn"], "modal__close-btn"]),
+              onClick: f,
+              className: k([y["modal__close-btn"], "modal__close-btn"]),
               "aria-label": "Close",
-              ref: C,
+              ref: b,
               children: [
-                /* @__PURE__ */ a("span", { className: "sr-only", children: "close" }),
-                /* @__PURE__ */ a("i", { children: /* @__PURE__ */ a(F, { width: "48", height: "48" }) })
+                /* @__PURE__ */ s("span", { className: "sr-only", children: "close" }),
+                /* @__PURE__ */ s("i", { children: /* @__PURE__ */ s(K, { width: "48", height: "48" }) })
               ]
             }
           )
@@ -106,6 +103,6 @@ function G({
   );
 }
 export {
-  G as ModalContainer,
-  G as default
+  V as ModalContainer,
+  V as default
 };