@phillips/seldon 1.189.0 → 1.191.0

package/dist/components/Carousel/Carousel.d.ts

@@ -35,10 +35,6 @@ export interface CarouselProps extends ComponentProps<'div'> {
      *  The threshold for slides to be considered in view. A value of 0.1 means that 10% of the slide must be in view for it to be considered in view.
      */
     inViewThreshold?: number;
-    /**
-     * The number of slides to scroll at once.
-     */
-    slidesToScroll?: number;
 }
 type CarouselContextProps = {
     carouselRef: ReturnType<typeof useEmblaCarousel>[0];

package/dist/components/Carousel/Carousel.js

@@ -1,28 +1,27 @@
 import { jsx as c } from "react/jsx-runtime";
-import { createContext as g, forwardRef as I, useEffect as n, useCallback as f } from "react";
-import { getCommonProps as y } from "../../utils/index.js";
-import V from "../../node_modules/classnames/index.js";
-import A from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
-import R from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as S } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-const E = g(null), K = I(
+import { createContext as P, forwardRef as I, useEffect as f, useCallback as m } from "react";
+import { getCommonProps as E } from "../../utils/index.js";
+import y from "../../node_modules/classnames/index.js";
+import S from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import V from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as A } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const R = P(null), K = I(
   ({
-    loop: m = !1,
-    startIndex: u = 0,
-    onSlideChange: a,
+    loop: u = !1,
+    startIndex: d = 0,
+    onSlideChange: o,
     className: p,
-    children: d,
-    columnGap: w,
-    useWheelGestures: x = !1,
-    disableDrag: o = !1,
-    disableNavigationDrag: h = null,
-    inViewThreshold: N = 0.99,
-    slidesToScroll: k = 1,
-    ...t
-  }, v) => {
-    const { className: C, ...b } = y(t, "Carousel");
+    children: w,
+    columnGap: x,
+    useWheelGestures: N = !1,
+    disableDrag: i = !1,
+    disableNavigationDrag: v = null,
+    inViewThreshold: b = 0.99,
+    ...n
+  }, h) => {
+    const { className: g, ...k } = E(n, "Carousel");
     let s = {};
-    switch (h) {
+    switch (v) {
       case "mobile":
         s = { breakpoints: { "(max-width: 960px)": { watchDrag: !1 } } };
         break;
@@ -35,75 +34,82 @@ const E = g(null), K = I(
       default:
         s = {};
     }
-    const [D, e] = R(
+    const [C, e] = V(
       {
-        loop: m,
-        startIndex: u,
-        inViewThreshold: N,
-        ...s,
-        slidesToScroll: k
+        loop: u,
+        startIndex: d,
+        inViewThreshold: b,
+        ...s
       },
       [
-        ...x ? [
-          S({
+        ...N ? [
+          A({
             forceWheelAxis: "x"
           })
         ] : [],
-        A({
+        S({
           snapped: "carousel-item-in-view"
         })
       ]
     );
-    n(() => {
-      o ? e?.reInit({
+    f(() => {
+      i ? e?.reInit({
         watchDrag: () => !1
       }) : e?.reInit({
         watchDrag: () => !0
       });
-    }, [o, e]);
-    const P = f(
-      (r) => {
-        r.key === "ArrowLeft" ? (r.preventDefault(), e?.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e?.scrollNext());
+    }, [i, e]);
+    const D = m(
+      (l) => {
+        if (l.key === "ArrowLeft") {
+          l.preventDefault(), e?.scrollPrev();
+          const r = e?.slideNodes().filter((t) => t === document.activeElement)[0]?.previousElementSibling;
+          r && r?.focus();
+        } else if (l.key === "ArrowRight") {
+          l.preventDefault(), e?.scrollNext();
+          const r = e?.slideNodes().filter((t) => t === document.activeElement)[0]?.nextElementSibling;
+          r && r?.focus();
+        }
       },
       [e]
-    ), l = f(
-      (r) => {
-        if (!r)
+    ), a = m(
+      (l) => {
+        if (!l)
           return;
-        const i = r.slidesInView()?.[0];
-        i !== void 0 && a?.(i);
+        const r = l.slidesInView()?.[0];
+        r !== void 0 && o?.(r);
       },
-      [a]
+      [o]
     );
-    return n(() => {
+    return f(() => {
       if (e)
-        return e.on("slidesInView", l), () => {
-          e.off("slidesInView", l);
+        return e.on("slidesInView", a), () => {
+          e.off("slidesInView", a);
         };
-    }, [e, l]), /* @__PURE__ */ c(
-      E.Provider,
+    }, [e, a]), /* @__PURE__ */ c(
+      R.Provider,
       {
         value: {
-          carouselRef: D,
+          carouselRef: C,
           api: e,
           scrollPrev: () => e?.scrollPrev(),
           scrollNext: () => e?.scrollNext(),
           canScrollPrev: e?.canScrollPrev() ?? !1,
           canScrollNext: e?.canScrollNext() ?? !1,
-          columnGap: w,
-          onSlideChange: a
+          columnGap: x,
+          onSlideChange: o
         },
         children: /* @__PURE__ */ c(
           "div",
           {
-            ref: v,
-            onKeyDownCapture: P,
-            className: V(C, p),
+            ref: h,
+            onKeyDownCapture: D,
+            className: y(g, p),
             role: "region",
             "aria-roledescription": "carousel",
-            ...t,
-            ...b,
-            children: d
+            ...n,
+            ...k,
+            children: w
           }
         )
       }
@@ -112,6 +118,6 @@ const E = g(null), K = I(
 );
 K.displayName = "Carousel";
 export {
-  E as CarouselContext,
+  R as CarouselContext,
   K as default
 };

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

@@ -49,7 +49,6 @@ export declare const CarouselWithMultipleItems: {
     (props: CarouselProps): import("react/jsx-runtime").JSX.Element;
     args: {
         disableNavigationDrag: "desktop";
-        slidesToScroll: number;
     };
     argTypes: {
         slidesToScroll: {

package/dist/components/Carousel/CarouselArrows.js

@@ -1,31 +1,43 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import u from "../../node_modules/classnames/index.js";
-import { forwardRef as p, useCallback as t } from "react";
-import { getCommonProps as C } from "../../utils/index.js";
-import { useCarousel as f } from "./utils.js";
-import a from "../Icon/Icon.js";
-const h = p(({ className: n, ...s }, i) => {
-  const { className: e, ...c } = C(s, "CarouselArrows"), { api: r } = f(), l = t(() => {
-    r && r.scrollPrev(!0);
-  }, [r]), m = t(() => {
-    r && r.scrollNext(!0);
-  }, [r]);
-  return /* @__PURE__ */ d(
+import { forwardRef as f, useCallback as n } from "react";
+import { getCommonProps as p } from "../../utils/index.js";
+import { useCarousel as C } from "./utils.js";
+import t from "../Icon/Icon.js";
+const v = f(({ className: l, ...i }, a) => {
+  const { className: r, ...c } = p(i, "CarouselArrows"), { api: e } = C(), m = n(() => {
+    if (e)
+      if (e?.slidesInView().length <= 1)
+        e.scrollPrev(!0);
+      else {
+        const o = e?.slidesInView();
+        e?.scrollTo(Math.max(0, o[0] - (o.length ?? 1)));
+      }
+  }, [e]), d = n(() => {
+    if (e)
+      if (e?.slidesInView().length <= 1)
+        e?.scrollNext(!0);
+      else {
+        const w = (e?.slidesInView()).slice(-1)[0] + 1;
+        e?.scrollTo(w);
+      }
+  }, [e]);
+  return /* @__PURE__ */ h(
     "div",
     {
-      ref: i,
+      ref: a,
       "aria-roledescription": "carousel-arrow-navigation",
-      className: u(`${e}`, n),
-      ...s,
+      className: u(`${r}`, l),
+      ...i,
       ...c,
       children: [
-        /* @__PURE__ */ o("button", { "data-testid": "prev-arrow", className: `${e}-prev-btn`, onClick: () => l(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(a, { icon: "ChevronLeft", height: "2rem" }) }) }),
-        /* @__PURE__ */ o("button", { "data-testid": "next-arrow", className: `${e}-next-btn`, onClick: () => m(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(a, { icon: "ChevronRight", height: "2rem" }) }) })
+        /* @__PURE__ */ s("button", { "data-testid": "prev-arrow", className: `${r}-prev-btn`, onClick: () => m(), children: /* @__PURE__ */ s("div", { className: `${r}-prev-btn__icon`, children: /* @__PURE__ */ s(t, { icon: "ChevronLeft", height: "2rem" }) }) }),
+        /* @__PURE__ */ s("button", { "data-testid": "next-arrow", className: `${r}-next-btn`, onClick: () => d(), children: /* @__PURE__ */ s("div", { className: `${r}-next-btn__icon`, children: /* @__PURE__ */ s(t, { icon: "ChevronRight", height: "2rem" }) }) })
       ]
     }
   );
 });
-h.displayName = "CarouselArrows";
+v.displayName = "CarouselArrows";
 export {
-  h as default
+  v as default
 };

package/dist/index.d.ts

@@ -98,3 +98,4 @@ export * from './patterns/CountryPicker';
 export * from './components/DescriptiveRadioButton';
 export * from './components/DescriptiveRadioButtonGroup';
 export * from './patterns/TextBanner';
+export * from './patterns/PhoneNumberInput';

package/dist/index.js

@@ -2,11 +2,11 @@ import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidati
 import { default as C } from "./pages/Page.js";
 import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as A } from "./utils/hooks.js";
-import { AuctionStatus as V, LotStatus as b, SupportedLanguages as y } from "./types/commonTypes.js";
-import { default as v } from "./components/Button/Button.js";
+import { AuctionStatus as b, LotStatus as V, SupportedLanguages as y } from "./types/commonTypes.js";
+import { default as k } from "./components/Button/Button.js";
 import { ButtonVariants as w } from "./components/Button/types.js";
 import { default as F } from "./components/IconButton/IconButton.js";
-import { default as M } from "./components/Accordion/Accordion.js";
+import { default as H } from "./components/Accordion/Accordion.js";
 import { default as E } from "./components/Accordion/AccordionItem.js";
 import { AccordionItemVariant as R, AccordionVariants as U } from "./components/Accordion/types.js";
 import { default as Q } from "./components/Breadcrumb/Breadcrumb.js";
@@ -30,12 +30,12 @@ import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as Be } from "./components/Grid/Grid.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 ke } from "./components/Link/Link.js";
-import { LinkVariants as he } from "./components/Link/types.js";
+import { default as Ve } from "./components/Input/Input.js";
+import { default as he } from "./components/Link/Link.js";
+import { LinkVariants as ve } from "./components/Link/types.js";
 import { default as De } from "./components/LinkBlock/LinkBlock.js";
-import { default as He } from "./components/LinkList/LinkList.js";
-import { default as Ne } from "./components/Modal/Modal.js";
+import { default as Ne } from "./components/LinkList/LinkList.js";
+import { default as Me } from "./components/Modal/Modal.js";
 import { default as Ge } from "./components/Navigation/Navigation.js";
 import { default as Ue } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as Qe } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
@@ -56,12 +56,12 @@ import { default as Ct } from "./components/Text/Text.js";
 import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.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 kt } from "./patterns/DetailList/types.js";
-import { default as ht } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
+import { default as Vt } from "./patterns/DetailList/DetailList.js";
+import { DetailListAlignment as ht } from "./patterns/DetailList/types.js";
+import { default as vt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
 import { default as Dt } from "./patterns/HeroBanner/HeroBanner.js";
-import { default as Ht } from "./patterns/TextBanner/TextBanner.js";
-import { default as Nt } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as Nt } from "./patterns/TextBanner/TextBanner.js";
+import { default as Mt } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as Gt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
 import { default as Ut } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
 import { default as Qt } from "./patterns/Social/Social.js";
@@ -82,12 +82,12 @@ import { default as So } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as To, FilterButtonType as Bo } from "./patterns/FiltersInline/types.js";
 import { default as Io } from "./patterns/SaleCard/SaleCard.js";
 import { SaleCardActions as Lo } from "./patterns/SaleCard/SaleCardActions.js";
-import { SaleCardVariants as bo } from "./patterns/SaleCard/types.js";
-import { default as ko } from "./patterns/ViewingDetails/ViewingDetails.js";
-import { default as ho } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { SaleCardVariants as Vo } from "./patterns/SaleCard/types.js";
+import { default as ho } from "./patterns/ViewingDetails/ViewingDetails.js";
+import { default as vo } from "./components/ProgressIndicator/ProgressIndicator.js";
 import { default as Do } from "./site-furniture/Footer/Footer.js";
-import { default as Ho } from "./site-furniture/Header/Header.js";
-import { default as No } from "./components/AddToCalendar/AddToCalendar.js";
+import { default as No } from "./site-furniture/Header/Header.js";
+import { default as Mo } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as Go } from "./components/Article/Article.js";
 import { default as Uo } from "./components/Countdown/Countdown.js";
 import { CountdownVariants as Qo } from "./components/Countdown/types.js";
@@ -108,25 +108,26 @@ import { default as gr } from "./patterns/AccountPageHeader/AccountPageHeader.js
 import { default as Cr } from "./patterns/BidSnapshot/BidSnapshot.js";
 import { default as Br } from "./patterns/BidSnapshot/BidMessage.js";
 import { BidMessageVariants as Ir, BidStatusEnum as Ar } from "./patterns/BidSnapshot/types.js";
-import { default as Vr } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as br } from "./patterns/FilterMenu/FilterMenu.js";
 import { default as yr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as vr } from "./patterns/CountryPicker/CountryPicker.js";
+import { default as kr } from "./patterns/CountryPicker/CountryPicker.js";
+import { default as wr } from "./patterns/PhoneNumberInput/PhoneNumberInput.js";
 export {
-  M as Accordion,
+  H as Accordion,
   E as AccordionItem,
   R as AccordionItemVariant,
   U as AccordionVariants,
   gr as AccountPageHeader,
-  No as AddToCalendar,
+  Mo as AddToCalendar,
   Go as Article,
-  V as AuctionStatus,
+  b as AuctionStatus,
   qt as AuthState,
   Br as BidMessage,
   Ir as BidMessageVariants,
   Cr as BidSnapshot,
   Ar as BidStatusEnum,
   Q as Breadcrumb,
-  v as Button,
+  k as Button,
   w as ButtonVariants,
   Y as Carousel,
   q as CarouselArrows,
@@ -142,43 +143,43 @@ export {
   pe as ContentPeekHeightUnits,
   Uo as Countdown,
   Qo as CountdownVariants,
-  vr as CountryPicker,
+  kr as CountryPicker,
   zo as DescriptiveRadioButton,
   Yo as DescriptiveRadioButtonGroup,
   ie as Detail,
-  bt as DetailList,
-  kt as DetailListAlignment,
+  Vt as DetailList,
+  ht as DetailListAlignment,
   qo as Divider,
   ne as Drawer,
   ge as Dropdown,
   Ce as ErrorBoundary,
   mo as ExitGateCard,
-  ht as FavoritesCollectionTile,
+  vt as FavoritesCollectionTile,
   Ko as FavoritingTileButton,
   _o as Filter,
   To as FilterButtonIconType,
   Bo as FilterButtonType,
   or as FilterHeader,
   er as FilterInput,
-  Vr as FilterMenu,
+  br as FilterMenu,
   So as FiltersInline,
   Do as Footer,
   Be as Grid,
   Ie as GridItem,
   Le as GridItemAlign,
-  Ho as Header,
+  No as Header,
   Dt as HeroBanner,
   z as Icon,
   F as IconButton,
-  be as Input,
-  Nt as LanguageSelector,
-  ke as Link,
+  Ve as Input,
+  Mt as LanguageSelector,
+  he as Link,
   De as LinkBlock,
-  He as LinkList,
-  he as LinkVariants,
+  Ne as LinkList,
+  ve as LinkVariants,
   uo as Loader,
-  b as LotStatus,
-  Ne as Modal,
+  V as LotStatus,
+  Me as Modal,
   Ge as Navigation,
   Ue as NavigationItem,
   Qe as NavigationItemTrigger,
@@ -189,15 +190,16 @@ export {
   C as Page,
   xo as PageContentWrapper,
   Ye as Pagination,
+  wr as PhoneNumberInput,
   co as PhoneNumberPicker,
   sr as Pictogram,
   qe as PinchZoom,
-  ho as ProgressIndicator,
+  vo as ProgressIndicator,
   Ke as Row,
   B as SSRMediaQuery,
   Io as SaleCard,
   Lo as SaleCardActions,
-  bo as SaleCardVariants,
+  Vo as SaleCardVariants,
   Gt as SaleHeaderBanner,
   Ut as SaleHeaderBrowseAuctions,
   _e as Search,
@@ -219,7 +221,7 @@ export {
   Ct as Text,
   ct as TextAlignments,
   dr as TextArea,
-  Ht as TextBanner,
+  Nt as TextBanner,
   Bt as TextSymbolVariants,
   It as TextSymbols,
   gt as TextVariants,
@@ -227,7 +229,7 @@ export {
   ir as ToastProvider,
   Kt as UserManagement,
   Lt as Video,
-  ko as ViewingDetails,
+  ho as ViewingDetails,
   eo as ViewingsList,
   s as defaultYear,
   l as emailValidation,

package/dist/patterns/CountryPicker/CountryPickerModal.js

@@ -1,22 +1,22 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { jsx as o, jsxs as k } from "react/jsx-runtime";
 import { forwardRef as j, useState as S, useEffect as H, useRef as V, useMemo as f } from "react";
-import N from "../../components/Button/Button.js";
-import U from "../../components/Input/Input.js";
-import G from "../../components/Modal/Modal.js";
-import K from "../../components/Text/Text.js";
-import { TextVariants as L } from "../../components/Text/types.js";
+import L from "../../components/Button/Button.js";
+import N from "../../components/Input/Input.js";
+import U from "../../components/Modal/Modal.js";
+import A from "../../components/Text/Text.js";
+import { TextVariants as G } from "../../components/Text/types.js";
 import { countries as v } from "./constants.js";
-import { getSafeCountryCallingCode as O } from "./utils.js";
-import { ButtonVariants as Z } from "../../components/Button/types.js";
-import q from "../../components/Icon/Icon.js";
-import { CountryPickerCountryList as A } from "./CountryPickerCountryList.js";
+import { getSafeCountryCallingCode as K } from "./utils.js";
+import { ButtonVariants as O } from "../../components/Button/types.js";
+import Z from "../../components/Icon/Icon.js";
+import { CountryPickerCountryList as q } from "./CountryPickerCountryList.js";
 const w = ["US", "GB", "HK", "CH"], z = (n, l) => {
   if (!l) return n;
   const d = l.replace(/[.*?^${}()|[\]\\]/g, "\\$&").replace(/\+/g, "");
   if (!d) return n;
   const i = new RegExp(d, "gi");
   return n.filter((u) => {
-    const h = u.name, t = u.code, p = O(t).replace(/\+/g, "");
+    const h = u.name, t = u.code, p = K(t).replace(/\+/g, "");
     return i.test(h) || i.test(t) || i.test(p) || i.test("+" + p);
   });
 }, J = j(
@@ -31,56 +31,55 @@ const w = ["US", "GB", "HK", "CH"], z = (n, l) => {
     baseClassName: t,
     variantConfig: _
   }, p) => {
-    const { value: g, onChange: C, isPhone: E } = _, [c, I] = S(g), x = (e) => v.some((a) => a.code === e);
+    const { value: g, onChange: y, isPhone: E } = _, [c, I] = S(g), C = (e) => v.some((a) => a.code === e);
     H(() => {
       I(g);
     }, [n, g]);
-    const [s, B] = S(""), D = V(null), F = V(null), [P, R] = f(() => {
+    const [s, B] = S(""), D = V(null), F = V(null), [x, P] = f(() => {
       const e = w.map((r) => v.filter(($) => $.code === r)).flat(), a = v.filter((r) => !w.includes(r.code));
       return [
         e,
         // keep original order for prioritized
         a.sort((r, $) => r.name.localeCompare($.name))
       ];
-    }, []), M = f(() => z(P, s), [P, s]), k = f(() => z(R, s), [R, s]), T = f(() => {
+    }, []), M = f(() => z(x, s), [x, s]), R = f(() => z(P, s), [P, s]), T = f(() => {
       const e = {};
-      return k.forEach((a) => {
+      return R.forEach((a) => {
         const r = a.name[0].toUpperCase();
         e[r] || (e[r] = []), e[r].push(a);
       }), e;
-    }, [k]);
+    }, [R]);
     return /* @__PURE__ */ o(
-      G,
+      U,
       {
         isOpen: n,
         onClose: l,
         "data-testid": "country-picker-modal",
         className: `${t}__modal`,
         ref: p,
-        children: /* @__PURE__ */ y("div", { className: `${t}__wrapper`, children: [
-          /* @__PURE__ */ y("div", { className: `${t}__header`, children: [
-            /* @__PURE__ */ o(K, { variant: L.heading3, className: `${t}__header-text`, children: m }),
-            /* @__PURE__ */ y("div", { className: `${t}__input-wrapper`, children: [
-              /* @__PURE__ */ o("span", { className: `${t}__input-icon`, "aria-hidden": "true", children: /* @__PURE__ */ o(q, { icon: "Search", width: 16, height: 16, color: "currentColor" }) }),
-              /* @__PURE__ */ o(
-                U,
-                {
-                  id: "countrySearch",
-                  type: "search",
-                  labelText: d,
-                  placeholder: i,
-                  value: s,
-                  onChange: (e) => {
-                    B(e.target.value);
-                  },
-                  autoFocus: !0,
-                  className: `${t}__input`
-                }
-              )
-            ] })
+        children: /* @__PURE__ */ k("div", { className: `${t}__wrapper`, children: [
+          /* @__PURE__ */ k("div", { className: `${t}__header`, children: [
+            /* @__PURE__ */ o(A, { variant: G.heading3, className: `${t}__header-text`, children: m }),
+            /* @__PURE__ */ o("div", { className: `${t}__input-wrapper`, children: /* @__PURE__ */ o(
+              N,
+              {
+                id: "countrySearch",
+                type: "search",
+                labelText: d,
+                hideLabel: !0,
+                placeholder: i,
+                value: s,
+                onChange: (e) => {
+                  B(e.target.value);
+                },
+                autoFocus: !0,
+                className: `${t}__input`,
+                inputAdornment: /* @__PURE__ */ o("span", { "aria-hidden": "true", children: /* @__PURE__ */ o(Z, { icon: "Search", width: 16, height: 16, color: "$cta-inactive" }) })
+              }
+            ) })
           ] }),
           /* @__PURE__ */ o(
-            A,
+            q,
             {
               filteredPrioritized: M,
               groupedCountries: T,
@@ -92,16 +91,16 @@ const w = ["US", "GB", "HK", "CH"], z = (n, l) => {
             }
           ),
           /* @__PURE__ */ o("div", { className: `${t}__button-container`, children: /* @__PURE__ */ o(
-            N,
+            L,
             {
               onClick: () => {
-                c && (E ? x(c) && C(c) : x(c) || C(c), l?.());
+                c && (E ? C(c) && y(c) : C(c) || y(c), l?.());
               },
               className: `${t}__button`,
               "data-testid": "country-picker-modal-select-button",
               ref: D,
               type: "button",
-              variant: Z.secondary,
+              variant: O.secondary,
               isDisabled: !c,
               children: u
             }

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -1,20 +1,20 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import x from "../../components/Icon/Icon.js";
 import { TextVariants as m } from "../../components/Text/types.js";
-import p from "../../components/Text/Text.js";
+import f from "../../components/Text/Text.js";
 import i from "../../node_modules/classnames/index.js";
 import { countries as y } from "./constants.js";
 import { forwardRef as k } from "react";
 const w = k(
-  ({ labelText: c, displayValue: f, onClick: $, hasError: e = !1, errorMsg: o, id: n, className: h, baseClassName: r, variantConfig: u }, v) => {
-    const { isPhone: l, value: g } = u, d = o ? `${r}__trigger-error-msg` : void 0, _ = l ? g : y.filter((s) => s.name === g)?.[0]?.code;
+  ({ labelText: c, displayValue: p, onClick: $, hasError: o = !1, errorMsg: e, id: n, className: h, baseClassName: r, variantConfig: u }, v) => {
+    const { isPhone: l, value: g } = u, d = e ? `${r}__trigger-error-msg` : void 0, _ = l ? g : y.filter((s) => s.name === g)?.[0]?.code;
     return /* @__PURE__ */ a("div", { className: i(`${r}__trigger`, h), children: [
       /* @__PURE__ */ t(
-        p,
+        f,
         {
           variant: m.string2,
           className: i(`${r}__trigger-label`, {
-            [`${r}__trigger-label--error`]: e
+            [`${r}__trigger-label--error`]: o
           }),
           id: n ? `${n}-label` : void 0,
           children: c
@@ -26,10 +26,10 @@ const w = k(
           ref: v,
           type: "button",
           "aria-label": c,
-          "aria-invalid": e,
+          "aria-invalid": o,
           "aria-describedby": d,
           className: i(`${r}__trigger-btn`, {
-            [`${r}__trigger-btn--error`]: e,
+            [`${r}__trigger-btn--error`]: o,
             [`${r}__trigger-btn--is-phone`]: l
           }),
           onClick: $,
@@ -44,20 +44,12 @@ const w = k(
                 className: `${r}__trigger-flag`
               }
             ),
-            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-text`), children: f }),
-            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-icon`), children: /* @__PURE__ */ t(x, { icon: "ChevronDown", color: "$pure-black", width: 16, height: 16 }) })
+            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-text`), children: p }),
+            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-icon`), children: /* @__PURE__ */ t(x, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
           ]
         }
       ),
-      e && o && /* @__PURE__ */ t(
-        p,
-        {
-          variant: m.string2,
-          className: i(`${r}__trigger-error-msg`),
-          id: d,
-          children: o
-        }
-      )
+      o && e && /* @__PURE__ */ t(f, { variant: m.string2, className: `${r}__trigger-error-msg`, id: d, children: e })
     ] });
   }
 );

package/dist/patterns/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,51 @@
+import { default as React, ComponentProps } from 'react';
+import { CountryCode } from './types';
+export interface PhoneNumberInputProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * The current phone number value.
+     * This represents the phone number entered by the user without country code.
+     */
+    value?: string;
+    /**
+     * The country code associated with the phone number.
+     */
+    countryCode?: CountryCode;
+    /**
+     * Callback function triggered when the phone number or country code changes.
+     * @param value - The updated phone number value.
+     * @param countryCode - The updated country code.
+     */
+    handleValueChange?: (rawValue: string, countryCode: CountryCode) => void;
+    /**
+     * The label for the combined fields.
+     */
+    label?: string;
+    /**
+     * Indicates whether the input field is required.
+     * If true, the field will be marked as required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether there is an error in the input field.
+     */
+    error?: boolean;
+    /**
+     * The error message to display when there is an error.
+     */
+    errorText?: string;
+    /**
+     * Indicates whether the input field is disabled.
+     */
+    disabled?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * A component for entering phone numbers with country code selection.
+ *
+ * [Figma Link](https://www.figma.com/design/kSxOhnqIhilZ9hIJd3bPgP/RW-Registration?node-id=6101-43645&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-PhoneNumberInput--overview)
+ */
+declare const PhoneNumberInput: React.ForwardRefExoticComponent<Omit<PhoneNumberInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default PhoneNumberInput;

package/dist/patterns/PhoneNumberInput/PhoneNumberInput.js

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

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

@@ -0,0 +1,49 @@
+import { PhoneNumberInputProps } from './PhoneNumberInput';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<PhoneNumberInputProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: Partial<PhoneNumberInputProps>): import("react/jsx-runtime").JSX.Element;
+    args: {
+        value: string;
+        countryCode: string;
+        label: string;
+        required: boolean;
+        disabled: boolean;
+        error: boolean;
+        errorText: string;
+    };
+    argTypes: {
+        value: {
+            control: string;
+            description: string;
+        };
+        countryCode: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        error: {
+            control: string;
+            description: string;
+        };
+        errorText: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export declare const InDrawerWithControllerAndValidation: () => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/PhoneNumberInput/PhoneNumberInput.test.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+import { countries } from '../CountryPicker/constants';
+export type CountryCode = (typeof countries)[number]['code'];

package/dist/scss/_vars.scss

@@ -86,7 +86,7 @@ $off-white: $grey-25;
 
 // --- Legacy Notification color palette ---
 $error-red: $highlight-red;
-$error-pink: $highlight-purple;
+$error-pink: $highlight-red;
 $warn-yellow: $highlight-yellow;
 $post-sale-pink: $highlight-purple;
 $cta-blue: $highlight-blue;

package/dist/scss/_vars.scss.js

@@ -86,7 +86,7 @@ $off-white: $grey-25;
 
 // --- Legacy Notification color palette ---
 $error-red: $highlight-red;
-$error-pink: $highlight-purple;
+$error-pink: $highlight-red;
 $warn-yellow: $highlight-yellow;
 $post-sale-pink: $highlight-purple;
 $cta-blue: $highlight-blue;

package/dist/scss/componentStyles.scss

@@ -90,3 +90,4 @@
 @use 'components/AddToCalendar/addToCalendar';
 @use 'components/NotificationBanner/notificationBanner';
 @use 'patterns/TextBanner/textBanner';
+@use 'patterns/PhoneNumberInput/phoneNumberInput';

package/dist/scss/patterns/CountryPicker/_countryPickerModal.scss

@@ -83,18 +83,6 @@
     }
   }
 
-  &__input-icon {
-    align-items: center;
-    color: $dark-gray;
-    display: flex;
-    left: $spacing-xsm;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-  }
-
   .#{$px}-country-picker__input-wrapper .seldon-input__label {
     border: 0;
     height: 1px;

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

@@ -7,9 +7,11 @@
     width: 100%;
 
     &-label {
-      color: $soft-black;
+      @include text($string2);
+
+      color: $pure-black;
       font-variation-settings: 'wght' 600;
-      margin-bottom: $spacing-micro;
+      margin-bottom: $spacing-xsm;
 
       &--error {
         color: $error-red;
@@ -17,11 +19,13 @@
     }
 
     &-btn {
+      @include text($string2);
+
       align-items: center;
       appearance: none;
-      background: $white-100;
-      border: 1px solid $light-gray;
-      border-radius: 6px;
+      background: $white;
+      border: 1px solid $black-100;
+      border-radius: 0.1875rem;
       box-sizing: border-box;
       cursor: pointer;
       display: flex;
@@ -29,9 +33,6 @@
       font-variation-settings: 'wght' 600;
       justify-content: space-between;
       padding: $spacing-xsm;
-      transition:
-        border-color 0.2s,
-        box-shadow 0.2s;
       width: 100%;
 
       &:focus-visible {
@@ -42,11 +43,12 @@
 
       &--error {
         border-color: $error-red;
+        box-shadow: inset 0 0 3px 3px $error-pink;
       }
     }
 
     &-text {
-      color: $soft-black;
+      color: $pure-black;
       flex: 1;
       overflow: hidden;
       text-align: left;
@@ -58,11 +60,29 @@
       align-items: center;
       display: flex;
       margin-left: $spacing-sm;
+
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        width: 1.25rem;
+      }
+
+      @media (min-width: $breakpoint-xl) {
+        height: 1.5rem;
+        width: 1.5rem;
+      }
     }
 
     &-error-msg {
-      color: $error-red;
+      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 {

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

@@ -0,0 +1,68 @@
+@use '../../allPartials' as *;
+
+.#{$px}-phone-number-input {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-xsm;
+    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;
+    min-width: 150px; // just big enough for flag and 3 digit code
+  }
+
+  &__input {
+    flex: 1 1 75%;
+    flex-grow: 1;
+    margin-top: calc(var(--string-line-height-size2) + 0.5rem);
+  }
+
+  @media screen and (min-width: $breakpoint-xl) {
+    &__wrapper {
+      align-items: center;
+    }
+
+    &__country-picker {
+      flex: 0 0 40%;
+      min-width: 0;
+    }
+
+    &__input {
+      flex: 1 1 60%;
+      margin-top: calc(var(--string-line-height-size2) + 1rem);
+      min-width: 0;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.189.0",
+  "version": "1.191.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -124,6 +124,7 @@
     "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",