@phillips/seldon 1.74.4 → 1.75.1

package/dist/components/Navigation/NavigationList/NavigationList.js

@@ -4,7 +4,7 @@ import { px as t } from "../../../utils/index.js";
 import l from "../../../node_modules/classnames/index.js";
 import { TextVariants as p } from "../../Text/types.js";
 import f from "../../Text/Text.js";
-const N = i.forwardRef(
+const h = i.forwardRef(
   ({ id: o, children: n, className: d, isOffScreen: _, leftSectionHeading: m, rightSectionHeading: v }, u) => {
     const s = i.Children.toArray(n).filter((a) => {
       if (a && a.props.navGroup === "nav-link-start")
@@ -37,7 +37,7 @@ const N = i.forwardRef(
     );
   }
 );
-N.displayName = "NavigationList";
+h.displayName = "NavigationList";
 export {
-  N as default
+  h as default
 };

package/dist/components/PageContentWrapper/PageContentWrapper.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { getCommonProps as n } from "../../utils/index.js";
+import { forwardRef as n } from "react";
+import { getCommonProps as p } from "../../utils/index.js";
 import f from "../../node_modules/classnames/index.js";
-const c = p(
+const c = n(
   ({ children: e, className: o, ...a }, r) => {
-    const { className: m, ...s } = n(a, "PageContentWrapper");
+    const { className: m, ...s } = p(a, "PageContentWrapper");
     return /* @__PURE__ */ t("div", { ...s, className: f(m, o), ...a, ref: r, children: e });
   }
 );

package/dist/components/PinchZoom/PinchZoom.js

@@ -1,11 +1,11 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useState as N, useCallback as b, isValidElement as n, cloneElement as S } from "react";
+import { useState as b, useCallback as n, isValidElement as N, cloneElement as S } from "react";
 import { getCommonProps as w } from "../../utils/index.js";
 import { TransformWrapper as x, TransformComponent as T } from "../../node_modules/react-zoom-pan-pinch/dist/index.esm.js";
 import c from "../../node_modules/classnames/index.js";
 const $ = ({ onZoomChange: s, children: e, maxZoom: i = 10, className: f, ...r }) => {
   var l;
-  const { className: t, ...d } = w(r, "PinchZoom"), [a, m] = N(!1), u = b(
+  const { className: t, ...d } = w(r, "PinchZoom"), [a, m] = b(!1), u = n(
     (P) => {
       const { state: o } = P;
       o.scale > 0.99 && o.scale < 1.01 ? (m(!1), s == null || s(!1)) : (m(!0), s == null || s(!0));
@@ -36,7 +36,7 @@ const $ = ({ onZoomChange: s, children: e, maxZoom: i = 10, className: f, ...r }
             [`${t}-zoomed`]: a
           }),
           contentClass: `${t}-content`,
-          children: n(e) ? S(e, { className: c(`${t}-child`, (l = e == null ? void 0 : e.props) == null ? void 0 : l.className) }) : e
+          children: N(e) ? S(e, { className: c(`${t}-child`, (l = e == null ? void 0 : e.props) == null ? void 0 : l.className) }) : e
         }
       )
     }

package/dist/components/Row/Row.js

@@ -3,21 +3,21 @@ import { getCommonProps as p, generatePaddingClassName as e, PaddingTokens as m
 import C from "../../node_modules/classnames/index.js";
 const g = ({
   children: s,
-  element: a,
+  element: n,
   padding: o = { top: m.lg, bottom: m.lg },
-  className: n,
+  className: a,
   ...t
 }) => {
   const { className: r, ...l } = p(t, "Row");
   return /* @__PURE__ */ c(
-    a || "section",
+    n || "section",
     {
       ...l,
       className: C(
         r,
         o.top && e(o.top, "start"),
         o.bottom && e(o.bottom, "end"),
-        n
+        a
       ),
       ...t,
       children: s

package/dist/components/Search/Search.js

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import c, { useEffect as V } from "react";
-import { getCommonProps as j, px as D, encodeURLSearchParams as I } from "../../utils/index.js";
+import { getCommonProps as j, px as D, encodeURLSearchParams as N } from "../../utils/index.js";
 import f from "../../node_modules/classnames/index.js";
 import H from "../Input/Input.js";
 import O from "../Link/Link.js";
@@ -26,8 +26,8 @@ const ne = ({
   getAllResultsLink: S = (r) => `/Search?Search=${r}`,
   ...v
 }) => {
-  var N;
-  const { className: r, "data-testid": m, ...P } = j(v, "Search"), o = c.useContext(U), h = c.useRef(null), p = c.useRef(null), x = c.useRef(null), t = o.isSearchExpanded, s = (N = h.current) == null ? void 0 : N.value, T = _ ? (e) => {
+  var I;
+  const { className: r, "data-testid": m, ...P } = j(v, "Search"), o = c.useContext(U), h = c.useRef(null), p = c.useRef(null), x = c.useRef(null), t = o.isSearchExpanded, s = (I = h.current) == null ? void 0 : I.value, T = _ ? (e) => {
     _(e.target.value);
   } : void 0;
   M(x, (e) => {
@@ -37,7 +37,7 @@ const ne = ({
     var n;
     if (e.stopPropagation(), e.key === "Enter") {
       if (e.preventDefault(), s && s.length > 2) {
-        const y = I(S(s));
+        const y = N(S(s));
         window.location.href = y;
       }
       e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.click();
@@ -142,7 +142,7 @@ const ne = ({
                       children: /* @__PURE__ */ a("li", { className: `${r}__result`, children: /* @__PURE__ */ a(
                         O,
                         {
-                          href: ((e) => I(S(e)))(s),
+                          href: ((e) => N(S(e)))(s),
                           children: /* @__PURE__ */ a("p", { children: L(s) })
                         }
                       ) }, "viewAllSearchResults")

package/dist/components/SeldonImage/SeldonImage.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+type AspectRatio = '16/9' | '1/1' | 'none';
+export interface SeldonImageProps extends ComponentProps<'div'> {
+    /**
+     * The aspect ratio of the image container.
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * The resize behavior of the image (see CSS object-fit).
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Whether the image has a blur background covering the background of the image container
+     */
+    hasBlurBackground?: boolean;
+    /**
+     * The image to display.
+     */
+    src: string;
+    /**
+     * The alt text of the image.
+     */
+    alt: string;
+    /**
+     * The class name of the child img element.
+     */
+    imageClassName?: string;
+    /**
+     * The style of the child img element.
+     */
+    imageStyle?: React.CSSProperties;
+    /**
+     * The text to display when the image fails to load.
+     */
+    errorText?: string;
+}
+/**
+ * ## Overview
+ *
+ * Component for displaying an image with optional blur background, aspect ratio, and object fit.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?m=auto&node-id=4501-64590)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-seldonimage--overview)
+ */
+declare const SeldonImage: import("react").ForwardRefExoticComponent<Omit<SeldonImageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SeldonImage;

package/dist/components/SeldonImage/SeldonImage.js

@@ -0,0 +1,73 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { forwardRef as h, useRef as I, useState as v, useEffect as x } from "react";
+import { getCommonProps as y } from "../../utils/index.js";
+import n from "../../node_modules/classnames/index.js";
+const E = h(
+  ({
+    className: f,
+    aspectRatio: d = "none",
+    objectFit: l = "none",
+    hasBlurBackground: $ = !1,
+    imageClassName: u,
+    imageStyle: p,
+    src: s,
+    alt: m,
+    errorText: N = "Error loading image",
+    ...i
+  }, S) => {
+    const { className: e, ...t } = y(i, "SeldonImage"), g = I(null), [r, o] = v("loading");
+    return x(() => {
+      var c;
+      (c = g.current) != null && c.complete && o("loaded");
+    }, []), /* @__PURE__ */ b(
+      "div",
+      {
+        ref: S,
+        className: n(e, f, {
+          [`${e}--hidden`]: r === "loading" || r === "error",
+          [`${e}--aspect-ratio-${d.replace("/", "-")}`]: d !== "none"
+        }),
+        role: "img",
+        "aria-label": m,
+        ...i,
+        ...t,
+        children: [
+          $ && /* @__PURE__ */ a(
+            "div",
+            {
+              className: n(`${e}-blur`, {
+                [`${e}-blur--hidden`]: r === "loading" || r === "error"
+              }),
+              style: { backgroundImage: `url(${s})` }
+            }
+          ),
+          r === "error" && /* @__PURE__ */ a("div", { className: `${e}--error`, children: `${N}` }),
+          /* @__PURE__ */ a(
+            "img",
+            {
+              className: n(`${e}-img`, u, {
+                [`${e}-img--hidden`]: r === "loading" || r === "error",
+                [`${e}-img--object-fit-${l}`]: l !== "none"
+              }),
+              style: p,
+              src: s,
+              alt: m,
+              "data-testid": `${t["data-testid"]}-img`,
+              ref: g,
+              onLoad: () => {
+                o("loaded");
+              },
+              onError: () => {
+                o("error");
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+E.displayName = "SeldonImage";
+export {
+  E as default
+};

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

@@ -0,0 +1 @@
+export { default as SeldonImage, type SeldonImageProps } from './SeldonImage';

package/dist/components/SplitPanel/SplitPanel.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import n from "../../node_modules/classnames/index.js";
 import { getCommonProps as c } from "../../utils/index.js";
-const N = ({
+const P = ({
   children: o,
   className: m,
   element: t = "section",
@@ -20,5 +20,5 @@ const N = ({
   );
 };
 export {
-  N as default
+  P as default
 };

package/dist/components/Video/Video.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { getCommonProps as d } from "../../utils/index.js";
 import l from "../../node_modules/classnames/index.js";
-const N = ({ aspectRatio: s = 16 / 9, className: o, videoSource: m, ...e }) => {
+const u = ({ aspectRatio: s = 16 / 9, className: o, videoSource: m, ...e }) => {
   const { className: a, "data-testid": r, ...i } = d(e, "Video"), c = {
     className: l(a, o),
     "data-testid": r,
@@ -22,5 +22,5 @@ const N = ({ aspectRatio: s = 16 / 9, className: o, videoSource: m, ...e }) => {
   ) });
 };
 export {
-  N as default
+  u as default
 };

package/dist/index.d.ts

@@ -49,3 +49,4 @@ export * from './components/Carousel';
 export * from './components/Detail';
 export * from './patterns/DetailList';
 export * from './components/PinchZoom';
+export * from './components/SeldonImage';

package/dist/index.js

@@ -62,6 +62,7 @@ import { default as bo } from "./components/Detail/Detail.js";
 import { default as Ao } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as ho } from "./patterns/DetailList/types.js";
 import { default as No } from "./components/PinchZoom/PinchZoom.js";
+import { default as wo } from "./components/SeldonImage/SeldonImage.js";
 export {
   He as Accordion,
   Oe as AccordionItem,
@@ -110,6 +111,7 @@ export {
   No as PinchZoom,
   ee as Row,
   le as Search,
+  wo as SeldonImage,
   uo as SeldonProvider,
   pe as Select,
   ce as Social,

package/dist/patterns/DetailList/DetailList.js

@@ -1,12 +1,12 @@
 import { jsx as f } from "react/jsx-runtime";
-import n, { forwardRef as N } from "react";
+import j, { forwardRef as $ } from "react";
 import l from "../../node_modules/classnames/index.js";
-import { getCommonProps as $, px as s } from "../../utils/index.js";
+import { getCommonProps as D, px as s } from "../../utils/index.js";
 import { DetailListAlignment as t } from "./types.js";
-import { getDetailKey as D } from "./utils.js";
-const L = N(
+import { getDetailKey as N } from "./utils.js";
+const L = $(
   ({ alignment: a = t.justified, className: p, children: e, hasSeparators: u = !1, ...m }, c) => {
-    const { className: r, ...d } = $(m, "DetailList"), o = Array.isArray(e) ? e : [e];
+    const { className: r, ...d } = D(m, "DetailList"), o = Array.isArray(e) ? e : [e];
     return /* @__PURE__ */ f(
       "dl",
       {
@@ -18,7 +18,7 @@ const L = N(
         ...m,
         ref: c,
         children: o == null ? void 0 : o.map(
-          (i, j) => n.isValidElement(i) ? /* @__PURE__ */ f(
+          (i, n) => j.isValidElement(i) ? /* @__PURE__ */ f(
             "div",
             {
               className: l(`${r}-wrapper`, {
@@ -28,7 +28,7 @@ const L = N(
               }),
               children: i
             },
-            D(i, j)
+            N(i, n)
           ) : void 0
         )
       }

package/dist/patterns/LanguageSelector/LanguageSelector.js

@@ -1,6 +1,6 @@
 import { jsxs as b, Fragment as L, jsx as e } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { getCommonProps as S, noOp as T } from "../../utils/index.js";
+import { forwardRef as S } from "react";
+import { getCommonProps as N, noOp as T } from "../../utils/index.js";
 import x from "../../node_modules/classnames/index.js";
 import { SupportedLanguages as s } from "../../types/commonTypes.js";
 import C from "../../components/Dropdown/Dropdown.js";
@@ -36,7 +36,7 @@ const j = ({
       o.value
     )) })
   }
-) }), A = N(
+) }), A = S(
   ({
     className: a,
     currentLanguage: n = s.en,
@@ -50,7 +50,7 @@ const j = ({
     ...o
   }, c) => {
     var d, g;
-    const { className: p, ...h } = S({ id: l }, "LanguageSelector"), v = (g = (d = r.find((i) => i.value === n)) == null ? void 0 : d.label) != null ? g : "English", u = {
+    const { className: p, ...h } = N({ id: l }, "LanguageSelector"), v = (g = (d = r.find((i) => i.value === n)) == null ? void 0 : d.label) != null ? g : "English", u = {
       ...h,
       ...o,
       id: l,

package/dist/patterns/Social/Social.js

@@ -2,9 +2,9 @@ import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
 import { getCommonProps as f } from "../../utils/index.js";
 import p from "../../components/Button/Button.js";
-import { ButtonVariants as N } from "../../components/Button/types.js";
-import { TextVariants as d } from "../../components/Text/types.js";
-import u from "../../components/Text/Text.js";
+import { ButtonVariants as d } from "../../components/Button/types.js";
+import { TextVariants as u } from "../../components/Text/types.js";
+import N from "../../components/Text/Text.js";
 const T = ({
   className: a,
   children: e,
@@ -15,8 +15,8 @@ const T = ({
 }) => {
   const { className: r, ...n } = f(o, "Social");
   return /* @__PURE__ */ c("div", { ...n, className: l(r, a), ...o, children: [
-    /* @__PURE__ */ t(u, { variant: d.heading4, className: `${r}__header`, children: s }),
-    /* @__PURE__ */ t(p, { onClick: i, variant: N.tertiary, className: `${r}__button`, children: m }),
+    /* @__PURE__ */ t(N, { variant: u.heading4, className: `${r}__header`, children: s }),
+    /* @__PURE__ */ t(p, { onClick: i, variant: d.tertiary, className: `${r}__button`, children: m }),
     e
   ] });
 };

package/dist/patterns/Subscribe/Subscribe.js

@@ -16,20 +16,20 @@ const k = ({
   inputPlaceholder: f = "example@email.com",
   title: g = "Never Miss A Moment",
   loadingText: _ = "Loading...",
-  invalidText: N = "",
-  errorText: h = "An error occurred. Please try again.",
-  successText: v,
+  invalidText: h = "",
+  errorText: v = "An error occurred. Please try again.",
+  successText: x,
   privacyText: i = "By signing up, you agree to receive email communications from Phillips.",
   subscriptionState: e = o.Default,
   ...t
 }) => {
-  const { className: r, ...x } = L(t, "Subscribe"), y = e === o.Invalid, $ = e === o.Loading, b = e === o.Success, E = e === o.Error, P = {
-    invalid: N,
-    success: v,
+  const { className: r, ...N } = L(t, "Subscribe"), y = e === o.Invalid, $ = e === o.Loading, b = e === o.Success, E = e === o.Error, P = {
+    invalid: h,
+    success: x,
     loading: _,
-    error: h
+    error: v
   }, l = e !== o.Default ? P[e] : "", A = b || $, B = y || E;
-  return /* @__PURE__ */ C(u, { ...x, className: I(r, s), noValidate: !0, ...t, children: [
+  return /* @__PURE__ */ C(u, { ...N, className: I(r, s), noValidate: !0, ...t, children: [
     /* @__PURE__ */ n("h3", { className: `${r}__title`, children: g }),
     a ? /* @__PURE__ */ n("p", { className: `${r}__blurb`, children: a }) : null,
     /* @__PURE__ */ n(

package/dist/patterns/UserManagement/UserManagement.js

@@ -17,8 +17,8 @@ const A = x(
     href: u = "/account",
     ...t
   }, f) => {
-    const { className: n, ...N } = C(t, "UserManagement"), h = e === a.LoggedIn, _ = e !== a.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: v(n, l), ...t, ref: f, children: _ && /* @__PURE__ */ o(L, { children: h ? /* @__PURE__ */ c(i, { className: `${n}__login`, href: u, children: [
+    const { className: n, ...h } = C(t, "UserManagement"), N = e === a.LoggedIn, _ = e !== a.Loading;
+    return /* @__PURE__ */ o("div", { ...h, className: v(n, l), ...t, ref: f, children: _ && /* @__PURE__ */ o(L, { children: N ? /* @__PURE__ */ c(i, { className: `${n}__login`, href: u, children: [
       /* @__PURE__ */ o(r, { className: `${n}__account-icon` }),
       /* @__PURE__ */ o(m, { variant: s.body3, children: p })
     ] }) : /* @__PURE__ */ c("button", { className: `${n}__login`, onClick: d, children: [

package/dist/patterns/ViewingsList/ViewingsList.js

@@ -1,17 +1,17 @@
 import { jsx as l } from "react/jsx-runtime";
 import * as d from "react";
 import { createElement as L } from "react";
-import N from "../../node_modules/classnames/index.js";
+import S from "../../node_modules/classnames/index.js";
 import { getCommonProps as M } from "../../utils/index.js";
 import P from "./ViewingsListCard.js";
 import R from "../../components/Button/Button.js";
-const S = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
-  cardTitle: $ = "Viewing Details",
-  className: C,
+const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
+  cardTitle: C = "Viewing Details",
+  className: E,
   i18n: f = {},
   onAdd: r,
   onDelete: e,
-  onSave: E,
+  onSave: N,
   title: O,
   viewings: c,
   ...i
@@ -21,23 +21,23 @@ const S = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
     h(c);
   }, [c]);
   const { addViewingsBtnLabel: y = "ADD VIEWINGS" } = f, b = () => {
-    const t = `${S()}${a ? "-" + a.length : ""}`;
+    const t = `${$()}${a ? "-" + a.length : ""}`;
     n(t), u(t), r && r(t);
   }, V = (t) => {
     n(""), typeof e == "function" && e(t);
   }, k = (t) => {
     n(t), u(a == null ? void 0 : a.find((o) => o.id === t));
   }, x = (t) => {
-    E(t) && n("");
+    N(t) && n("");
   }, B = () => {
     typeof s == "string" ? typeof e == "function" && e(s) : m === (s == null ? void 0 : s.id) && h((t) => t == null ? void 0 : t.map((o) => o.id === s.id ? s : o)), n("");
   };
-  return /* @__PURE__ */ L("div", { ...D, className: N(p, C), key: m, ...i }, /* @__PURE__ */ l("h2", { className: N(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, o) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, o) => /* @__PURE__ */ l(
     P,
     {
       ...t,
       ...f,
-      cardTitle: t.location ? `${$} ${o + 1}` : void 0,
+      cardTitle: t.location ? `${C} ${o + 1}` : void 0,
       isEditState: m === t.id,
       onCancel: B,
       onDelete: V,
@@ -45,7 +45,7 @@ const S = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
       onSave: x
     },
     `${t.id}`
-  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || S()}`, size: "sm", onClick: b, children: y }));
+  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, size: "sm", onClick: b, children: y }));
 };
 export {
   G as default

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -16,14 +16,14 @@ const i = `${u}-viewings-list-card`, dt = ({
   address3: z,
   address3Label: A,
   cancelBtnLabel: L = "CANCEL",
-  cardTitle: N = "Add New Viewing",
-  deleteBtnLabel: T = "DELETE",
-  editBtnLabel: V = "EDIT",
+  cardTitle: T = "Add New Viewing",
+  deleteBtnLabel: V = "DELETE",
+  editBtnLabel: _ = "EDIT",
   isEditState: o,
   enableOnSite: f = "false",
-  enableOnSiteToggleLabel: _ = "Enabled on website",
-  email: k,
-  emailLabel: I = "Email",
+  enableOnSiteToggleLabel: k = "Enabled on website",
+  email: I,
+  emailLabel: N = "Email",
   emailLink: S,
   emailLinkLabel: j = "Email Address",
   emailOn: B = "false",
@@ -77,7 +77,7 @@ const i = `${u}-viewings-list-card`, dt = ({
       id: e,
       className: mt(`${i}`, { [`${i}--edit-state`]: o }),
       children: [
-        /* @__PURE__ */ t("h3", { className: `${i}__title`, children: N }),
+        /* @__PURE__ */ t("h3", { className: `${i}__title`, children: T }),
         /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
         /* @__PURE__ */ t(
           y,
@@ -104,8 +104,8 @@ const i = `${u}-viewings-list-card`, dt = ({
             address2Label: x,
             address3: z,
             address3Label: A,
-            email: k,
-            emailLabel: I,
+            email: I,
+            emailLabel: N,
             emailLink: S,
             emailLinkLabel: j,
             emailOn: B,
@@ -138,7 +138,7 @@ const i = `${u}-viewings-list-card`, dt = ({
             id: `enableOnSite-${e}`,
             type: "toggle",
             defaultChecked: f === "true",
-            labelText: _,
+            labelText: k,
             size: "md",
             inline: !0,
             value: "true",
@@ -181,7 +181,7 @@ const i = `${u}-viewings-list-card`, dt = ({
               type: "button",
               size: "sm",
               onClick: it,
-              children: V
+              children: _
             }
           ),
           /* @__PURE__ */ t(
@@ -192,7 +192,7 @@ const i = `${u}-viewings-list-card`, dt = ({
               type: "button",
               size: "sm",
               onClick: () => typeof b == "function" && b(e),
-              children: T
+              children: V
             }
           )
         ] }) })

package/dist/patterns/ViewingsList/ViewingsListCardForm.js

@@ -22,9 +22,9 @@ const o = `${X}-viewings-list-card-form`, l = ({
   invalidFields: e,
   previewDates: y,
   previewDatesLabel: E = "Date(s)",
-  previewHours1: N,
-  previewHours1Label: U = "Hours1",
-  previewHours2: A,
+  previewHours1: U,
+  previewHours1Label: A = "Hours1",
+  previewHours2: N,
   previewHours2Label: P = "Hours2",
   previewLabel: j = "Label ('Preview', 'Opening Night', etc)",
   previewLabelValue: I,
@@ -144,8 +144,8 @@ const o = `${X}-viewings-list-card-form`, l = ({
             {
               id: `previewHours1-${r}`,
               name: "previewHours1",
-              defaultValue: N,
-              labelText: U,
+              defaultValue: U,
+              labelText: A,
               size: "sm",
               invalid: e == null ? void 0 : e.previewHours1,
               invalidText: e == null ? void 0 : e.previewHours1,
@@ -157,7 +157,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
             {
               id: `previewHours2-${r}`,
               name: "previewHours2",
-              defaultValue: A,
+              defaultValue: N,
               labelText: P,
               size: "sm",
               invalid: e == null ? void 0 : e.previewHours2,

package/dist/scss/componentStyles.scss

@@ -54,3 +54,4 @@
 @use 'components/Detail/detail';
 @use 'patterns/DetailList/detailList';
 @use 'components/PinchZoom/pinchZoom';
+@use 'components/SeldonImage/seldonImage';

package/dist/scss/components/Carousel/_carousel.scss

@@ -69,19 +69,19 @@
       display: flex;
       height: 8px;
       justify-content: center;
-      padding: 0;
+      padding: 1px;
       width: 8px;
     }
 
     &-dot {
-      border: 1px solid #adadad;
       border-radius: 50%;
       height: 100%;
+      outline: 1px solid #adadad;
       width: 100%;
 
       &-selected {
         background-color: #525050;
-        border-color: #525050;
+        outline-color: #525050;
       }
     }
   }