@phillips/seldon 1.275.0 → 1.277.0

package/dist/patterns/FiltersInline/FilterDropdownMenuMobile.js

@@ -1,85 +1,66 @@
-import { jsxs as _, jsx as e, Fragment as S } from "react/jsx-runtime";
-import t from "../../_virtual/index2.js";
-import g from "react";
-import s from "../../components/Button/Button.js";
-import { ButtonSizes as m, ButtonVariants as n } from "../../components/Button/types.js";
-import k from "../../components/Filter/FilterInput.js";
-import c from "../../components/Text/Text.js";
-import { TextVariants as d } from "../../components/Text/types.js";
-import { px as F } from "../../utils/index.js";
-import { getFilterDimensions as z, hasActiveDimensions as A, handleInputChange as B } from "./utils.js";
-const M = g.forwardRef(
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import s from "../../_virtual/index2.js";
+import D from "react";
+import c from "../../components/Button/Button.js";
+import { ButtonVariants as f } from "../../components/Button/types.js";
+import u from "../../components/Filter/FilterInput.js";
+import { px as k } from "../../utils/index.js";
+import { getFilterDimensions as v, hasActiveDimensions as A, handleInputChange as F } from "./utils.js";
+const g = D.forwardRef(
   ({
-    className: p,
+    className: b,
     buttonType: r,
-    filters: b,
-    filterIndex: f,
-    onApplyFilter: h,
-    onClickClear: $,
-    onSelectFilter: u,
-    resultsCount: w,
-    ariaLabels: x,
-    dropdownMenuTranslation: l
-  }, C) => {
-    const o = r === "Sort", i = `${F}-filter-dropdown-menu`, N = z(b, f), v = A(b, r, f);
-    return /* @__PURE__ */ _(
+    filters: l,
+    filterIndex: t,
+    onApplyFilter: n,
+    onClickClear: p,
+    onSelectFilter: h,
+    resultsCount: _,
+    ariaLabels: $,
+    dropdownMenuTranslation: m
+  }, w) => {
+    const o = r === "Sort", e = `${k}-filter-dropdown-menu`, N = v(l, t), x = A(l, r, t);
+    return /* @__PURE__ */ d(
       "div",
       {
-        className: t(`${i}`, p, `${i}--mobile`),
-        ref: C,
+        className: s(`${e}`, b, `${e}--mobile`),
+        ref: w,
         "data-testid": "filter-dropdown-mobile",
-        "aria-label": x || `${r} dropdown mobile`,
+        "aria-label": $ || `${r} dropdown mobile`,
         children: [
-          /* @__PURE__ */ e("div", { className: t(`${i}__filters`, `${i}__filters--mobile`), children: N.map((a) => /* @__PURE__ */ e(
-            k,
+          /* @__PURE__ */ a("div", { className: s(`${e}__filters`, `${e}__filters--mobile`), children: N.map((i) => /* @__PURE__ */ a(
+            u,
             {
-              id: a.label,
-              labelText: a.label,
-              name: a.label,
+              id: i.label,
+              labelText: i.label,
+              name: i.label,
               type: o ? "radio" : "checkbox",
-              checked: a.active,
-              disabled: a?.disabled,
-              onChange: (D) => B(D, r ?? "", u)
+              checked: i.active,
+              disabled: i?.disabled,
+              onChange: (C) => {
+                F(C, r ?? "", h), o && n?.(!1);
+              }
             },
-            a.label
+            i.label
           )) }),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: t(
-                o ? `${i}__button-wrap` : `${i}__buttons-wrap`,
-                `${i}__mobile-wrap`
-              ),
-              children: o ? /* @__PURE__ */ e(
-                s,
-                {
-                  className: t(`${i}__button`, `${i}__button--mobile`),
-                  variant: n.primary,
-                  size: m.small,
-                  onClick: () => h?.(!1),
-                  children: /* @__PURE__ */ e(c, { variant: d.headingMedium, className: `${i}__button-text`, children: l?.confirm || "Confirm" })
-                }
-              ) : /* @__PURE__ */ _(S, { children: [
-                /* @__PURE__ */ e(
-                  s,
-                  {
-                    variant: n.secondary,
-                    size: m.small,
-                    isDisabled: !v,
-                    onClick: () => $?.(r ?? ""),
-                    children: /* @__PURE__ */ e(c, { variant: d.bodySmall, children: l?.clearAll || "Clear all" })
-                  }
-                ),
-                /* @__PURE__ */ e(s, { variant: n.primary, size: m.small, onClick: () => h?.(!1), children: /* @__PURE__ */ e(c, { variant: d.bodySmall, className: `${i}__button-text`, children: l?.showAuctions || `Show ${w} Auctions` }) })
-              ] })
-            }
-          )
+          o ? /* @__PURE__ */ a("div", { className: `${e}__mobile-safe-area`, "aria-hidden": "true" }) : /* @__PURE__ */ d("div", { className: s(`${e}__buttons-wrap`, `${e}__mobile-wrap`), children: [
+            /* @__PURE__ */ a(
+              c,
+              {
+                variant: f.secondary,
+                isDisabled: !x,
+                onClick: () => p?.(r ?? ""),
+                children: m?.clearAll || "Clear all"
+              }
+            ),
+            /* @__PURE__ */ a(c, { variant: f.primary, onClick: () => n?.(!1), children: /* @__PURE__ */ a("span", { className: `${e}__button-text`, children: m?.showAuctions || `Show ${_} Auctions` }) })
+          ] })
         ]
       }
     );
   }
 );
-M.displayName = "FilterDropdownMenuMobile";
+g.displayName = "FilterDropdownMenuMobile";
 export {
-  M as FilterDropdownMenuMobile
+  g as FilterDropdownMenuMobile
 };

package/dist/patterns/FiltersInline/FiltersInline.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),B=require("../../_virtual/index2.cjs"),D=require("react"),I=require("../../utils/index.cjs"),N=require("./MainFilterDropdown.cjs"),T=require("./SubFilterDropdown.cjs"),i=D.forwardRef(({id:e,className:m,filtersListState:u,setFiltersLabelListState:a,filters:t,onSelectFilter:l,onApplyFilter:s,onClickClear:b,resultsCount:c,mainFilterLabel:o,dropdownMenuTranslation:d,hideDesktopSortButton:$=!0,...p},q)=>{const{className:x,...j}=I.getCommonProps({id:e,...p},"FiltersInline");return r.jsxs("div",{ref:q,className:B.default(x,m),...j,id:e,children:[r.jsx(N.MainFilterDropdown,{id:`${e}-${o}-button`,filterButtonLabel:o,handleClick:a,filtersListState:u,filters:t,onSelectFilter:l,onApplyFilter:s,onClickClear:b,resultsCount:c,dropdownMenuTranslation:d},`${e}-${o}-button`),t?.map((n,w)=>r.jsx(T.SubFilterDropdown,{id:`${e}-${n.label}-button`,filterButtonLabel:n.label,buttonType:n.buttonType,handleClick:a,filtersListState:u,filterId:w+1,filters:t,onSelectFilter:l,onApplyFilter:s,onClickClear:b,resultsCount:c,filterButtonLabelTranslated:n.filterButtonLabelTranslated,dropdownMenuTranslation:d,hideDesktopSortButton:$},`${e}-${n.label}-button`))]})});i.displayName="FiltersInline";exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),I=require("../../_virtual/index2.cjs"),w=require("react"),D=require("../../utils/index.cjs"),N=require("./MainFilterDropdown.cjs"),g=require("./SubFilterDropdown.cjs"),y=require("./types.cjs"),T=w.forwardRef(({id:t,className:q,filtersListState:u,setFiltersLabelListState:l,filters:n,onSelectFilter:a,onApplyFilter:d,onClickClear:i,resultsCount:c,mainFilterLabel:o,dropdownMenuTranslation:b,hideDesktopSortButton:x=!0,...B},F)=>{const{className:f,...j}=D.getCommonProps({id:t,...B},"FiltersInline");return s.jsxs("div",{ref:F,className:I.default(f,q),...j,id:t,children:[s.jsx(N.MainFilterDropdown,{id:`${t}-${o}-button`,filterButtonLabel:o,handleClick:l,filtersListState:u,filters:n,onSelectFilter:a,onApplyFilter:d,onClickClear:i,resultsCount:c,dropdownMenuTranslation:b},`${t}-${o}-button`),(()=>{const p=n?.map((e,r)=>({filter:e,filterId:r+1}))??[],m=p.find(({filter:e})=>e.buttonType===y.FilterButtonType.Sort),$=p.filter(({filter:e})=>e.buttonType!==y.FilterButtonType.Sort);return(m?[...$,m]:$).map(({filter:e,filterId:r})=>s.jsx(g.SubFilterDropdown,{id:`${t}-${e.label}-button`,filterButtonLabel:e.label,buttonType:e.buttonType,handleClick:l,filtersListState:u,filterId:r,filters:n,onSelectFilter:a,onApplyFilter:d,onClickClear:i,resultsCount:c,filterButtonLabelTranslated:e.filterButtonLabelTranslated,dropdownMenuTranslation:b,hideDesktopSortButton:x},`${t}-${e.label}-button`))})()]})});T.displayName="FiltersInline";exports.default=T;

package/dist/patterns/FiltersInline/FiltersInline.js

@@ -1,67 +1,71 @@
-import { jsxs as N, jsx as u } from "react/jsx-runtime";
-import h from "../../_virtual/index2.js";
-import x from "react";
-import { getCommonProps as T } from "../../utils/index.js";
-import { MainFilterDropdown as j } from "./MainFilterDropdown.js";
-import { SubFilterDropdown as w } from "./SubFilterDropdown.js";
-const y = x.forwardRef(
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import F from "../../_virtual/index2.js";
+import j from "react";
+import { getCommonProps as w } from "../../utils/index.js";
+import { MainFilterDropdown as D } from "./MainFilterDropdown.js";
+import { SubFilterDropdown as P } from "./SubFilterDropdown.js";
+import { FilterButtonType as $ } from "./types.js";
+const R = j.forwardRef(
   ({
     id: o,
-    className: c,
-    filtersListState: n,
-    setFiltersLabelListState: r,
-    filters: a,
-    onSelectFilter: e,
+    className: T,
+    filtersListState: m,
+    setFiltersLabelListState: a,
+    filters: r,
+    onSelectFilter: s,
     onApplyFilter: l,
-    onClickClear: s,
-    resultsCount: b,
-    mainFilterLabel: m,
-    dropdownMenuTranslation: p,
-    hideDesktopSortButton: d = !0,
-    ...f
-  }, $) => {
-    const { className: i, ...B } = T({ id: o, ...f }, "FiltersInline");
-    return /* @__PURE__ */ N("div", { ref: $, className: h(i, c), ...B, id: o, children: [
-      /* @__PURE__ */ u(
-        j,
+    onClickClear: p,
+    resultsCount: u,
+    mainFilterLabel: e,
+    dropdownMenuTranslation: d,
+    hideDesktopSortButton: y = !0,
+    ...B
+  }, I) => {
+    const { className: x, ...N } = w({ id: o, ...B }, "FiltersInline");
+    return /* @__PURE__ */ h("div", { ref: I, className: F(x, T), ...N, id: o, children: [
+      /* @__PURE__ */ i(
+        D,
         {
-          id: `${o}-${m}-button`,
-          filterButtonLabel: m,
-          handleClick: r,
-          filtersListState: n,
-          filters: a,
-          onSelectFilter: e,
+          id: `${o}-${e}-button`,
+          filterButtonLabel: e,
+          handleClick: a,
+          filtersListState: m,
+          filters: r,
+          onSelectFilter: s,
           onApplyFilter: l,
-          onClickClear: s,
-          resultsCount: b,
-          dropdownMenuTranslation: p
+          onClickClear: p,
+          resultsCount: u,
+          dropdownMenuTranslation: d
         },
-        `${o}-${m}-button`
+        `${o}-${e}-button`
       ),
-      a?.map((t, I) => /* @__PURE__ */ u(
-        w,
-        {
-          id: `${o}-${t.label}-button`,
-          filterButtonLabel: t.label,
-          buttonType: t.buttonType,
-          handleClick: r,
-          filtersListState: n,
-          filterId: I + 1,
-          filters: a,
-          onSelectFilter: e,
-          onApplyFilter: l,
-          onClickClear: s,
-          resultsCount: b,
-          filterButtonLabelTranslated: t.filterButtonLabelTranslated,
-          dropdownMenuTranslation: p,
-          hideDesktopSortButton: d
-        },
-        `${o}-${t.label}-button`
-      ))
+      (() => {
+        const b = r?.map((t, n) => ({ filter: t, filterId: n + 1 })) ?? [], c = b.find(({ filter: t }) => t.buttonType === $.Sort), f = b.filter(({ filter: t }) => t.buttonType !== $.Sort);
+        return (c ? [...f, c] : f).map(({ filter: t, filterId: n }) => /* @__PURE__ */ i(
+          P,
+          {
+            id: `${o}-${t.label}-button`,
+            filterButtonLabel: t.label,
+            buttonType: t.buttonType,
+            handleClick: a,
+            filtersListState: m,
+            filterId: n,
+            filters: r,
+            onSelectFilter: s,
+            onApplyFilter: l,
+            onClickClear: p,
+            resultsCount: u,
+            filterButtonLabelTranslated: t.filterButtonLabelTranslated,
+            dropdownMenuTranslation: d,
+            hideDesktopSortButton: y
+          },
+          `${o}-${t.label}-button`
+        ));
+      })()
     ] });
   }
 );
-y.displayName = "FiltersInline";
+R.displayName = "FiltersInline";
 export {
-  y as default
+  R as default
 };

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

@@ -12,6 +12,7 @@ export declare const Playground: {
     args: {
         id: string;
         filters: FilterType[];
+        hideDesktopSortButton: boolean;
     };
     argTypes: {};
 };

package/dist/patterns/FiltersInline/MainFilterDropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../_virtual/index2.cjs"),B=require("react"),m=require("../../components/Button/Button.cjs"),s=require("../../components/Button/types.cjs"),A=require("../../components/Drawer/Drawer.cjs"),D=require("../../components/Filter/Filter.cjs"),S=require("../../components/Filter/FilterHeader.cjs"),M=require("../../components/Filter/FilterInput.cjs"),n=require("../../utils/index.cjs"),k=require("../FilterMenu/FilterMenu.cjs"),z=require("./FilterButton.cjs"),N=require("./types.cjs"),a=require("./utils.cjs"),x=B.forwardRef(({className:w,filterButtonLabel:l,handleClick:o,filtersListState:i,filters:d,onSelectFilter:F,onApplyFilter:q,onClickClear:f,resultsCount:j,dropdownMenuTranslation:c,ariaLabels:u={},id:y},h)=>{const p=i?.[0]??!1,{totalCount:b,filterCount:C}=a.countActiveFilters(d,l);return e.jsxs(e.Fragment,{children:[e.jsx(z.FilterButton,{ref:h,className:w,isSelected:p,count:C,label:l,totalCount:b,id:y,ariaLabel:u.button||`${l} button`,onClick:a.getFilterButtonClickHandler(i,o,0),isMobile:!1,type:N.FilterButtonIconType.Filter}),e.jsxs(A.default,{isOpen:p,drawerOpenSide:"left",onClose:()=>a.resetAllFilters(i,o),className:`${n.px}-filter-drawer`,"aria-label":u.drawer||"Filter drawer",paddingLevel:0,children:[e.jsx(k.default,{className:`${n.px}-filter-drawer-menu`,children:d?.map(t=>e.jsxs(D.default,{name:t.label,children:[e.jsx(S.default,{heading:t.label}),Array.from(t.filterDimensions).map(r=>e.jsx(M.default,{id:r.label,labelText:r.label,onChange:$=>F?.($,t.buttonType),type:t.type,disabled:r?.disabled,name:r.label,checked:r.active},r.label))]},t.id))}),e.jsxs("div",{className:g.default(`${n.px}-filter-dropdown-menu__buttons-wrap`,`${n.px}-filter-dropdown-menu__buttons-wrap--drawer`),children:[e.jsx(m.default,{variant:s.ButtonVariants.secondary,size:s.ButtonSizes.small,isDisabled:b===0,onClick:()=>f?.("all"),children:c?.clearAll||"Clear all"}),e.jsx(m.default,{size:s.ButtonSizes.small,onClick:()=>q?.(!1),children:c?.showAuctions||`Show ${j} Auctions`})]})]})]})});x.displayName="MainFilterDropdown";exports.MainFilterDropdown=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),$=require("../../_virtual/index2.cjs"),g=require("react"),b=require("../../components/Button/Button.cjs"),A=require("../../components/Button/types.cjs"),D=require("../../components/Drawer/Drawer.cjs"),B=require("../../components/Filter/Filter.cjs"),M=require("../../components/Filter/FilterHeader.cjs"),k=require("../../components/Filter/FilterInput.cjs"),n=require("../../utils/index.cjs"),N=require("../FilterMenu/FilterMenu.cjs"),S=require("./FilterButton.cjs"),_=require("./types.cjs"),s=require("./utils.cjs"),x=g.forwardRef(({className:m,filterButtonLabel:l,handleClick:a,filtersListState:i,filters:o,onSelectFilter:w,onApplyFilter:F,onClickClear:q,resultsCount:f,dropdownMenuTranslation:d,ariaLabels:c={},id:j},y)=>{const u=i?.[0]??!1,{totalCount:p,filterCount:h}=s.countActiveFilters(o,l);return e.jsxs(e.Fragment,{children:[e.jsx(S.FilterButton,{ref:y,className:m,isSelected:u,count:h,label:l,totalCount:p,id:j,ariaLabel:c.button||`${l} button`,onClick:s.getFilterButtonClickHandler(i,a,0),isMobile:!1,type:_.FilterButtonIconType.Filter}),e.jsxs(D.default,{isOpen:u,drawerOpenSide:"left",onClose:()=>s.resetAllFilters(i,a),className:`${n.px}-filter-drawer`,"aria-label":c.drawer||"Filter drawer",paddingLevel:0,children:[e.jsx(N.default,{className:`${n.px}-filter-drawer-menu`,children:o?.map(r=>e.jsxs(B.default,{name:r.label,children:[e.jsx(M.default,{heading:r.label}),Array.from(r.filterDimensions).map(t=>e.jsx(k.default,{id:t.label,labelText:t.label,onChange:C=>w?.(C,r.buttonType),type:r.type,disabled:t?.disabled,name:t.label,checked:t.active},t.label))]},r.id))}),e.jsxs("div",{className:$.default(`${n.px}-filter-dropdown-menu__buttons-wrap`,`${n.px}-filter-dropdown-menu__buttons-wrap--drawer`),children:[e.jsx(b.default,{variant:A.ButtonVariants.secondary,isDisabled:p===0,onClick:()=>q?.("all"),children:d?.clearAll||"Clear all"}),e.jsx(b.default,{onClick:()=>F?.(!1),children:d?.showAuctions||`Show ${f} Auctions`})]})]})]})});x.displayName="MainFilterDropdown";exports.MainFilterDropdown=x;

package/dist/patterns/FiltersInline/MainFilterDropdown.js

@@ -1,68 +1,68 @@
-import { jsxs as t, Fragment as g, jsx as o } from "react/jsx-runtime";
-import x from "../../_virtual/index2.js";
-import B from "react";
+import { jsxs as t, Fragment as $, jsx as o } from "react/jsx-runtime";
+import g from "../../_virtual/index2.js";
+import x from "react";
 import f from "../../components/Button/Button.js";
-import { ButtonSizes as u, ButtonVariants as D } from "../../components/Button/types.js";
+import { ButtonVariants as D } from "../../components/Button/types.js";
 import k from "../../components/Drawer/Drawer.js";
-import N from "../../components/Filter/Filter.js";
-import z from "../../components/Filter/FilterHeader.js";
+import B from "../../components/Filter/Filter.js";
+import N from "../../components/Filter/FilterHeader.js";
 import M from "../../components/Filter/FilterInput.js";
 import { px as l } from "../../utils/index.js";
-import S from "../FilterMenu/FilterMenu.js";
-import { FilterButton as j } from "./FilterButton.js";
-import { FilterButtonIconType as H } from "./types.js";
-import { countActiveFilters as I, getFilterButtonClickHandler as O, resetAllFilters as R } from "./utils.js";
-const T = B.forwardRef(
+import j from "../FilterMenu/FilterMenu.js";
+import { FilterButton as H } from "./FilterButton.js";
+import { FilterButtonIconType as I } from "./types.js";
+import { countActiveFilters as O, getFilterButtonClickHandler as R, resetAllFilters as S } from "./utils.js";
+const T = x.forwardRef(
   ({
     className: b,
     filterButtonLabel: i,
     handleClick: a,
     filtersListState: n,
     filters: m,
-    onSelectFilter: w,
-    onApplyFilter: F,
-    onClickClear: h,
-    resultsCount: y,
-    dropdownMenuTranslation: s,
-    ariaLabels: d = {},
-    id: C
-  }, A) => {
-    const p = n?.[0] ?? !1, { totalCount: c, filterCount: _ } = I(m, i);
-    return /* @__PURE__ */ t(g, { children: [
+    onSelectFilter: u,
+    onApplyFilter: w,
+    onClickClear: F,
+    resultsCount: h,
+    dropdownMenuTranslation: d,
+    ariaLabels: p = {},
+    id: y
+  }, C) => {
+    const s = n?.[0] ?? !1, { totalCount: c, filterCount: A } = O(m, i);
+    return /* @__PURE__ */ t($, { children: [
       /* @__PURE__ */ o(
-        j,
+        H,
         {
-          ref: A,
+          ref: C,
           className: b,
-          isSelected: p,
-          count: _,
+          isSelected: s,
+          count: A,
           label: i,
           totalCount: c,
-          id: C,
-          ariaLabel: d.button || `${i} button`,
-          onClick: O(n, a, 0),
+          id: y,
+          ariaLabel: p.button || `${i} button`,
+          onClick: R(n, a, 0),
           isMobile: !1,
-          type: H.Filter
+          type: I.Filter
         }
       ),
       /* @__PURE__ */ t(
         k,
         {
-          isOpen: p,
+          isOpen: s,
           drawerOpenSide: "left",
-          onClose: () => R(n, a),
+          onClose: () => S(n, a),
           className: `${l}-filter-drawer`,
-          "aria-label": d.drawer || "Filter drawer",
+          "aria-label": p.drawer || "Filter drawer",
           paddingLevel: 0,
           children: [
-            /* @__PURE__ */ o(S, { className: `${l}-filter-drawer-menu`, children: m?.map((e) => /* @__PURE__ */ t(N, { name: e.label, children: [
-              /* @__PURE__ */ o(z, { heading: e.label }),
+            /* @__PURE__ */ o(j, { className: `${l}-filter-drawer-menu`, children: m?.map((e) => /* @__PURE__ */ t(B, { name: e.label, children: [
+              /* @__PURE__ */ o(N, { heading: e.label }),
               Array.from(e.filterDimensions).map((r) => /* @__PURE__ */ o(
                 M,
                 {
                   id: r.label,
                   labelText: r.label,
-                  onChange: ($) => w?.($, e.buttonType),
+                  onChange: (_) => u?.(_, e.buttonType),
                   type: e.type,
                   disabled: r?.disabled,
                   name: r.label,
@@ -74,7 +74,7 @@ const T = B.forwardRef(
             /* @__PURE__ */ t(
               "div",
               {
-                className: x(
+                className: g(
                   `${l}-filter-dropdown-menu__buttons-wrap`,
                   `${l}-filter-dropdown-menu__buttons-wrap--drawer`
                 ),
@@ -83,13 +83,12 @@ const T = B.forwardRef(
                     f,
                     {
                       variant: D.secondary,
-                      size: u.small,
                       isDisabled: c === 0,
-                      onClick: () => h?.("all"),
-                      children: s?.clearAll || "Clear all"
+                      onClick: () => F?.("all"),
+                      children: d?.clearAll || "Clear all"
                     }
                   ),
-                  /* @__PURE__ */ o(f, { size: u.small, onClick: () => F?.(!1), children: s?.showAuctions || `Show ${y} Auctions` })
+                  /* @__PURE__ */ o(f, { onClick: () => w?.(!1), children: d?.showAuctions || `Show ${h} Auctions` })
                 ]
               }
             )

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

@@ -136,11 +136,11 @@ export interface FilterDropdownProps extends BaseFilterProps {
 }
 /**
  * Object containing translated strings for dropdown menu actions.
- * - confirm: Label for the confirm/apply button.
  * - clearAll: Label for the "Clear all" button.
  * - showAuctions: Label for the button showing the number of auctions/results.
  */
 export type DropdownMenuTranslation = {
+    /** @deprecated The sort dropdown no longer renders a confirm button; sort applies on selection. */
     confirm?: string | null;
     clearAll?: string | null;
     showAuctions?: string | null;
@@ -160,7 +160,7 @@ export interface FilterDropdownMenuProps extends React.HTMLAttributes<HTMLDivEle
     /** Index of the filter to display (typically corresponds to the selected filter) */
     filterIndex?: number;
     /** Handler for when a filter input is changed */
-    onSelectFilter?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, filterType: string) => void;
+    onSelectFilter?: FilterChangeHandler;
     /** Handler for when the filter is confirmed or updated */
     onApplyFilter?: (returnCountOnly?: boolean) => void;
     /** Handler for clearing the filter (by type) */

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

@@ -1,4 +1,4 @@
-import { FilterButtonIconType, FilterButtonType, FilterDimension, FilterType } from './types';
+import { FilterButtonIconType, FilterButtonType, FilterChangeHandler, FilterDimension, FilterType } from './types';
 export declare const FilterButtons: FilterButtonType[];
 export declare const FiltersInlineFilters: {
     Sort: {
@@ -57,7 +57,7 @@ export declare const getFilterDimensions: (filters: {
 }[] | undefined, filterIndex: number | undefined) => FilterDimension[];
 export declare const getIcon: (type: FilterButtonIconType, isSelected: boolean) => "ChevronDown" | "Filters" | "ChevronUp";
 export declare const getFilterButtonClickHandler: (filtersListState: boolean[] | undefined, handleClick: ((state: boolean[]) => void) | undefined, filterId: number) => () => void;
-export declare function handleInputChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, buttonType: string, handleFilterSelection?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, filterType: string) => void): void;
+export declare function handleInputChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, buttonType: string, handleFilterSelection?: FilterChangeHandler): void;
 /**
  * Utility to reset all filter states to false and call the handler.
  */

package/dist/scss/_vars.scss

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
-  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
-  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$text-tokens:
+  $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5, $title1,
+  $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink,
+  $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.cjs

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
-  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
-  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$text-tokens:
+  $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5, $title1,
+  $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink,
+  $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.js

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
-  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
-  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$text-tokens:
+  $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5, $title1,
+  $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink,
+  $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -26,11 +26,6 @@ $dropdown-width: 320px;
     }
   }
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-  }
-
   &__buttons-wrap {
     border-top: 1px solid $bg-border;
     display: flex;
@@ -65,6 +60,12 @@ $dropdown-width: 320px;
     padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
   }
 
+  // Sort dropdown has no footer buttons; this spacer preserves the safe-area
+  // inset so the last option stays clear of the iOS home indicator.
+  &__mobile-safe-area {
+    padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
+  }
+
   &__header {
     margin-bottom: $spacing-sm;
     margin-top: 0;
@@ -74,21 +75,6 @@ $dropdown-width: 320px;
     }
   }
 
-  &__button {
-    align-self: flex-end;
-    padding: $spacing-sm $spacing-md;
-
-    &--text {
-      text-wrap: nowrap;
-    }
-
-    &--mobile {
-      display: block;
-      margin: $spacing-sm auto $spacing-md auto;
-      width: 80%;
-    }
-  }
-
   &__button-text {
     color: $white-100;
   }
@@ -119,6 +105,9 @@ $dropdown-width: 320px;
     align-self: center;
     margin-left: auto;
   }
+  .#{$px}-input__input[type='checkbox']:disabled {
+    border-color: $keyline-gray;
+  }
   .#{$px}-input__input[type='checkbox'] {
     align-self: center;
     appearance: none;
@@ -159,6 +148,14 @@ $dropdown-width: 320px;
   max-height: 2rem;
 }
 
+// Filter option labels use the labels/label-small-bold type token.
+.#{$px}-filter-dropdown-menu,
+.#{$px}-filter-drawer-menu {
+  .#{$px}-input__label.#{$px}-text {
+    @include label-styles($font-size: $font-size-label-small, $font-weight: 600);
+  }
+}
+
 .#{$px}-filter-drawer-mobile {
   height: min(70dvh, 640px);
   padding: 0;
@@ -186,6 +183,10 @@ $dropdown-width: 320px;
     flex: 0 0 auto;
     margin-top: 0;
   }
+
+  .#{$px}-filter-dropdown-menu__mobile-safe-area {
+    flex: 0 0 auto;
+  }
 }
 
 .#{$px}-filter-drawer {

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -5,7 +5,9 @@
   flex-wrap: wrap;
   gap: $spacing-sm;
 
-  // Desktop: align the Sort filter (and anything following it) to the right of the filter row.
+  // Desktop: align the Sort filter to the right of the filter row. The Sort
+  // pill is already rendered last in the DOM (see FiltersInline.tsx) so visual
+  // and tab order match; this just pushes it to the right edge.
   @include media($breakpoint-md) {
     > .#{$px}-filters-inline__sort {
       margin-left: auto;