@phillips/seldon 1.206.0 → 1.208.0

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -14,7 +14,7 @@ export interface ProgressIndicatorProps extends Progress.ProgressProps, Componen
      * If supplied, only visible on desktop breakpoints.
      *
      */
-    labels?: string[];
+    stepLabels?: string[];
     /**
      * Optional class name for additional styling.
      */

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,62 +1,63 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { Root as v } from "../../node_modules/@radix-ui/react-progress/dist/index.js";
-import { forwardRef as M, Fragment as P } from "react";
-import { getCommonProps as $ } from "../../utils/index.js";
-import d from "../../node_modules/classnames/index.js";
-import C from "../Icon/Icon.js";
-import { TextVariants as h } from "../Text/types.js";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Root as P } from "../../node_modules/@radix-ui/react-progress/dist/index.js";
+import { forwardRef as $, Fragment as C } from "react";
+import { getCommonProps as I } from "../../utils/index.js";
+import h from "../../node_modules/classnames/index.js";
+import S from "../Icon/Icon.js";
+import { TextVariants as p } from "../Text/types.js";
 import _ from "../Text/Text.js";
-const I = M(
+const T = $(
   ({
-    totalSteps: c,
+    totalSteps: i,
     currentStep: f,
     className: u,
-    progressIndicatorAriaLabel: p = "Progress Indicator",
-    completedIconAriaLabel: b = "Completed Icon",
-    ...e
-  }, g) => {
-    const { className: a, ...N } = $(e, "ProgressIndicator");
-    if (c <= 0) return null;
-    const s = Math.max(1, Math.min(10, Math.floor(c))), l = Math.max(1, Math.min(s, Math.floor(f)));
-    return /* @__PURE__ */ r("div", { ...N, className: d(a, u), ...e, ref: g, children: /* @__PURE__ */ r(v, { value: l, max: s, "aria-label": p, children: /* @__PURE__ */ r("div", { className: `${a}__steps`, children: Array.from({ length: s }).map((T, t) => {
-      const o = t + 1, i = l > o, n = l === o;
-      return /* @__PURE__ */ m(P, { children: [
-        /* @__PURE__ */ m(
+    stepLabels: e,
+    progressIndicatorAriaLabel: g = "Progress Indicator",
+    completedIconAriaLabel: N = "Completed Icon",
+    ...n
+  }, v) => {
+    const { className: a, ...M } = I(n, "ProgressIndicator");
+    if (i <= 0) return null;
+    const t = Math.max(1, Math.min(10, Math.floor(i))), c = Math.max(1, Math.min(t, Math.floor(f)));
+    return /* @__PURE__ */ r("div", { ...M, className: h(a, u), ...n, ref: v, children: /* @__PURE__ */ r(P, { value: c, max: t, "aria-label": g, children: /* @__PURE__ */ r("div", { className: `${a}__steps`, children: Array.from({ length: t }).map((x, o) => {
+      const s = o + 1, m = c > s, l = c === s;
+      return /* @__PURE__ */ d(C, { children: [
+        /* @__PURE__ */ d(
           "div",
           {
             className: `${a}__item`,
-            "aria-current": n ? "step" : void 0,
-            "data-testid": `progress-step-${o}`,
+            "aria-current": l ? "step" : void 0,
+            "data-testid": `progress-step-${s}`,
             children: [
               /* @__PURE__ */ r(
                 "span",
                 {
-                  className: d(`${a}__circle`, {
-                    [`${a}__circle--active`]: i,
-                    [`${a}__circle--current`]: n
+                  className: h(`${a}__circle`, {
+                    [`${a}__circle--active`]: m,
+                    [`${a}__circle--current`]: l
                   }),
-                  children: i ? /* @__PURE__ */ r(
-                    C,
+                  children: m ? /* @__PURE__ */ r(
+                    S,
                     {
                       icon: "Success",
-                      "aria-label": b,
+                      "aria-label": N,
                       color: "currentColor",
                       width: 20,
                       height: 20
                     }
-                  ) : /* @__PURE__ */ r(_, { variant: h.badge, children: o })
+                  ) : /* @__PURE__ */ r(_, { variant: p.badge, children: s })
                 }
               ),
-              e.labels && e.labels[t] && /* @__PURE__ */ r("span", { className: `${a}__label`, children: /* @__PURE__ */ r(_, { variant: h.string2, children: e.labels[t] }) })
+              e && e[o] && /* @__PURE__ */ r("span", { className: `${a}__label`, children: /* @__PURE__ */ r(_, { variant: p.string2, children: e[o] }) })
             ]
           }
         ),
-        t < s - 1 ? /* @__PURE__ */ r("div", { className: `${a}__connector`, "aria-hidden": "true" }) : null
-      ] }, e.labels ? e.labels[t] : t);
+        o < t - 1 ? /* @__PURE__ */ r("div", { className: `${a}__connector`, "aria-hidden": "true" }) : null
+      ] }, e?.[o] || o);
     }) }) }) });
   }
 );
-I.displayName = "ProgressIndicator";
+T.displayName = "ProgressIndicator";
 export {
-  I as default
+  T as default
 };

package/dist/patterns/CountryPicker/CountryPicker.js

@@ -1,52 +1,54 @@
-import { jsxs as h, Fragment as v, jsx as e } from "react/jsx-runtime";
-import { forwardRef as N, useState as j } from "react";
-import M from "./CountryPickerTrigger.js";
-import O from "./CountryPickerModal.js";
-import { getCommonProps as T } from "../../utils/index.js";
-import { toConfig as m } from "./types.js";
-const w = N(
+import { jsxs as v, Fragment as N, jsx as e } from "react/jsx-runtime";
+import { forwardRef as j, useState as M } from "react";
+import O from "./CountryPickerTrigger.js";
+import T from "./CountryPickerModal.js";
+import { getCommonProps as w } from "../../utils/index.js";
+import { toConfig as l } from "./types.js";
+const E = j(
   ({
-    triggerLabelText: l,
-    hasTriggerError: c,
-    triggerErrorMsg: u,
-    triggerDisplayValue: f,
-    modalTitle: p,
-    searchInputLabel: d,
-    searchInputPlaceholder: C,
-    selectButtonLabel: y,
+    triggerLabelText: m,
+    triggerAriaLabel: c,
+    hasTriggerError: u,
+    triggerErrorMsg: f,
+    triggerDisplayValue: p,
+    modalTitle: d,
+    searchInputLabel: C,
+    searchInputPlaceholder: y,
+    selectButtonLabel: k,
     inputName: o,
-    baseClassName: k = "CountryPicker",
+    baseClassName: P = "CountryPicker",
     value: t,
-    onChange: s,
-    isPhone: P,
-    ...a
-  }, g) => {
-    const [x, i] = j(!1), { className: n } = T(a, k), b = {
-      modalTitle: p,
-      searchInputLabel: d,
-      searchInputPlaceholder: C,
-      selectButtonLabel: y,
+    onChange: a,
+    isPhone: g,
+    ...s
+  }, b) => {
+    const [x, i] = M(!1), { className: n } = w(s, P), h = {
+      modalTitle: d,
+      searchInputLabel: C,
+      searchInputPlaceholder: y,
+      selectButtonLabel: k,
       inputName: o,
-      ...a
-    }, r = P ? m(!0, t, s) : m(!1, t, s);
-    return /* @__PURE__ */ h(v, { children: [
+      ...s
+    }, r = g ? l(!0, t, a) : l(!1, t, a);
+    return /* @__PURE__ */ v(N, { children: [
       /* @__PURE__ */ e(
-        M,
+        O,
         {
-          ref: g,
-          labelText: l,
-          displayValue: f,
+          ref: b,
+          labelText: m,
+          ariaLabel: c,
+          displayValue: p,
           onClick: () => i(!0),
-          hasError: c,
-          errorMsg: u,
+          hasError: u,
+          errorMsg: f,
           variantConfig: r,
           baseClassName: n
         }
       ),
       /* @__PURE__ */ e(
-        O,
+        T,
         {
-          ...b,
+          ...h,
           isOpen: x,
           onClose: () => i(!1),
           variantConfig: r,
@@ -65,7 +67,7 @@ const w = N(
     ] });
   }
 );
-w.displayName = "CountryPicker";
+E.displayName = "CountryPicker";
 export {
-  w as default
+  E as default
 };

package/dist/patterns/CountryPicker/CountryPickerTrigger.d.ts

@@ -4,6 +4,10 @@ export type CountryPickerTriggerProps = {
      * The label text displayed above the button.
      */
     labelText: string;
+    /**
+     * The aria-label attribute for the button, defaults to labelText if not provided.
+     */
+    ariaLabel?: string;
     /**
      * The value displayed inside the button (e.g., selected country name or phone code).
      */

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -1,24 +1,35 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import x from "../../components/Icon/Icon.js";
-import { TextVariants as y } from "../../components/Text/types.js";
-import k from "../../components/Text/Text.js";
+import y from "../../components/Icon/Icon.js";
+import { TextVariants as k } from "../../components/Text/types.js";
+import P from "../../components/Text/Text.js";
 import t from "../../node_modules/classnames/index.js";
-import { countries as P } from "./constants.js";
-import { forwardRef as w } from "react";
-import { useNormalizedInputProps as I, px as T } from "../../utils/index.js";
-const b = w(
-  ({ labelText: l, displayValue: p, onClick: m, hasError: o = !1, errorMsg: _, id: e, className: s, baseClassName: r, variantConfig: f }, u) => {
-    const { isPhone: a, value: c } = f, n = I({
+import { countries as w } from "./constants.js";
+import { forwardRef as I } from "react";
+import { useNormalizedInputProps as T, px as b } from "../../utils/index.js";
+const j = I(
+  ({
+    labelText: l,
+    ariaLabel: p = l,
+    displayValue: m,
+    onClick: _,
+    hasError: o = !1,
+    errorMsg: s,
+    id: e,
+    className: f,
+    baseClassName: r,
+    variantConfig: u
+  }, v) => {
+    const { isPhone: a, value: c } = u, n = T({
       id: "country-picker-trigger-input",
       invalid: o,
-      invalidText: _,
+      invalidText: s,
       type: "text"
-    }), v = n.invalidId, g = a ? c : P.filter((h) => h.name === c)?.[0]?.code, $ = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${T}-input__validation`, children: " " });
-    return /* @__PURE__ */ d("div", { className: t(`${r}__trigger`, s), children: [
+    }), $ = n.invalidId, g = a ? c : w.filter((x) => x.name === c)?.[0]?.code, h = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${b}-input__validation`, children: " " });
+    return /* @__PURE__ */ d("div", { className: t(`${r}__trigger`, f), children: [
       /* @__PURE__ */ i(
-        k,
+        P,
         {
-          variant: y.string2,
+          variant: k.string2,
           className: t(`${r}__trigger-label`, {
             [`${r}__trigger-label--error`]: o
           }),
@@ -29,16 +40,16 @@ const b = w(
       /* @__PURE__ */ d(
         "button",
         {
-          ref: u,
+          ref: v,
           type: "button",
-          "aria-label": l,
+          "aria-label": p,
           "aria-invalid": n.invalid,
-          "aria-describedby": v,
+          "aria-describedby": $,
           className: t(`${r}__trigger-btn`, {
             [`${r}__trigger-btn--error`]: o,
             [`${r}__trigger-btn--is-phone`]: a
           }),
-          onClick: m,
+          onClick: _,
           "data-testid": "country-picker-trigger",
           id: e,
           children: [
@@ -50,16 +61,16 @@ const b = w(
                 className: `${r}__trigger-flag`
               }
             ),
-            /* @__PURE__ */ i("span", { className: t(`${r}__trigger-text`), children: p }),
-            /* @__PURE__ */ i("span", { className: t(`${r}__trigger-icon`), children: /* @__PURE__ */ i(x, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
+            /* @__PURE__ */ i("span", { className: t(`${r}__trigger-text`), children: m }),
+            /* @__PURE__ */ i("span", { className: t(`${r}__trigger-icon`), children: /* @__PURE__ */ i(y, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
           ]
         }
       ),
-      !a && $()
+      !a && h()
     ] });
   }
 );
-b.displayName = "CountryPickerTrigger";
+j.displayName = "CountryPickerTrigger";
 export {
-  b as default
+  j as default
 };

package/dist/patterns/PhoneNumberInput/PhoneNumberInput.js

@@ -1,79 +1,80 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import C, { forwardRef as P } from "react";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import b, { forwardRef as P } from "react";
 import { getCommonProps as _, px as x, useNormalizedInputProps as I } from "../../utils/index.js";
-import S from "../../node_modules/classnames/index.js";
-import T from "../CountryPicker/CountryPicker.js";
-import $ from "../../components/Input/Input.js";
+import $ from "../../node_modules/classnames/index.js";
+import S from "../CountryPicker/CountryPicker.js";
+import T from "../../components/Input/Input.js";
 import { getSafeCountryCallingCode as L } from "../CountryPicker/utils.js";
 import { countries as j } from "../CountryPicker/constants.js";
 const k = P(
   ({
-    className: s,
-    value: l = "",
-    countryCode: p = "",
+    className: l,
+    value: s = "",
+    countryCode: c = "",
     handleValueChange: u,
-    label: c = "Phone",
+    label: n = "Phone",
     required: m = !1,
-    error: n,
+    error: a,
     errorText: h,
-    disabled: f = !1,
-    ...y
-  }, v) => {
-    const { className: t, ...b } = _(y, "PhoneNumberInput"), [a, N] = C.useState(p || void 0), o = j.find((r) => r.code === a), g = (r) => {
-      u?.(r.target.value, a || "");
-    }, i = I({
+    disabled: y = !1,
+    ...f
+  }, g) => {
+    const { className: t, ...v } = _(f, "PhoneNumberInput"), [o, C] = b.useState(c || void 0), i = j.find((d) => d.code === o), N = (d) => {
+      u?.(d.target.value, o || "");
+    }, r = I({
       id: "phone-input",
-      invalid: n,
+      invalid: a,
       invalidText: h,
       type: "text"
     });
-    return /* @__PURE__ */ d("div", { ref: v, className: S(`${t}`, s), ...b, children: [
-      /* @__PURE__ */ d("div", { className: `${t}__wrapper`, children: [
-        /* @__PURE__ */ d("div", { className: `${t}__country-picker`, children: [
-          /* @__PURE__ */ e("input", { type: "hidden", name: "phoneNumber", value: l, "data-testid": "phone-number-hidden-input" }),
+    return /* @__PURE__ */ p("div", { ref: g, className: $(`${t}`, l), ...v, children: [
+      /* @__PURE__ */ p("div", { className: `${t}__wrapper`, children: [
+        /* @__PURE__ */ p("div", { className: `${t}__country-picker`, children: [
+          /* @__PURE__ */ e("input", { type: "hidden", name: "phoneNumber", value: s, "data-testid": "phone-number-hidden-input" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "hidden",
               name: "phoneCountryCode",
-              value: a || "",
+              value: o || "",
               "data-testid": "phone-country-code-hidden-input"
             }
           ),
           /* @__PURE__ */ e(
-            T,
+            S,
             {
-              triggerLabelText: "Phone Number",
-              triggerDisplayValue: o ? `+${L(o.code)}` : "",
-              hasTriggerError: !!n,
+              triggerLabelText: n,
+              triggerAriaLabel: `${n.replace("*", "")} country`,
+              triggerDisplayValue: i ? `+${L(i.code)}` : "",
+              hasTriggerError: !!a,
               modalTitle: "Country code",
               searchInputLabel: "Search country",
               searchInputPlaceholder: "Search country",
               selectButtonLabel: "Select",
               isPhone: !0,
-              value: o?.code,
-              onChange: N
+              value: i?.code,
+              onChange: C
             }
           )
         ] }),
         /* @__PURE__ */ e("div", { className: `${t}__input`, children: /* @__PURE__ */ e(
-          $,
+          T,
           {
             id: "phone-input",
             type: "tel",
-            labelText: c,
+            labelText: `${n.replace("*", "")} phone`,
             hideLabel: !0,
-            value: l,
-            onChange: g,
+            value: s,
+            onChange: N,
             required: m,
-            invalid: !!n,
-            disabled: f,
+            invalid: !!a,
+            disabled: y,
             invalidText: "",
-            "aria-describedby": i.invalidId
+            "aria-describedby": r.invalidId
           }
         ) })
       ] }),
-      i.validation ? i.validation : /* @__PURE__ */ e("p", { className: `${x}-input__validation`, children: " " })
+      r.validation ? r.validation : /* @__PURE__ */ e("p", { className: `${x}-input__validation`, children: " " })
     ] });
   }
 );

package/dist/patterns/ProgressWizard/ProgressWizard.d.ts

@@ -2,7 +2,7 @@ import { CallbackProps, ProgressWizardBaseProps } from './types';
 /**
  * Props for the main ProgressWizard component.
  *
- * @property customHeader - Optional custom header ReactNode displayed above the progress indicator. This can be used to add a logo or other branding element to the top of the wizard. If not provided, no header will be shown. For Phillips, it should probably be `          <Icon icon="PhillipsLogo" height={32} width={120} aria-label="Phillips Logo" />
+ * @property isFullHeight - Sets the wizard component to take up all available height of its container. Defaults true.
  * @property hideNavigation - If true, hides the default footer navigation. When hidden you must manage step index changes yourself (e.g. via currentStepIndex prop)
  * @property hideProgressIndicator - If true, hides the progress indicator bar.
  * @property isEnableHistoryManagement - If true step advances push a history state so the browser back/forward buttons navigate between steps.  Default is false and if you want this behavior you should use the useHistoryManagement hook directly in your controlling component.

package/dist/patterns/ProgressWizard/ProgressWizard.js

@@ -5,13 +5,13 @@ import { useHistoryManagement as T } from "./hooks/useHistoryManagement.js";
 import { getCommonProps as Y } from "../../utils/index.js";
 import { ProgressWizardFooter as D } from "./components/ProgressWizardFooter.js";
 import G from "../../components/ProgressIndicator/ProgressIndicator.js";
-import { isControlled as c, getLabelsFromChildren as J, wrapChildren as K } from "./utils.js";
+import { isControlled as p, getLabelsFromChildren as J, wrapChildren as K } from "./utils.js";
 const O = B((g, f) => {
   const {
-    customHeader: S,
+    isFullHeight: S = !0,
     hideNavigation: a,
     hideProgressIndicator: h,
-    isEnableHistoryManagement: p = !1,
+    isEnableHistoryManagement: c = !1,
     currentStepIndex: r,
     defaultStepIndex: I,
     shouldAllowContinue: x = !0,
@@ -23,40 +23,40 @@ const O = B((g, f) => {
     onFormSubmit: y,
     children: z,
     ...W
-  } = g, { className: o, ...N } = Y(W, "ProgressWizard");
+  } = g, { className: t, ...N } = Y(W, "ProgressWizard");
   let i = I;
   i !== void 0 && r !== void 0 && (console.warn(
     "ProgressWizard: Both defaultStepIndex and currentStepIndex props are provided. defaultStepIndex will be ignored."
   ), i = void 0);
-  const [m, H] = q(i ?? 0), u = E(
+  const [u, L] = q(i ?? 0), m = E(
     (A) => {
-      !a && !c(r) && H(A);
+      !a && !p(r) && L(A);
     },
     [a, r]
   ), e = d(
-    () => r ?? m,
-    [r, m]
+    () => r ?? u,
+    [r, u]
   );
-  p && c(r) && console.warn(
+  c && p(r) && console.warn(
     "ProgressWizard: History management is disabled in controlled mode (currentStepIndex prop). To enable history management, remove the currentStepIndex prop. You may also import and use the useHistoryManagement hook directly in your controlling component."
   );
-  const t = R.toArray(z), L = d(() => J(t), [t]), _ = d(
-    () => K(t, e, o),
-    [t, e, o]
-  ), n = t.length;
-  (!t || n === 0) && console.warn(
+  const o = R.toArray(z), $ = d(() => J(o), [o]), H = d(
+    () => K(o, e, t),
+    [o, e, t]
+  ), n = o.length;
+  (!o || n === 0) && console.warn(
     "ProgressWizard: No children provided. At least one child is required to render steps, two for normal behavior."
-  ), t[e] || console.warn(`ProgressWizard: currentStepIndex ${e} is out of bounds (0 to ${n - 1})`), T({
-    enabled: !c(r) && p,
+  ), o[e] || console.warn(`ProgressWizard: currentStepIndex ${e} is out of bounds (0 to ${n - 1})`), T({
+    enabled: !p(r) && c,
     currentStepIndex: e,
     stepCount: n,
-    setCurrentStepIndex: u
+    setCurrentStepIndex: m
   });
-  const F = e === 0, M = e === n - 1, $ = _, k = {
-    setCurrentStepIndex: u,
+  const F = e === 0, _ = e === n - 1, M = H, k = {
+    setCurrentStepIndex: m,
     isFirstStep: F,
-    isLastStep: M,
-    baseClassName: o,
+    isLastStep: _,
+    baseClassName: t,
     shouldAllowContinue: x,
     isLoading: [l.Loading, l.Submitting].includes(C),
     labels: b,
@@ -65,12 +65,20 @@ const O = B((g, f) => {
     onCancel: w,
     onFormSubmit: y
   };
-  return /* @__PURE__ */ j("section", { ...N, className: o, ref: f, "aria-label": "Progress Wizard", children: [
-    S,
-    h ? null : /* @__PURE__ */ s(G, { totalSteps: n, currentStep: e + 1, labels: L }),
-    /* @__PURE__ */ s("div", { className: `${o}__content`, children: $ }),
-    a ? null : /* @__PURE__ */ s("div", { className: `${o}__footer`, children: /* @__PURE__ */ s(D, { ...k }) })
-  ] });
+  return /* @__PURE__ */ j(
+    "section",
+    {
+      ...N,
+      className: `${t}${S ? ` ${t}--full-height` : ""}`,
+      ref: f,
+      "aria-label": "Progress Wizard",
+      children: [
+        h ? null : /* @__PURE__ */ s(G, { totalSteps: n, currentStep: e + 1, stepLabels: $ }),
+        /* @__PURE__ */ s("div", { className: `${t}__content`, children: M }),
+        a ? null : /* @__PURE__ */ s("div", { className: `${t}__footer`, children: /* @__PURE__ */ s(D, { ...k }) })
+      ]
+    }
+  );
 });
 O.displayName = "ProgressWizard";
 export {

package/dist/patterns/ProgressWizard/ProgressWizard.stories.d.ts

@@ -1,469 +1,44 @@
-import { ProgressWizardProps } from './ProgressWizard';
-import { ArgTypes } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<ProgressWizardProps & {
-        children?: import('react').ReactNode | undefined;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-};
-export default meta;
+import { default as ProgressWizard, ProgressWizardProps } from './ProgressWizard';
+import { Meta, ArgTypes } from '@storybook/react';
+declare const meta: Meta<typeof ProgressWizard>;
 export declare const BasicWizard: {
-    (): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const ValidationWizardWithOnBack: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
     storyName: string;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const AsyncValidationWizardWithAllCallbacks: {
-    (): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const ShouldAllowContinue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const ExternalStepControlWizard: {
-    (): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const TraditionalFormWizard: {
-    (): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const MobileFormStory: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (props: ProgressWizardProps): import("react/jsx-runtime").JSX.Element;
     storyName: string;
     parameters: {
         viewport: {
             defaultViewport: string;
         };
     };
-    argTypes: {
-        readonly customHeader: {
-            readonly control: {
-                readonly type: "text";
-            };
-        };
-        readonly hideNavigation: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly hideProgressIndicator: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly isEnableHistoryManagement: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly currentStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly defaultStepIndex: {
-            readonly control: {
-                readonly type: "number";
-            };
-        };
-        readonly shouldAllowContinue: {
-            readonly control: {
-                readonly type: "boolean";
-            };
-        };
-        readonly loadingState: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly options: readonly ["idle", "submitting", "loading"];
-        };
-        readonly buttonLabels: {
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
-        };
-        readonly onContinue: {
-            readonly action: "onContinue";
-        };
-        readonly onBack: {
-            readonly action: "onBack";
-        };
-        readonly onCancel: {
-            readonly action: "onCancel";
-        };
-        readonly onFormSubmit: {
-            readonly action: "onFormSubmit";
-        };
-    };
+    argTypes: ArgTypes<import('@storybook/csf').Args>;
 };
 export declare const Playground: {
     render: (props: ProgressWizardProps) => JSX.Element;
     args: ProgressWizardProps;
     argTypes: ArgTypes;
 };
+export default meta;

package/dist/patterns/ProgressWizard/types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, Dispatch, SetStateAction } from 'react';
+import { MouseEvent, Dispatch, SetStateAction } from 'react';
 /**
  * Describes the loading state of the ProgressWizard. Used to control UI feedback and button states. Mimics remix fetcher state.
  * - 'idle': No loading or submission in progress
@@ -55,7 +55,7 @@ export type ButtonLabels = {
 /**
  * Base props for the ProgressWizard component.
  *
- * @property customHeader - Optional custom header ReactNode rendered above the progress indicator (e.g. logo or contextual banner)
+ * @property isFullHeight - Sets the wizard component to take up all available height of its container. Defaults true.
  * @property hideNavigation - If true, hides the default footer navigation (consumer is responsible for changing steps)
  * @property hideProgressIndicator - If true, hides the progress indicator bar entirely
  * @property isEnableHistoryManagement - If true (default) advancing steps pushes a browser history state so back/forward navigates steps
@@ -68,9 +68,9 @@ export type ButtonLabels = {
  */
 export type ProgressWizardBaseProps = {
     /**
-     * Optional custom header ReactNode (renders above progress indicator)
+     * Sets the wizard component to take up all available height of its container. Defaults true.
      */
-    customHeader?: ReactNode;
+    isFullHeight?: boolean;
     /**
      * If true, hides the default footer navigation (so you can implement your own)
      */

package/dist/patterns/ProgressWizard/utils.js

@@ -1,16 +1,10 @@
 import { jsx as s } from "react/jsx-runtime";
-import n from "react";
-const p = (e) => `wizard-step-${e}`, i = (e, r, t, a) => n.isValidElement(e) ? /* @__PURE__ */ s("div", { className: r !== t ? `${a}-hidden` : "", children: e }, p(r)) : e, d = (e, r, t) => e.map((a, o) => i(a, o, r, t)), f = (e) => e.map((r, t) => {
-  if (n.isValidElement(r)) {
-    const a = r.props ?? {};
-    return typeof a["aria-label"] == "string" && a["aria-label"] || `Step ${t + 1}`;
-  }
-  return `Step ${t + 1}`;
-}), c = (e) => e !== void 0;
+import o from "react";
+const i = (e) => `wizard-step-${e}`, l = (e, r, t, a) => o.isValidElement(e) ? /* @__PURE__ */ s("div", { className: r !== t ? `${a}-hidden` : "", children: e }, i(r)) : e, d = (e, r, t) => e.map((a, n) => l(a, n, r, t)), c = (e) => e.map((r) => o.isValidElement(r) && r.props?.["aria-label"] || ""), f = (e) => e !== void 0;
 export {
-  p as generateStepId,
-  f as getLabelsFromChildren,
-  c as isControlled,
-  i as wrapChild,
+  i as generateStepId,
+  c as getLabelsFromChildren,
+  f as isControlled,
+  l as wrapChild,
   d as wrapChildren
 };

package/dist/scss/components/ComposedModal/_composedModal.scss

@@ -1,5 +1,7 @@
 @use '../../allPartials' as *;
 
+$breakpoint-mobile-small: 450px;
+
 .#{$px}-composed-modal {
   border-radius: 1rem;
   max-width: 95vw;
@@ -34,11 +36,19 @@
     justify-content: center;
     margin: 0 $spacing-lg;
     padding: $spacing-sm 0 0;
+
+    @media (max-width: $breakpoint-mobile-small) {
+      flex-direction: column;
+    }
   }
 
   &__btns-group > * {
     flex: 1 1 50%;
     margin: $spacing-xsm 0 0;
+
+    @media (max-width: $breakpoint-mobile-small) {
+      flex: 1 1 auto;
+    }
   }
 
   &__btns {

package/dist/scss/patterns/ProgressWizard/_progressWizard.scss

@@ -20,6 +20,10 @@
     overflow-y: auto;
   }
 
+  &--full-height {
+    height: 100%;
+  }
+
   &__footer {
     align-items: stretch;
     background-color: $white;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.206.0",
+  "version": "1.208.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"