@phillips/seldon 1.207.0 → 1.209.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 {