@phillips/seldon 1.205.2 → 1.206.0

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

@@ -0,0 +1,4 @@
+export { default as ProgressWizard, type ProgressWizardProps } from './ProgressWizard';
+export { default as ProgressWizardFooter, type ProgressWizardFooterProps } from './components/ProgressWizardFooter';
+export { useHistoryManagement } from './hooks/useHistoryManagement';
+export * from './types';

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

@@ -0,0 +1,133 @@
+import { MouseEvent, ReactNode, 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
+ * - 'loading': Data is being loaded (e.g., async validation)
+ * - 'submitting': Form is being submitted
+ */
+export declare enum LoadingState {
+    Idle = "idle",
+    Loading = "loading",
+    Submitting = "submitting"
+}
+type StrictLowercase<K> = K extends string ? Lowercase<K> : never;
+type CapitalizationInsensitiveObject<T> = T & {
+    [K in keyof T as StrictLowercase<K>]: T[K];
+};
+export declare const DefaultButtonLabels: Readonly<CapitalizationInsensitiveObject<{
+    readonly Start: "Start";
+    readonly Cancel: "Cancel";
+    readonly Back: "Back";
+    readonly Continue: "Continue";
+    readonly Submit: "Submit";
+}>>;
+export type SetCurrentStepIndex = Dispatch<SetStateAction<number>>;
+/**
+ * Customizable button labels for ProgressWizard navigation and actions.
+ * @property startLabel - Label for the start button (primary, first step)
+ * @property cancelLabel - Label for the cancel button (secondary, first step)
+ * @property continueLabel - Label for the continue button (primary, middle step)
+ * @property backLabel - Label for the back button (secondary, middle step)
+ * @property submitLabel - Label for the submit button (primary, last step)
+ */
+export type ButtonLabels = {
+    /**
+     * Label for the start button (primary, first step)
+     */
+    start?: string;
+    /**
+     * Label for the cancel button (secondary, first step)
+     */
+    cancel?: string;
+    /**
+     * Label for the back button (secondary, middle step)
+     */
+    back?: string;
+    /**
+     * Label for the continue button (primary, middle step)
+     */
+    continue?: string;
+    /**
+     * Label for the submit button (primary, last step)
+     */
+    submit?: string;
+};
+/**
+ * Base props for the ProgressWizard component.
+ *
+ * @property customHeader - Optional custom header ReactNode rendered above the progress indicator (e.g. logo or contextual banner)
+ * @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
+ * @property continueLabel - Label for the primary button on middle steps.
+ * @property currentStepIndex - Controlled current step index (0‑based). When provided internal step state will not auto‑advance
+ * @property defaultStepIndex - Default step index (0‑based). Used to initialize the internal step state.
+ * @property shouldAllowContinue - If true, allows advancing to the next step.
+ * @property loadingState - Current loading state (see LoadingState) used to show loading UI / disable buttons
+ * @property buttonLabels - Button labels for the footer navigation buttons (start/cancel/back/continue/submit)
+ */
+export type ProgressWizardBaseProps = {
+    /**
+     * Optional custom header ReactNode (renders above progress indicator)
+     */
+    customHeader?: ReactNode;
+    /**
+     * If true, hides the default footer navigation (so you can implement your own)
+     */
+    hideNavigation?: boolean;
+    /**
+     * If true, hides the progress indicator bar.
+     */
+    hideProgressIndicator?: boolean;
+    /**
+     * If true, the wizard will push history states on step changes, allowing the browser back/forward buttons to navigate between steps. Default is true.
+     */
+    isEnableHistoryManagement?: boolean;
+    /**
+     * Set the current step index manually. If provided, the footer buttons will not automatically switch steps.
+     */
+    currentStepIndex?: number;
+    /**
+     * Default step index (0‑based). Used to initialize the internal step state.
+     */
+    defaultStepIndex?: number;
+    /**
+     *  Set false to disable continue/submit buttons
+     */
+    shouldAllowContinue?: boolean;
+    /**
+     * Current loading state (see LoadingState)
+     */
+    loadingState?: LoadingState;
+    /**
+     * Button labels for the footer navigation buttons (start/cancel/back/continue/submit)
+     */
+    buttonLabels?: ButtonLabels;
+};
+/**
+ * Callback props for ProgressWizard navigation lifecycle.
+ * @property onContinue - Called before advancing to the next step (async supported). Return false (or a Promise resolving to false) to block navigation.
+ * @property onBack - Called before going back a step. Return false to block navigation.
+ * @property onFormSubmit - Called when the last step primary button is clicked (async supported). Return false to block submission.
+ * @property onCancel - Called when cancelling from the first step.
+ */
+export type OnClick = (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void | false | Promise<void | false>;
+export type CallbackProps = {
+    /**
+     * Called when going back to a previous step. Receives the click event.
+     */
+    onBack?: OnClick;
+    /**
+     * Called when cancelling the wizard. Receives the click event.
+     */
+    onCancel?: OnClick;
+    /**
+     * Called when continuing to next step. Receives the click event.
+     */
+    onContinue?: OnClick;
+    /**
+     * Called on final submit (receives the click event and a function that returns a promise resolving to whether the current step is valid).
+     */
+    onFormSubmit?: OnClick;
+};
+export {};

package/dist/patterns/ProgressWizard/types.js

@@ -0,0 +1,17 @@
+var n = /* @__PURE__ */ ((t) => (t.Idle = "idle", t.Loading = "loading", t.Submitting = "submitting", t))(n || {});
+const i = (t) => Object.fromEntries(
+  Object.keys(t).flatMap((e) => [
+    [e, e],
+    [e.toLowerCase(), e]
+  ])
+), a = i({
+  Start: "Start",
+  Cancel: "Cancel",
+  Back: "Back",
+  Continue: "Continue",
+  Submit: "Submit"
+});
+export {
+  a as DefaultButtonLabels,
+  n as LoadingState
+};

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

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+export declare const generateStepId: (index: number) => string;
+export declare const wrapChild: (child: ReactNode, childIndex: number, currentIndex: number, baseClassName: string) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const wrapChildren: (children: ReactNode[], currentIndex: number, baseClassName: string) => (string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined)[];
+export declare const getLabelsFromChildren: (children: ReactNode[]) => string[];
+export declare const isControlled: (currentStepIndex: number | undefined) => currentStepIndex is number;

package/dist/patterns/ProgressWizard/utils.js

@@ -0,0 +1,16 @@
+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;
+export {
+  p as generateStepId,
+  f as getLabelsFromChildren,
+  c as isControlled,
+  i as wrapChild,
+  d as wrapChildren
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/providers/SeldonProvider/utils.d.ts

@@ -1,5 +1,5 @@
 /**
  * Used to hide or show components based on the current breakpoint in a SSR friendly way
  */
-export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "snw-mobile" | "xsm", never>;
+export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "xsm" | "snw-mobile", never>;
 export declare const ssrMediaQueryStyle: string;

package/dist/scss/componentStyles.scss

@@ -80,6 +80,7 @@
 @use 'patterns/FiltersInline/filtersInline';
 @use 'patterns/FiltersInline/filterButton';
 @use 'patterns/FiltersInline/filterDropdownMenu';
+@use 'patterns/ProgressWizard/progressWizard';
 
 // Site Furniture
 @use 'site-furniture/Header/header';

package/dist/scss/components/ComboBox/_combobox.scss

@@ -25,8 +25,8 @@
   &__input {
     @include text($string2);
 
-    accent-color: $soft-black;
-    border: 1px solid $keyline-gray;
+    accent-color: $black-100;
+    border: 1px solid $black-100;
     border-radius: 0.1875rem;
     font-variation-settings: 'wght' 600;
     outline: none;

package/dist/scss/components/ProgressIndicator/_progressIndicator.scss

@@ -27,6 +27,10 @@
     padding: 0;
     width: 1.5rem;
 
+    .#{$px}-text {
+      font-variation-settings: 'wght' 600;
+    }
+
     &--active,
     &--current {
       background-color: $pure-black;

package/dist/scss/components/TextArea/_textArea.scss

@@ -3,8 +3,8 @@
 .#{$px}-text-area {
   @include text($string2);
 
-  accent-color: $soft-black;
-  border: 1px solid $keyline-gray;
+  accent-color: $black-100;
+  border: 1px solid $black-100;
   border-radius: 0.1875rem;
   min-height: 50px; // 50px is the height of 2 rows
   padding: $padding-xsm;

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -32,6 +32,7 @@
       flex-direction: row;
       font-variation-settings: 'wght' 600;
       justify-content: space-between;
+      margin-bottom: $spacing-micro;
       padding: $spacing-xsm;
       width: 100%;
 
@@ -72,22 +73,22 @@
       }
     }
 
-    &-error-msg {
-      animation: reveal 0.45s linear forwards;
-      margin-top: $spacing-micro;
-
-      // Reveal animation (match Input)
-      max-height: 2em;
-      opacity: 1;
-      transition: opacity 0.2s;
-      visibility: visible;
-      white-space: nowrap;
-      will-change: opacity, max-height;
-    }
-
     &-flag {
       height: 1rem;
       margin-right: $spacing-sm;
     }
   }
 }
+.#{$px}-input__validation {
+  animation: reveal 0.45s linear forwards;
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/dist/scss/patterns/PhoneNumberInput/_phoneNumberInput.scss

@@ -13,30 +13,6 @@
     width: 100%;
   }
 
-  &__error {
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-height: $spacing-md;
-
-    &-msg {
-      animation: reveal 0.45s linear forwards;
-
-      // Reveal animation (match Input)
-      max-height: 2em;
-      opacity: 1;
-      overflow: hidden;
-      transition: opacity 0.2s;
-      visibility: visible;
-      will-change: opacity, max-height;
-    }
-  }
-
-  // Hide the validation from the Input component
-  .#{$px}-input__validation {
-    display: none;
-  }
-
   &__country-picker {
     flex: 0 0 25%;
     margin-right: $spacing-xsm;
@@ -47,6 +23,11 @@
     flex: 1 1 75%;
     flex-grow: 1;
     margin-top: calc(var(--string-line-height-size2) + 0.5rem);
+
+    // Hide input validation inside phone number input, we use a shared one
+    .#{$px}-input__validation {
+      display: none;
+    }
   }
 
   @media screen and (min-width: $breakpoint-xl) {
@@ -66,3 +47,17 @@
     }
   }
 }
+
+.#{$px}-input__validation {
+  animation: reveal 0.45s linear forwards;
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,83 @@
+@use '../../allPartials' as *;
+
+.#{$px}-progress-wizard {
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+
+  &__logo {
+    align-items: center;
+    border-bottom: 1px solid $light-gray;
+    display: flex;
+    justify-content: center;
+    margin-bottom: $spacing-md;
+    padding: $spacing-sm;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    margin-top: $spacing-md;
+    overflow-y: auto;
+  }
+
+  &__footer {
+    align-items: stretch;
+    background-color: $white;
+    border-top: 1px solid $light-gray;
+    display: flex;
+    flex-shrink: 0;
+    gap: $spacing-sm;
+    justify-content: stretch;
+    padding: $spacing-sm 0;
+    width: 100%;
+  }
+
+  &__btn {
+    flex: 1 1 0;
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  // Mobile: sticky footer, only content scrolls
+  @media (max-width: $breakpoint-md) {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: visible;
+
+    &__content {
+      flex: 1 1 auto;
+      height: auto;
+      min-height: 0;
+      overflow-y: auto;
+    }
+
+    &__footer {
+      bottom: 0;
+      left: 0;
+      position: sticky;
+      right: 0;
+      z-index: 10;
+    }
+  }
+
+  // Desktop: footer at bottom if content is short, scrolls if content is long
+  @media (min-width: $breakpoint-md) {
+    display: flex;
+    flex-direction: column;
+
+    &__content {
+      flex: 1 1 auto;
+      overflow-y: auto;
+    }
+
+    &__footer {
+      border-top: none;
+      box-shadow: none;
+      margin-top: auto;
+      position: static;
+    }
+  }
+}

package/dist/utils/index.d.ts

@@ -19,7 +19,7 @@ export declare enum PaddingTokens {
 }
 export declare enum SpacingTokens {
     micro = "micro",
-    xs = "xs",
+    xsm = "xsm",
     sm = "sm",
     md = "md",
     lg = "lg",

package/dist/utils/index.js

@@ -9,7 +9,7 @@ const s = "seldon", v = ({ id: e, ...r }, n) => {
     className: `${s}-${t}`
   };
 };
-var f = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(f || {}), x = /* @__PURE__ */ ((e) => (e.micro = "micro", e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(x || {});
+var f = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(f || {}), x = /* @__PURE__ */ ((e) => (e.micro = "micro", e.xsm = "xsm", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(x || {});
 const C = () => {
 };
 function g({

package/dist/utils/staticContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.205.2",
+  "version": "1.206.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -125,7 +125,6 @@
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.62.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",