@phillips/seldon 1.96.1 → 1.97.1

package/dist/patterns/BidSnapshot/BidSnapshot.js

@@ -1,64 +1,67 @@
-import { jsxs as W, jsx as l } from "react/jsx-runtime";
-import { forwardRef as _ } from "react";
-import A from "../../node_modules/classnames/index.js";
-import { getCommonProps as V } from "../../utils/index.js";
-import k from "../DetailList/DetailList.js";
-import q from "../../components/Detail/Detail.js";
-import { AuctionStatus as t, SupportedLanguages as z } from "../../types/commonTypes.js";
-import E from "../../components/Countdown/Countdown.js";
-import { CountdownVariants as F } from "../../components/Countdown/types.js";
-const G = (s) => s === 1 ? `${s} bid` : `${s} bids`, H = _(
+import { jsxs as _, jsx as l } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
+import V from "../../node_modules/classnames/index.js";
+import { getCommonProps as k, findChildrenOfType as q, findChildrenExcludingTypes as z } from "../../utils/index.js";
+import F from "../DetailList/DetailList.js";
+import G from "../../components/Detail/Detail.js";
+import { AuctionStatus as a, SupportedLanguages as H } from "../../types/commonTypes.js";
+import I from "../../components/Countdown/Countdown.js";
+import { CountdownVariants as J } from "../../components/Countdown/types.js";
+import { BidStatusEnum as g } from "./types.js";
+import u from "./BidMessage.js";
+const K = (o) => o === 1 ? `${o} bid` : `${o} bids`, Q = A(
   ({
-    activeBid: s,
-    auctionStatus: e = t.ready,
-    bidsLabelText: h = G,
-    children: $,
-    className: b,
-    closingText: u = "Closes in",
-    currency: S = "$",
-    currentBid: a,
-    currentBidText: C = "Current bid",
-    formatDurationStr: g = (o) => o.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
-    lang: v = "en",
-    lotCloseDate: m,
+    bidStatus: o,
+    auctionStatus: e = a.ready,
+    bidsLabelText: C = K,
+    children: m,
+    className: $,
+    closingText: b = "Closes in",
+    currency: v = "$",
+    currentBid: i,
+    currentBidText: y = "Current bid",
+    formatDurationStr: S = (s) => s.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
+    lang: T = "en",
+    lotCloseDate: d,
     numberOfBids: p = 0,
-    startingBid: L,
-    startingBidText: N = "Starting bid",
-    soldForText: w = "Sold for",
-    wonForText: x = "Won for",
+    startingBid: x,
+    startingBidText: L = "Starting bid",
+    soldForText: N = "Sold for",
+    wonForText: w = "Won for",
     ...c
-  }, y) => {
-    var f;
-    const { className: o, ...T } = V(c, "BidSnapshot"), i = a !== null && p > 0, P = s === a, d = e === t.ready, n = e === t.live, j = e === t.past, D = n && m, R = A(o, b, {
-      [`${o}--live`]: n,
-      [`${o}--has-bids`]: i
+  }, W) => {
+    var h;
+    const { className: s, ...P } = k(c, "BidSnapshot"), n = i !== null && p > 0, j = o === g.Winning || o === g.Won, f = e === a.ready, t = e === a.live, B = e === a.past, D = t && d, E = q(m, u), M = z(m, [u]), R = V(s, $, {
+      [`${s}--live`]: t,
+      [`${s}--has-bids`]: n
     });
-    let r = C;
-    return (d || !i) && (r = N), j && i && (r = P ? x : w), /* @__PURE__ */ W("div", { ...T, ...c, ref: y, className: R, children: [
-      /* @__PURE__ */ l(k, { hasSeparators: !0, className: `${o}__text`, children: /* @__PURE__ */ l(
-        q,
+    let r = y;
+    return (f || !n) && (r = L), B && n && (r = j ? w : N), /* @__PURE__ */ _("div", { ...P, ...c, ref: W, className: R, children: [
+      /* @__PURE__ */ l(F, { hasSeparators: !0, className: `${s}__text`, children: /* @__PURE__ */ l(
+        G,
         {
           label: r,
-          subLabel: n && a && `(${h(p)})`,
-          value: `${S}${(f = a || L) == null ? void 0 : f.toLocaleString()}`,
+          subLabel: t && i && `(${C(p)})`,
+          value: `${v}${(h = i || x) == null ? void 0 : h.toLocaleString()}`,
           hasWrap: !1
         }
       ) }),
-      s && !d ? $ : null,
+      o && !f ? E : null,
+      M,
       D ? /* @__PURE__ */ l(
-        E,
+        I,
         {
-          endDateTime: m,
-          label: u,
-          variant: F.compact,
-          locale: z[v],
-          formatDurationStr: g
+          endDateTime: d,
+          label: b,
+          variant: J.compact,
+          locale: H[T],
+          formatDurationStr: S
         }
       ) : null
     ] });
   }
 );
-H.displayName = "BidSnapshot";
+Q.displayName = "BidSnapshot";
 export {
-  H as default
+  Q as default
 };

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

@@ -1,5 +1,6 @@
 import { BidSnapshotProps } from './BidSnapshot';
 import { AuctionStatus } from '../../types/commonTypes';
+import { BidStatusEnum } from './types';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<BidSnapshotProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -16,7 +17,6 @@ export default meta;
 export declare const Playground: {
     (props: BidSnapshotProps): import("react/jsx-runtime").JSX.Element;
     args: {
-        activeBid: number;
         currency: string;
         numberOfBids: number;
         auctionStatus: AuctionStatus;
@@ -25,5 +25,12 @@ export declare const Playground: {
         lang: import('date-fns').Locale;
         startingBid: number;
     };
-    argTypes: {};
+    argTypes: {
+        bidStatus: {
+            options: typeof BidStatusEnum;
+            control: {
+                type: string;
+            };
+        };
+    };
 };

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

@@ -1,3 +1,3 @@
 export { default as BidSnapshot, type BidSnapshotProps } from './BidSnapshot';
 export { default as BidMessage } from './BidMessage';
-export { BidMessageVariants } from './types';
+export { BidMessageVariants, BidStatusEnum } from './types';

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

@@ -2,3 +2,9 @@ export declare enum BidMessageVariants {
     positive = "POSITIVE",
     negative = "NEGATIVE"
 }
+export declare enum BidStatusEnum {
+    Winning = "winning",
+    Losing = "losing",
+    Won = "won",
+    Lost = "lost"
+}

package/dist/patterns/BidSnapshot/types.js

@@ -1,4 +1,5 @@
-var r = /* @__PURE__ */ ((e) => (e.positive = "POSITIVE", e.negative = "NEGATIVE", e))(r || {});
+var o = /* @__PURE__ */ ((n) => (n.positive = "POSITIVE", n.negative = "NEGATIVE", n))(o || {}), r = /* @__PURE__ */ ((n) => (n.Winning = "winning", n.Losing = "losing", n.Won = "won", n.Lost = "lost", n))(r || {});
 export {
-  r as BidMessageVariants
+  o as BidMessageVariants,
+  r as BidStatusEnum
 };

package/dist/patterns/FilterMenu/FilterMenu.d.ts

@@ -0,0 +1,22 @@
+import { default as React, ReactNode } from 'react';
+export interface FilterMenuProps<ElementType = HTMLFormElement> extends React.HTMLAttributes<ElementType> {
+    /**
+     * Typically would be a Filter component
+     * */
+    children: ReactNode;
+    /**
+     * Optional element to render as the top-level component e.g. 'div', Form, CustomComponent, etc. Defaults to 'form'.
+     */
+    element?: React.ElementType;
+}
+/**
+ * ## Overview
+ *
+ * A container for filters that controls the state of parent and child filters
+ *
+ * [Figma Link](https://www.figma.com/design/OvBXAq48blO1r4qYbeBPjW/RW---Sale-Page-(PLP)?node-id=892-71019&node-type=frame&t=AsBDn4UgUEjNUnf7-0)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-filtercontrol--overview)
+ */
+declare const FilterMenu: React.ForwardRefExoticComponent<FilterMenuProps<HTMLFormElement> & React.RefAttributes<HTMLFormElement>>;
+export default FilterMenu;

package/dist/patterns/FilterMenu/FilterMenu.js

@@ -0,0 +1,23 @@
+import { jsx as u } from "react/jsx-runtime";
+import d, { forwardRef as N, useState as C, Children as g, cloneElement as F } from "react";
+import { getCommonProps as V } from "../../utils/index.js";
+import a from "../../node_modules/classnames/index.js";
+import w from "../../components/Filter/Filter.js";
+const x = N(
+  ({ className: t, children: m, element: n = "form", ...r }, l) => {
+    const { className: i, ...p } = V(r, "FilterMenu"), [s, f] = C(null), o = s == null ? void 0 : s.length, c = g.map(
+      m,
+      (e) => d.isValidElement(e) && e.type === w ? F(e, {
+        setViewAllFilter: f,
+        hidden: o ? s !== e.props.name : !1,
+        isViewingAll: o,
+        className: o && a(e.props.className, "is-opening")
+      }) : e
+    );
+    return /* @__PURE__ */ u(n, { ...p, ...r, className: a(i, t), ref: l, children: c });
+  }
+);
+x.displayName = "FilterControl";
+export {
+  x as default
+};

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

@@ -0,0 +1,29 @@
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./FilterMenu').FilterMenuProps<HTMLFormElement> & import('react').RefAttributes<HTMLFormElement>>;
+};
+export default meta;
+type FilterDimension = {
+    label: string;
+    active: boolean;
+    disabled?: boolean | undefined;
+};
+type FilterType = {
+    label: string;
+    id: string;
+    filterDimensions: FilterDimension[];
+    type: 'checkbox' | 'radio';
+};
+type PropTypes = {
+    isOpen: boolean;
+    filters: FilterType[];
+    onClose: () => void;
+};
+export declare const Playground: {
+    (props: PropTypes): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isOpen: boolean;
+        filters: FilterType[];
+    };
+    argTypes: {};
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+export type lotType = {
+    id: string;
+    lotNumber: number;
+    title: string;
+    imageSrc: string;
+    maker: string;
+    price: number;
+    collection: string;
+};
+export declare const exampleAuctionLots: lotType[];

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -88,7 +88,7 @@ const i = `${u}-viewings-list-card`, dt = ({
             labelText: q,
             size: "sm",
             name: "location",
-            invalid: n == null ? void 0 : n.location,
+            invalid: !!(n != null && n.location),
             invalidText: n == null ? void 0 : n.location,
             readOnly: !o
           }

package/dist/patterns/ViewingsList/ViewingsListCardForm.js

@@ -1,6 +1,6 @@
-import { jsxs as a, Fragment as W, jsx as t } from "react/jsx-runtime";
-import b from "../../node_modules/classnames/index.js";
-import * as T from "react";
+import { jsxs as T, Fragment as W, jsx as t } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import * as a from "react";
 import { px as X } from "../../utils/index.js";
 import u from "../../components/Input/Input.js";
 const o = `${X}-viewings-list-card-form`, l = ({
@@ -12,7 +12,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
   address2Label: h = "City, State, Zip ('New York, NY 10019')",
   address3: z,
   address3Label: L = "Country (United States)",
-  emailOn: O = "false",
+  emailOn: O,
   emailToggleLabel: D = "Include Email Address",
   email: C,
   emailLabel: S = "Email",
@@ -28,7 +28,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
   previewHours2Label: P = "Hours2",
   previewLabel: j = "Label ('Preview', 'Opening Night', etc)",
   previewLabelValue: I,
-  previewOn: p = "false",
+  previewOn: p,
   previewToggleLabel: R = "Additional Hours",
   viewingLabel: Y = "Label ('Open to public')",
   viewingLabelValue: Z,
@@ -39,10 +39,10 @@ const o = `${X}-viewings-list-card-form`, l = ({
   viewingHours2: K,
   viewingHours2Label: M = "Hours2"
 }) => {
-  const [m, f] = T.useState(p === "true"), [w, Q] = T.useState(O === "true");
-  return T.useEffect(() => {
-    f(p === "true");
-  }, [p]), /* @__PURE__ */ a(W, { children: [
+  const [m, b] = a.useState(p === "true"), [w, Q] = a.useState(O === "true");
+  return a.useEffect(() => {
+    b(p === "true");
+  }, [p]), /* @__PURE__ */ T(W, { children: [
     /* @__PURE__ */ t(
       u,
       {
@@ -51,7 +51,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: Z,
         labelText: Y,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalid: !!(e != null && e.viewingLabelValue),
         invalidText: e == null ? void 0 : e.viewingLabelValue
       }
     ),
@@ -63,7 +63,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: q,
         labelText: B,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingDates,
+        invalid: !!(e != null && e.viewingDates),
         invalidText: e == null ? void 0 : e.viewingDates
       }
     ),
@@ -75,7 +75,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: G,
         labelText: J,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingHours1,
+        invalid: !!(e != null && e.viewingHours1),
         invalidText: e == null ? void 0 : e.viewingHours1
       }
     ),
@@ -87,7 +87,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: K,
         labelText: M,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingHours2,
+        invalid: !!(e != null && e.viewingHours2),
         invalidText: e == null ? void 0 : e.viewingHours2
       }
     ),
@@ -100,18 +100,17 @@ const o = `${X}-viewings-list-card-form`, l = ({
         size: "md",
         defaultChecked: m,
         inline: !0,
-        invalid: e == null ? void 0 : e.previewOn,
+        invalid: !!(e != null && e.previewOn),
         invalidText: e == null ? void 0 : e.previewOn,
-        value: !0,
         name: "previewOn",
-        onChange: () => f((x) => !x)
+        onChange: () => b((x) => !x)
       }
     ),
     m ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "previewOn", value: "false" }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ T(
       "div",
       {
-        className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
+        className: f(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
         children: [
           /* @__PURE__ */ t(
             u,
@@ -121,7 +120,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: I,
               labelText: j,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewLabelValue,
+              invalid: !!(e != null && e.previewLabelValue),
               invalidText: e == null ? void 0 : e.previewLabelValue,
               hidden: !m
             }
@@ -134,7 +133,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: y,
               labelText: E,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewDates,
+              invalid: !!(e != null && e.previewDates),
               invalidText: e == null ? void 0 : e.previewDates,
               hidden: !m
             }
@@ -147,7 +146,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: U,
               labelText: A,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewHours1,
+              invalid: !!(e != null && e.previewHours1),
               invalidText: e == null ? void 0 : e.previewHours1,
               hidden: !m
             }
@@ -160,7 +159,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: N,
               labelText: P,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewHours2,
+              invalid: !!(e != null && e.previewHours2),
               invalidText: e == null ? void 0 : e.previewHours2,
               hidden: !m
             }
@@ -176,7 +175,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: g,
         labelText: H,
         size: "sm",
-        invalid: e == null ? void 0 : e.address1,
+        invalid: !!(e != null && e.address1),
         invalidText: e == null ? void 0 : e.address1
       }
     ),
@@ -188,7 +187,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: c,
         labelText: h,
         size: "sm",
-        invalid: e == null ? void 0 : e.address2,
+        invalid: !!(e != null && e.address2),
         invalidText: e == null ? void 0 : e.address2
       }
     ),
@@ -200,7 +199,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: z,
         labelText: L,
         size: "sm",
-        invalid: e == null ? void 0 : e.address3,
+        invalid: !!(e != null && e.address3),
         invalidText: e == null ? void 0 : e.address3
       }
     ),
@@ -213,7 +212,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         labelText: $,
         size: "sm",
         type: "url",
-        invalid: e == null ? void 0 : e.addressUrl,
+        invalid: !!(e != null && e.addressUrl),
         invalidText: e == null ? void 0 : e.addressUrl
       }
     ),
@@ -226,18 +225,17 @@ const o = `${X}-viewings-list-card-form`, l = ({
         size: "md",
         defaultChecked: w,
         inline: !0,
-        invalid: e == null ? void 0 : e.emailOn,
+        invalid: !!(e != null && e.emailOn),
         invalidText: e == null ? void 0 : e.emailOn,
-        value: !0,
         name: "emailOn",
         onChange: () => Q((x) => !x)
       }
     ),
     w ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "emailOn", value: "false" }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ T(
       "div",
       {
-        className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !w }),
+        className: f(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !w }),
         children: [
           /* @__PURE__ */ t(
             u,
@@ -247,7 +245,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: C,
               labelText: S,
               size: "sm",
-              invalid: e == null ? void 0 : e.address2,
+              invalid: !!(e != null && e.address2),
               invalidText: e == null ? void 0 : e.address2,
               hidden: !w
             }
@@ -260,7 +258,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: _,
               labelText: k,
               size: "sm",
-              invalid: e == null ? void 0 : e.address3,
+              invalid: !!(e != null && e.address3),
               invalidText: e == null ? void 0 : e.address3,
               hidden: !w
             }

package/dist/scss/componentStyles.scss

@@ -40,6 +40,11 @@
 @use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
+@use 'components/Detail/detail';
+@use 'components/PinchZoom/pinchZoom';
+@use 'components/Tabs/tabs';
+@use 'components/SeldonImage/seldonImage';
+@use 'components/Filter/filter';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';
@@ -49,14 +54,11 @@
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
 @use 'patterns/SaleHeaderBanner/saleHeaderBanner';
+@use 'patterns/ObjectTile/objectTile';
+@use 'patterns/BidSnapshot/bidSnapshot';
+@use 'patterns/FilterMenu/filterMenu';
+@use 'patterns/DetailList/detailList';
 
 // Site Furniture
 @use 'site-furniture/Header/header';
 @use 'site-furniture/Footer/footer';
-@use 'components/Detail/detail';
-@use 'patterns/DetailList/detailList';
-@use 'components/PinchZoom/pinchZoom';
-@use 'components/Tabs/tabs';
-@use 'components/SeldonImage/seldonImage';
-@use 'patterns/ObjectTile/objectTile';
-@use 'patterns/BidSnapshot/bidSnapshot';

package/dist/scss/components/Filter/_filter.scss

@@ -0,0 +1,112 @@
+@use '../../allPartials' as *;
+
+$default-transition-duration: 0.3s;
+$default-easing: ease-in-out;
+$chevron-scale: 0.8;
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+.#{$px}-filter {
+  &-header {
+    margin-bottom: $spacing-md;
+
+    legend {
+      padding-inline: 0; // needed for default browser styles
+    }
+
+    &__back {
+      @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+
+      margin-top: $spacing-sm;
+    }
+
+    &__chevron {
+      transform: rotateY(180deg) scale($chevron-scale);
+    }
+  }
+
+  &__chevron {
+    transform: scale($chevron-scale);
+  }
+
+  &__fieldset {
+    border: 0;
+    margin: 0 3px 0 0; // save room for input borders
+    padding: 0;
+  }
+
+  &__filters {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    padding-bottom: $spacing-sm;
+
+    .#{$px}-input {
+      align-items: center;
+      height: unset;
+
+      &__label {
+        @include text($body2);
+
+        color: inherit;
+        margin-bottom: 0;
+      }
+
+      &__input {
+        align-self: center;
+        height: $body-line-height-size3;
+        margin-bottom: 0;
+        width: $body-line-height-size3;
+      }
+
+      &__validation {
+        display: none;
+      }
+    }
+  }
+
+  &__view-all {
+    @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+  }
+
+  &.is-opening {
+    animation: slide-in $default-transition-duration $default-easing forwards;
+  }
+
+  &.is-closing {
+    animation: slide-out $default-transition-duration $default-easing forwards;
+  }
+}
+
+.#{$px}-filter-input {
+  &__input {
+    &__wrapper {
+      display: flex;
+      flex-direction: row;
+      height: 40px;
+      justify-content: space-between;
+    }
+  }
+}

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

@@ -40,7 +40,7 @@ $lg: #{$px}-input--lg;
       font-variation-settings: 'wght' 400;
     }
 
-    &:focus-within {
+    &:focus-visible {
       outline: 1px solid $pure-black;
     }
   }

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -35,7 +35,7 @@
 .#{$px}-bid-message {
   align-items: center;
   display: flex;
-  gap: 6px;
+  gap: $spacing-micro;
 
   // Override the default text style being too specific
   &.#{$px}-bid-message {

package/dist/scss/patterns/FilterMenu/_filterMenu.scss

@@ -0,0 +1,15 @@
+@use '../../allPartials' as *;
+
+.#{$px}-filter-menu {
+  overflow-y: scroll;
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .#{$px}-filter:not([hidden]) + .#{$px}-filter {
+    border-top: 1px solid $light-gray;
+    margin-top: $spacing-sm;
+    padding-top: $spacing-md;
+  }
+}