@phillips/seldon 1.174.0 → 1.175.0

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

@@ -0,0 +1,43 @@
+import { ComponentProps } from 'react';
+import * as Progress from '@radix-ui/react-progress';
+export interface ProgressIndicatorProps extends Progress.ProgressProps, ComponentProps<'div'> {
+    /**
+     * Total number of steps in the progress indicator.
+     */
+    totalSteps: number;
+    /**
+     * Current step number in the progress indicator.
+     */
+    currentStep: number;
+    /**
+     * Optional labels for each step in the progress indicator.
+     * If supplied, only visible on desktop breakpoints.
+     *
+     */
+    labels?: string[];
+    /**
+     * Optional class name for additional styling.
+     */
+    className?: string;
+    /**
+     * Aria label for the progress indicator.
+     */
+    progressIndicatorAriaLabel?: string;
+    /**
+     * Aria label for the completed icon.
+     */
+    completedIconAriaLabel?: string;
+}
+/**
+ * ## Overview
+ *
+ * This component provides a visual representation of a multi-step process.
+ *
+ *
+ * [Figma Link](https://www.figma.com/design/kSxOhnqIhilZ9hIJd3bPgP/RW-Registration?node-id=2996-50543&m=dev)
+ * [Figma Link 2](https://www.figma.com/design/kSxOhnqIhilZ9hIJd3bPgP/RW-Registration?node-id=2529-23889&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-progressindicator--overview)
+ */
+declare const ProgressIndicator: import('react').ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,62 @@
+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 _ from "../Text/Text.js";
+const I = M(
+  ({
+    totalSteps: c,
+    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(
+          "div",
+          {
+            className: `${a}__item`,
+            "aria-current": n ? "step" : void 0,
+            "data-testid": `progress-step-${o}`,
+            children: [
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: d(`${a}__circle`, {
+                    [`${a}__circle--active`]: i,
+                    [`${a}__circle--current`]: n
+                  }),
+                  children: i ? /* @__PURE__ */ r(
+                    C,
+                    {
+                      icon: "Success",
+                      "aria-label": b,
+                      color: "currentColor",
+                      width: 20,
+                      height: 20
+                    }
+                  ) : /* @__PURE__ */ r(_, { variant: h.badge, children: o })
+                }
+              ),
+              e.labels && e.labels[t] && /* @__PURE__ */ r("span", { className: `${a}__label`, children: /* @__PURE__ */ r(_, { variant: h.string2, children: e.labels[t] }) })
+            ]
+          }
+        ),
+        t < s - 1 ? /* @__PURE__ */ r("div", { className: `${a}__connector`, "aria-hidden": "true" }) : null
+      ] }, e.labels ? e.labels[t] : t);
+    }) }) }) });
+  }
+);
+I.displayName = "ProgressIndicator";
+export {
+  I as default
+};

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

@@ -0,0 +1,52 @@
+import { ProgressIndicatorProps } from './ProgressIndicator';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        totalSteps: number;
+        currentStep: number;
+    };
+    argTypes: {
+        totalSteps: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+        };
+        currentStep: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+        };
+    };
+};
+export declare const WithLabels: {
+    (props: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        totalSteps: number;
+        currentStep: number;
+    };
+    argTypes: {
+        totalSteps: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+        };
+        currentStep: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+        };
+    };
+};

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

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

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

@@ -0,0 +1 @@
+export { default as ProgressIndicator, type ProgressIndicatorProps } from './ProgressIndicator';

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export * from './patterns/FiltersInline';
 export * from './patterns/SaleCard';
 export * from './patterns/SaleHeaderBanner';
 export * from './patterns/ViewingDetails';
+export * from './components/ProgressIndicator';
 export { default as Footer, type FooterProps } from './site-furniture/Footer/Footer';
 export { default as Header, type HeaderProps } from './site-furniture/Header/Header';
 export * from './types/commonTypes';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
 import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
-import { usePendingState as I } from "./utils/hooks.js";
+import { usePendingState as A } from "./utils/hooks.js";
 import { AuctionStatus as V, LotStatus as b, SupportedLanguages as v } from "./types/commonTypes.js";
 import { default as h } from "./components/Button/Button.js";
 import { ButtonVariants as w } from "./components/Button/types.js";
@@ -28,7 +28,7 @@ import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ce } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as Be } from "./components/Grid/Grid.js";
-import { default as Ae } from "./components/GridItem/GridItem.js";
+import { default as Ie } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as Le } from "./components/GridItem/types.js";
 import { default as be } from "./components/Input/Input.js";
 import { default as ye } from "./components/Link/Link.js";
@@ -54,7 +54,7 @@ import { Tag as it, default as xt } from "./components/Tags/Tags.js";
 import { TextAlignments as gt, TextVariants as ct } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
 import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
-import { default as At } from "./components/TextSymbol/TextSymbol.js";
+import { default as It } from "./components/TextSymbol/TextSymbol.js";
 import { default as Lt } from "./components/Video/Video.js";
 import { default as bt } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as yt } from "./patterns/DetailList/types.js";
@@ -80,47 +80,48 @@ import { default as xo } from "./components/PhoneNumberPicker/PhoneNumberPicker.
 import { default as go } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as So, FilterButtonType as Co } from "./patterns/FiltersInline/types.js";
 import { default as Bo } from "./patterns/SaleCard/SaleCard.js";
-import { SaleCardActions as Ao } from "./patterns/SaleCard/SaleCardActions.js";
+import { SaleCardActions as Io } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardVariants as Lo } from "./patterns/SaleCard/types.js";
 import { default as bo } from "./patterns/ViewingDetails/ViewingDetails.js";
-import { default as yo } from "./site-furniture/Footer/Footer.js";
-import { default as ko } from "./site-furniture/Header/Header.js";
-import { default as Do } from "./components/AddToCalendar/AddToCalendar.js";
-import { default as Ho } from "./components/Article/Article.js";
-import { default as No } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Go } from "./components/Countdown/types.js";
-import { default as Uo } from "./components/Divider/Divider.js";
-import { default as Qo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
-import { default as zo } from "./components/Filter/Filter.js";
-import { default as Yo } from "./components/Filter/FilterInput.js";
-import { default as qo } from "./components/Filter/FilterHeader.js";
-import { default as Ko } from "./components/Pictogram/Pictogram.js";
-import { default as _o } from "./components/TextArea/TextArea.js";
-import { default as er } from "./components/Toast/Toast.js";
-import { ToastProvider as or } from "./components/Toast/ToastContextProvider.js";
-import { useToast as ar } from "./components/Toast/useToast.js";
-import { default as sr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
-import { default as dr } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as pr } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as ir, BidStatusEnum as xr } from "./patterns/BidSnapshot/types.js";
-import { default as gr } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as Sr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as Tr } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
-import { default as Pr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as yo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { default as ko } from "./site-furniture/Footer/Footer.js";
+import { default as Do } from "./site-furniture/Header/Header.js";
+import { default as Ho } from "./components/AddToCalendar/AddToCalendar.js";
+import { default as No } from "./components/Article/Article.js";
+import { default as Go } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as Uo } from "./components/Countdown/types.js";
+import { default as Qo } from "./components/Divider/Divider.js";
+import { default as zo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
+import { default as Yo } from "./components/Filter/Filter.js";
+import { default as qo } from "./components/Filter/FilterInput.js";
+import { default as Ko } from "./components/Filter/FilterHeader.js";
+import { default as _o } from "./components/Pictogram/Pictogram.js";
+import { default as er } from "./components/TextArea/TextArea.js";
+import { default as or } from "./components/Toast/Toast.js";
+import { ToastProvider as ar } from "./components/Toast/ToastContextProvider.js";
+import { useToast as sr } from "./components/Toast/useToast.js";
+import { default as dr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as pr } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as ir } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as nr, BidStatusEnum as gr } from "./patterns/BidSnapshot/types.js";
+import { default as Sr } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as Tr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as Pr } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as Ar } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
 export {
   M as Accordion,
   E as AccordionItem,
   R as AccordionItemVariant,
   U as AccordionVariants,
-  sr as AccountPageHeader,
-  Do as AddToCalendar,
-  Ho as Article,
+  dr as AccountPageHeader,
+  Ho as AddToCalendar,
+  No as Article,
   V as AuctionStatus,
   Yt as AuthState,
-  pr as BidMessage,
-  ir as BidMessageVariants,
-  dr as BidSnapshot,
-  xr as BidStatusEnum,
+  ir as BidMessage,
+  nr as BidMessageVariants,
+  pr as BidSnapshot,
+  gr as BidStatusEnum,
   Q as Breadcrumb,
   h as Button,
   w as ButtonVariants,
@@ -136,32 +137,32 @@ export {
   ao as ComposedModal,
   de as ContentPeek,
   pe as ContentPeekHeightUnits,
-  No as Countdown,
-  Go as CountdownVariants,
-  Tr as DescriptiveRadioButton,
-  Pr as DescriptiveRadioButtonGroup,
+  Go as Countdown,
+  Uo as CountdownVariants,
+  Pr as DescriptiveRadioButton,
+  Ar as DescriptiveRadioButtonGroup,
   ie as Detail,
   bt as DetailList,
   yt as DetailListAlignment,
-  Uo as Divider,
+  Qo as Divider,
   ne as Drawer,
   ce as Dropdown,
   Ce as ErrorBoundary,
   so as ExitGateCard,
   kt as FavoritesCollectionTile,
-  Qo as FavoritingTileButton,
-  zo as Filter,
+  zo as FavoritingTileButton,
+  Yo as Filter,
   So as FilterButtonIconType,
   Co as FilterButtonType,
-  qo as FilterHeader,
-  Yo as FilterInput,
-  gr as FilterMenu,
+  Ko as FilterHeader,
+  qo as FilterInput,
+  Sr as FilterMenu,
   go as FiltersInline,
-  yo as Footer,
+  ko as Footer,
   Be as Grid,
-  Ae as GridItem,
+  Ie as GridItem,
   Le as GridItemAlign,
-  ko as Header,
+  Do as Header,
   Dt as HeroBanner,
   z as Icon,
   F as IconButton,
@@ -178,18 +179,19 @@ export {
   Ue as NavigationItem,
   Qe as NavigationItemTrigger,
   ze as NavigationList,
-  Sr as ObjectTile,
+  Tr as ObjectTile,
   a as PaddingTokens,
   C as Page,
   uo as PageContentWrapper,
   Ye as Pagination,
   xo as PhoneNumberPicker,
-  Ko as Pictogram,
+  _o as Pictogram,
   qe as PinchZoom,
+  yo as ProgressIndicator,
   Ke as Row,
   B as SSRMediaQuery,
   Bo as SaleCard,
-  Ao as SaleCardActions,
+  Io as SaleCardActions,
   Lo as SaleCardVariants,
   Nt as SaleHeaderBanner,
   Gt as SaleHeaderBrowseAuctions,
@@ -211,12 +213,12 @@ export {
   xt as TagsList,
   Ct as Text,
   gt as TextAlignments,
-  _o as TextArea,
+  er as TextArea,
   Bt as TextSymbolVariants,
-  At as TextSymbols,
+  It as TextSymbols,
   ct as TextVariants,
-  er as Toast,
-  or as ToastProvider,
+  or as Toast,
+  ar as ToastProvider,
   qt as UserManagement,
   Lt as Video,
   bo as ViewingDetails,
@@ -233,6 +235,6 @@ export {
   g as px,
   P as ssrMediaQueryStyle,
   c as useNormalizedInputProps,
-  I as usePendingState,
-  ar as useToast
+  A as usePendingState,
+  sr as useToast
 };

package/dist/node_modules/@radix-ui/react-progress/dist/index.js

@@ -0,0 +1,84 @@
+import * as m from "react";
+import { createContextScope as $ } from "../../react-context/dist/index.js";
+import { Primitive as c } from "../node_modules/@radix-ui/react-primitive/dist/index.js";
+import { jsx as l } from "react/jsx-runtime";
+var u = "Progress", d = 100, [I, C] = $(u), [h, R] = I(u), f = m.forwardRef(
+  (r, e) => {
+    const {
+      __scopeProgress: i,
+      value: o = null,
+      max: a,
+      getValueLabel: x = E,
+      ...N
+    } = r;
+    (a || a === 0) && !v(a) && console.error(M(`${a}`, "Progress"));
+    const t = v(a) ? a : d;
+    o !== null && !p(o, t) && console.error(V(`${o}`, "Progress"));
+    const s = p(o, t) ? o : null, b = n(s) ? x(s, t) : void 0;
+    return /* @__PURE__ */ l(h, { scope: i, value: s, max: t, children: /* @__PURE__ */ l(
+      c.div,
+      {
+        "aria-valuemax": t,
+        "aria-valuemin": 0,
+        "aria-valuenow": n(s) ? s : void 0,
+        "aria-valuetext": b,
+        role: "progressbar",
+        "data-state": P(s, t),
+        "data-value": s ?? void 0,
+        "data-max": t,
+        ...N,
+        ref: e
+      }
+    ) });
+  }
+);
+f.displayName = u;
+var g = "ProgressIndicator", _ = m.forwardRef(
+  (r, e) => {
+    const { __scopeProgress: i, ...o } = r, a = R(g, i);
+    return /* @__PURE__ */ l(
+      c.div,
+      {
+        "data-state": P(a.value, a.max),
+        "data-value": a.value ?? void 0,
+        "data-max": a.max,
+        ...o,
+        ref: e
+      }
+    );
+  }
+);
+_.displayName = g;
+function E(r, e) {
+  return `${Math.round(r / e * 100)}%`;
+}
+function P(r, e) {
+  return r == null ? "indeterminate" : r === e ? "complete" : "loading";
+}
+function n(r) {
+  return typeof r == "number";
+}
+function v(r) {
+  return n(r) && !isNaN(r) && r > 0;
+}
+function p(r, e) {
+  return n(r) && !isNaN(r) && r <= e && r >= 0;
+}
+function M(r, e) {
+  return `Invalid prop \`max\` of value \`${r}\` supplied to \`${e}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${d}\`.`;
+}
+function V(r, e) {
+  return `Invalid prop \`value\` of value \`${r}\` supplied to \`${e}\`. The \`value\` prop must be:
+  - a positive number
+  - less than the value passed to \`max\` (or ${d} if no \`max\` prop is set)
+  - \`null\` or \`undefined\` if the progress is indeterminate.
+
+Defaulting to \`null\`.`;
+}
+var D = f;
+export {
+  f as Progress,
+  _ as ProgressIndicator,
+  D as Root,
+  C as createProgressScope
+};

package/dist/node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive/dist/index.js

@@ -0,0 +1,32 @@
+import * as f from "react";
+import "react-dom";
+import { createSlot as l } from "../../react-slot/dist/index.js";
+import { jsx as n } from "react/jsx-runtime";
+var u = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+], w = u.reduce((t, i) => {
+  const o = l(`Primitive.${i}`), r = f.forwardRef((e, m) => {
+    const { asChild: a, ...p } = e, s = a ? o : i;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ n(s, { ...p, ref: m });
+  });
+  return r.displayName = `Primitive.${i}`, { ...t, [i]: r };
+}, {});
+export {
+  w as Primitive
+};

package/dist/node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-slot/dist/index.js

@@ -0,0 +1,49 @@
+import * as l from "react";
+import { composeRefs as m } from "../../../../../react-compose-refs/dist/index.js";
+import { jsx as u } from "react/jsx-runtime";
+// @__NO_SIDE_EFFECTS__
+function b(e) {
+  const r = /* @__PURE__ */ y(e), t = l.forwardRef((o, n) => {
+    const { children: i, ...c } = o, s = l.Children.toArray(i), a = s.find(E);
+    if (a) {
+      const f = a.props.children, d = s.map((p) => p === a ? l.Children.count(f) > 1 ? l.Children.only(null) : l.isValidElement(f) ? f.props.children : null : p);
+      return /* @__PURE__ */ u(r, { ...c, ref: n, children: l.isValidElement(f) ? l.cloneElement(f, void 0, d) : null });
+    }
+    return /* @__PURE__ */ u(r, { ...c, ref: n, children: i });
+  });
+  return t.displayName = `${e}.Slot`, t;
+}
+// @__NO_SIDE_EFFECTS__
+function y(e) {
+  const r = l.forwardRef((t, o) => {
+    const { children: n, ...i } = t;
+    if (l.isValidElement(n)) {
+      const c = S(n), s = C(i, n.props);
+      return n.type !== l.Fragment && (s.ref = o ? m(o, c) : c), l.cloneElement(n, s);
+    }
+    return l.Children.count(n) > 1 ? l.Children.only(null) : null;
+  });
+  return r.displayName = `${e}.SlotClone`, r;
+}
+var g = Symbol("radix.slottable");
+function E(e) {
+  return l.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === g;
+}
+function C(e, r) {
+  const t = { ...r };
+  for (const o in r) {
+    const n = e[o], i = r[o];
+    /^on[A-Z]/.test(o) ? n && i ? t[o] = (...s) => {
+      const a = i(...s);
+      return n(...s), a;
+    } : n && (t[o] = n) : o === "style" ? t[o] = { ...n, ...i } : o === "className" && (t[o] = [n, i].filter(Boolean).join(" "));
+  }
+  return { ...e, ...t };
+}
+function S(e) {
+  let r = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning;
+  return t ? e.ref : (r = Object.getOwnPropertyDescriptor(e, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning, t ? e.props.ref : e.props.ref || e.ref);
+}
+export {
+  b as createSlot
+};

package/dist/scss/componentStyles.scss

@@ -53,6 +53,7 @@
 @use 'components/Toast/toast';
 @use 'components/ExitGateCard/exitGateCard';
 @use 'components/ComposedModal/composedModal';
+@use 'components/ProgressIndicator/progressIndicator';
 @use 'components/DescriptiveRadioButton/descriptiveRadioButton';
 @use 'components/DescriptiveRadioButtonGroup/descriptiveRadioButtonGroup';
 

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

@@ -67,9 +67,6 @@ $lg: #{$px}-input--lg;
       display: flex;
       margin-right: 0.25rem;
       user-select: none;
-      user-select: none;
-      user-select: none;
-      user-select: none;
       white-space: nowrap;
     }
   }

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

@@ -0,0 +1,59 @@
+@use '../../allPartials' as *;
+
+.#{$px}-progress-indicator {
+  &__steps {
+    align-items: flex-start;
+    display: flex;
+    gap: 0;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    gap: $spacing-xsm;
+    position: relative;
+  }
+
+  &__circle {
+    align-items: center;
+    border: 1px solid $pure-black;
+    border-radius: 50%;
+    display: flex;
+    height: 1.5rem;
+    justify-content: center;
+    padding: 0;
+    width: 1.5rem;
+
+    &--active,
+    &--current {
+      background-color: $pure-black;
+      color: $white;
+
+      svg {
+        color: $white;
+      }
+    }
+  }
+
+  &__label {
+    display: none;
+
+    @media (min-width: $breakpoint-md) {
+      display: inline-block;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+
+  &__connector {
+    align-self: center;
+    background: $pure-black;
+    flex: 1 1 0;
+    height: 1px;
+    margin: 0 $spacing-xsm;
+    min-width: 8px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.174.0",
+  "version": "1.175.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -48,6 +48,7 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.11",