@phillips/seldon 1.7.2 → 1.8.0

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from '../../utils';
-export interface ButtonProps extends CommonProps {
+export interface ButtonProps extends CommonProps, Record<string, unknown> {
     /**
      * Button contents
      */
@@ -11,15 +11,15 @@ export interface ButtonProps extends CommonProps {
     /**
      * Optional click handler
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
     /**
      * Is this the principal call to action on the page?
      */
-    primary?: boolean;
+    buttonType?: 'primary' | 'secondary' | 'ghost';
     /**
      * How large should the button be?
      */
     size?: 'sm' | 'md' | 'lg';
 }
-declare const Button: ({ primary, size, children, iconLast, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ buttonType, size, children, iconLast, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,20 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
-import m from "../../node_modules/classnames/index.js";
+import { jsx as m } from "react/jsx-runtime";
+import b from "../../node_modules/classnames/index.js";
 import { px as t } from "../../utils/index.js";
-const c = ({ primary: n = !0, size: s = "md", children: u, iconLast: a = !1, id: o, ...r }) => /* @__PURE__ */ e(
+const f = ({ buttonType: n = "primary", size: a = "md", children: r, iconLast: s = !1, id: o, ...u }) => /* @__PURE__ */ m(
   "button",
   {
     "data-testid": o ? `button-${o}` : "button",
     id: o,
     type: "button",
-    className: m(`${t}-button`, `${t}-button--${s}`, {
-      [`${t}-button--secondary`]: !n,
-      [`${t}-button--icon-last`]: a
+    className: b(`${t}-button`, `${t}-button--${a}`, `${t}-button--${n}`, {
+      [`${t}-button--icon-last`]: s
     }),
-    ...r,
-    children: u
+    ...u,
+    children: r
   }
 );
 export {
-  c as default
+  f as default
 };

package/dist/components/Header/Header.js

@@ -1,24 +1,24 @@
-import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as e, Fragment as d } from "react/jsx-runtime";
 import i from "../Button/Button.js";
-const a = ({ user: n, onLogin: r, onLogout: h, onCreateAccount: c }) => /* @__PURE__ */ e("header", { children: /* @__PURE__ */ l("div", { className: "storybook-header", children: [
-  /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ e("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ e("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
-      /* @__PURE__ */ e("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
-      /* @__PURE__ */ e("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
+const a = ({ user: n, onLogin: h, onLogout: r, onCreateAccount: c }) => /* @__PURE__ */ l("header", { children: /* @__PURE__ */ e("div", { className: "storybook-header", children: [
+  /* @__PURE__ */ e("div", { children: [
+    /* @__PURE__ */ l("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ l("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+      /* @__PURE__ */ l("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
+      /* @__PURE__ */ l("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
     ] }) }),
-    /* @__PURE__ */ e("h1", { children: "Acme" })
+    /* @__PURE__ */ l("h1", { children: "Acme" })
   ] }),
-  /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ l(d, { children: [
-    /* @__PURE__ */ l("span", { className: "welcome", children: [
+  /* @__PURE__ */ l("div", { children: n ? /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ e("span", { className: "welcome", children: [
       "Welcome, ",
-      /* @__PURE__ */ e("b", { children: n.name }),
+      /* @__PURE__ */ l("b", { children: n.name }),
       "!"
     ] }),
-    /* @__PURE__ */ e(i, { size: "sm", onClick: h, children: "Log out" })
-  ] }) : /* @__PURE__ */ l(d, { children: [
-    /* @__PURE__ */ e(i, { size: "sm", onClick: r, children: "Log in" }),
-    /* @__PURE__ */ e(i, { primary: !0, size: "sm", onClick: c, children: "Sign up" })
+    /* @__PURE__ */ l(i, { size: "sm", onClick: r, children: "Log out" })
+  ] }) : /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ l(i, { size: "sm", onClick: h, children: "Log in" }),
+    /* @__PURE__ */ l(i, { size: "sm", onClick: c, children: "Sign up" })
   ] }) })
 ] }) });
 export {

package/dist/components/Input/Input.js

@@ -1,58 +1,60 @@
-import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { jsxs as P, jsx as l } from "react/jsx-runtime";
 import * as R from "react";
-import e from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as y } from "../../utils/index.js";
+import d from "../../node_modules/classnames/index.js";
+import { px as i, useNormalizedInputProps as y } from "../../utils/index.js";
 const z = R.forwardRef(
   ({
-    className: p,
-    defaultValue: l,
+    className: a,
+    defaultValue: r,
     disabled: u,
-    hideLabel: d,
-    id: n,
-    inline: o,
-    invalid: m,
-    invalidText: $,
-    labelText: c,
-    onChange: _,
-    onClick: b,
-    placeholder: f,
-    readOnly: a,
+    hideLabel: o,
+    id: t,
+    inline: m,
+    invalid: $,
+    invalidText: c,
+    labelText: _,
+    onChange: b,
+    onClick: f,
+    placeholder: h,
+    readOnly: p,
     size: w = "md",
     type: s = "text",
     value: x,
-    warn: h,
-    warnText: v,
-    ...I
+    warn: v,
+    warnText: I,
+    ...e
   }, N) => {
-    const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
-      [`${t}-input--inline`]: o,
-      [`${t}-input--readonly`]: a,
-      [`${t}-input--disabled`]: i.disabled,
-      [`${t}-input--invalid`]: i.invalid,
-      [`${t}-input--warn`]: i.warn,
-      [`${p}__wrapper`]: p
+    const n = y({ disabled: u, id: t, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: I }), j = d(`${i}-${s}-input`, `${i}-input`, `${i}-input--${w}`, {
+      [`${i}-input--inline`]: m,
+      [`${i}-input--readonly`]: p,
+      [`${i}-input--disabled`]: n.disabled,
+      [`${i}-input--invalid`]: n.invalid,
+      [`${i}-input--warn`]: n.warn,
+      [`${a}__wrapper`]: a,
+      [`${i}-input--hidden`]: e.hidden
     });
     return /* @__PURE__ */ P("div", { className: j, children: [
-      /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ l("label", { htmlFor: t, className: d(`${i}-input__label`, { [`${i}-input__label--hidden`]: o }), children: _ }),
+      /* @__PURE__ */ l(
         "input",
         {
-          className: e(`${t}-input__input`, { className: p }),
-          "data-testid": n,
-          defaultValue: l,
-          disabled: i.disabled,
-          id: n,
-          onChange: _,
-          onClick: b,
-          placeholder: f,
-          readOnly: a,
+          className: d(`${i}-input__input`, { className: a }),
+          "data-testid": t,
+          defaultValue: r,
+          disabled: n.disabled,
+          id: t,
+          name: e.name,
+          onChange: b,
+          onClick: f,
+          placeholder: h,
+          readOnly: p,
           ref: N,
-          type: i.type,
+          type: n.type,
           value: x,
-          ...I
+          ...e
         }
       ),
-      i.validation
+      n.validation
     ] });
   }
 );

package/dist/components/ViewingsList/StatefulViewingsList.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ViewingsListCardProps } from './ViewingsListCard';
+import { I18nObject } from './ViewingsList';
+export interface StatefulViewingsListProps extends Record<string, unknown> {
+    /**
+     * Existing viewings to populate the list
+     */
+    defaultViewing?: ViewingsListCardProps[];
+    /**
+     * Optional strings to pass for the form and button labels
+     */
+    i18n?: I18nObject;
+    /**
+     * Optional validations script to be ran when Viewing list is updated and saved
+     */
+    validate?: ((e: ViewingsListCardProps) => object | undefined) | (() => object);
+    /**
+     * Method for removing a viewing from the list
+     */
+    onDelete?: (id: string) => void;
+    /**
+     * Method used to persist changes to a particular view
+     */
+    onSave: (e: React.MouseEvent<HTMLElement>, cb: React.Dispatch<React.SetStateAction<ViewingsListCardProps[]>>, validateCb: (e: ViewingsListCardProps) => object | undefined) => boolean;
+}
+declare const StatefulViewingsList: ({ defaultViewing, i18n, validate, onDelete, onSave, ...props }: StatefulViewingsListProps) => import("react/jsx-runtime").JSX.Element;
+export default StatefulViewingsList;

package/dist/components/ViewingsList/StatefulViewingsList.js

@@ -0,0 +1,33 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as u from "react";
+import c from "./ViewingsList.js";
+const S = ({
+  defaultViewing: o,
+  i18n: d,
+  validate: a = () => {
+  },
+  onDelete: l = () => {
+  },
+  onSave: s,
+  ...r
+}) => {
+  const [f, n] = u.useState(o);
+  return /* @__PURE__ */ m(
+    c,
+    {
+      ...r,
+      i18n: d,
+      viewings: f,
+      onDelete: (t) => {
+        n((e) => e == null ? void 0 : e.filter((i) => i.id !== t)), l(t);
+      },
+      onAdd: (t) => {
+        n((e) => e ? [...e, { id: t }] : [{ id: t }]);
+      },
+      onSave: (t) => s(t, n, a)
+    }
+  );
+};
+export {
+  S as default
+};

package/dist/components/ViewingsList/ViewingsList.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ViewingsListCardProps } from './ViewingsListCard';
+export interface I18nObject {
+    address1Label?: string;
+    addressUrlLabel?: string;
+    address2Label?: string;
+    address3Label?: string;
+    addViewingsBtnLabel?: string;
+    cancelBtnLabel?: string;
+    deleteBtnLabel?: string;
+    editBtnLabel?: string;
+    enableOnSiteToggleLabel?: string;
+    locationLabel?: string;
+    previewDatesLabel?: string;
+    previewHours1Label?: string;
+    previewHours2Label?: string;
+    previewLabel?: string;
+    previewToggleLabel?: string;
+    saveBtnLabel?: string;
+    viewingLabel?: string;
+    viewingDatesLabel?: string;
+    viewingHours1Label?: string;
+    viewingHours2Label?: string;
+}
+export interface ViewingsListProps {
+    /**
+     * String for Viewing cards that gets nuber appended. EX: 'Title {x}`
+     */
+    cardTitle?: string;
+    /**
+     * Unique id for component
+     */
+    id?: string;
+    /**
+     * Optional strings to pass for the form and button labels
+     */
+    i18n?: I18nObject;
+    /**
+     * Title for Viewings list
+     */
+    title?: string;
+    /**
+     * Array of viewings objects
+     */
+    viewings?: ViewingsListCardProps[] | [];
+    /**
+     * Method for removing a viewing from the list
+     */
+    onAdd?: (id: string) => void;
+    /**
+     * Method for removing a viewing from the list
+     */
+    onDelete?: (id: string) => void;
+    /**
+     * Method used to persist changes to a particular view
+     */
+    onSave: (e: React.MouseEvent<HTMLElement>) => boolean;
+}
+declare const ViewingsList: ({ cardTitle, id, i18n, onAdd, onDelete, onSave, title, viewings, }: ViewingsListProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewingsList;

package/dist/components/ViewingsList/ViewingsList.js

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

package/dist/components/ViewingsList/ViewingsListCard.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { ViewingsListCardFormProps } from './ViewingsListCardForm';
+export interface ViewingsListCardProps extends ViewingsListCardFormProps, Record<string, unknown> {
+    /**
+     * Title of card
+     */
+    cardTitle?: string;
+    /**
+     * Optional string to pass for cancel button
+     */
+    cancelBtnLabel?: string;
+    /**
+     * Optional string to pass for delete button
+     */
+    deleteBtnLabel?: string;
+    /**
+     * Optional string to pass for edit button
+     */
+    editBtnLabel?: string;
+    /**
+     * Location of viewing
+     */
+    editState?: boolean;
+    /**
+     * Default boolean to determine whether viewing is enabled on site
+     */
+    enableOnSite?: string;
+    /**
+     * Label for enable on site toggle
+     */
+    enableOnSiteToggleLabel?: string;
+    /**
+     * Location of viewing
+     */
+    location?: string;
+    /**
+     * Location of viewing
+     */
+    locationLabel?: string;
+    /**
+     * Unique id for component
+     */
+    id: string;
+    /**
+     * Validation error message object
+     */
+    invalidFields?: {
+        address1?: string | undefined;
+        address1Url?: string | undefined;
+        address2?: string | undefined;
+        address3?: string | undefined;
+        location?: string | undefined;
+        previewDates?: string | undefined;
+        previewHours1?: string | undefined;
+        previewHours2?: string | undefined;
+        previewLabelValue?: string | undefined;
+        previewOn?: string | undefined;
+        viewingLabelValue?: string | undefined;
+        viewingDates?: string | undefined;
+        viewingHours1?: string | undefined;
+        viewingHours2?: string | undefined;
+    };
+    /**
+     * Callback for when Viewings edits are cancelled
+     */
+    onCancel?: () => void | unknown;
+    /**
+     * Callback for when Viewings item is deleted
+     */
+    onDelete?: (id: string) => void | unknown;
+    /**
+     * Callback for when Viewings item is placed in an editable mode
+     */
+    onEdit?: () => void | unknown;
+    /**
+     * Callback for when form is saved/submitted
+     */
+    onSave?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
+    /**
+     * Optional string to pass for edit button
+     */
+    saveBtnLabel?: string;
+}
+declare const ViewingsListCard: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, cancelBtnLabel, cardTitle, deleteBtnLabel, editBtnLabel, editState, enableOnSite, enableOnSiteToggleLabel, id, invalidFields, location, locationLabel, onCancel, onEdit, onDelete, onSave, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, saveBtnLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewingsListCard;

package/dist/components/ViewingsList/ViewingsListCard.js

@@ -0,0 +1,162 @@
+import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
+import * as r from "react";
+import st from "../../node_modules/classnames/index.js";
+import { px as $ } from "../../utils/index.js";
+import g from "../Input/Input.js";
+import u from "../Button/Button.js";
+import ct from "./ViewingsListCardForm.js";
+const l = `${$}-viewings-list-card`, ft = ({
+  address1: C,
+  address1Label: E,
+  addressUrl: T,
+  addressUrlLabel: O,
+  address2: w,
+  address2Label: d,
+  address3: x,
+  address3Label: z,
+  cancelBtnLabel: L = "CANCEL",
+  cardTitle: _ = "Add New Viewing",
+  deleteBtnLabel: k = "DELETE",
+  editBtnLabel: N = "EDIT",
+  editState: o,
+  enableOnSite: i = "false",
+  enableOnSiteToggleLabel: V = "Enabled on website",
+  id: e,
+  invalidFields: n,
+  location: A,
+  locationLabel: I = "Location",
+  onCancel: p,
+  onEdit: f,
+  onDelete: m,
+  onSave: h,
+  previewDates: S,
+  previewDatesLabel: v,
+  previewHours1: j,
+  previewHours1Label: D,
+  previewHours2: R,
+  previewHours2Label: q,
+  previewLabel: B,
+  previewLabelValue: G,
+  previewOn: H,
+  previewToggleLabel: J,
+  saveBtnLabel: K = "SAVE DETAILS",
+  viewingLabel: M,
+  viewingLabelValue: P,
+  viewingDates: Q,
+  viewingDatesLabel: U,
+  viewingHours1: W,
+  viewingHours1Label: X,
+  viewingHours2: Y,
+  viewingHours2Label: Z
+}) => {
+  const [F, tt] = r.useState(i === "true"), c = r.useRef(null);
+  r.useEffect(() => {
+    o && c.current && c.current.focus();
+  }, [o]), r.useEffect(() => {
+    var s, b;
+    n && c.current && ((b = (s = c.current.closest(".phillips-viewings-list-card")) == null ? void 0 : s.querySelector(".phillips-input--invalid input")) == null || b.focus());
+  }, [n]);
+  const et = () => {
+    typeof p == "function" && p();
+  }, nt = () => {
+    typeof f == "function" && f();
+  }, ot = (s) => {
+    typeof h == "function" && h(s);
+  };
+  return /* @__PURE__ */ a(
+    "section",
+    {
+      "data-testid": `viewings-list-card-${e}`,
+      id: e,
+      className: st(`${l}`, { [`${l}--edit-state`]: o }),
+      children: [
+        /* @__PURE__ */ t("h3", { className: `${l}__title`, children: _ }),
+        /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
+        /* @__PURE__ */ t(
+          g,
+          {
+            ref: c,
+            id: `location-${e}`,
+            defaultValue: A,
+            labelText: I,
+            size: "sm",
+            name: "location",
+            invalid: n == null ? void 0 : n.location,
+            invalidText: n == null ? void 0 : n.location,
+            readOnly: !o
+          }
+        ),
+        o ? /* @__PURE__ */ t(
+          ct,
+          {
+            address1: C,
+            address1Label: E,
+            addressUrl: T,
+            addressUrlLabel: O,
+            address2: w,
+            address2Label: d,
+            address3: x,
+            address3Label: z,
+            id: e,
+            invalidFields: n,
+            previewDates: S,
+            previewDatesLabel: v,
+            previewHours1: j,
+            previewHours1Label: D,
+            previewHours2: R,
+            previewHours2Label: q,
+            previewLabel: B,
+            previewLabelValue: G,
+            previewOn: H,
+            previewToggleLabel: J,
+            viewingLabel: M,
+            viewingLabelValue: P,
+            viewingDates: Q,
+            viewingDatesLabel: U,
+            viewingHours1: W,
+            viewingHours1Label: X,
+            viewingHours2: Y,
+            viewingHours2Label: Z
+          }
+        ) : null,
+        /* @__PURE__ */ t(
+          g,
+          {
+            id: `enableOnSite-${e}`,
+            type: "toggle",
+            defaultChecked: i === "true",
+            labelText: V,
+            size: "md",
+            inline: !0,
+            value: "true",
+            name: "enableOnSite",
+            onChange: () => tt((s) => !s),
+            readOnly: !o
+          }
+        ),
+        F ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        /* @__PURE__ */ t("hr", {}),
+        /* @__PURE__ */ t("div", { className: `${l}__btn-group ${$}-button__group`, children: o ? /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ t(u, { id: `vlc-save-btn-${e}`, buttonType: "ghost", type: "submit", size: "sm", onClick: ot, children: K }),
+          /* @__PURE__ */ t(u, { id: `vlc-cancel-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: et, children: L })
+        ] }) : /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ t(u, { id: `vlc-edit-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: nt, children: N }),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `vlc-delete-btn-${e}`,
+              buttonType: "ghost",
+              type: "button",
+              size: "sm",
+              onClick: () => typeof m == "function" && m(e),
+              children: k
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  ft as default
+};

package/dist/components/ViewingsList/ViewingsListCardForm.d.ts

@@ -0,0 +1,131 @@
+export interface ViewingsListCardFormProps {
+    /**
+     * Address1 of viewing
+     */
+    address1?: string;
+    /**
+     * Label for address1 input
+     */
+    address1Label?: string;
+    /**
+     * URL for a map link to address1
+     */
+    addressUrl?: string;
+    /**
+     * Label for address1 url input
+     */
+    addressUrlLabel?: string;
+    /**
+     * Address2 of viewing
+     */
+    address2?: string;
+    /**
+     * Label for address2 input
+     */
+    address2Label?: string;
+    /**
+     * Address3 of viewing
+     */
+    address3?: string;
+    /**
+     * Label for address3 input
+     */
+    address3Label?: string;
+    /**
+     * Unique id for ViewingListCard component
+     */
+    id: string;
+    /**
+     * Validation error message object
+     */
+    invalidFields?: {
+        address1?: string | undefined;
+        addressUrl?: string | undefined;
+        address2?: string | undefined;
+        address3?: string | undefined;
+        location?: string | undefined;
+        previewDates?: string | undefined;
+        previewHours1?: string | undefined;
+        previewHours2?: string | undefined;
+        previewLabelValue?: string | undefined;
+        previewOn?: string | undefined;
+        viewingLabelValue?: string | undefined;
+        viewingDates?: string | undefined;
+        viewingHours1?: string | undefined;
+        viewingHours2?: string | undefined;
+    };
+    /**
+     * Label for preview label input
+     */
+    previewLabel?: string;
+    /**
+     * Value for preview label input
+     */
+    previewLabelValue?: string;
+    /**
+     * How large should the button be?
+     */
+    previewDates?: string;
+    /**
+     * Label for preview date input
+     */
+    previewDatesLabel?: string;
+    /**
+     * Default value for preview hours input
+     */
+    previewHours1?: string;
+    /**
+     * Label for preview Hours1 input
+     */
+    previewHours1Label?: string;
+    /**
+     * Default value for preview hours 2 input
+     */
+    previewHours2?: string;
+    /**
+     * Label for preview Hours1 input
+     */
+    previewHours2Label?: string;
+    /**
+     * How large should the button be?
+     */
+    previewOn?: string;
+    /**
+     * Label for preview sectioin toggle
+     */
+    previewToggleLabel?: string;
+    /**
+     * Label for viewing label input
+     */
+    viewingLabel?: string;
+    /**
+     * Value for viewing label input
+     */
+    viewingLabelValue?: string;
+    /**
+     * How large should the button be?
+     */
+    viewingDates?: string;
+    /**
+     * Label for viewing date input
+     */
+    viewingDatesLabel?: string;
+    /**
+     * Default value for viewing hours input
+     */
+    viewingHours1?: string;
+    /**
+     * Label for viewing Hours1 input
+     */
+    viewingHours1Label?: string;
+    /**
+     * Default value for viewing hours 2 input
+     */
+    viewingHours2?: string;
+    /**
+     * Label for viewing Hours1 input
+     */
+    viewingHours2Label?: string;
+}
+declare const ViewingsListCardForm: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, id, invalidFields, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardFormProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewingsListCardForm;

package/dist/components/ViewingsList/ViewingsListCardForm.js

@@ -0,0 +1,218 @@
+import { jsxs as p, Fragment as Y, jsx as t } from "react/jsx-runtime";
+import Z from "../../node_modules/classnames/index.js";
+import * as x from "react";
+import { px as q } from "../../utils/index.js";
+import u from "../Input/Input.js";
+const T = `${q}-viewings-list-card-form`, M = ({
+  address1: b,
+  address1Label: f = "Address ('432 Park Ave', ETC)",
+  addressUrl: g,
+  addressUrlLabel: H = "URL for map link ('http://www.website.com')",
+  address2: V,
+  address2Label: a = "City, State, Zip ('New York, NY 10019')",
+  address3: $,
+  address3Label: c = "Country (United States)",
+  id: r,
+  invalidFields: e,
+  previewDates: z,
+  previewDatesLabel: h = "Date(s)",
+  previewHours1: L,
+  previewHours1Label: D = "Hours1",
+  previewHours2: C,
+  previewHours2Label: O = "Hours2",
+  previewLabel: U = "Label ('Preview', 'Opening NIght', etc)",
+  previewLabelValue: y,
+  previewOn: m = "false",
+  previewToggleLabel: S = "Preview/ Reception",
+  viewingLabel: k = "Label ('Open to public')",
+  viewingLabelValue: N,
+  viewingDates: P,
+  viewingDatesLabel: _ = "Date(s)",
+  viewingHours1: R,
+  viewingHours1Label: j = "Hours1",
+  viewingHours2: A,
+  viewingHours2Label: E = "Hours2"
+}) => {
+  const [w, o] = x.useState(m === "true");
+  return x.useEffect(() => {
+    o(m === "true");
+  }, [m]), /* @__PURE__ */ p(Y, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `previewOn-${r}`,
+        type: "toggle",
+        labelText: S,
+        size: "md",
+        defaultChecked: w,
+        inline: !0,
+        invalid: e == null ? void 0 : e.previewOn,
+        invalidText: e == null ? void 0 : e.previewOn,
+        value: !0,
+        name: "previewOn",
+        onChange: () => o((I) => !I)
+      }
+    ),
+    w ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "previewOn", value: "false" }),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: Z(`${T}__preview-set`, { [`${T}__preview-set--hidden`]: !w }),
+        children: [
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewLabel-${r}`,
+              name: "previewLabelValue",
+              defaultValue: y,
+              labelText: U,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewLabelValue,
+              invalidText: e == null ? void 0 : e.previewLabelValue,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewDates-${r}`,
+              name: "previewDates",
+              defaultValue: z,
+              labelText: h,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewDates,
+              invalidText: e == null ? void 0 : e.previewDates,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewHours1-${r}`,
+              name: "previewHours1",
+              defaultValue: L,
+              labelText: D,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewHours1,
+              invalidText: e == null ? void 0 : e.previewHours1,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewHours2-${r}`,
+              name: "previewHours2",
+              defaultValue: C,
+              labelText: O,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewHours2,
+              invalidText: e == null ? void 0 : e.previewHours2,
+              hidden: !w
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingLabel-${r}`,
+        name: "viewingLabelValue",
+        defaultValue: N,
+        labelText: k,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalidText: e == null ? void 0 : e.viewingLabelValue
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingDates-${r}`,
+        name: "viewingDates",
+        defaultValue: P,
+        labelText: _,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingDates,
+        invalidText: e == null ? void 0 : e.viewingDates
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingHours1-${r}`,
+        name: "viewingHours1",
+        defaultValue: R,
+        labelText: j,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingHours1,
+        invalidText: e == null ? void 0 : e.viewingHours1
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingHours2-${r}`,
+        name: "viewingHours2",
+        defaultValue: A,
+        labelText: E,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingHours2,
+        invalidText: e == null ? void 0 : e.viewingHours2
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address1-${r}`,
+        name: "address1",
+        defaultValue: b,
+        labelText: f,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address1,
+        invalidText: e == null ? void 0 : e.address1
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address2-${r}`,
+        name: "address2",
+        defaultValue: V,
+        labelText: a,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address2,
+        invalidText: e == null ? void 0 : e.address2
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address3-${r}`,
+        name: "address3",
+        defaultValue: $,
+        labelText: c,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address3,
+        invalidText: e == null ? void 0 : e.address3
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `addressUrl-${r}`,
+        name: "addressUrl",
+        defaultValue: g,
+        labelText: H,
+        size: "sm",
+        type: "url",
+        invalid: e == null ? void 0 : e.addressUrl,
+        invalidText: e == null ? void 0 : e.addressUrl
+      }
+    )
+  ] });
+};
+export {
+  M as default
+};

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { default as Header } from './components/Header/Header';
 export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
 export { default as Input } from './components/Input/Input';
 export { default as Select } from './components/Select/Select';
+export { default as ViewingsList } from './components/ViewingsList/ViewingsList';
+export { default as StatefulViewingsList } from './components/ViewingsList/StatefulViewingsList';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,16 +1,20 @@
-import { default as a } from "./components/Button/Button.js";
-import { default as t } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as u } from "./components/Header/Header.js";
-import { default as l } from "./components/HeroBanner/HeroBanner.js";
-import { default as m } from "./components/Input/Input.js";
+import { default as r } from "./components/Button/Button.js";
+import { default as o } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as s } from "./components/Header/Header.js";
+import { default as d } from "./components/HeroBanner/HeroBanner.js";
+import { default as p } from "./components/Input/Input.js";
 import { default as x } from "./components/Select/Select.js";
-import { default as B } from "./pages/Page.js";
+import { default as i } from "./components/ViewingsList/ViewingsList.js";
+import { default as B } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as H } from "./pages/Page.js";
 export {
-  a as Button,
-  t as ErrorBoundary,
-  u as Header,
-  l as HeroBanner,
-  m as Input,
-  B as Page,
-  x as Select
+  r as Button,
+  o as ErrorBoundary,
+  s as Header,
+  d as HeroBanner,
+  p as Input,
+  H as Page,
+  x as Select,
+  B as StatefulViewingsList,
+  i as ViewingsList
 };

package/dist/scss/_typography.scss

@@ -60,8 +60,9 @@ body {
 }
 
 @mixin headerText {
-  color: $primary-black;
   @include DistinctDisplay();
+  color: $primary-black;
+  font-weight: 400;
 }
 
 @mixin bodyText {

package/dist/scss/_utils.scss

@@ -5,7 +5,7 @@
   border: 0;
   margin: -1px;
   block-size: 1px;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(100%);
   inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;

package/dist/scss/components/Button/_button.scss

@@ -33,10 +33,11 @@
     width: 1em;
   }
 
-  &--secondary {
+  &--secondary,
+  &--ghost {
     color: $text-color;
     background-color: transparent;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
+    border: 1px solid;
 
     &:hover,
     &:focus {
@@ -52,6 +53,10 @@
     }
   }
 
+  &--ghost {
+    border-color: transparent;
+  }
+
   &.#{$px}-button--icon-last svg {
     margin-inline-end: unset;
     margin-inline-start: 0.5rem;
@@ -74,3 +79,10 @@
     margin: 0;
   }
 }
+
+.#{$px}-button__group {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: center;
+  width: 100%;
+}

package/dist/scss/components/Input/_input.scss

@@ -8,9 +8,19 @@ $lg: #{$px}-input--lg;
 .#{$px}-input {
   display: flex;
   flex-direction: column;
+  width: 100%;
+
+  &--hidden {
+    @include hidden();
+  }
 
   &__label {
+    color: $keyline-gray;
+    font-size: 0.8125rem;
+    font-weight: 600;
     margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    word-break: break-word;
 
     &--hidden {
       @include hidden();
@@ -18,8 +28,10 @@ $lg: #{$px}-input--lg;
   }
 
   &__input {
-    accent-color: $pure-black;
-    border: 3px solid currentColor;
+    accent-color: $soft-black;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    font-size: 0.8125rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
     // width: 100%;
@@ -60,7 +72,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__label {
-      max-width: 8.75rem;
+      // max-width: 8.75rem;
     }
   }
 

package/dist/scss/components/Toggle/_toggle.scss

@@ -182,4 +182,11 @@ $lg: #{$px}-input--lg;
       padding-top: 3.5rem;
     }
   }
+
+  &:has(.#{$px}-input__input:focus) label:before {
+    outline: 2px solid AccentColor;
+    outline: 2px solid Highlight;
+    outline: 2px solid -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
 }

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -0,0 +1,55 @@
+@import '../../vars';
+@import '../../_utils';
+@import '../../typography';
+
+.#{$px}-viewings-list {
+  align-items: center;
+  background-color: $off-white;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 1rem;
+  width: 38rem;
+
+  &__title {
+    @include headerText;
+  }
+}
+
+// viewings-list-card-form
+.#{$px}-viewings-list-card {
+  align-items: flex-start;
+  background-color: $pure-white;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 34rem;
+  padding: 2rem;
+  width: 100%;
+
+  &__title {
+    @include headerText;
+    color: $soft-black;
+  }
+
+  &__location {
+    font-size: 1.25rem;
+  }
+
+  &-form__preview-set {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-inline-start: 1rem;
+    width: 100%;
+
+    &--hidden {
+      @include hidden;
+    }
+  }
+
+  hr {
+    width: 100%;
+  }
+}

package/dist/scss/styles.scss

@@ -10,5 +10,6 @@
 @import 'components/HeroBanner/heroBanner';
 @import 'components/Input/input';
 @import 'components/Toggle/toggle';
+@import 'components/ViewingsList/viewingsList';
 // 📑 Pages
 @import 'pages/page';

package/dist/utils/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const px = "phillips";
-export declare const noOP: () => void;
+export declare const noOp: () => void;
 export interface CommonProps {
     /**
      * Optional className to be applied to the outer most element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",