@phillips/seldon 1.228.0 → 1.230.0

package/dist/components/Input/Input.js

@@ -1,52 +1,53 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import * as z from "react";
-import r from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as F } from "../../utils/index.js";
-import { TextVariants as M } from "../Text/types.js";
-import V from "../Text/Text.js";
-const q = z.forwardRef(
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import * as _ from "react";
+import l from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
+import { TextVariants as F } from "../Text/types.js";
+import H from "../Text/Text.js";
+import { getInputClassNames as M } from "./utils.js";
+const q = _.forwardRef(
   ({
     className: p,
-    inputAdornment: i,
-    adornmentPosition: l = "start",
-    defaultValue: _,
-    disabled: h,
+    inputAdornment: r,
+    adornmentPosition: m = "start",
+    defaultValue: b,
+    disabled: f,
     hideLabel: w,
-    id: a,
-    inline: b,
-    invalid: f,
-    invalidText: x,
-    labelText: v,
-    onChange: y,
-    onClick: N,
-    placeholder: I,
+    id: n,
+    inline: N,
+    invalid: x,
+    invalidText: y,
+    labelText: I,
+    onChange: v,
+    onClick: T,
+    placeholder: C,
     readOnly: d,
-    size: T = "md",
-    type: m = "text",
-    value: C,
-    warn: P,
-    warnText: j,
-    isSkeletonLoading: s,
-    ...o
-  }, k) => {
-    const e = F({
-      disabled: h,
-      id: a,
-      invalid: f,
-      invalidText: x,
+    size: P = "md",
+    type: o = "text",
+    value: j,
+    warn: k,
+    warnText: E,
+    isSkeletonLoading: i,
+    ...u
+  }, R) => {
+    const e = z({
+      disabled: f,
+      id: n,
+      invalid: x,
+      invalidText: y,
       readOnly: d,
-      type: m,
-      warn: P,
-      warnText: j
-    }), R = r(`${t}-${m}-input`, `${t}-input`, `${t}-input--${T}`, {
-      [`${t}-input--inline`]: b,
+      type: o,
+      warn: k,
+      warnText: E
+    }), V = l(`${t}-${o}-input`, `${t}-input`, `${t}-input--${P}`, {
+      [`${t}-input--inline`]: N,
       [`${t}-input--readonly`]: d,
       [`${t}-input--disabled`]: e.disabled,
       [`${t}-input--invalid`]: e.invalid,
       [`${t}-input--warn`]: e.warn,
       [`${p}__wrapper`]: p,
-      [`${t}-input--hidden`]: o.hidden
-    }), u = [
+      [`${t}-input--hidden`]: u.hidden
+    }), a = M(), c = [
       "text",
       "number",
       "password",
@@ -60,40 +61,40 @@ const q = z.forwardRef(
       "time",
       "week"
     ].includes(e.type ?? ""), $ = {
-      className: i && u ? r(`${t}-input__wrapper__input`, p, { [`${t}-skeleton`]: s }) : r(`${t}-input__input`, p, { [`${t}-skeleton`]: s }),
-      "data-testid": a,
+      className: r && c ? l(a.wrapperInput, p, { [`${t}-skeleton`]: i }) : l(a.input, p, { [`${t}-skeleton`]: i }),
+      "data-testid": n,
       disabled: e.disabled,
-      id: a,
-      onChange: y,
-      onClick: N,
-      placeholder: s ? "" : I,
+      id: n,
+      onChange: v,
+      onClick: T,
+      placeholder: i ? "" : C,
       readOnly: d,
-      ref: k,
+      ref: R,
       type: e.type,
-      ...e.type !== "checkbox" && e.type !== "radio" ? { value: C, defaultValue: _ } : {},
-      ...o
+      ...e.type !== "checkbox" && e.type !== "radio" ? { value: j, defaultValue: b } : {},
+      ...u
     };
-    return /* @__PURE__ */ c("div", { className: R, children: [
-      /* @__PURE__ */ n(
-        V,
+    return /* @__PURE__ */ h("div", { className: V, children: [
+      /* @__PURE__ */ s(
+        H,
         {
           element: "label",
-          variant: M.labelMedium,
-          className: r(`${t}-input__label`, {
-            [`${t}-input__label--hidden`]: w,
-            [`${t}-skeleton`]: s
+          variant: F.labelMedium,
+          className: l(a.label, {
+            [a.labelHidden]: w,
+            [a.skeleton]: i
           }),
-          "data-testid": `label-${a}`,
-          htmlFor: a,
-          children: v
+          "data-testid": `label-${n}`,
+          htmlFor: n,
+          children: I
         }
       ),
-      i && u ? /* @__PURE__ */ c("div", { className: `${t}-input__wrapper`, "data-testid": `wrapper-${a}`, children: [
-        l === "start" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${a}`, children: i }),
-        /* @__PURE__ */ n("input", { ...$ }),
-        l === "end" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${a}`, children: i })
-      ] }) : /* @__PURE__ */ n("input", { ...$ }),
-      e.validation ? e.validation : /* @__PURE__ */ n("p", { className: `${t}-input__empty-validation`, children: " " })
+      r && c ? /* @__PURE__ */ h("div", { className: a.wrapper, "data-testid": `wrapper-${n}`, children: [
+        m === "start" && /* @__PURE__ */ s("span", { className: a.adornment, id: "adornment", "data-testid": `adornment-${n}`, children: r }),
+        /* @__PURE__ */ s("input", { ...$ }),
+        m === "end" && /* @__PURE__ */ s("span", { className: a.adornment, id: "adornment", "data-testid": `adornment-${n}`, children: r })
+      ] }) : /* @__PURE__ */ s("input", { ...$ }),
+      e.validation ? e.validation : /* @__PURE__ */ s("p", { className: a.emptyValidation, children: " " })
     ] });
   }
 );

package/dist/components/Input/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const getInputClassNames: () => {
+    readonly adornment: "seldon-input__wrapper__adornment";
+    readonly emptyValidation: "seldon-input__empty-validation";
+    readonly input: "seldon-input__input";
+    readonly label: "seldon-input__label";
+    readonly labelHidden: "seldon-input__label--hidden";
+    readonly skeleton: "seldon-skeleton";
+    readonly validation: "seldon-input__validation";
+    readonly wrapper: "seldon-input__wrapper";
+    readonly wrapperInput: "seldon-input__wrapper__input";
+};

package/dist/components/Input/utils.js

@@ -0,0 +1,108 @@
+import { px as p } from "../../utils/index.js";
+import "react/jsx-runtime";
+import "../../providers/SeldonProvider/utils.js";
+import "react";
+import "../Button/Button.js";
+import "../IconButton/IconButton.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/AccordionItem.js";
+import "../../node_modules/classnames/index.js";
+import "../Icon/Icon.js";
+import "../Carousel/Carousel.js";
+import "../Carousel/CarouselArrows.js";
+import "../Carousel/CarouselContent.js";
+import "../Carousel/CarouselItem.js";
+import "../Carousel/CarouselDots.js";
+import "../Collapsible/Collapsible.js";
+import "../Collapsible/CollapsibleContent.js";
+import "../Collapsible/CollapsibleTrigger.js";
+import "../ContentPeek/ContentPeek.js";
+import "../Detail/Detail.js";
+import "../Drawer/Drawer.js";
+import "../Dropdown/Dropdown.js";
+import "../Grid/Grid.js";
+import "../GridItem/GridItem.js";
+import "./Input.js";
+import "../Link/Link.js";
+import "../Link/types.js";
+import "../LinkBlock/LinkBlock.js";
+import "../LinkList/LinkList.js";
+import "../Modal/Modal.js";
+import "../Navigation/Navigation.js";
+import "../Navigation/NavigationItem/NavigationItem.js";
+import "../Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import "../Navigation/NavigationList/NavigationList.js";
+import "../Pagination/Pagination.js";
+import "../PinchZoom/PinchZoom.js";
+import "../Row/Row.js";
+import "../Search/Search.js";
+import "../SeldonImage/SeldonImage.js";
+import "../Select/Select.js";
+import "../SplitPanel/SplitPanel.js";
+import "../Tabs/TabsContainer.js";
+import "../Tabs/TabsContent.js";
+import "../Tags/Tags.js";
+import "../Text/Text.js";
+import "../TextSymbol/TextSymbol.js";
+import "../Video/Video.js";
+import "../../patterns/DetailList/DetailList.js";
+import "../../patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
+import "../../patterns/HeroBanner/HeroBanner.js";
+import "../../patterns/TextBanner/TextBanner.js";
+import "../../patterns/LanguageSelector/LanguageSelector.js";
+import "../../patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import "../../patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import "../../patterns/Social/Social.js";
+import "../../patterns/Subscribe/Subscribe.js";
+import "../../patterns/UserManagement/UserManagement.js";
+import "../../patterns/ViewingsList/StatefulViewingsList.js";
+import "../../patterns/ViewingsList/ViewingsList.js";
+import "../ComboBox/ComboBox.js";
+import "../ComposedModal/ComposedModal.js";
+import "../ExitGateCard/ExitGateCard.js";
+import "../Loader/Loader.js";
+import "../PageContentWrapper/PageContentWrapper.js";
+import "../../patterns/FiltersInline/FilterButton.js";
+import "../../patterns/FiltersInline/FiltersInline.js";
+import "../../patterns/SaleCard/SaleCard.js";
+import "../../patterns/SaleCard/SaleCardActions.js";
+import "../../patterns/ViewingDetails/ViewingDetails.js";
+import "../ProgressIndicator/ProgressIndicator.js";
+import "../../site-furniture/Header/Header.js";
+import "../AddToCalendar/AddToCalendar.js";
+import "../Article/Article.js";
+import "../Countdown/Countdown.js";
+import "../DescriptiveRadioButton/DescriptiveRadioButton.js";
+import "../DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import "../Divider/Divider.js";
+import "../FavoritingTileButton/FavoritingTileButton.js";
+import "../Filter/Filter.js";
+import "../Filter/FilterInput.js";
+import "../Filter/FilterHeader.js";
+import "../NotificationBanner/NotificationBanner.js";
+import "../Pictogram/Pictogram.js";
+import "../TextArea/TextArea.js";
+import "../Toast/Toast.js";
+import "../Toast/ToastContextProvider.js";
+import "../../patterns/AccountPageHeader/AccountPageHeader.js";
+import "../../patterns/BidSnapshot/BidSnapshot.js";
+import "../../patterns/FilterMenu/FilterMenu.js";
+import "../../patterns/ObjectTile/ObjectTile.js";
+import "../../patterns/CountryPicker/CountryPicker.js";
+import "../../patterns/ProgressWizard/ProgressWizard.js";
+import "../../patterns/ProgressWizard/types.js";
+import "../../patterns/PhoneNumberInput/PhoneNumberInput.js";
+const Lp = () => ({
+  adornment: `${p}-input__wrapper__adornment`,
+  emptyValidation: `${p}-input__empty-validation`,
+  input: `${p}-input__input`,
+  label: `${p}-input__label`,
+  labelHidden: `${p}-input__label--hidden`,
+  skeleton: `${p}-skeleton`,
+  validation: `${p}-input__validation`,
+  wrapper: `${p}-input__wrapper`,
+  wrapperInput: `${p}-input__wrapper__input`
+});
+export {
+  Lp as getInputClassNames
+};

package/dist/components/Select/Select.js

@@ -1,86 +1,87 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import * as k from "react";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as g from "react";
 import n from "../../node_modules/classnames/index.js";
-import { px as e, useNormalizedInputProps as z } from "../../utils/index.js";
+import { px as e, useNormalizedInputProps as k } from "../../utils/index.js";
 import { SelectVariants as c } from "./types.js";
-import D from "../Icon/Icon.js";
-import { TextVariants as F } from "../Text/types.js";
-import I from "../Text/Text.js";
-const M = k.forwardRef(
+import z from "../Icon/Icon.js";
+import { TextVariants as D } from "../Text/types.js";
+import F from "../Text/Text.js";
+import { getInputClassNames as H } from "../Input/utils.js";
+const M = g.forwardRef(
   ({
-    children: m,
-    className: i,
-    defaultValue: d,
-    disabled: u,
-    hideLabel: $,
+    children: d,
+    className: s,
+    defaultValue: u,
+    disabled: $,
+    hideLabel: f,
     id: t,
-    showIcon: r = !0,
-    variant: _ = c.default,
-    inline: f,
-    invalid: b,
+    showIcon: o = !0,
+    variant: b = c.default,
+    inline: C,
+    invalid: _,
     invalidText: v,
-    labelText: h,
-    onChange: w,
-    onClick: g,
-    readOnly: o,
-    size: x = "md",
-    value: C,
+    labelText: w,
+    onChange: x,
+    onClick: q,
+    readOnly: p,
+    size: N = "md",
+    value: h,
     warn: y,
-    warnText: N,
-    isStandalone: S = !1,
-    ...j
+    warnText: S,
+    isStandalone: j = !1,
+    ...I
   }, P) => {
-    const l = "select", a = z({
-      disabled: u,
+    const i = "select", a = k({
+      disabled: $,
       id: t,
-      invalid: b,
+      invalid: _,
       invalidText: v,
-      readOnly: o,
-      type: l,
+      readOnly: p,
+      type: i,
       warn: y,
-      warnText: N
-    }), R = n(`${e}-${l}-input`, `${e}-input`, `${e}-input--${x}`, {
-      [`${e}-input--inline`]: f,
-      [`${e}-input--readonly`]: o,
+      warnText: S
+    }), l = H(), R = n(`${e}-${i}-input`, `${e}-input`, `${e}-input--${N}`, {
+      [`${e}-input--inline`]: C,
+      [`${e}-input--readonly`]: p,
       [`${e}-input--disabled`]: a.disabled,
       [`${e}-input--invalid`]: a.invalid,
       [`${e}-input--warn`]: a.warn,
-      [`${i}__wrapper`]: i,
-      [`${e}-${l}-input__standalone`]: S
-    }), T = n(i, `${e}-input__input`, {
-      [`${e}-input__select--tertiary`]: _ === c.tertiary
+      [`${s}__wrapper`]: s,
+      [`${e}-${i}-input__standalone`]: j
+    }), T = n(s, l.input, {
+      [`${e}-input__select--tertiary`]: b === c.tertiary
     }), V = n(`${e}-select-container`, {
-      [`${e}-select-container--show__icon`]: r
+      [`${e}-select-container--show__icon`]: o
     });
-    return /* @__PURE__ */ p("div", { className: R, children: [
-      /* @__PURE__ */ s(
-        I,
+    return /* @__PURE__ */ m("div", { className: R, children: [
+      /* @__PURE__ */ r(
+        F,
         {
           element: "label",
-          variant: F.labelMedium,
+          variant: D.labelMedium,
           "data-testid": `${t}-label`,
           htmlFor: t,
-          className: n(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
-          children: h
+          className: n(l.label, { [l.labelHidden]: f }),
+          children: w
         }
       ),
-      /* @__PURE__ */ p("div", { className: V, children: [
-        /* @__PURE__ */ s(
+      /* @__PURE__ */ m("div", { className: V, children: [
+        /* @__PURE__ */ r(
           "select",
           {
             className: T,
             "data-testid": t,
-            defaultValue: d,
+            defaultValue: u,
             disabled: a.disabled,
             id: t,
-            onChange: w,
+            onChange: x,
             ref: P,
-            value: C,
-            ...j,
-            children: m
+            value: h,
+            ...I,
+            children: d
           }
         ),
-        r ? /* @__PURE__ */ s(D, { icon: "ChevronDown" }) : null
+        o ? /* @__PURE__ */ r(z, { icon: "ChevronDown" }) : null
       ] }),
       a.validation
     ] });

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -1,70 +1,71 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import k from "../../components/Icon/Icon.js";
 import { TextVariants as w } 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 b } from "react";
-import { useNormalizedInputProps as I, px as T } from "../../utils/index.js";
-const j = b(
+import m from "../../components/Text/Text.js";
+import i from "../../node_modules/classnames/index.js";
+import { countries as I } from "./constants.js";
+import { forwardRef as P } from "react";
+import { useNormalizedInputProps as T } from "../../utils/index.js";
+import { getInputClassNames as N } from "../../components/Input/utils.js";
+const V = P(
   ({
-    labelText: g,
-    ariaLabel: m = g,
-    displayValue: _,
-    onClick: f,
+    labelText: d,
+    ariaLabel: s = d,
+    displayValue: f,
+    onClick: _,
     hasError: n = !1,
-    errorMsg: s,
+    errorMsg: u,
     id: o,
-    className: u,
+    className: h,
     baseClassName: r,
-    variantConfig: h
-  }, $) => {
-    const { isPhone: l, value: c } = h, e = I({
+    variantConfig: $
+  }, v) => {
+    const { isPhone: l, value: a } = $, e = T({
       id: "country-picker-trigger-input",
       invalid: n,
-      invalidText: s,
+      invalidText: u,
       type: "text"
-    }), v = e.invalidId, a = l ? c : P.filter((y) => y.name === c)?.[0]?.code, x = () => e.validation ? e.validation : /* @__PURE__ */ i("p", { className: `${T}-input__empty-validation`, children: " " });
-    return /* @__PURE__ */ d("div", { className: t(`${r}__trigger`, u), children: [
-      /* @__PURE__ */ i(
-        p,
+    }), c = N(), y = e.invalidId, g = l ? a : I.filter((b) => b.name === a)?.[0]?.code, x = () => e.validation ? e.validation : /* @__PURE__ */ t("p", { className: c.emptyValidation, children: " " });
+    return /* @__PURE__ */ p("div", { className: i(`${r}__trigger`, h), children: [
+      /* @__PURE__ */ t(
+        m,
         {
           element: "label",
           variant: w.labelMedium,
-          className: t(`${r}__trigger-label`, {
+          className: i(`${r}__trigger-label`, c.label, {
             [`${r}__trigger-label--error`]: n
           }),
           id: o ? `${o}-label` : void 0,
-          children: g
+          children: d
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ p(
         "button",
         {
-          ref: $,
+          ref: v,
           type: "button",
-          "aria-label": m,
+          "aria-label": s,
           "aria-invalid": e.invalid,
-          "aria-describedby": v,
-          className: t(`${r}__trigger-btn`, {
+          "aria-describedby": y,
+          className: i(`${r}__trigger-btn`, c.input, {
             [`${r}__trigger-btn--error`]: n,
             [`${r}__trigger-btn--is-phone`]: l
           }),
-          onClick: f,
+          onClick: _,
           "data-testid": "country-picker-trigger",
           id: o,
           children: [
-            a && /* @__PURE__ */ i("span", { className: `${r}__trigger-flag`, children: /* @__PURE__ */ i(
+            g && /* @__PURE__ */ t("span", { className: `${r}__trigger-flag`, children: /* @__PURE__ */ t(
               "img",
               {
-                src: `https://flagcdn.com/h20/${a.toLowerCase()}.png`,
-                srcSet: `https://flagcdn.com/h40/${a.toLowerCase()}.png 2x`,
-                alt: `${c} flag`,
+                src: `https://flagcdn.com/h20/${g.toLowerCase()}.png`,
+                srcSet: `https://flagcdn.com/h40/${g.toLowerCase()}.png 2x`,
+                alt: `${a} flag`,
                 className: `${r}__trigger-flag-img`
               }
             ) }),
-            /* @__PURE__ */ i(p, { className: t(`${r}__trigger-text`), children: _ }),
-            /* @__PURE__ */ i("span", { className: t(`${r}__trigger-icon`), children: /* @__PURE__ */ i(k, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
+            /* @__PURE__ */ t(m, { className: i(`${r}__trigger-text`), children: f }),
+            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-icon`), children: /* @__PURE__ */ t(k, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
           ]
         }
       ),
@@ -72,7 +73,7 @@ const j = b(
     ] });
   }
 );
-j.displayName = "CountryPickerTrigger";
+V.displayName = "CountryPickerTrigger";
 export {
-  j as default
+  V as default
 };

package/dist/patterns/PhoneNumberInput/PhoneNumberInput.js

@@ -2,9 +2,9 @@ import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import b, { forwardRef as _ } from "react";
 import { getCommonProps as P, px as x, useNormalizedInputProps as I } from "../../utils/index.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 L from "../CountryPicker/CountryPicker.js";
+import S from "../../components/Input/Input.js";
+import { getSafeCountryCallingCode as T } from "../CountryPicker/utils.js";
 import { countries as j } from "../CountryPicker/constants.js";
 const k = _(
   ({
@@ -41,11 +41,11 @@ const k = _(
             }
           ),
           /* @__PURE__ */ e(
-            S,
+            L,
             {
               triggerLabelText: n,
               triggerAriaLabel: `${n.replace("*", "")} country`,
-              triggerDisplayValue: i ? `+${L(i.code)}` : "",
+              triggerDisplayValue: i ? `+${T(i.code)}` : "",
               hasTriggerError: !!a,
               modalTitle: "Country code",
               searchInputLabel: "Search country",
@@ -58,7 +58,7 @@ const k = _(
           )
         ] }),
         /* @__PURE__ */ e("div", { className: `${t}__input`, children: /* @__PURE__ */ e(
-          T,
+          S,
           {
             className: `${t}__input-phone`,
             id: "phone-input",
@@ -71,7 +71,8 @@ const k = _(
             invalid: !!a,
             disabled: y,
             invalidText: "",
-            "aria-describedby": r.invalidId
+            "aria-describedby": r.invalidId,
+            maxLength: 25
           }
         ) })
       ] }),

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

@@ -7,8 +7,8 @@
     width: 100%;
 
     &-label {
-      font-variation-settings: 'wght' 600;
       margin-bottom: $spacing-xsm;
+      white-space: nowrap;
 
       &--error {
         color: $error-red;
@@ -16,6 +16,8 @@
     }
 
     &-btn {
+      @include text($bodyMedium);
+
       align-items: center;
       appearance: none;
       background: $white;
@@ -46,6 +48,8 @@
     &-text {
       flex: 1;
       font-variation-settings: 'wght' 600;
+      margin-left: $spacing-xsm;
+      margin-right: $spacing-xsm;
       overflow: hidden;
       text-align: left;
       text-overflow: ellipsis;
@@ -55,17 +59,11 @@
     &-icon {
       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;
-      }
+      // 1.4em matches the line-height from body-styles mixin, ensuring icon scales with font-size at different breakpoints
+      // This keeps the trigger button height aligned with the Input component across all screen sizes
+      height: 1.4em;
+      width: 1.4em;
     }
 
     &-flag {
@@ -73,7 +71,6 @@
       display: flex;
       height: 1rem;
       justify-content: center;
-      margin-right: $spacing-sm;
       overflow: hidden;
       width: 1.5rem;
 

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -1,13 +1,28 @@
 @use '../../allPartials' as *;
 
 .#{$px}-filter-button {
-  border: 1.5px solid $light-gray;
+  border: 1px solid $bg-border;
   gap: 4px;
   height: inherit;
   padding: $spacing-xsm $spacing-sm;
 
+  &:hover {
+    border: 1px solid $black-100;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 0.5px $bg-border;
+    outline: none;
+  }
+
   &--selected {
-    border: 1.5px solid $black-100;
+    border: 1px solid $black-100;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 0.5px $black-100;
+      outline: none;
+    }
   }
 
   &--filter {

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

@@ -15,18 +15,12 @@
   }
 
   &__country-picker {
-    flex: 0 0 25%;
-    margin-right: $spacing-xsm;
-    min-width: 150px; // just big enough for flag and 3 digit code
+    flex: 0 0 30%;
   }
 
   &__input {
-    flex: 1 1 75%;
-    flex-grow: 1;
-
-    &-phone {
-      margin-bottom: 0;
-    }
+    flex: 1 1 70%;
+    min-width: 0; // ensures input shrinks properly in flex container, 0 prevents overflow and lets flex-basis do its thing
 
     // Hide input validation inside phone number input, we use a shared one
     .#{$px}-input__validation {
@@ -39,17 +33,13 @@
   }
 
   @media screen and (min-width: $breakpoint-xl) {
-    &__wrapper {
-      align-items: center;
-    }
-
     &__country-picker {
-      flex: 0 0 40%;
+      flex: 0 0 37.5%;
       min-width: 0;
     }
 
     &__input {
-      flex: 1 1 60%;
+      flex: 1 1 62.5%;
       min-width: 0;
     }
   }

package/package.json

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