@phillips/seldon 1.171.1 → 1.172.0

package/dist/components/Drawer/Drawer.d.ts

@@ -12,14 +12,33 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
      * The content of the drawer
      */
     children?: React.ReactNode;
+    /**
+     * A string to be displayed center at the top of the drawer, up with the close button.
+     * Its presence also triggers the horizontal rule below the header to be rendered.
+     */
+    headerText?: string;
+    /**
+     * Used as the accessibility label for the drawer, used for screen readers.
+     * Defaults to the headerText if that's provided, otherwise an empty string.
+     */
+    title?: string;
+    /**
+     * Used as the accessibility description for the drawer, used for screen readers.
+     * Defaults to the title if that's provided, otherwise an empty string.
+     */
+    description?: string;
     /**
      * Which side the drawer opens from: left, right, or bottom
      */
     drawerOpenSide?: 'left' | 'right' | 'bottom';
     /**
-     * Optional label for the bottom content area
+     * Older designs for left/right drawers have more padding around the content.
+     * This value is in rem, and must be an integer under 3.
+     *
+     * Default is 2 if null or undefined, or 1 if headingText is supplied. This is silly
+     * but aligns with design and allows this prop to be left out most of the time.
      */
-    bottomContentLabel?: string;
+    paddingLevel?: 0 | 1 | 2;
 }
 /**
  * ## Overview
@@ -27,5 +46,5 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
  * A component for displaying a drawer.
  *
  */
-declare const Drawer: ({ className, isOpen, onClose, children, drawerOpenSide, bottomContentLabel, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -1,80 +1,87 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import { Root as u, Portal as N, Overlay as v, Content as $, Title as x, Description as y, Close as n } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
-import a from "../../node_modules/classnames/index.js";
-import { getCommonProps as g, noOp as w } from "../../utils/index.js";
-import { ButtonVariants as c } from "../Button/types.js";
-import m from "../Icon/Icon.js";
-import d from "../IconButton/IconButton.js";
-import k from "../Text/Text.js";
-import { TextVariants as B } from "../Text/types.js";
-const q = ({
-  className: h,
-  isOpen: p = !1,
-  onClose: r = w,
-  children: C,
-  drawerOpenSide: i = "right",
-  bottomContentLabel: f,
-  ...l
-}) => {
-  const { className: t, ..._ } = g(l, "Drawer"), s = i === "bottom";
-  return /* @__PURE__ */ o(
-    u,
-    {
-      open: p,
-      onOpenChange: (b) => {
-        b || r();
-      },
-      children: /* @__PURE__ */ e(N, { children: [
-        /* @__PURE__ */ o(
-          v,
-          {
-            onClick: r,
-            className: a(`${t}__overlay`),
-            "data-testid": "drawer-overlay"
-          }
-        ),
-        /* @__PURE__ */ e(
-          $,
-          {
-            className: a(t, h, { [`${t}--bottom`]: s }),
-            "data-side": i,
-            id: l.id,
-            ..._,
-            children: [
-              /* @__PURE__ */ o(x, {}),
-              /* @__PURE__ */ o(y, {}),
-              s ? /* @__PURE__ */ e("div", { className: `${t}__bottom-content`, children: [
-                /* @__PURE__ */ o(n, { asChild: !0, children: /* @__PURE__ */ o(
-                  d,
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import s from "../../node_modules/classnames/index.js";
+import { Root as $, Portal as w, Overlay as D, Content as b, Title as v, Description as B, Close as P } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { VisuallyHidden as n } from "../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { getCommonProps as j, noOp as k } from "../../utils/index.js";
+import H from "./DrawerHeader.js";
+import I from "../IconButton/IconButton.js";
+import { ButtonVariants as R } from "../Button/types.js";
+import V from "../Icon/Icon.js";
+const g = y(
+  ({
+    isOpen: d,
+    onClose: t = k,
+    headerText: a,
+    title: m,
+    description: f = m,
+    drawerOpenSide: e = "right",
+    paddingLevel: i,
+    className: h,
+    children: p,
+    ...l
+  }, C) => {
+    const { className: o, ...u } = j(l, "Drawer"), N = e === "bottom";
+    return i ?? (i = a ? 1 : 2), /* @__PURE__ */ r(
+      $,
+      {
+        open: d,
+        onOpenChange: (_) => {
+          _ || t();
+        },
+        children: /* @__PURE__ */ c(w, { children: [
+          /* @__PURE__ */ r(D, { onClick: t, className: `${o}__overlay`, "data-testid": "drawer-overlay" }),
+          /* @__PURE__ */ c(
+            b,
+            {
+              className: s(o, h, {
+                [`${o}--bottom`]: N
+              }),
+              "data-side": e,
+              id: l.id,
+              ref: C,
+              ...u,
+              children: [
+                /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(v, { children: m }) }),
+                /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(B, { children: f }) }),
+                a ? /* @__PURE__ */ r(
+                  H,
                   {
-                    onClick: r,
-                    className: a(`${t}__close--bottom`),
+                    baseClassName: o,
+                    headerText: a,
+                    onClose: t,
+                    drawerOpenSide: e
+                  }
+                ) : /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
+                  I,
+                  {
+                    onClick: t,
+                    className: s(`${o}__close`),
                     "aria-label": "Close",
                     "data-testid": "drawer-close",
-                    variant: c.tertiary,
-                    children: /* @__PURE__ */ o(m, { icon: "CloseX", color: "currentColor" })
+                    variant: R.tertiary,
+                    children: /* @__PURE__ */ r(V, { icon: "CloseX", color: "currentColor" })
                   }
                 ) }),
-                /* @__PURE__ */ o(k, { variant: B.string1, className: `${t}__bottom-content--label`, children: f })
-              ] }) : /* @__PURE__ */ o(n, { asChild: !0, children: /* @__PURE__ */ o(
-                d,
-                {
-                  onClick: r,
-                  className: a(`${t}__close`),
-                  "aria-label": "Close",
-                  "data-testid": "drawer-close",
-                  variant: c.tertiary,
-                  children: /* @__PURE__ */ o(m, { icon: "CloseX", color: "currentColor" })
-                }
-              ) }),
-              C
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: s(
+                      `${o}__content`,
+                      i < 3 && `${o}__content--ep${i}`
+                    ),
+                    children: p
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+g.displayName = "Drawer";
 export {
-  q as default
+  g as default
 };

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

@@ -1,7 +1,7 @@
 import { DrawerProps } from './Drawer';
 declare const meta: {
     title: string;
-    component: ({ className, isOpen, onClose, children, drawerOpenSide, bottomContentLabel, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 export declare const Playground: {
@@ -9,6 +9,101 @@ export declare const Playground: {
     args: {
         children: string;
         isOpen: boolean;
+        headerText: string;
+        title: undefined;
+        drawerOpenSide: string;
+        paddingLevel: number;
+    };
+    argTypes: {
+        isOpen: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onClose: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        headerText: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        drawerOpenSide: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        paddingLevel: {
+            control: {
+                type: string;
+            };
+            options: (number | undefined)[];
+            description: string;
+            defaultValue: undefined;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
-    argTypes: {};
 };

package/dist/components/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { DrawerProps } from './Drawer';
+type CommonProps = ComponentProps<'div'> & {
+    baseClassName: string;
+    drawerOpenSide: DrawerProps['drawerOpenSide'];
+    onClose: () => void;
+};
+export type DrawerHeaderProps = CommonProps & {
+    headerText?: string;
+};
+declare const DrawerHeader: import('react').ForwardRefExoticComponent<Omit<DrawerHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default DrawerHeader;

package/dist/components/Drawer/DrawerHeader.js

@@ -0,0 +1,34 @@
+import { jsxs as i, Fragment as c, jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Close as d } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import f from "../IconButton/IconButton.js";
+import { ButtonVariants as h } from "../Button/types.js";
+import b from "../Icon/Icon.js";
+const n = ({ baseClassName: a, drawerOpenSide: t, onClose: l, bookendSide: e, ...s }) => {
+  const r = t === "bottom" && e === "left" || t !== "bottom" && e === "right";
+  return /* @__PURE__ */ o("div", { className: `${a}__bookend ${a}__bookend-${e}`, ...s, children: r && /* @__PURE__ */ o(d, { asChild: !0, children: /* @__PURE__ */ o(f, { onClick: l, "aria-label": "Close", "data-testid": "drawer-close", variant: h.tertiary, children: /* @__PURE__ */ o(b, { icon: "CloseX", color: "currentColor" }) }) }) });
+}, _ = m(
+  ({ baseClassName: a, headerText: t, drawerOpenSide: l, onClose: e }, s) => {
+    const r = `${a}-header`;
+    return /* @__PURE__ */ i(c, { children: [
+      /* @__PURE__ */ i("div", { className: r, children: [
+        /* @__PURE__ */ o(n, { baseClassName: r, onClose: e, drawerOpenSide: l, bookendSide: "left" }),
+        /* @__PURE__ */ o("h3", { className: `${r}__title`, children: t }),
+        /* @__PURE__ */ o(
+          n,
+          {
+            baseClassName: r,
+            onClose: e,
+            drawerOpenSide: l,
+            bookendSide: "right"
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ o("div", { className: `${r}__hr` })
+    ] });
+  }
+);
+_.displayName = "DrawerHeader";
+export {
+  _ as default
+};

package/dist/components/Drawer/DrawerHeader.test.d.ts

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

package/dist/patterns/FiltersInline/MainFilterDropdown.js

@@ -1,8 +1,8 @@
 import { jsxs as l, Fragment as A, jsx as o } from "react/jsx-runtime";
 import N from "../../node_modules/classnames/index.js";
-import x from "react";
+import g from "react";
 import c from "../../components/Button/Button.js";
-import { ButtonVariants as g } from "../../components/Button/types.js";
+import { ButtonVariants as x } from "../../components/Button/types.js";
 import k from "../../components/Drawer/Drawer.js";
 import B from "../../components/Filter/Filter.js";
 import D from "../../components/Filter/FilterHeader.js";
@@ -12,7 +12,7 @@ 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(
+const T = g.forwardRef(
   ({
     className: f,
     filterButtonLabel: n,
@@ -24,22 +24,22 @@ const T = x.forwardRef(
     onClickClear: w,
     resultsCount: F,
     dropdownMenuTranslation: d,
-    ariaLabels: s = {},
+    ariaLabels: p = {},
     id: h
   }, _) => {
-    const p = i?.[0] ?? !1, { totalCount: y, filterCount: C } = O(m, n);
+    const s = i?.[0] ?? !1, { totalCount: y, filterCount: C } = O(m, n);
     return /* @__PURE__ */ l(A, { children: [
       /* @__PURE__ */ o(
         H,
         {
           ref: _,
           className: f,
-          isSelected: p,
+          isSelected: s,
           count: C,
           label: n,
           totalCount: y,
           id: h,
-          ariaLabel: s.button || `${n} button`,
+          ariaLabel: p.button || `${n} button`,
           onClick: R(i, a, 0),
           isMobile: !1,
           type: I.Filter
@@ -48,28 +48,29 @@ const T = x.forwardRef(
       /* @__PURE__ */ l(
         k,
         {
-          isOpen: p,
+          isOpen: s,
           drawerOpenSide: "left",
           onClose: () => S(i, a),
           className: `${t}-filter-drawer`,
-          "aria-label": s.drawer || "Filter drawer",
+          "aria-label": p.drawer || "Filter drawer",
+          paddingLevel: 0,
           children: [
-            /* @__PURE__ */ o(j, { className: `${t}-filter-drawer-menu`, children: m?.map((r) => /* @__PURE__ */ l(B, { name: r.label, children: [
-              /* @__PURE__ */ o(D, { heading: r.label }),
-              Array.from(r.filterDimensions).map((e) => /* @__PURE__ */ o(
+            /* @__PURE__ */ o(j, { className: `${t}-filter-drawer-menu`, children: m?.map((e) => /* @__PURE__ */ l(B, { name: e.label, children: [
+              /* @__PURE__ */ o(D, { heading: e.label }),
+              Array.from(e.filterDimensions).map((r) => /* @__PURE__ */ o(
                 M,
                 {
-                  id: e.label,
-                  labelText: e.label,
-                  onChange: ($) => u?.($, r.buttonType),
-                  type: r.type,
-                  disabled: e?.disabled,
-                  name: e.label,
-                  checked: e.active
+                  id: r.label,
+                  labelText: r.label,
+                  onChange: ($) => u?.($, e.buttonType),
+                  type: e.type,
+                  disabled: r?.disabled,
+                  name: r.label,
+                  checked: r.active
                 },
-                e.label
+                r.label
               ))
-            ] }, r.id)) }),
+            ] }, e.id)) }),
             /* @__PURE__ */ l(
               "div",
               {
@@ -82,7 +83,7 @@ const T = x.forwardRef(
                     c,
                     {
                       className: `${t}-filter-dropdown-menu__button`,
-                      variant: g.secondary,
+                      variant: x.secondary,
                       onClick: () => w?.("all"),
                       children: d?.clearAll || "Clear all"
                     }

package/dist/patterns/FiltersInline/SubFilterDropdown.js

@@ -1,103 +1,104 @@
 import { jsxs as g, Fragment as S, jsx as o } from "react/jsx-runtime";
-import { Root as f, Trigger as j, Portal as v, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { Root as f, Trigger as v, Portal as j, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
 import _ from "react";
 import q from "../../components/Drawer/Drawer.js";
-import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as O } from "../../providers/SeldonProvider/utils.js";
 import { px as E } from "../../utils/index.js";
-import { FilterButton as O } from "./FilterButton.js";
+import { FilterButton as C } from "./FilterButton.js";
 import { FilterDropdownMenuDesktop as H } from "./FilterDropdownMenuDesktop.js";
 import { FilterDropdownMenuMobile as N } from "./FilterDropdownMenuMobile.js";
 import { FilterButtonType as Q } from "./types.js";
-import { countActiveFilters as k, getFilterButtonClickHandler as d, getFilterButtonLabel as z } from "./utils.js";
+import { countActiveFilters as k, getFilterButtonClickHandler as l, getFilterButtonLabel as z } from "./utils.js";
 const A = _.forwardRef(
   ({
     filterId: e = 0,
-    className: w,
+    className: h,
     filterButtonLabel: r,
-    buttonType: n,
+    buttonType: i,
     handleClick: m,
     filtersListState: a,
-    filters: l,
-    onSelectFilter: b,
-    onApplyFilter: h,
-    onClickClear: F,
-    resultsCount: $,
-    filterButtonLabelTranslated: c,
-    dropdownMenuTranslation: M,
-    ariaLabels: i = {},
+    filters: t,
+    onSelectFilter: w,
+    onApplyFilter: F,
+    onClickClear: $,
+    resultsCount: b,
+    filterButtonLabelTranslated: p,
+    dropdownMenuTranslation: x,
+    ariaLabels: n = {},
     hideDesktopSortButton: R,
-    id: p
-  }, x) => {
-    const t = a?.[e] ?? !1, { totalCount: C, filterCount: s } = k(l, n), u = z(r, s, c || null);
-    return R && n === Q.Sort ? null : /* @__PURE__ */ g(S, { children: [
-      /* @__PURE__ */ g(D.Media, { lessThan: "md", children: [
+    id: c
+  }, M) => {
+    const d = a?.[e] ?? !1, { totalCount: D, filterCount: s } = k(t, i), u = z(r, s, p || null);
+    return R && i === Q.Sort ? null : /* @__PURE__ */ g(S, { children: [
+      /* @__PURE__ */ g(O.Media, { lessThan: "md", children: [
         /* @__PURE__ */ o(
-          O,
+          C,
           {
-            ref: x,
-            className: w,
-            isSelected: t,
+            ref: M,
+            className: h,
+            isSelected: d,
             count: s,
             label: u,
-            id: p,
-            totalCount: C,
-            ariaLabel: i.button || `${r} button`,
-            onClick: d(a, m, e),
+            id: c,
+            totalCount: D,
+            ariaLabel: n.button || `${r} button`,
+            onClick: l(a, m, e),
             isMobile: !0,
-            type: n
+            type: i
           }
         ),
         /* @__PURE__ */ o(
           q,
           {
             drawerOpenSide: "bottom",
-            isOpen: t,
-            onClose: d(a, m, e),
-            "aria-label": i.drawer || `${r} drawer`,
+            isOpen: d,
+            onClose: l(a, m, e),
+            "aria-label": n.drawer || `${r} drawer`,
             className: `${E}-filter-drawer-mobile`,
-            bottomContentLabel: `${u} Filter`,
+            headerText: `${u} Filter`,
+            paddingLevel: 0,
             children: /* @__PURE__ */ o(
               N,
               {
-                buttonType: n,
-                filters: l,
+                buttonType: i,
+                filters: t,
                 filterIndex: e,
-                onSelectFilter: b,
-                onApplyFilter: h,
-                onClickClear: F,
-                resultsCount: $,
-                ariaLabels: i?.ariaLabel,
+                onSelectFilter: w,
+                onApplyFilter: F,
+                onClickClear: $,
+                resultsCount: b,
+                ariaLabels: n?.ariaLabel,
                 filterButtonLabel: r,
-                filterButtonLabelTranslated: c,
-                dropdownMenuTranslation: M
+                filterButtonLabelTranslated: p,
+                dropdownMenuTranslation: x
               }
             )
           }
         )
       ] }),
-      /* @__PURE__ */ o(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
+      /* @__PURE__ */ o(O.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
         f,
         {
-          open: t,
-          onOpenChange: d(a, m, e),
+          open: d,
+          onOpenChange: l(a, m, e),
           children: [
-            /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(
-              O,
+            /* @__PURE__ */ o(v, { asChild: !0, children: /* @__PURE__ */ o(
+              C,
               {
-                ref: x,
-                className: w,
-                isSelected: t,
+                ref: M,
+                className: h,
+                isSelected: d,
                 count: s,
                 label: u,
-                totalCount: C,
-                id: p,
-                ariaLabel: i.ariaLabel || `${r} button`,
-                onClick: d(a, m, e),
+                totalCount: D,
+                id: c,
+                ariaLabel: n.ariaLabel || `${r} button`,
+                onClick: l(a, m, e),
                 isMobile: !1,
-                type: n
+                type: i
               }
             ) }),
-            /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
+            /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(
               P,
               {
                 avoidCollisions: !0,
@@ -105,28 +106,28 @@ const A = _.forwardRef(
                 sideOffset: 5,
                 align: "start",
                 alignOffset: 5,
-                "aria-label": i.ariaLabel || `${r} dropdown`,
+                "aria-label": n.ariaLabel || `${r} dropdown`,
                 children: /* @__PURE__ */ o(
                   H,
                   {
-                    buttonType: n,
-                    filters: l,
+                    buttonType: i,
+                    filters: t,
                     filterIndex: e,
-                    onSelectFilter: b,
-                    onApplyFilter: h,
-                    onClickClear: F,
-                    resultsCount: $,
-                    ariaLabels: i?.ariaLabel,
+                    onSelectFilter: w,
+                    onApplyFilter: F,
+                    onClickClear: $,
+                    resultsCount: b,
+                    ariaLabels: n?.ariaLabel,
                     filterButtonLabel: r,
-                    filterButtonLabelTranslated: c,
-                    dropdownMenuTranslation: M
+                    filterButtonLabelTranslated: p,
+                    dropdownMenuTranslation: x
                   }
                 )
               }
             ) })
           ]
         },
-        `${p}-${r}-button`
+        `${c}-${r}-button`
       ) })
     ] });
   }

package/dist/scss/componentStyles.scss

@@ -32,6 +32,7 @@
 @use 'components/Accordion/accordion';
 @use 'components/Breadcrumb/breadcrumb';
 @use 'components/Drawer/drawer';
+@use 'components/Drawer/drawerHeader';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
 @use 'components/Select/select';

package/dist/scss/components/Drawer/_drawer.scss

@@ -7,7 +7,6 @@
   flex-direction: column;
   height: 100dvh;
   max-width: 480px;
-  padding: $padding-xl $padding-md $padding-md;
   position: fixed;
   right: 0;
   top: 0;
@@ -18,10 +17,6 @@
     outline: none;
   }
 
-  .#{$px}-icon-close-x:hover {
-    color: $white;
-  }
-
   @media (max-width: $breakpoint-sm) {
     max-width: 100%;
   }
@@ -30,13 +25,6 @@
     padding-bottom: $padding-sm;
   }
 
-  &__overlay {
-    background-color: $overlay-black;
-    inset: 0;
-    position: fixed;
-    z-index: 10;
-  }
-
   &__close {
     align-items: center;
     border-radius: 100%;
@@ -46,11 +34,13 @@
     position: absolute;
     right: 10px;
     top: 10px;
+  }
 
-    &--bottom {
-      align-self: flex-start;
-      margin: $spacing-md;
-    }
+  &__overlay {
+    background-color: $overlay-black;
+    inset: 0;
+    position: fixed;
+    z-index: 10;
   }
 
   // Bottom sheet modifier
@@ -84,6 +74,43 @@
       width: fit-content;
     }
   }
+
+  &__content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-top: $snowflake-menu-padding;
+    width: 100%;
+
+    // different designs require different padding (ep = extra padding). more info in the component.
+
+    &--ep0 {
+      padding-top: 0;
+    }
+
+    &--ep1 {
+      padding: 1rem;
+      padding-top: $snowflake-menu-padding;
+    }
+
+    &--ep2 {
+      padding: 2rem;
+      padding-top: $spacing-xl;
+    }
+
+    &--ep3 {
+      padding: 3rem;
+      padding-top: $snowflake-menu-padding;
+    }
+
+    // make the children scroll in their little children box
+    > * {
+      overflow-y: auto;
+    }
+  }
 }
 
 // Drawer open/close animations

package/dist/scss/components/Drawer/_drawerHeader.scss

@@ -0,0 +1,45 @@
+@use '../../allPartials' as *;
+
+.#{$px}-drawer-header {
+  align-items: center;
+  display: flex;
+  padding: $margin-sm $margin-xsm;
+  width: 100%;
+
+  &__bookend {
+    display: flex;
+    flex: 1 1 0;
+
+    &-right {
+      justify-content: flex-end;
+    }
+
+    &-left {
+      justify-content: flex-start;
+    }
+  }
+
+  &__hr {
+    border-bottom: 2px solid $light-gray;
+    margin-bottom: $spacing-sm;
+    width: 100%;
+  }
+
+  &__title {
+    @include DistinctDisplay;
+
+    color: $primary-black;
+    font-size: $heading-size4;
+    font-variation-settings: 'wght' 600;
+    line-height: $body-line-height-size1;
+    margin-top: 4px; // better visual align with the close icon
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$px}-icon-close-x:hover {
+    color: $white;
+  }
+}

package/package.json

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