@phillips/seldon 1.7.2 → 1.9.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.cjs

@@ -0,0 +1,5 @@
+"use strict";var me=Object.defineProperty;var xe=(n,s,o)=>s in n?me(n,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[s]=o;var B=(n,s,o)=>(xe(n,typeof s!="symbol"?s+"":s,o),o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),fe=require("react");function be(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const h=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(s,o,h.get?h:{enumerable:!0,get:()=>n[o]})}}return s.default=n,Object.freeze(s)}const i=be(fe);function je(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var W={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(n){(function(){var s={}.hasOwnProperty;function o(){for(var h=[],p=0;p<arguments.length;p++){var u=arguments[p];if(u){var m=typeof u;if(m==="string"||m==="number")h.push(u);else if(Array.isArray(u)){if(u.length){var x=o.apply(null,u);x&&h.push(x)}}else if(m==="object"){if(u.toString!==Object.prototype.toString&&!u.toString.toString().includes("[native code]")){h.push(u.toString());continue}for(var r in u)s.call(u,r)&&u[r]&&h.push(r)}}}return h.join(" ")}n.exports?(o.default=o,n.exports=o):window.classNames=o})()})(W);var ge=W.exports;const S=je(ge),c="phillips";function Y({disabled:n=!1,id:s,invalid:o=!1,invalidText:h="invalid",readOnly:p=!1,type:u,warn:m=!1,warnText:x}){const r={disabled:!p&&n,invalid:!p&&!n&&o,invalidId:`${s}-error-msg`,type:u==="toggle"?"checkbox":u,warn:!p&&!n&&!o&&m,warnId:`${s}-warn-msg`,validation:null};return r.invalid&&(r.validation=e.jsx("div",{className:`${c}-input__validation ${c}-${u}-input--invalid`,id:r.invalidId,children:h})),r.warn&&(r.validation=e.jsx("div",{className:`${c}-input__validation ${c}-${u}-input--warn`,id:r.warnId,children:x})),r}const N=({buttonType:n="primary",size:s="md",children:o,iconLast:h=!1,id:p,...u})=>e.jsx("button",{"data-testid":p?`button-${p}`:"button",id:p,type:"button",className:S(`${c}-button`,`${c}-button--${s}`,`${c}-button--${n}`,{[`${c}-button--icon-last`]:h}),...u,children:o});class G extends i.Component{constructor(){super(...arguments);B(this,"state",{hasError:!1})}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(o,h){var p;(p=this.props)==null||p.logger(o,h.componentStack)}render(){return this.state.hasError?this.props.fallback||e.jsx("h2",{children:"Sorry... An error occurred and we are looking into it"}):this.props.children}}B(G,"defaultProps",{logger:console.log});const J=({user:n,onLogin:s,onLogout:o,onCreateAccount:h})=>e.jsx("header",{children:e.jsxs("div",{className:"storybook-header",children:[e.jsxs("div",{children:[e.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:e.jsxs("g",{fill:"none",fillRule:"evenodd",children:[e.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),e.jsx("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"}),e.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),e.jsx("h1",{children:"Acme"})]}),e.jsx("div",{children:n?e.jsxs(e.Fragment,{children:[e.jsxs("span",{className:"welcome",children:["Welcome, ",e.jsx("b",{children:n.name}),"!"]}),e.jsx(N,{size:"sm",onClick:o,children:"Log out"})]}):e.jsxs(e.Fragment,{children:[e.jsx(N,{size:"sm",onClick:s,children:"Log in"}),e.jsx(N,{size:"sm",onClick:h,children:"Sign up"})]})})]})}),D=`${c}-hero-banner`,we=({prehead:n,date:s,headerText:o,subHeadText:h,association:p,background:u,id:m})=>e.jsx("header",{"data-testid":m?`hero-banner-${m}`:"hero-banner",id:m,className:D,style:{"--background":u},children:e.jsxs("span",{className:`${D}__content-wrapper`,children:[n||s?e.jsxs("p",{className:`${D}__pre-head`,children:[n?e.jsx("span",{children:n}):null,s?e.jsx("span",{children:s}):null]}):null,e.jsxs("h1",{className:`${D}__heading`,children:[o,h?e.jsx("span",{children:h}):null]}),p?e.jsx("p",{children:p}):null]})}),w=i.forwardRef(({className:n,defaultValue:s,disabled:o,hideLabel:h,id:p,inline:u,invalid:m,invalidText:x,labelText:r,onChange:t,onClick:b,placeholder:f,readOnly:l,size:_="md",type:T="text",value:j,warn:g,warnText:z,...y},d)=>{const a=Y({disabled:o,id:p,invalid:m,invalidText:x,readOnly:l,type:T,warn:g,warnText:z}),$=S(`${c}-${T}-input`,`${c}-input`,`${c}-input--${_}`,{[`${c}-input--inline`]:u,[`${c}-input--readonly`]:l,[`${c}-input--disabled`]:a.disabled,[`${c}-input--invalid`]:a.invalid,[`${c}-input--warn`]:a.warn,[`${n}__wrapper`]:n,[`${c}-input--hidden`]:y.hidden});return e.jsxs("div",{className:$,children:[e.jsx("label",{htmlFor:p,className:S(`${c}-input__label`,{[`${c}-input__label--hidden`]:h}),children:r}),e.jsx("input",{className:S(`${c}-input__input`,{className:n}),"data-testid":p,defaultValue:s,disabled:a.disabled,id:p,name:y.name,onChange:t,onClick:b,placeholder:f,readOnly:l,ref:d,type:a.type,value:j,...y}),a.validation]})});w.displayName="Input";const $e=i.forwardRef(({children:n,className:s,defaultValue:o,disabled:h,hideLabel:p,id:u,inline:m,invalid:x,invalidText:r,labelText:t,onChange:b,onClick:f,readOnly:l,size:_="md",value:T,warn:j,warnText:g,...z},y)=>{const d="select",a=Y({disabled:h,id:u,invalid:x,invalidText:r,readOnly:l,type:d,warn:j,warnText:g}),$=S(`${c}-${d}-input`,`${c}-input`,`${c}-input--${_}`,{[`${c}-input--inline`]:m,[`${c}-input--readonly`]:l,[`${c}-input--disabled`]:a.disabled,[`${c}-input--invalid`]:a.invalid,[`${c}-input--warn`]:a.warn,[`${s}__wrapper`]:s});return e.jsxs("div",{className:$,children:[e.jsx("label",{htmlFor:u,className:S(`${c}-input__label`,{[`${c}-input__label--hidden`]:p}),children:t}),e.jsx("select",{className:S(`${c}-input__input`,{className:s}),"data-testid":u,defaultValue:o,disabled:a.disabled,id:u,onChange:b,onClick:f,ref:y,value:T,...z,children:n}),a.validation]})}),v=`${c}-viewings-list-card-form`,ie=({address1:n,address1Label:s="Address ('432 Park Ave', ETC)",addressUrl:o,addressUrlLabel:h="URL for map link ('http://www.website.com')",address2:p,address2Label:u="City, State, Zip ('New York, NY 10019')",address3:m,address3Label:x="Country (United States)",id:r,invalidFields:t,previewDates:b,previewDatesLabel:f="Date(s)",previewHours1:l,previewHours1Label:_="Hours1",previewHours2:T,previewHours2Label:j="Hours2",previewLabel:g="Label ('Preview', 'Opening NIght', etc)",previewLabelValue:z,previewOn:y="false",previewToggleLabel:d="Preview/ Reception",viewingLabel:a="Label ('Open to public')",viewingLabelValue:$,viewingDates:H,viewingDatesLabel:E="Date(s)",viewingHours1:A,viewingHours1Label:P="Hours1",viewingHours2:I,viewingHours2Label:R="Hours2"})=>{const[k,O]=i.useState(y==="true");return i.useEffect(()=>{O(y==="true")},[y]),e.jsxs(e.Fragment,{children:[e.jsx(w,{id:`previewOn-${r}`,type:"toggle",labelText:d,size:"md",defaultChecked:k,inline:!0,invalid:t==null?void 0:t.previewOn,invalidText:t==null?void 0:t.previewOn,value:!0,name:"previewOn",onChange:()=>O(U=>!U)}),k?null:e.jsx("input",{type:"hidden",name:"previewOn",value:"false"}),e.jsxs("div",{className:S(`${v}__preview-set`,{[`${v}__preview-set--hidden`]:!k}),children:[e.jsx(w,{id:`previewLabel-${r}`,name:"previewLabelValue",defaultValue:z,labelText:g,size:"sm",invalid:t==null?void 0:t.previewLabelValue,invalidText:t==null?void 0:t.previewLabelValue,hidden:!k}),e.jsx(w,{id:`previewDates-${r}`,name:"previewDates",defaultValue:b,labelText:f,size:"sm",invalid:t==null?void 0:t.previewDates,invalidText:t==null?void 0:t.previewDates,hidden:!k}),e.jsx(w,{id:`previewHours1-${r}`,name:"previewHours1",defaultValue:l,labelText:_,size:"sm",invalid:t==null?void 0:t.previewHours1,invalidText:t==null?void 0:t.previewHours1,hidden:!k}),e.jsx(w,{id:`previewHours2-${r}`,name:"previewHours2",defaultValue:T,labelText:j,size:"sm",invalid:t==null?void 0:t.previewHours2,invalidText:t==null?void 0:t.previewHours2,hidden:!k})]}),e.jsx(w,{id:`viewingLabel-${r}`,name:"viewingLabelValue",defaultValue:$,labelText:a,size:"sm",invalid:t==null?void 0:t.viewingLabelValue,invalidText:t==null?void 0:t.viewingLabelValue}),e.jsx(w,{id:`viewingDates-${r}`,name:"viewingDates",defaultValue:H,labelText:E,size:"sm",invalid:t==null?void 0:t.viewingDates,invalidText:t==null?void 0:t.viewingDates}),e.jsx(w,{id:`viewingHours1-${r}`,name:"viewingHours1",defaultValue:A,labelText:P,size:"sm",invalid:t==null?void 0:t.viewingHours1,invalidText:t==null?void 0:t.viewingHours1}),e.jsx(w,{id:`viewingHours2-${r}`,name:"viewingHours2",defaultValue:I,labelText:R,size:"sm",invalid:t==null?void 0:t.viewingHours2,invalidText:t==null?void 0:t.viewingHours2}),e.jsx(w,{id:`address1-${r}`,name:"address1",defaultValue:n,labelText:s,size:"sm",invalid:t==null?void 0:t.address1,invalidText:t==null?void 0:t.address1}),e.jsx(w,{id:`address2-${r}`,name:"address2",defaultValue:p,labelText:u,size:"sm",invalid:t==null?void 0:t.address2,invalidText:t==null?void 0:t.address2}),e.jsx(w,{id:`address3-${r}`,name:"address3",defaultValue:m,labelText:x,size:"sm",invalid:t==null?void 0:t.address3,invalidText:t==null?void 0:t.address3}),e.jsx(w,{id:`addressUrl-${r}`,name:"addressUrl",defaultValue:o,labelText:h,size:"sm",type:"url",invalid:t==null?void 0:t.addressUrl,invalidText:t==null?void 0:t.addressUrl})]})},L=`${c}-viewings-list-card`,ye=({address1:n,address1Label:s,addressUrl:o,addressUrlLabel:h,address2:p,address2Label:u,address3:m,address3Label:x,cancelBtnLabel:r="CANCEL",cardTitle:t="Add New Viewing",deleteBtnLabel:b="DELETE",editBtnLabel:f="EDIT",editState:l,enableOnSite:_="false",enableOnSiteToggleLabel:T="Enabled on website",id:j,invalidFields:g,location:z,locationLabel:y="Location",onCancel:d,onEdit:a,onDelete:$,onSave:H,previewDates:E,previewDatesLabel:A,previewHours1:P,previewHours1Label:I,previewHours2:R,previewHours2Label:k,previewLabel:O,previewLabelValue:U,previewOn:K,previewToggleLabel:Q,saveBtnLabel:X="SAVE DETAILS",viewingLabel:F,viewingLabelValue:ee,viewingDates:te,viewingDatesLabel:ne,viewingHours1:se,viewingHours1Label:re,viewingHours2:oe,viewingHours2Label:ae})=>{const[ce,ue]=i.useState(_==="true"),C=i.useRef(null);i.useEffect(()=>{l&&C.current&&C.current.focus()},[l]),i.useEffect(()=>{var V,M;g&&C.current&&((M=(V=C.current.closest(".phillips-viewings-list-card"))==null?void 0:V.querySelector(".phillips-input--invalid input"))==null||M.focus())},[g]);const pe=()=>{typeof d=="function"&&d()},he=()=>{typeof a=="function"&&a()},le=V=>{typeof H=="function"&&H(V)};return e.jsxs("section",{"data-testid":`viewings-list-card-${j}`,id:j,className:S(`${L}`,{[`${L}--edit-state`]:l}),children:[e.jsx("h3",{className:`${L}__title`,children:t}),e.jsx("input",{type:"hidden",name:"id",value:j}),e.jsx(w,{ref:C,id:`location-${j}`,defaultValue:z,labelText:y,size:"sm",name:"location",invalid:g==null?void 0:g.location,invalidText:g==null?void 0:g.location,readOnly:!l}),l?e.jsx(ie,{address1:n,address1Label:s,addressUrl:o,addressUrlLabel:h,address2:p,address2Label:u,address3:m,address3Label:x,id:j,invalidFields:g,previewDates:E,previewDatesLabel:A,previewHours1:P,previewHours1Label:I,previewHours2:R,previewHours2Label:k,previewLabel:O,previewLabelValue:U,previewOn:K,previewToggleLabel:Q,viewingLabel:F,viewingLabelValue:ee,viewingDates:te,viewingDatesLabel:ne,viewingHours1:se,viewingHours1Label:re,viewingHours2:oe,viewingHours2Label:ae}):null,e.jsx(w,{id:`enableOnSite-${j}`,type:"toggle",defaultChecked:_==="true",labelText:T,size:"md",inline:!0,value:"true",name:"enableOnSite",onChange:()=>ue(V=>!V),readOnly:!l}),ce?null:e.jsx("input",{type:"hidden",name:"enableOnSite",value:"false"}),e.jsx("hr",{}),e.jsx("div",{className:`${L}__btn-group ${c}-button__group`,children:l?e.jsxs(e.Fragment,{children:[e.jsx(N,{id:`vlc-save-btn-${j}`,buttonType:"ghost",type:"submit",size:"sm",onClick:le,children:X}),e.jsx(N,{id:`vlc-cancel-btn-${j}`,buttonType:"ghost",type:"button",size:"sm",onClick:pe,children:r})]}):e.jsxs(e.Fragment,{children:[e.jsx(N,{id:`vlc-edit-btn-${j}`,buttonType:"ghost",type:"button",size:"sm",onClick:he,children:f}),e.jsx(N,{id:`vlc-delete-btn-${j}`,buttonType:"ghost",type:"button",size:"sm",onClick:()=>typeof $=="function"&&$(j),children:b})]})})]})},q=()=>Math.floor(Math.random()*100)+Date.now(),Z=({cardTitle:n="Viewing Details",id:s,i18n:o={},onAdd:h,onDelete:p,onSave:u,title:m,viewings:x})=>{const[r,t]=i.useState(x),[b,f]=i.useState(""),[l,_]=i.useState();i.useEffect(()=>{t(x)},[x]);const{addViewingsBtnLabel:T="ADD VIEWINGS"}=o,j=()=>{const a=`${q()}${r?"-"+r.length:""}`;f(a),_(a),h&&h(a)},g=a=>{f(""),typeof p=="function"&&p(a)},z=a=>{f(a),_(r==null?void 0:r.find($=>$.id===a))},y=a=>{u(a)&&f("")},d=()=>{typeof l=="string"?typeof p=="function"&&p(l):b===(l==null?void 0:l.id)&&t(a=>a==null?void 0:a.map($=>$.id===l.id?l:$)),f("")};return e.jsxs("div",{className:S(`${c}-viewings-list`),id:s,children:[e.jsx("h2",{className:S(`${c}-viewings-list__title`),children:m}),r==null?void 0:r.map((a,$)=>e.jsx(ye,{...a,...o,cardTitle:a.location?`${n} ${$+1}`:void 0,editState:b===a.id,onCancel:d,onDelete:g,onEdit:()=>z(a.id),onSave:y},`${a.id}`)),e.jsx(N,{id:`viewings-list-add-btn-${s||q()}`,size:"sm",onClick:j,children:T})]},b)},_e=({defaultViewing:n,i18n:s,validate:o=()=>{},onDelete:h=()=>{},onSave:p,...u})=>{const[m,x]=i.useState(n),r=b=>{x(f=>f==null?void 0:f.filter(l=>l.id!==b)),h(b)},t=b=>{x(f=>f?[...f,{id:b}]:[{id:b}])};return e.jsx(Z,{...u,i18n:s,viewings:m,onDelete:r,onAdd:t,onSave:b=>p(b,x,o)})},de=()=>{const[n,s]=i.useState();return e.jsxs("article",{children:[e.jsx(J,{user:n,onLogin:()=>s({name:"Jane Doe"}),onLogout:()=>s(void 0),onCreateAccount:()=>s({name:"Jane Doe"})}),e.jsxs("section",{className:"storybook-page",children:[e.jsx("h2",{children:"Pages in Storybook"}),e.jsxs("p",{children:["We recommend building UIs with a"," ",e.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:e.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),e.jsx("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),e.jsxs("ul",{children:[e.jsx("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),e.jsx("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),e.jsxs("p",{children:["Get a guided tutorial on component-driven development at"," ",e.jsx("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",e.jsx("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),e.jsxs("div",{className:"tip-wrapper",children:[e.jsx("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("g",{fill:"none",fillRule:"evenodd",children:e.jsx("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};exports.Button=N;exports.ErrorBoundary=G;exports.Header=J;exports.HeroBanner=we;exports.Input=w;exports.Page=de;exports.Select=$e;exports.StatefulViewingsList=_e;exports.ViewingsList=Z;

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,8 +1,8 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {