@scrippsproduct/networks-ui-library 2.0.10 → 2.0.11-alpha.1

package/dist/assets/CarouselSlide.css

@@ -1 +1 @@
-._slide_1echy_2{scroll-snap-align:center;overflow:hidden;display:flex;flex:0 0 100%;column-gap:var(--_slide-gap);align-items:center;justify-content:var(--_cells-position);box-sizing:border-box;aspect-ratio:var(--_slide-aspect-ratio);padding-inline-end:0}._slide_1echy_2[inert]{opacity:.5}._slide--variable-height_1echy_18{aspect-ratio:unset}._slide_1echy_2>*{display:grid;flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));gap:var(--_slide-gap);place-items:center;aspect-ratio:var(--_cell-aspect-ratio)}._slide_1echy_2>image-card{display:flex;gap:0;place-items:flex-start}
+._slide_1msk4_2{scroll-snap-align:center;overflow:hidden;display:flex;flex:0 0 100%;column-gap:var(--_slide-gap);align-items:stretch;justify-content:var(--_cells-position);box-sizing:border-box;aspect-ratio:var(--_slide-aspect-ratio);padding-inline-end:0}._slide_1msk4_2[inert]{opacity:.5}._slide--variable-height_1msk4_18{aspect-ratio:unset}._slide_1msk4_2>*{flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));aspect-ratio:var(--_cell-aspect-ratio)}._slide_1msk4_2>image-card{display:flex;gap:0;place-items:flex-start}

package/dist/assets/GridList.css

@@ -1 +1 @@
-._grid-list_17klz_1{display:grid;gap:1em;list-style:none;padding:0;margin:0}._grid-list-header_17klz_9{margin:.5em 0}._grid-list--1-columns_17klz_13{grid-template-columns:repeat(1,1fr)}._grid-list--2-columns_17klz_17{grid-template-columns:repeat(2,1fr)}._grid-list--3-columns_17klz_21{grid-template-columns:repeat(3,1fr)}._grid-list--4-columns_17klz_25{grid-template-columns:repeat(4,1fr)}._grid-list--5-columns_17klz_29{grid-template-columns:repeat(5,1fr)}._grid-list--6-columns_17klz_33{grid-template-columns:repeat(6,1fr)}._grid-list--7-columns_17klz_37{grid-template-columns:repeat(7,1fr)}._grid-list--8-columns_17klz_41{grid-template-columns:repeat(8,1fr)}._grid-list--9-columns_17klz_45{grid-template-columns:repeat(9,1fr)}._grid-list--10-columns_17klz_49{grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){._grid-list--3-columns_17klz_21,._grid-list--4-columns_17klz_25{grid-template-columns:repeat(2,1fr)}._grid-list--5-columns_17klz_29,._grid-list--6-columns_17klz_33{grid-template-columns:repeat(3,1fr)}._grid-list--7-columns_17klz_37,._grid-list--8-columns_17klz_41{grid-template-columns:repeat(4,1fr)}._grid-list--9-columns_17klz_45,._grid-list--10-columns_17klz_49{grid-template-columns:repeat(5,1fr)}}@media screen and (max-width:600px){._grid-list_17klz_1{display:block}}
+._grid-list_1iv7r_1{display:grid;margin:0;padding:0;list-style:none}._grid-list-header_1iv7r_8{margin:.5em 0}._grid-list--1-columns_1iv7r_12{grid-template-columns:repeat(1,1fr)}._grid-list--2-columns_1iv7r_16{grid-template-columns:repeat(2,1fr)}._grid-list--3-columns_1iv7r_20{grid-template-columns:repeat(3,1fr)}._grid-list--4-columns_1iv7r_24{grid-template-columns:repeat(4,1fr)}._grid-list--5-columns_1iv7r_28{grid-template-columns:repeat(5,1fr)}._grid-list--6-columns_1iv7r_32{grid-template-columns:repeat(6,1fr)}._grid-list--7-columns_1iv7r_36{grid-template-columns:repeat(7,1fr)}._grid-list--8-columns_1iv7r_40{grid-template-columns:repeat(8,1fr)}._grid-list--9-columns_1iv7r_44{grid-template-columns:repeat(9,1fr)}._grid-list--10-columns_1iv7r_48{grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){._grid-list--3-columns_1iv7r_20,._grid-list--4-columns_1iv7r_24{grid-template-columns:repeat(2,1fr)}._grid-list--5-columns_1iv7r_28,._grid-list--6-columns_1iv7r_32{grid-template-columns:repeat(3,1fr)}._grid-list--7-columns_1iv7r_36,._grid-list--8-columns_1iv7r_40{grid-template-columns:repeat(4,1fr)}._grid-list--9-columns_1iv7r_44,._grid-list--10-columns_1iv7r_48{grid-template-columns:repeat(5,1fr)}}@media screen and (max-width:600px){._grid-list_1iv7r_1{display:block}}

package/dist/assets/HighlightGrid.css

@@ -0,0 +1 @@
+._highlight-grid_14d9z_1{--gap: 2rem;display:grid;gap:var(--gap);box-sizing:border-box;margin:0}._highlight-grid__item_14d9z_9{display:contents;min-width:0}._highlight-grid__highlighted-items_14d9z_14{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,1fr);gap:var(--gap)}._highlight-grid__highlighted-items_14d9z_14>._highlight-grid__item_14d9z_9{flex:1 1 50%}

package/dist/assets/ImageCard.css

@@ -1 +1 @@
-image-card{--overlay-content-text-color: #fff;--align-overlay-content: flex-end;--justify-overlay-content: flex-start;display:flex;flex-direction:column;justify-content:stretch;box-sizing:border-box;height:100%;margin:0;padding:0 0 1rem}._image-card--clickable_1tnka_14{cursor:pointer}._image-card__img-wrapper_1tnka_18{display:grid;grid-template-areas:"img"}._image-card__img-wrapper_1tnka_18>*{grid-area:img;place-self:var(--align-overlay-content) var(--justify-overlay-content)}._image-card__img-wrapper_1tnka_18>*>*{padding:0 1.5rem;color:var(--overlay-content-text-color);text-shadow:1px 1px 2px rgba(0,0,0,.4)}._image-card__img-wrapper_1tnka_18>*>source{display:contents}._image-card--inline_1tnka_35 ._image-card__img-wrapper_1tnka_18{flex:0 1 min(50%,750px)}._image-card__image_1tnka_39{width:100%;padding:0!important}._image-card__image_1tnka_39>img,._image-card__mobile-image_1tnka_45{aspect-ratio:var(--image-aspect-ratio);width:100%;padding:0;object-fit:cover;object-position:var(--background-image-position);background-color:#efefef}._image-card__mobile-image_1tnka_45{display:none;aspect-ratio:var(--mobile-image-aspect-ratio);object-position:var(--mobile-background-image-position)}@media screen and (max-width:700px){._image-card__mobile-image_1tnka_45{display:block}._image-card__image_1tnka_39{object-position:var(--mobile-background-image-position)}._image-card__mobile-image_1tnka_45~._image-card__image_1tnka_39{display:none}}._image-card--inline_1tnka_35{flex-direction:row;gap:2.5rem;padding:0}._image-card__play-icon_1tnka_77{cursor:pointer;position:relative;overflow:hidden;display:grid;place-self:center center;padding:1.5rem;border:1px rgba(0,0,0,.4) dotted;border-radius:50%;background-color:#ffffff80;transition:scale .225s ease-in-out}._image-card__play-icon_1tnka_77>._play-icon__triangle_1tnka_89{position:absolute;top:32%;left:35%;display:block;width:0;height:0;border-top:.6rem solid transparent;border-right:none;border-bottom:.6rem solid transparent;border-left:1.2rem solid rgba(0,0,0,.5);background-color:transparent;transition:scale .225s ease-in-out,left .225s ease-in-out}._image-card__play-icon_1tnka_77:hover{scale:1.1}._image-card__play-icon_1tnka_77:hover>._play-icon__triangle_1tnka_89{left:42%;scale:1.1}._image-card__content_1tnka_111{padding:1.5rem 0 .5rem;text-align:left}._image-card__content_1tnka_111>div{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--content-line-clamp);line-clamp:var(--content-line-clamp);margin:1.5em 0}._image-card__content_1tnka_111 h2{margin-top:0}._image-card--inline_1tnka_35 ._image-card__content_1tnka_111{align-self:center;padding:0}._image-card__cta-wrapper_1tnka_132{justify-self:flex-end;margin-top:auto}._image-card__cta_1tnka_132{color:var(--base-anchor-color);text-align:left}._image-card__overlay-content_1tnka_142{padding-bottom:1.5rem}image-card.sports-leauge-card{padding-block-end:1.5rem;border-radius:20px;color:#fff;background-color:#671982}image-card.sports-leauge-card .leauge-card__content,image-card.sports-leauge-card .h4,image-card.sports-leauge-card .image-card__cta-wrapper{padding-inline:1.5rem}image-card.sports-leauge-card .image-card__content>div{margin-block:1rem}image-card.sports-leauge-card .image-card__img-wrapper img{border-radius:20px 20px 0 0}image-card.sports-leauge-card .h4{margin-block-end:0}image-card.sports-leauge-card .image-card__cta{display:block;padding-block:1rem;border-radius:20px;font-weight:500;color:#fff;text-align:center;text-decoration:none;background-color:#a026a0;transition:transform .3s ease}image-card.sports-leauge-card .image-card__cta:hover{transform:scale3d(1.05,1.05,1.05)}image-card.sports-leauge-card .league-card__date{margin-block-end:.5rem;font-size:.875rem}image-card.sports-leauge-card .league-card__teams{font-size:1.2rem;font-weight:500}
+image-card{--overlay-content-text-color: #fff;--align-overlay-content: flex-end;--justify-overlay-content: flex-start;display:flex;flex-direction:column;justify-content:stretch;box-sizing:border-box;height:100%;margin:0;padding:0 0 1rem}._image-card--clickable_1tnka_14{cursor:pointer}._image-card__img-wrapper_1tnka_18{display:grid;grid-template-areas:"img"}._image-card__img-wrapper_1tnka_18>*{grid-area:img;place-self:var(--align-overlay-content) var(--justify-overlay-content)}._image-card__img-wrapper_1tnka_18>*>*{padding:0 1.5rem;color:var(--overlay-content-text-color);text-shadow:1px 1px 2px rgba(0,0,0,.4)}._image-card__img-wrapper_1tnka_18>*>source{display:contents}._image-card--inline_1tnka_35 ._image-card__img-wrapper_1tnka_18{flex:0 1 min(50%,750px)}._image-card__image_1tnka_39{width:100%;padding:0!important}._image-card__image_1tnka_39>img,._image-card__mobile-image_1tnka_45{aspect-ratio:var(--image-aspect-ratio);width:100%;padding:0;object-fit:cover;object-position:var(--background-image-position);background-color:#efefef}._image-card__mobile-image_1tnka_45{display:none;aspect-ratio:var(--mobile-image-aspect-ratio);object-position:var(--mobile-background-image-position)}@media screen and (max-width:700px){._image-card__mobile-image_1tnka_45{display:block}._image-card__image_1tnka_39{object-position:var(--mobile-background-image-position)}._image-card__mobile-image_1tnka_45~._image-card__image_1tnka_39{display:none}}._image-card--inline_1tnka_35{flex-direction:row;gap:2.5rem;padding:0}._image-card__play-icon_1tnka_77{cursor:pointer;position:relative;overflow:hidden;display:grid;place-self:center center;padding:1.5rem;border:1px rgba(0,0,0,.4) dotted;border-radius:50%;background-color:#ffffff80;transition:scale .225s ease-in-out}._image-card__play-icon_1tnka_77>._play-icon__triangle_1tnka_89{position:absolute;top:32%;left:35%;display:block;width:0;height:0;border-top:.6rem solid transparent;border-right:none;border-bottom:.6rem solid transparent;border-left:1.2rem solid rgba(0,0,0,.5);background-color:transparent;transition:scale .225s ease-in-out,left .225s ease-in-out}._image-card__play-icon_1tnka_77:hover{scale:1.1}._image-card__play-icon_1tnka_77:hover>._play-icon__triangle_1tnka_89{left:42%;scale:1.1}._image-card__content_1tnka_111{padding:1.5rem 0 .5rem;text-align:left}._image-card__content_1tnka_111>div{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--content-line-clamp);line-clamp:var(--content-line-clamp);margin:1.5em 0}._image-card__content_1tnka_111 h2{margin-top:0}._image-card--inline_1tnka_35 ._image-card__content_1tnka_111{align-self:center;padding:0}._image-card__cta-wrapper_1tnka_132{justify-self:flex-end;margin-top:auto}._image-card__cta_1tnka_132{color:var(--base-anchor-color);text-align:left}._image-card__overlay-content_1tnka_142{padding-bottom:1.5rem}image-card.sports-leauge-card{padding-block-end:1.5rem;border-radius:20px;color:#fff;background-color:#671982}image-card.sports-leauge-card .leauge-card__content,image-card.sports-leauge-card .h4,image-card.sports-leauge-card .image-card__cta-wrapper{padding-inline:1.5rem}image-card.sports-leauge-card .image-card__content>div{margin-block:1rem}image-card.sports-leauge-card .image-card__img-wrapper img{border-radius:20px 20px 0 0}image-card.sports-leauge-card .h4{margin-block-end:0}image-card.sports-leauge-card .image-card__cta{display:block;padding:1rem;border-radius:20px;font-weight:500;color:#fff;text-align:center;text-decoration:none;background-color:#a026a0;transition:transform .3s ease}image-card.sports-leauge-card .image-card__cta:hover{transform:scale3d(1.05,1.05,1.05)}image-card.sports-leauge-card .league-card__date{margin-block-end:.5rem;font-size:.875rem}image-card.sports-leauge-card .league-card__teams{font-size:1.2rem;font-weight:500}

package/dist/assets/LogoCard.css

@@ -1 +1 @@
-logo-card{--logo-box-width: "100%";--logo-box-height: "auto";display:flex;flex-direction:column;gap:1.5rem;box-sizing:border-box;margin:0}._logo-card__logo-box_6at8h_11{overflow:hidden;flex:0 0 auto;width:100%;height:var(--logo-box-height)}._logo-card__logo_6at8h_11{display:block;width:100%;height:100%}._logo-card__logo_6at8h_11>img{display:block;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;object-position:left center}._logo-card__body_6at8h_34{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem;min-width:0}._logo-card__content_6at8h_42{text-align:left}._logo-card__content_6at8h_42>:first-child{margin-top:0}._logo-card__content_6at8h_42>:last-child{margin-bottom:0}._logo-card__cta-wrapper_6at8h_52{margin-top:auto}._logo-card__cta_6at8h_52{color:var(--base-anchor-color);text-align:left}._logo-card--inline_6at8h_61{flex-direction:row;gap:2.5rem;align-items:center}._logo-card--inline_6at8h_61 ._logo-card__logo-box_6at8h_11{width:var(--logo-box-width);max-width:100%;height:auto}._logo-card--inline_6at8h_61 ._logo-card__logo_6at8h_11{height:auto}._logo-card--inline_6at8h_61 ._logo-card__logo_6at8h_11>img{width:100%;height:auto;max-height:none}._logo-card--inline_6at8h_61 ._logo-card__body_6at8h_34{justify-content:center}._logo-card--inline_6at8h_61 ._logo-card__cta-wrapper_6at8h_52{margin-top:0}
+logo-card{--logo-box-width: "100%";--logo-box-height: "auto";display:flex;flex-direction:column;gap:1.5rem;box-sizing:border-box;margin:0}._logo-card__logo-box_otu2k_11{overflow:hidden;display:grid;grid-template-areas:"stack";place-content:center;width:100%;height:var(--logo-box-height)}._logo-card__logo_otu2k_11{display:block;grid-area:stack;width:100%;height:100%}._logo-card__logo_otu2k_11>img{display:block;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;object-position:left center}._logo-card__body_otu2k_37{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem;min-width:0}._logo-card__content_otu2k_45{text-align:left}._logo-card__content_otu2k_45>:first-child{margin-top:0}._logo-card__content_otu2k_45>:last-child{margin-bottom:0}._logo-card__cta-wrapper_otu2k_55{margin-top:auto}._logo-card__cta_otu2k_55{color:var(--base-anchor-color);text-align:left}._logo-card--inline_otu2k_64{flex-direction:row;gap:2.5rem;align-items:center}._logo-card--inline_otu2k_64 ._logo-card__logo-box_otu2k_11{width:var(--logo-box-width);max-width:100%;height:auto}._logo-card--inline_otu2k_64 ._logo-card__logo_otu2k_11{height:auto}._logo-card--inline_otu2k_64 ._logo-card__logo_otu2k_11>img{width:100%;height:auto;max-height:none}._logo-card--inline_otu2k_64 ._logo-card__body_otu2k_37{justify-content:center}._logo-card--inline_otu2k_64 ._logo-card__cta-wrapper_otu2k_55{margin-top:0}

package/dist/components/Carousel/Carousel.js

@@ -1,17 +1,74 @@
-import { jsx as l, Fragment as ee, jsxs as j } from "react/jsx-runtime";
-import { useRef as i, useState as m, useEffect as B, useCallback as u, Suspense as re } from "react";
-import { chunkArray as te, classes as g } from "../../utils/helpers.js";
-import ne from "./CarouselUtils.class.js";
-import { CarouselSlide as le } from "../CarouselSlide/CarouselSlide.js";
-import { Loading as ce } from "../Loading/Loading.js";
-import { c as a } from "../../Carousel.module-Nwf_zL9b.mjs";
+import { jsx as s, Fragment as Y, jsxs as K } from "react/jsx-runtime";
+import { useRef as d, useState as v, useEffect as U, useCallback as S, Suspense as ee } from "react";
+import { chunkArray as re, classes as _ } from "../../utils/helpers.js";
+import te from "./CarouselUtils.class.js";
+import { CarouselSlide as ne } from "../CarouselSlide/CarouselSlide.js";
+import { Loading as le } from "../Loading/Loading.js";
+import { c as f } from "../../Carousel.module-Nwf_zL9b.mjs";
 import { C as oe } from "../../chevron-left-D0UjbrKw.mjs";
-import { C as se } from "../../chevron-right-0ZF3LruR.mjs";
-const P = window.matchMedia("(width <= 600px)"), b = window.matchMedia("(width <= 800px"), z = window.matchMedia("(width <= 1024px"), E = window.matchMedia("(width <= 1280px");
-function we({
-  id: L,
-  cells: w,
-  options: x = {
+import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
+const R = 10, G = {
+  one: 1,
+  two: 2,
+  three: 3,
+  four: 4,
+  five: 5,
+  six: 6,
+  seven: 7,
+  eight: 8,
+  nine: 9,
+  ten: 10
+}, se = {
+  one: 600,
+  two: 800,
+  three: 1024,
+  four: 1750
+}, ie = {
+  one: ({ wrapAround: o }, c) => ({
+    showControls: !1,
+    showPagination: !1,
+    cellsPerSlide: c,
+    cellsPosition: o ? "center" : "flex-start",
+    gutterSize: R
+  }),
+  two: ({ cellsPerSlide: o }, c) => ({
+    showControls: !1,
+    gutterSize: R,
+    cellsPerSlide: y(o, c)
+  }),
+  three: ({ cellsPerSlide: o }, c) => ({
+    showControls: !1,
+    gutterSize: R,
+    cellsPerSlide: y(o, c)
+  }),
+  four: ({ cellsPerSlide: o, showPagination: c }, l) => ({
+    showControls: !c,
+    cellsPerSlide: y(o, l)
+  })
+};
+function y(o, c) {
+  return Math.min(o || c, c);
+}
+function ae(o = {}) {
+  return Object.keys(G).map((l) => {
+    const { width: i = se[l], cellsPerSlide: p = G[l] } = o[l] ?? {};
+    return { name: l, width: i, cellsPerSlide: p };
+  }).filter((l) => l.width !== void 0).sort((l, i) => l.width - i.width).map(({ name: l, width: i, cellsPerSlide: p }) => ({
+    name: l,
+    cellsPerSlide: p,
+    mediaQuery: window.matchMedia(`(width <= ${i}px)`)
+  }));
+}
+function ue(o, c) {
+  const l = c.find(({ mediaQuery: p }) => p.matches);
+  if (!l) return {};
+  const i = ie[l.name];
+  return i ? i(o, l.cellsPerSlide) : { cellsPerSlide: y(o.cellsPerSlide, l.cellsPerSlide) };
+}
+function _e({
+  id: o,
+  cells: c,
+  options: l = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -27,176 +84,153 @@ function we({
     slideAspectRatio: "4/2",
     slideGap: 1.5,
     cellsPerSlide: 1,
+    breakpoints: {
+      one: { width: 600, cellsPerSlide: 1 },
+      two: { width: 800, cellsPerSlide: 2 },
+      three: { width: 1024, cellsPerSlide: 3 },
+      four: { width: 1750, cellsPerSlide: 4 }
+    },
     cellAspectRatio: "4/2",
     cellsPosition: "center",
     wrapAround: !0
   }
 }) {
-  const h = i(`carousel-${L}`), I = i(null), c = i(null), R = i(null), p = i([...w]), $ = i(null), S = i(null), r = i(null), e = i(x), o = i(x), N = i("-50%"), [T, H] = m([]), [M, U] = m([]), [k, q] = m(0), [F, D] = m(!1);
-  B(() => {
-    const t = () => {
-      P.matches ? e.current = {
-        ...o.current,
-        showControls: !1,
-        showPagination: !1,
-        cellsPerSlide: 1,
-        cellsPosition: o.current.wrapAround ? "center" : "flex-start",
-        gutterSize: 10
-      } : b.matches ? o.current.cellsPerSlide !== 1 ? e.current = {
-        ...o.current,
-        cellsPerSlide: 2,
-        showControls: !1,
-        gutterSize: 10
-      } : e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      } : z.matches ? o.current.cellsPerSlide !== 1 && o.current.cellsPerSlide !== 2 ? e.current = {
-        ...o.current,
-        cellsPerSlide: 3,
-        showControls: !1,
-        gutterSize: 10
-      } : e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      } : E.matches ? o.current.showPagination ? e.current = {
-        ...o.current,
-        showControls: !1
-      } : e.current = {
-        ...o.current
-      } : e.current = {
-        ...o.current
+  const i = d(`carousel-${o}`), p = d(null), a = d(null), z = d(null), g = d([...c]), L = d(null), P = d(null), r = d(null), e = d(l), A = d(l), T = d("-50%"), [x, j] = v([]), [N, H] = v([]), [k, F] = v(0), [V, $] = v(!1);
+  U(() => {
+    const t = ae(A.current.breakpoints), n = () => {
+      e.current = {
+        ...A.current,
+        ...ue(A.current, t)
       };
     };
-    t();
-    const n = () => {
-      q((s) => s + 1), t();
+    n();
+    const u = () => {
+      F((h) => h + 1), n();
     };
-    return P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), E.addEventListener("change", n), () => {
-      P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n), E.removeEventListener("change", n);
+    return t.forEach(({ mediaQuery: h }) => h.addEventListener("change", u)), () => {
+      t.forEach(({ mediaQuery: h }) => h.removeEventListener("change", u));
     };
   }, []);
-  const O = u((t, n) => {
-    const s = te(n, t);
-    U([...s]);
-    let _ = [];
-    for (let f = 0; f <= s.length - 1; f++)
-      _[f] = {
-        ariaLabel: `${f + 1} of ${s.length}`,
-        layout: s[f][0].layout || "",
+  const O = S((t, n) => {
+    const u = re(n, t);
+    H([...u]);
+    let h = [];
+    for (let w = 0; w <= u.length - 1; w++)
+      h[w] = {
+        ariaLabel: `${w + 1} of ${u.length}`,
+        layout: u[w][0].layout || "",
         cells: [
-          ...s[f]
+          ...u[w]
         ]
       };
-    const C = [..._], A = [..._], Y = C.slice(-1), Z = C.slice(0);
-    return A.push(Z[0]), A.unshift(Y[0]), e.current.wrapAround && t.length > n ? A : C;
-  }, []), d = u(() => {
+    const E = [...h], I = [...h], J = E.slice(-1), X = E.slice(0);
+    return I.push(X[0]), I.unshift(J[0]), e.current.wrapAround && t.length > n ? I : E;
+  }, []), m = S(() => {
     e.current.autoplay && r.current && r.current.clearTimer();
-  }, []), W = u((t) => {
-    d();
+  }, []), W = S((t) => {
+    m();
     const n = t.key;
     n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
-  }, [d]), J = u(() => {
-    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
+  }, [m]), q = S(() => {
+    m(), a.current !== null && a.current.addEventListener("scrollend", () => {
       r.current && r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [d]), v = u(() => {
-    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
-      r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", v, { once: !0 });
+  }, [m]), C = S(() => {
+    m(), a.current !== null && a.current.addEventListener("scrollend", () => {
+      r.current && r.current.handleScrollEnd(), a.current && a.current.addEventListener("scroll", C, { once: !0 });
     }, { once: !0 });
-  }, [d]), Q = () => {
+  }, [m]), Q = () => {
     var t;
     (t = r.current) == null || t.destroy();
-  }, y = u(() => {
+  }, b = S(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
     var t, n;
-    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), D(!1), r.current = new ne({
-      carouselEl: I.current,
-      scrollerEl: c.current,
-      paginationEl: R.current,
-      cells: p.current,
+    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), $(!1), r.current = new te({
+      carouselEl: p.current,
+      scrollerEl: a.current,
+      paginationEl: z.current,
+      cells: g.current,
       navBtnEls: {
-        next: $.current,
-        previous: S.current
+        next: L.current,
+        previous: P.current
       },
-      id: h.current,
+      id: i.current,
       options: {
         autoplay: e.current.autoplay,
-        wrapAround: e.current.wrapAround && p.current.length > (e.current.cellsPerSlide || 1),
+        wrapAround: e.current.wrapAround && g.current.length > (e.current.cellsPerSlide || 1),
         showPagination: e.current.showPagination,
         delay: e.current.autoplayDelay,
         slideGutterSize: e.current.gutterSize,
         slideAspectRatio: e.current.slideAspectRatio,
-        showControls: e.current.showControls && p.current.length > (e.current.cellsPerSlide || 1),
+        showControls: e.current.showControls && g.current.length > (e.current.cellsPerSlide || 1),
         cellsPerSlide: e.current.cellsPerSlide
       }
-    }), D(!0);
-  }, [k]), V = u(() => {
-    c.current && c.current.addEventListener("scroll", v, { once: !0 });
-  }, [v]), G = () => {
+    }), $(!0);
+  }, [k]), M = S(() => {
+    a.current && a.current.addEventListener("scroll", C, { once: !0 });
+  }, [C]), D = () => {
     var t;
-    return ((t = c.current) == null ? void 0 : t.querySelectorAll("[data-index]").length) ?? 0;
-  }, K = u(() => {
-    const t = O(p.current, e.current.cellsPerSlide ?? 1);
-    H(t);
+    return ((t = a.current) == null ? void 0 : t.querySelectorAll("[data-index]").length) ?? 0;
+  }, B = S(() => {
+    const t = O(g.current, e.current.cellsPerSlide ?? 1);
+    j(t);
     const n = t.length;
-    if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
-      let s = setInterval(() => {
-        c.current !== null && G() >= n && (S.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), y());
+    if (g.current.length > (e.current.cellsPerSlide ?? 1)) {
+      let u = setInterval(() => {
+        a.current !== null && D() >= n && (P.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(u), M(), b());
       }, 100);
     } else {
-      let s = setInterval(() => {
-        c.current !== null && G() >= n && (clearInterval(s), y());
+      let u = setInterval(() => {
+        a.current !== null && D() >= n && (clearInterval(u), b());
       }, 100);
     }
-  }, [O, V, y]);
-  B(() => {
+  }, [O, M, b]);
+  U(() => {
     if (e.current !== null) {
       if (e.current.showControls) {
         let t = 0;
-        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), N.current = `calc(-50% - ${t}px)`;
+        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), T.current = `calc(-50% - ${t}px)`;
       }
-      K();
+      B();
     }
     return () => {
       Q();
     };
-  }, [K, e]);
-  const X = () => w.length <= (e.current.cellsPerSlide ?? 1) ? "0" : e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`;
-  return /* @__PURE__ */ l(ee, { children: e.current !== null && /* @__PURE__ */ j(
+  }, [B, e]);
+  const Z = () => c.length <= (e.current.cellsPerSlide ?? 1) ? "0" : e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`;
+  return /* @__PURE__ */ s(Y, { children: e.current !== null && /* @__PURE__ */ K(
     "div",
     {
       "aria-label": e.current.title,
       "aria-roledescription": "carousel",
-      className: a.carousel,
-      id: h.current,
-      ref: I,
+      className: f.carousel,
+      id: i.current,
+      ref: p,
       role: "region",
       style: {
-        "--_carousel-gutters": X(),
+        "--_carousel-gutters": Z(),
         "--_slide-aspect-ratio": e.current.slideAspectRatio,
         "--_cell-aspect-ratio": e.current.cellAspectRatio,
         "--_slide-cell-size": `${100 / (e.current.cellsPerSlide ?? 1)}%`,
         "--_cells-position": e.current.cellsPosition,
         "--_control-btns-offset-x": `${e.current.controlButtonsOffset ?? 0}rem`,
         "--_slide-gap": `${e.current.slideGap ?? 0}rem`,
-        "--_controls-transform": N.current
+        "--_controls-transform": T.current
       },
       tabIndex: -1,
       onKeyDown: W,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           "ol",
           {
             "aria-label": "Items Scroller",
             "aria-live": "polite",
-            className: a.carousel__scroller,
+            className: f.carousel__scroller,
             "data-scrollbar": e.current.showScrollbar,
-            ref: c,
+            ref: a,
             role: "group",
-            style: { opacity: F ? 1 : 0 },
+            style: { opacity: V ? 1 : 0 },
             tabIndex: 0,
             onMouseEnter: () => {
               e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -204,45 +238,45 @@ function we({
             onMouseLeave: () => {
               e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: J,
-            children: /* @__PURE__ */ l(
-              re,
+            onTouchStart: q,
+            children: /* @__PURE__ */ s(
+              ee,
               {
-                fallback: /* @__PURE__ */ l(
+                fallback: /* @__PURE__ */ s(
                   "li",
                   {
-                    className: g([a["carousel__loading-slide"], "carousel__loading-slide"]),
+                    className: _([f["carousel__loading-slide"], "carousel__loading-slide"]),
                     role: "presentation",
                     style: { aspectRatio: "var(--_slide-aspect-ratio)", width: "100%" },
-                    children: /* @__PURE__ */ l(ce, {})
+                    children: /* @__PURE__ */ s(le, {})
                   }
                 ),
-                children: T.length > 0 && T.map((t, n) => /* @__PURE__ */ l(
-                  le,
+                children: x.length > 0 && x.map((t, n) => /* @__PURE__ */ s(
+                  ne,
                   {
                     currentIndex: e.current.wrapAround ? 1 : 0,
                     index: n,
                     slide: { ...t, ariaLabel: t.ariaLabel || "" },
                     variableHeight: e.current.variableHeight
                   },
-                  `carousel${L}-slide${n}`
+                  `carousel${o}-slide${n}`
                 ))
               }
             )
           }
         ),
-        e.current.showControls && w.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: a["carousel-controls"], children: [
-          /* @__PURE__ */ l(
+        e.current.showControls && c.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ K("div", { className: f["carousel-controls"], children: [
+          /* @__PURE__ */ s(
             "button",
             {
-              "aria-controls": h.current,
+              "aria-controls": i.current,
               "aria-label": "Previous Item",
-              className: g([
-                a["carousel-controls__btn"],
-                a["carousel-controls__previous"],
+              className: _([
+                f["carousel-controls__btn"],
+                f["carousel-controls__previous"],
                 "carousel-controls__previous"
               ]),
-              ref: S,
+              ref: P,
               title: "Previous Item",
               type: "button",
               onClick: () => {
@@ -254,16 +288,16 @@ function we({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(oe, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(oe, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           ),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s(
             "button",
             {
-              "aria-controls": h.current,
+              "aria-controls": i.current,
               "aria-label": "Next Item",
-              className: g([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
-              ref: $,
+              className: _([f["carousel-controls__btn"], f["carousel-controls__next"], "carousel-controls__next"]),
+              ref: L,
               title: "Next Item",
               type: "button",
               onClick: () => {
@@ -275,27 +309,27 @@ function we({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(se, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(ce, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           )
         ] }),
-        e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: a["carousel-nav__list"], ref: R, children: M.map((t, n) => /* @__PURE__ */ l(
+        e.current.showPagination && N.length > 1 && /* @__PURE__ */ s("div", { className: [f["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ s("ol", { className: f["carousel-nav__list"], ref: z, children: N.map((t, n) => /* @__PURE__ */ s(
           "li",
           {
-            className: g([a["carousel-nav__item"], "carousel-nav__item"]),
+            className: _([f["carousel-nav__item"], "carousel-nav__item"]),
             "data-current": n === 0 ? "" : void 0,
             title: `Navigate to slide ${n + 1}`,
             onClick: () => {
               r.current && r.current.navigateToIndex(n);
             }
           },
-          `carousel${h}-nav-${n}`
+          `carousel${i}-nav-${n}`
         )) }) })
       ]
     }
   ) });
 }
 export {
-  we as Carousel,
-  we as default
+  _e as Carousel,
+  _e as default
 };

package/dist/components/CarouselSlide/CarouselSlide.js

@@ -1,22 +1,22 @@
-import { jsx as r, Fragment as m } from "react/jsx-runtime";
-import { useMemo as n, createElement as u } from "react";
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { useMemo as u, createElement as c } from "react";
 import { classes as d } from "../../utils/helpers.js";
-import { slideLayoutsMap as h } from "../../settings.js";
-import '../../assets/CarouselSlide.css';const p = "_slide_1echy_2", i = {
-  slide: p,
-  "slide--variable-height": "_slide--variable-height_1echy_18"
+import { slideLayoutsMap as p } from "../../settings.js";
+import '../../assets/CarouselSlide.css';const h = "_slide_1msk4_2", i = {
+  slide: h,
+  "slide--variable-height": "_slide--variable-height_1msk4_18"
 };
 function g({
   slide: e,
   index: l,
-  currentIndex: t,
-  variableHeight: s = !1
+  currentIndex: s,
+  variableHeight: t = !1
 }) {
-  const a = n(
-    () => h.get(e.layout) ?? null,
+  const a = u(
+    () => p.get(e.layout) ?? null,
     [e.layout]
   );
-  return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
     "li",
     {
       "aria-label": e.ariaLabel,
@@ -24,11 +24,11 @@ function g({
       className: d([
         i.slide,
         "slide",
-        s ? i["slide--variable-height"] : ""
+        t ? i["slide--variable-height"] : ""
       ]),
       "data-index": l,
-      ...t !== l ? { inert: !0 } : {},
-      children: a !== null && e.cells.map((o, c) => /* @__PURE__ */ u(a, { ...o.props, key: `slide${l}-cell${c}` }))
+      ...s !== l ? { inert: !0 } : {},
+      children: a !== null && e.cells.map((o, m) => /* @__PURE__ */ c(a, { ...o.props, key: `slide${l}-cell${m}` }))
     }
   ) });
 }

package/dist/components/GridList/GridList.js

@@ -1,32 +1,40 @@
-import { jsxs as c, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { jsxs as g, Fragment as o, jsx as r } from "react/jsx-runtime";
 import { classes as t } from "../../utils/helpers.js";
-import '../../assets/GridList.css';const i = {
-  "grid-list": "_grid-list_17klz_1",
-  "grid-list-header": "_grid-list-header_17klz_9",
-  "grid-list--1-columns": "_grid-list--1-columns_17klz_13",
-  "grid-list--2-columns": "_grid-list--2-columns_17klz_17",
-  "grid-list--3-columns": "_grid-list--3-columns_17klz_21",
-  "grid-list--4-columns": "_grid-list--4-columns_17klz_25",
-  "grid-list--5-columns": "_grid-list--5-columns_17klz_29",
-  "grid-list--6-columns": "_grid-list--6-columns_17klz_33",
-  "grid-list--7-columns": "_grid-list--7-columns_17klz_37",
-  "grid-list--8-columns": "_grid-list--8-columns_17klz_41",
-  "grid-list--9-columns": "_grid-list--9-columns_17klz_45",
-  "grid-list--10-columns": "_grid-list--10-columns_17klz_49"
+import '../../assets/GridList.css';const s = {
+  "grid-list": "_grid-list_1iv7r_1",
+  "grid-list-header": "_grid-list-header_1iv7r_8",
+  "grid-list--1-columns": "_grid-list--1-columns_1iv7r_12",
+  "grid-list--2-columns": "_grid-list--2-columns_1iv7r_16",
+  "grid-list--3-columns": "_grid-list--3-columns_1iv7r_20",
+  "grid-list--4-columns": "_grid-list--4-columns_1iv7r_24",
+  "grid-list--5-columns": "_grid-list--5-columns_1iv7r_28",
+  "grid-list--6-columns": "_grid-list--6-columns_1iv7r_32",
+  "grid-list--7-columns": "_grid-list--7-columns_1iv7r_36",
+  "grid-list--8-columns": "_grid-list--8-columns_1iv7r_40",
+  "grid-list--9-columns": "_grid-list--9-columns_1iv7r_44",
+  "grid-list--10-columns": "_grid-list--10-columns_1iv7r_48"
 };
-function m({
+function u({
   children: d,
-  numberOfColumns: l = 2,
-  headerText: s = ""
+  numberOfColumns: i = 2,
+  headerText: l = "",
+  gap: _ = "1em"
 }) {
-  l > 10 && (l = 10);
-  const _ = `grid-list--${l}-columns`;
-  return /* @__PURE__ */ c(g, { children: [
-    s !== "" && /* @__PURE__ */ r("h3", { className: t([i["grid-list-header"], "grid-list-header"]), children: s }),
-    /* @__PURE__ */ r("ul", { className: t([i["grid-list"], "grid-list", i[_]]), children: d })
+  i > 10 && (i = 10);
+  const c = `grid-list--${i}-columns`;
+  return /* @__PURE__ */ g(o, { children: [
+    l !== "" && /* @__PURE__ */ r("h3", { className: t([s["grid-list-header"], "grid-list-header"]), children: l }),
+    /* @__PURE__ */ r(
+      "ul",
+      {
+        className: t([s["grid-list"], "grid-list", s[c]]),
+        style: { gap: _ },
+        children: d
+      }
+    )
   ] });
 }
 export {
-  m as GridList,
-  m as default
+  u as GridList,
+  u as default
 };

package/dist/components/HighlightGrid/HighlightGrid.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Fragment as o } from "react";
+import { GridList as a } from "../GridList/GridList.js";
+import { classes as t } from "../../utils/helpers.js";
+import '../../assets/HighlightGrid.css';const r = {
+  "highlight-grid": "_highlight-grid_14d9z_1",
+  "highlight-grid__item": "_highlight-grid__item_14d9z_9",
+  "highlight-grid__highlighted-items": "_highlight-grid__highlighted-items_14d9z_14"
+}, z = ({
+  list: e,
+  numberOfColumns: l = 3,
+  gap: d = "2rem",
+  classname: s = "",
+  ref: m
+}) => {
+  const _ = () => {
+    const h = e.slice(0, 2);
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: t([
+          r["highlight-grid__highlighted-items"],
+          "highlight-grid__highlighted-items"
+        ]),
+        children: h.map((g, c) => /* @__PURE__ */ i(o, { children: g }, `highlight-grid-item-${c}`))
+      }
+    );
+  };
+  return /* @__PURE__ */ n(
+    "highlight-grid",
+    {
+      class: t([r["highlight-grid"], s]),
+      ref: m,
+      style: { "--gap": d },
+      children: [
+        _(),
+        /* @__PURE__ */ i(a, { gap: d, numberOfColumns: l, children: e.slice(2).map(
+          (h, g) => /* @__PURE__ */ i(
+            "div",
+            {
+              className: t([r["highlight-grid__item"], "highlight-grid__item"]),
+              children: h
+            },
+            `highlight-grid-item-${g + 2}`
+          )
+        ) })
+      ]
+    }
+  );
+};
+export {
+  z as HighlightGrid,
+  z as default
+};

package/dist/components/HighlightGrid/HighlightGrid.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { d as a, i as o, r as i, g as e, s as r } from "../../react.esm-CX7MGXBg.mjs";
+import { HighlightGrid as n } from "./HighlightGrid.js";
+a("HighlightGrid", () => {
+  o("renders the first two items as highlighted items and the rest in the grid", () => {
+    const { container: t } = i(/* @__PURE__ */ s(n, { list: ["One", "Two", "Three", "Four"] })), h = t.querySelector(".highlight-grid__highlighted-items");
+    e(h).toHaveTextContent("OneTwo"), e(h).not.toHaveTextContent("Three"), e(r.getByText("Three")).toBeInTheDocument(), e(r.getByText("Four")).toBeInTheDocument();
+  }), o("renders what it can when the list has fewer than two items", () => {
+    i(/* @__PURE__ */ s(n, { list: ["Only"] })), e(r.getByText("Only")).toBeInTheDocument();
+  }), o("does not mutate the list prop", () => {
+    const t = ["One", "Two", "Three"];
+    i(/* @__PURE__ */ s(n, { list: t })), e(t).toEqual(["One", "Two", "Three"]);
+  }), o("applies a custom classname", () => {
+    const { container: t } = i(/* @__PURE__ */ s(n, { classname: "custom-class", list: [] }));
+    e(t.querySelector("highlight-grid")).toHaveClass("custom-class");
+  });
+});

package/dist/components/HighlightGrid/index.js

@@ -0,0 +1,5 @@
+import { HighlightGrid as h, HighlightGrid as r } from "./HighlightGrid.js";
+export {
+  h as HighlightGrid,
+  r as default
+};

package/dist/components/LogoCard/LogoCard.js

@@ -5,13 +5,13 @@ import { AnchorTag as d } from "../AnchorTag/AnchorTag.js";
 import { ButtonAnchor as _ } from "../ButtonAnchor/ButtonAnchor.js";
 import { ResponsiveImage as I } from "../ResponsiveImage/ResponsiveImage.js";
 import '../../assets/LogoCard.css';const r = {
-  "logo-card__logo-box": "_logo-card__logo-box_6at8h_11",
-  "logo-card__logo": "_logo-card__logo_6at8h_11",
-  "logo-card__body": "_logo-card__body_6at8h_34",
-  "logo-card__content": "_logo-card__content_6at8h_42",
-  "logo-card__cta-wrapper": "_logo-card__cta-wrapper_6at8h_52",
-  "logo-card__cta": "_logo-card__cta_6at8h_52",
-  "logo-card--inline": "_logo-card--inline_6at8h_61"
+  "logo-card__logo-box": "_logo-card__logo-box_otu2k_11",
+  "logo-card__logo": "_logo-card__logo_otu2k_11",
+  "logo-card__body": "_logo-card__body_otu2k_37",
+  "logo-card__content": "_logo-card__content_otu2k_45",
+  "logo-card__cta-wrapper": "_logo-card__cta-wrapper_otu2k_55",
+  "logo-card__cta": "_logo-card__cta_otu2k_55",
+  "logo-card--inline": "_logo-card--inline_otu2k_64"
 }, u = (e) => typeof e == "number" ? `${e}px` : e, m = /* @__PURE__ */ new Map([
   ["play-video", { label: "View Video", component: _ }],
   ["internal-link", { label: "View More", component: d }],
@@ -20,8 +20,8 @@ import '../../assets/LogoCard.css';const r = {
   ["show-modal", { label: "See More", component: _ }]
 ]), S = ({
   logo: e = { url: "", altText: "", aspectRatio: 1, sources: [] },
-  logoBoxWidth: h = "100%",
-  logoBoxHeight: y = "auto",
+  logoBoxWidth: y = "100%",
+  logoBoxHeight: b = "auto",
   content: n = "",
   cta: o = {
     label: "",
@@ -30,14 +30,14 @@ import '../../assets/LogoCard.css';const r = {
     relatedResourceId: "",
     relatedResourceType: ""
   },
-  displayCTA: b = !0,
+  displayCTA: h = !0,
   displayInline: f = !1,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   handleClicks: x = (c) => {
   },
-  lazyLoad: T = !0,
-  decoding: w = "async",
-  classname: k = "",
+  lazyLoad: k = !0,
+  decoding: T = "async",
+  classname: w = "",
   ref: C
 }) => {
   var s;
@@ -65,15 +65,15 @@ import '../../assets/LogoCard.css';const r = {
       }
     );
   }, A = {
-    "--logo-box-width": u(h),
-    "--logo-box-height": u(y)
+    "--logo-box-width": u(y),
+    "--logo-box-height": u(b)
   };
   return /* @__PURE__ */ p(
     "logo-card",
     {
       class: a([
         f ? r["logo-card--inline"] : null,
-        k
+        w
       ]),
       ref: C,
       style: A,
@@ -83,15 +83,15 @@ import '../../assets/LogoCard.css';const r = {
           {
             altText: e.altText,
             classname: r["logo-card__logo"],
-            decoding: w,
+            decoding: T,
             fullSizeUrl: e.url,
-            loading: T ? "lazy" : void 0,
+            loading: k ? "lazy" : void 0,
             sources: e.sources
           }
         ) }),
         /* @__PURE__ */ p("div", { className: a([r["logo-card__body"], "logo-card__body"]), children: [
           n !== "" && /* @__PURE__ */ t("div", { className: a([r["logo-card__content"], "logo-card__content"]), children: typeof n == "string" ? M(n) : n }),
-          b && o.type && /* @__PURE__ */ t("div", { className: a([r["logo-card__cta-wrapper"], "logo-card__cta-wrapper"]), children: v() })
+          h && o.type && /* @__PURE__ */ t("div", { className: a([r["logo-card__cta-wrapper"], "logo-card__cta-wrapper"]), children: v() })
         ] })
       ]
     }

package/dist/src/components/GridList/GridList.d.ts

@@ -2,6 +2,7 @@ type GridListProps = {
     children: React.ReactNode;
     numberOfColumns?: number;
     headerText?: string;
+    gap?: string;
 };
-export declare function GridList({ children, numberOfColumns, headerText, }: GridListProps): JSX.Element;
+export declare function GridList({ children, numberOfColumns, headerText, gap, }: GridListProps): JSX.Element;
 export default GridList;

package/dist/src/components/HighlightGrid/HighlightGrid.d.ts

@@ -0,0 +1,9 @@
+export type HighlightGridProps = {
+    list: (React.ReactNode | string)[];
+    numberOfColumns?: number;
+    gap?: string;
+    classname?: string;
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const HighlightGrid: ({ list, numberOfColumns, gap, classname, ref, }: HighlightGridProps) => JSX.Element;
+export default HighlightGrid;

package/dist/src/components/HighlightGrid/index.d.ts

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

package/dist/src/utils/getCarouselOptions.d.ts

@@ -1,3 +1,4 @@
+import { CarouselBreakpoints } from '../types';
 export declare const getCarouselOptions: (type: "BANNER" | "FEATURED" | "TWO_COLUMN", title: string, env?: string) => {
     paginationType: string;
     showControls: boolean;
@@ -17,4 +18,5 @@ export declare const getCarouselOptions: (type: "BANNER" | "FEATURED" | "TWO_COL
     cellAspectRatio: number | string;
     cellsPosition: string;
     wrapAround: boolean;
+    breakpoints: CarouselBreakpoints;
 } | {};

package/dist/utils/getCarouselOptions.js

@@ -1,6 +1,11 @@
-const a = (t, o, l = "local") => {
+const o = {
+  one: { width: 600, cellsPerSlide: 1 },
+  two: { width: 800, cellsPerSlide: 2 },
+  three: { width: 1024, cellsPerSlide: 3 },
+  four: { width: 1750, cellsPerSlide: 4 }
+}, a = (l, t, s = "local") => {
   let e = {};
-  return t === "BANNER" ? e = {
+  return l === "BANNER" ? e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 72,
@@ -8,18 +13,19 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
-    autoplay: l !== "local",
+    title: t,
+    autoplay: s !== "local",
     autoplayDelay: 6e3,
     showPagination: !0,
     gutterSize: 0,
-    slideAspectRatio: 2.011764705882353,
+    slideAspectRatio: 1710 / 850,
     slideGap: 1.5,
     cellsPerSlide: 1,
-    cellAspectRatio: 2.011764705882353,
+    cellAspectRatio: 1710 / 850,
     cellsPosition: "center",
-    wrapAround: !0
-  } : t === "FEATURED" ? e = {
+    wrapAround: !0,
+    breakpoints: { ...o }
+  } : l === "FEATURED" ? e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 64,
@@ -27,7 +33,7 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
+    title: t,
     autoplay: !1,
     autoplayDelay: 6e3,
     showPagination: !1,
@@ -35,10 +41,11 @@ const a = (t, o, l = "local") => {
     slideAspectRatio: "",
     slideGap: 2.5,
     cellsPerSlide: 4,
-    cellAspectRatio: 0.6561461794019934,
+    cellAspectRatio: 395 / 602,
     cellsPosition: "flex-start",
-    wrapAround: !1
-  } : t === "TWO_COLUMN" && (e = {
+    wrapAround: !1,
+    breakpoints: { ...o }
+  } : l === "TWO_COLUMN" && (e = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 64,
@@ -46,17 +53,18 @@ const a = (t, o, l = "local") => {
     showScrollbar: !1,
     startIndex: 0,
     variableHeight: !1,
-    title: o,
+    title: t,
     autoplay: !1,
     autoplayDelay: 6e3,
     showPagination: !0,
     gutterSize: 0,
-    slideAspectRatio: 2.6666666666666665,
+    slideAspectRatio: 4 / 1.5,
     slideGap: 1.5,
     cellsPerSlide: 1,
-    cellAspectRatio: 2.6666666666666665,
+    cellAspectRatio: 4 / 1.5,
     cellsPosition: "center",
-    wrapAround: !1
+    wrapAround: !1,
+    breakpoints: { ...o }
   }), e;
 };
 export {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.10",
+  "version": "2.0.11-alpha.1",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {