@phillips/seldon 1.214.0 → 1.216.0

package/dist/components/Countdown/Duration.js

@@ -1,13 +1,21 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { px as m } from "../../utils/index.js";
-import { formatDuration as p } from "../../node_modules/date-fns/formatDuration.js";
-const u = ({ duration: a, unit: s, locale: n, formatDurationStr: i = (r) => r }) => {
-  const r = `${m}-duration`, t = p(a, { format: [s], zero: !0, locale: n }).split(" ");
-  return /* @__PURE__ */ e("div", { className: r, children: [
-    /* @__PURE__ */ o("span", { children: t[0].padStart(2, "0") }),
-    /* @__PURE__ */ o("span", { children: i(t[1]) })
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { px as d } from "../../utils/index.js";
+import { TextVariants as l } from "../Text/types.js";
+import i from "../Text/Text.js";
+import { formatDuration as c } from "../../node_modules/date-fns/formatDuration.js";
+const b = ({
+  duration: m,
+  unit: s,
+  locale: e,
+  formatDurationStr: n = (r) => r,
+  textVariant: t = l.labelMedium
+}) => {
+  const r = `${d}-duration`, o = c(m, { format: [s], zero: !0, locale: e }).split(" ");
+  return /* @__PURE__ */ p("div", { className: r, children: [
+    /* @__PURE__ */ a(i, { variant: t, children: o[0].padStart(2, "0") }),
+    /* @__PURE__ */ a(i, { variant: t, children: n(o[1]) })
   ] });
 };
 export {
-  u as Duration
+  b as Duration
 };

package/dist/components/Countdown/types.d.ts

@@ -1,4 +1,5 @@
 export declare enum CountdownVariants {
     default = "default",
-    compact = "compact"
+    compact = "compact",
+    sm = "sm"
 }

package/dist/components/Countdown/types.js

@@ -1,4 +1,4 @@
-var e = /* @__PURE__ */ ((c) => (c.default = "default", c.compact = "compact", c))(e || {});
+var e = /* @__PURE__ */ ((c) => (c.default = "default", c.compact = "compact", c.sm = "sm", c))(e || {});
 export {
   e as CountdownVariants
 };

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.js

@@ -1,38 +1,38 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { getCommonProps as N } from "../../utils/index.js";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
 import r from "../../node_modules/classnames/index.js";
-import c from "../Text/Text.js";
-import { TextVariants as n } from "../Text/types.js";
-const $ = u(
-  ({ labelText: m, description: a, className: d, containerClassName: l, id: _, ...t }, p) => {
-    const { className: e, ...f } = N(
-      t,
+import i from "../Text/Text.js";
+import { TextVariants as N } from "../Text/types.js";
+const $ = h(
+  ({ labelText: m, description: t, className: n, containerClassName: l, id: d, ...a }, _) => {
+    const { className: e, ...p } = u(
+      a,
       "descriptive-radio-button"
-    ), s = _, h = a ? `${s}-desc` : void 0;
-    return /* @__PURE__ */ o(
+    ), s = d, f = t ? `${s}-desc` : void 0;
+    return /* @__PURE__ */ c(
       "label",
       {
         htmlFor: s,
         className: r(`${e}__container`, l, {
-          [`${e}__container--selected`]: t.checked
+          [`${e}__container--selected`]: a.checked
         }),
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ o(
             "input",
             {
-              ...f,
-              ...t,
-              ref: p,
+              ...p,
+              ...a,
+              ref: _,
               id: s,
               type: "radio",
-              className: r(`${e}__input`, d),
-              checked: t.checked
+              className: r(`${e}__input`, n),
+              checked: a.checked
             }
           ),
-          /* @__PURE__ */ o("span", { className: `${e}__label-content`, children: [
-            /* @__PURE__ */ i(c, { variant: n.string1, className: `${e}__label-text`, children: m }),
-            a && /* @__PURE__ */ i(c, { variant: n.string2, id: h, className: `${e}__description`, children: a })
+          /* @__PURE__ */ c("span", { className: `${e}__label-content`, children: [
+            /* @__PURE__ */ o(i, { variant: N.labelLarge, className: `${e}__label-text`, children: m }),
+            t && /* @__PURE__ */ o(i, { id: f, className: `${e}__description`, children: t })
           ] })
         ]
       }

package/dist/components/Detail/Detail.d.ts

@@ -1,9 +1,11 @@
 import { default as React, ComponentProps } from 'react';
+import { DetailVariants } from './types';
 export interface DetailProps extends ComponentProps<'div'> {
     hasWrap?: boolean;
     label: React.ReactNode;
     subLabel?: React.ReactNode;
     value: React.ReactNode;
+    variant?: DetailVariants;
 }
 /**
  * ## Overview

package/dist/components/Detail/Detail.js

@@ -1,21 +1,32 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { getCommonProps as f } from "../../utils/index.js";
-import m from "../../node_modules/classnames/index.js";
-const N = p(
-  ({ className: o = "", hasWrap: t = !0, label: i, subLabel: e, value: n, ...s }, c) => {
-    const { className: a, ...d } = f(s, "Detail");
-    return /* @__PURE__ */ l("div", { ...d, className: m(a, o), ...s, ref: c, children: [
-      /* @__PURE__ */ l("dt", { className: m(`${a}__label`, { [`${a}__label--no-wrap`]: !t }), children: [
-        i,
-        " ",
-        e ? /* @__PURE__ */ r("span", { children: e }) : null
-      ] }),
-      /* @__PURE__ */ r("dd", { className: `${a}__value`, children: n })
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { getCommonProps as h } from "../../utils/index.js";
+import r from "../../node_modules/classnames/index.js";
+import { TextVariants as a } from "../Text/types.js";
+import o from "../Text/Text.js";
+const x = N(
+  ({ className: c = "", hasWrap: d = !0, label: b, subLabel: m, value: _, variant: e = "md", ...t }, f) => {
+    const { className: l, ...p } = h(t, "Detail"), i = e === "sm" ? a.labelSmall : e === "lg" ? a.labelLarge : a.labelMedium, u = e === "sm" ? a.bodySmall : e === "lg" ? a.bodyLarge : a.labelMedium;
+    return /* @__PURE__ */ n("div", { ...p, className: r(l, c), ...t, ref: f, children: [
+      /* @__PURE__ */ n(
+        "dt",
+        {
+          className: r(`${l}__label-section`, {
+            [`${l}__label--no-wrap`]: !d,
+            [`${l}__label-section--has-sub-label`]: m
+          }),
+          children: [
+            /* @__PURE__ */ s(o, { variant: i, className: r(`${l}__label-section--label`), children: b }),
+            " ",
+            m ? /* @__PURE__ */ s(o, { className: `${l}__sub-label`, variant: i, children: m }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("dd", { className: `${l}__value`, children: /* @__PURE__ */ s(o, { variant: u, children: _ }) })
     ] });
   }
 );
-N.displayName = "Detail";
+x.displayName = "Detail";
 export {
-  N as default
+  x as default
 };

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

@@ -1,4 +1,5 @@
 import { DetailProps } from './Detail';
+import { DetailVariants } from './types';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<DetailProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -8,8 +9,40 @@ export declare const Playground: {
     (props: DetailProps): import("react/jsx-runtime").JSX.Element;
     args: {
         label: string;
-        subLabel: string;
-        value: import("react/jsx-runtime").JSX.Element;
+        value: string;
     };
     argTypes: {};
 };
+export declare const Small: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};
+export declare const Medium: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};
+export declare const Large: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSubLabel: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: DetailVariants;
+        label: string;
+        value: string;
+    };
+};

package/dist/components/Detail/index.d.ts

@@ -1 +1,2 @@
 export { default as Detail, type DetailProps, type DetailComponent } from './Detail';
+export { DetailVariants } from './types';

package/dist/components/Detail/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum DetailVariants {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}

package/dist/components/Detail/types.js

@@ -0,0 +1,4 @@
+var d = /* @__PURE__ */ ((m) => (m.lg = "lg", m.md = "md", m.sm = "sm", m))(d || {});
+export {
+  d as DetailVariants
+};

package/dist/components/Drawer/DrawerHeader.js

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

package/dist/components/ExitGateCard/ExitGateCard.js

@@ -1,50 +1,50 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import h from "../../node_modules/classnames/index.js";
 import { forwardRef as $ } from "react";
-import { getCommonProps as v } from "../../utils/index.js";
+import { getCommonProps as g } from "../../utils/index.js";
 import C from "../Button/Button.js";
 import { ButtonVariants as E } from "../Button/types.js";
 import "../Link/types.js";
-import g from "../Link/Link.js";
-import y from "../SeldonImage/SeldonImage.js";
-import { TextVariants as e } from "../Text/types.js";
-import r from "../Text/Text.js";
-const G = $(
+import v from "../Link/Link.js";
+import G from "../SeldonImage/SeldonImage.js";
+import { TextVariants as p } from "../Text/types.js";
+import a from "../Text/Text.js";
+const j = $(
   ({
     className: f,
-    imageSrc: n,
-    label: o,
+    imageSrc: r,
+    label: n,
     header: m,
-    description: s,
-    linkLabel: l,
-    linkHref: i,
-    linkElement: c = g,
+    description: o,
+    linkLabel: s,
+    linkHref: l,
+    linkElement: i = v,
     variant: _ = E.secondary,
-    altText: N = "Exit Gate Card Image",
-    ...d
-  }, u) => {
-    const { className: t, ...x } = v(d, "ExitGateCard");
-    return /* @__PURE__ */ p("article", { ...x, className: h(t, f), ...d, ref: u, children: [
-      n ? /* @__PURE__ */ a(
-        y,
+    altText: u = "Exit Gate Card Image",
+    ...c
+  }, N) => {
+    const { className: t, ...x } = g(c, "ExitGateCard");
+    return /* @__PURE__ */ d("article", { ...x, className: h(t, f), ...c, ref: N, children: [
+      r ? /* @__PURE__ */ e(
+        G,
         {
           objectFit: "cover",
           aspectRatio: "16/9",
-          src: n,
-          alt: N,
+          src: r,
+          alt: u,
           className: `${t}__desktop_image`
         }
       ) : null,
-      /* @__PURE__ */ p("div", { className: `${t}__content`, children: [
-        o ? /* @__PURE__ */ a(r, { variant: e.body2, element: "span", className: `${t}__content-label`, children: o }) : null,
-        m ? /* @__PURE__ */ a(r, { variant: e.heading1, element: "span", className: `${t}__content-title`, children: m }) : null,
-        s ? /* @__PURE__ */ a(r, { variant: e.body2, element: "span", className: `${t}__content-description`, children: s }) : null,
-        (l || c) && i ? /* @__PURE__ */ a(c, { href: i, children: /* @__PURE__ */ a(C, { variant: _, className: `${t}__content-link`, children: l }) }) : null
+      /* @__PURE__ */ d("div", { className: `${t}__content`, children: [
+        n ? /* @__PURE__ */ e(a, { variant: p.labelMedium, element: "span", className: `${t}__content-label`, children: n }) : null,
+        m ? /* @__PURE__ */ e(a, { variant: p.headingLarge, element: "span", className: `${t}__content-title`, children: m }) : null,
+        o ? /* @__PURE__ */ e(a, { element: "span", className: `${t}__content-description`, children: o }) : null,
+        (s || i) && l ? /* @__PURE__ */ e(i, { href: l, children: /* @__PURE__ */ e(C, { variant: _, className: `${t}__content-link`, children: s }) }) : null
       ] })
     ] });
   }
 );
-G.displayName = "ExitGateCard";
+j.displayName = "ExitGateCard";
 export {
-  G as default
+  j as default
 };

package/dist/components/FavoritingTileButton/FavoritingTileButton.js

@@ -1,46 +1,45 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { getCommonProps as h } from "../../utils/index.js";
-import b from "../../node_modules/classnames/index.js";
-import { TextVariants as t } from "../Text/types.js";
-import e from "../Text/Text.js";
-const g = v(
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { getCommonProps as N } from "../../utils/index.js";
+import h from "../../node_modules/classnames/index.js";
+import o from "../Text/Text.js";
+const _ = u(
   ({
-    className: d,
-    actionAddText: i = "Add to",
-    actionRemoveText: m = "Remove from",
-    isLotInList: r,
-    listTitle: n,
+    className: n,
+    actionAddText: m = "Add to",
+    actionRemoveText: t = "Remove from",
+    isLotInList: e,
+    listTitle: s,
     numberOfObjects: c,
-    onClick: f,
-    ...s
-  }, p) => {
-    const { className: a, ...u } = h(s, "FavoritingTileButton");
-    return /* @__PURE__ */ l(
+    onClick: d,
+    ...l
+  }, f) => {
+    const { className: r, ...p } = N(l, "FavoritingTileButton");
+    return /* @__PURE__ */ i(
       "button",
       {
-        ...u,
-        className: b(a, d, {
-          [`${a}--lot-in-list`]: r
+        ...p,
+        className: h(r, n, {
+          [`${r}--lot-in-list`]: e
         }),
-        onClick: f,
-        ref: p,
-        id: s?.id,
-        "aria-label": `${r ? m : i} ${n}`,
-        "aria-pressed": r,
+        onClick: d,
+        ref: f,
+        id: l?.id,
+        "aria-label": `${e ? t : m} ${s}`,
+        "aria-pressed": e,
         role: "switch",
         children: [
-          /* @__PURE__ */ l("div", { className: `${a}__text`, children: [
-            /* @__PURE__ */ o(e, { variant: t.button, children: r ? m : i }),
-            /* @__PURE__ */ o(e, { variant: t.string2, children: n })
+          /* @__PURE__ */ i("div", { className: `${r}__text`, children: [
+            /* @__PURE__ */ a(o, { className: `${r}__text--action`, children: e ? t : m }),
+            /* @__PURE__ */ a(o, { children: s })
           ] }),
-          /* @__PURE__ */ o(e, { variant: t.button, children: c })
+          /* @__PURE__ */ a(o, { className: `${r}__text--number`, children: c })
         ]
       }
     );
   }
 );
-g.displayName = "FavoritingTileButton";
+_.displayName = "FavoritingTileButton";
 export {
-  g as default
+  _ as default
 };

package/dist/components/Filter/Filter.js

@@ -1,55 +1,57 @@
-import { jsxs as t, jsx as d } from "react/jsx-runtime";
-import { forwardRef as H, useState as P, Children as j, isValidElement as c, cloneElement as f } from "react";
-import { getCommonProps as B, findChildrenOfType as I, findChildrenExcludingTypes as R, px as T } from "../../utils/index.js";
-import b from "../../node_modules/classnames/index.js";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b, useState as E, Children as H, isValidElement as c, cloneElement as f } from "react";
+import { getCommonProps as P, findChildrenOfType as j, findChildrenExcludingTypes as B, px as I } from "../../utils/index.js";
+import R from "../../node_modules/classnames/index.js";
 import p from "./FilterHeader.js";
 import k from "../Button/Button.js";
-import { ButtonVariants as O } from "../Button/types.js";
-import S from "../Icon/Icon.js";
-const q = H(
+import { ButtonVariants as M } from "../Button/types.js";
+import O from "../Icon/Icon.js";
+import { TextVariants as S } from "../Text/types.js";
+import V from "../Text/Text.js";
+const q = b(
   ({
     className: h,
-    children: C,
-    name: a,
-    viewAllLimit: n = 10,
-    isViewingAll: r = !1,
+    children: _,
+    name: i,
+    viewAllLimit: l = 10,
+    isViewingAll: s = !1,
     isHidden: u = !1,
-    setViewAllFilter: l,
-    viewAllLabel: N = "View All",
-    ...i
-  }, _) => {
-    const [y, g] = P(!1), { className: e, ...v } = B(i, "Filter"), s = j.toArray(C), x = { isViewingAll: r, setViewAllFilter: l, setIsClosing: g }, m = I(s, p)?.[0], F = c(m) ? f(m, x) : null, $ = R(s, [p])?.map(
-      (o, E) => c(o) ? f(o, { hidden: !r && E + 1 > n }) : o
+    setViewAllFilter: n,
+    viewAllLabel: C = "View All",
+    ...m
+  }, N) => {
+    const [v, x] = E(!1), { className: e, ...y } = P(m, "Filter"), t = H.toArray(_), $ = { isViewingAll: s, setViewAllFilter: n, setIsClosing: x }, d = j(t, p)?.[0], g = c(d) ? f(d, $) : null, F = B(t, [p])?.map(
+      (a, T) => c(a) ? f(a, { hidden: !s && T + 1 > l }) : a
     );
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ o(
       "div",
       {
-        ...v,
-        className: b(e, h, {
-          [`${T}-filter--hidden`]: u,
-          "is-closing": y
+        ...y,
+        className: R(e, h, {
+          [`${I}-filter--hidden`]: u,
+          "is-closing": v
         }),
-        ...i,
-        ref: _,
+        ...m,
+        ref: N,
         children: [
-          /* @__PURE__ */ t("fieldset", { name: a, className: `${e}__fieldset`, children: [
-            F,
-            /* @__PURE__ */ d("div", { className: `${e}__filters`, children: $ })
+          /* @__PURE__ */ o("fieldset", { name: i, className: `${e}__fieldset`, children: [
+            g,
+            /* @__PURE__ */ r("div", { className: `${e}__filters`, children: F })
           ] }),
-          s.length > n && !r ? /* @__PURE__ */ t(
+          t.length > l && !s ? /* @__PURE__ */ r("div", { className: `${e}__view-all`, children: /* @__PURE__ */ o(
             k,
             {
-              className: `${e}__view-all`,
-              variant: O.tertiary,
+              className: `${e}__view-all__button`,
+              variant: M.tertiary,
               onClick: () => {
-                l?.(a);
+                n?.(i);
               },
               children: [
-                N,
-                /* @__PURE__ */ d(S, { icon: "ChevronRight", className: `${e}__chevron` })
+                /* @__PURE__ */ r(V, { variant: S.labelMedium, children: C }),
+                /* @__PURE__ */ r(O, { icon: "ChevronRight", className: `${e}__chevron` })
               ]
             }
-          ) : null
+          ) }) : null
         ]
       }
     );

package/dist/components/Filter/FilterHeader.d.ts

@@ -4,6 +4,10 @@ export interface FilterHeaderProps extends ComponentProps<'div'> {
     isViewingAll?: boolean;
     setViewAllFilter?: Dispatch<SetStateAction<null>>;
     setIsClosing?: Dispatch<SetStateAction<boolean>>;
+    /**
+     *  translatable string for back to all button
+     */
+    backToAllLabel?: string;
 }
 /**
  * ## Overview

package/dist/components/Filter/FilterHeader.js

@@ -1,31 +1,39 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { getCommonProps as u } from "../../utils/index.js";
-import h from "../../node_modules/classnames/index.js";
-import { TextVariants as N } from "../Text/types.js";
-import x from "../Text/Text.js";
-import v from "../Button/Button.js";
-import { ButtonVariants as C } from "../Button/types.js";
-import _ from "../Icon/Icon.js";
-const g = p(
-  ({ className: m, heading: i, isViewingAll: l = !1, setViewAllFilter: n, setIsClosing: a, ...o }, s) => {
-    const { className: e, ...c } = u(o, "FilterHeader"), f = () => {
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { getCommonProps as v } from "../../utils/index.js";
+import x from "../../node_modules/classnames/index.js";
+import { TextVariants as m } from "../Text/types.js";
+import l from "../Text/Text.js";
+import C from "../Button/Button.js";
+import { ButtonVariants as _ } from "../Button/types.js";
+import b from "../Icon/Icon.js";
+const g = N(
+  ({
+    className: i,
+    heading: n,
+    isViewingAll: s = !1,
+    setViewAllFilter: c,
+    setIsClosing: a,
+    backToAllLabel: d = "Back to all",
+    ...t
+  }, f) => {
+    const { className: r, ...p } = v(t, "FilterHeader"), u = () => {
       a?.(!0), setTimeout(() => {
-        n?.(null), a?.(!1);
+        c?.(null), a?.(!1);
       }, 300);
     };
-    return /* @__PURE__ */ t("div", { ...c, className: h(e, m), ...o, ref: s, children: [
-      /* @__PURE__ */ r(
-        x,
+    return /* @__PURE__ */ o("div", { ...p, className: x(r, i), ...t, ref: f, children: [
+      /* @__PURE__ */ e(
+        l,
         {
-          variant: N.heading4,
-          className: `${e}__heading`,
-          element: (d) => /* @__PURE__ */ r("legend", { ...d, children: i })
+          variant: m.headingSmall,
+          className: `${r}__heading`,
+          element: (h) => /* @__PURE__ */ e("legend", { ...h, children: n })
         }
       ),
-      l ? /* @__PURE__ */ t(v, { variant: C.tertiary, onClick: f, className: `${e}__back`, children: [
-        /* @__PURE__ */ r(_, { icon: "ChevronLeft" }),
-        "Back to all"
+      s ? /* @__PURE__ */ o(C, { variant: _.tertiary, onClick: u, className: `${r}__back`, children: [
+        /* @__PURE__ */ e(b, { icon: "ChevronLeft" }),
+        /* @__PURE__ */ e(l, { variant: m.labelMedium, children: d })
       ] }) : null
     ] });
   }