@phillips/seldon 1.215.0 → 1.216.0

package/dist/patterns/DetailList/DetailList.js

@@ -1,42 +1,43 @@
-import { jsx as l } from "react/jsx-runtime";
-import $, { forwardRef as j } from "react";
-import f from "../../node_modules/classnames/index.js";
-import { getCommonProps as y, px as s } from "../../utils/index.js";
-import { DetailListAlignment as a } from "./types.js";
-import { getDetailKey as D } from "./utils.js";
-const N = j(
-  ({ alignment: e = a.justified, className: p, children: t, hasSeparators: i = !1, ...o }, c) => {
-    const { className: m, ...d } = y(o, "DetailList"), u = Array.isArray(t) ? t : [t];
-    return /* @__PURE__ */ l(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as j, isValidElement as y, cloneElement as D } from "react";
+import p from "../../node_modules/classnames/index.js";
+import { getCommonProps as N, px as s } from "../../utils/index.js";
+import { DetailListAlignment as e } from "./types.js";
+import { getDetailKey as A } from "./utils.js";
+const L = j(
+  ({ alignment: o = e.justified, className: c, children: t, hasSeparators: i = !1, variant: a = "md", ...l }, d) => {
+    const { className: m, ...n } = N(l, "DetailList"), u = Array.isArray(t) ? t : [t];
+    return /* @__PURE__ */ f(
       "dl",
       {
-        ...d,
-        className: f(m, p, {
+        ...n,
+        className: p(m, c, {
           [`${s}-has-separators`]: i,
-          [`${s}-columns`]: e === a.columns,
-          [`${s}-justified`]: e === a.justified
+          [`${s}-columns`]: o === e.columns,
+          [`${s}-justified`]: o === e.justified,
+          [`${m}--${a}`]: a
         }),
-        ...o,
-        ref: c,
+        ...l,
+        ref: d,
         children: u?.map(
-          (r, n) => $.isValidElement(r) ? /* @__PURE__ */ l(
+          (r, $) => y(r) ? /* @__PURE__ */ f(
             "div",
             {
-              className: f(`${m}-wrapper`, {
+              className: p(`${m}-wrapper`, {
                 [`${s}-has-separators`]: i,
-                [`${s}-columns`]: e === a.columns,
-                [`${s}-justified`]: e === a.justified
+                [`${s}-columns`]: o === e.columns,
+                [`${s}-justified`]: o === e.justified
               }),
-              children: r
+              children: D(r, { variant: r.props.variant || a })
             },
-            D(r, n)
+            A(r, $)
           ) : void 0
         )
       }
     );
   }
 );
-N.displayName = "DetailList";
+L.displayName = "DetailList";
 export {
-  N as default
+  L as default
 };

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

@@ -5,3 +5,4 @@ declare const meta: {
 };
 export default meta;
 export declare const Playground: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { Root as q, Trigger as B, Portal as G, Content as H } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
-import d from "../../node_modules/classnames/index.js";
+import _ from "../../node_modules/classnames/index.js";
 import { memo as J, forwardRef as Q, useRef as U } from "react";
 import $ from "../../components/Icon/Icon.js";
 import W from "../../components/Link/Link.js";
 import X from "../../components/SeldonImage/SeldonImage.js";
-import { TextVariants as g } from "../../components/Text/types.js";
-import v from "../../components/Text/Text.js";
+import { TextVariants as l } from "../../components/Text/types.js";
+import m from "../../components/Text/Text.js";
 import { getCommonProps as Z } from "../../utils/index.js";
 const S = ({
   baseClassName: e,
@@ -23,7 +23,7 @@ const S = ({
     onClick: (n) => {
       n.stopPropagation(), o?.(n);
     },
-    children: /* @__PURE__ */ t("span", { className: d(`${e}__empty`, `${e}__empty--create-list`), children: /* @__PURE__ */ c("span", { className: `${e}__empty__content`, children: [
+    children: /* @__PURE__ */ t("span", { className: _(`${e}__empty`, `${e}__empty--create-list`), children: /* @__PURE__ */ s("span", { className: `${e}__empty__content`, children: [
       /* @__PURE__ */ t(
         $,
         {
@@ -31,11 +31,11 @@ const S = ({
           width: r,
           height: r,
           color: "$gray-75",
-          className: d(`${e}__icon`, `${e}__icon-circle`),
+          className: _(`${e}__icon`, `${e}__icon-circle`),
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ t("span", { className: `${e}__text`, children: a })
+      /* @__PURE__ */ t(m, { className: `${e}__text`, variant: l.bodyMedium, children: a })
     ] }) })
   }
 ), N = ({
@@ -44,7 +44,7 @@ const S = ({
   text: a,
   ariaLabel: o,
   dataTestId: n
-}) => /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": n, "aria-label": o, role: "region", children: /* @__PURE__ */ t("div", { className: d(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ c("div", { className: `${e}__empty__content`, children: [
+}) => /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": n, "aria-label": o, role: "region", children: /* @__PURE__ */ t("div", { className: _(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ s("div", { className: `${e}__empty__content`, children: [
   /* @__PURE__ */ t(
     $,
     {
@@ -52,11 +52,11 @@ const S = ({
       width: r,
       height: r,
       color: "$gray-75",
-      className: d(`${e}__icon`),
+      className: _(`${e}__icon`),
       "aria-hidden": "true"
     }
   ),
-  /* @__PURE__ */ t("div", { className: `${e}__text`, children: a })
+  /* @__PURE__ */ t(m, { className: `${e}__text`, variant: l.bodyMedium, children: a })
 ] }) }) }), z = ({
   baseClassName: e,
   imageRef: r,
@@ -85,7 +85,7 @@ const S = ({
       }
     )
   }
-), dt = J(
+), lt = J(
   Q(
     ({
       id: e,
@@ -93,41 +93,41 @@ const S = ({
       count: a,
       name: o,
       imageSrc: n,
-      variant: _,
-      element: L = W,
-      href: w,
-      emptyFavoritesText: b = "You have not added any objects to your Favorites yet.",
+      variant: p,
+      element: b = W,
+      href: L,
+      emptyFavoritesText: w = "You have not added any objects to your Favorites yet.",
       emptyListsText: x = "You have not added any objects to your List yet.",
       createFirstListText: k = "Create your first List.",
       editListText: I = "Edit List",
-      deleteListText: T = "Delete List",
+      deleteListText: M = "Delete List",
       onEdit: E,
       onDelete: F,
-      formatlotStr: u = (i, p = i === 1 ? "LOT" : "LOTS") => `${i} ${p}`,
+      formatlotStr: v = (i, u = i === 1 ? "Lot" : "Lots") => `${i} ${u}`,
       linkClassName: P,
-      iconSize: l = 22,
+      iconSize: c = 22,
       menuAriaLabel: R = "Manage List",
-      favoritesAriaLabel: V = "Favorites",
-      emptyListAriaLabel: j = "Empty List",
-      listAriaLabel: C = "List",
-      ...y
-    }, O) => {
-      const { className: i, ...p } = Z({ id: e, ...y }, "FavoritesCollectionTile"), D = U(null), m = o && a !== null && a !== void 0, h = a === 0, f = _ === "lists", A = _ === "create", M = _ === "favorites" && h, Y = m && h && f, K = () => A ? /* @__PURE__ */ t(
+      favoritesAriaLabel: T = "Favorites",
+      emptyListAriaLabel: V = "Empty List",
+      listAriaLabel: j = "List",
+      ...f
+    }, C) => {
+      const { className: i, ...u } = Z({ id: e, ...f }, "FavoritesCollectionTile"), D = U(null), h = o && a !== null && a !== void 0, y = a === 0, g = p === "lists", A = p === "create", O = p === "favorites" && y, Y = h && y && g, K = () => A ? /* @__PURE__ */ t(
         S,
         {
           baseClassName: i,
-          iconSize: l,
+          iconSize: c,
           createFirstListText: k,
-          onClick: y.onClick
+          onClick: f.onClick
         }
-      ) : /* @__PURE__ */ c(L, { href: w, className: d(`${i}__media-link`, P), tabIndex: 0, children: [
-        M && /* @__PURE__ */ t(
+      ) : /* @__PURE__ */ s(b, { href: L, className: _(`${i}__media-link`, P), tabIndex: 0, children: [
+        O && /* @__PURE__ */ t(
           N,
           {
             baseClassName: i,
-            iconSize: l,
-            text: b,
-            ariaLabel: V,
+            iconSize: c,
+            text: w,
+            ariaLabel: T,
             dataTestId: "favorites"
           }
         ),
@@ -135,31 +135,31 @@ const S = ({
           N,
           {
             baseClassName: i,
-            iconSize: l,
+            iconSize: c,
             text: x,
-            ariaLabel: j,
+            ariaLabel: V,
             dataTestId: "empty-list"
           }
         ),
-        !h && m && /* @__PURE__ */ t(
+        !y && h && /* @__PURE__ */ t(
           z,
           {
             baseClassName: i,
             imageRef: D,
-            listAriaLabel: C,
+            listAriaLabel: j,
             name: o,
             imageSrc: n,
-            iconSize: l
+            iconSize: c
           }
         )
       ] });
-      return /* @__PURE__ */ t("div", { ...p, className: d(i, r), ref: O, id: e, children: /* @__PURE__ */ c("div", { className: `${i}__content`, children: [
-        /* @__PURE__ */ c("div", { className: `${i}__header`, children: [
-          /* @__PURE__ */ c("div", { className: `${i}__info`, children: [
-            m && /* @__PURE__ */ t(v, { element: "span", className: `${i}__count`, variant: g.body3, children: u && m && u(a) }),
-            o && /* @__PURE__ */ t(v, { element: "h3", className: `${i}__title`, variant: g.heading5, children: o })
+      return /* @__PURE__ */ t("div", { ...u, className: _(i, r), ref: C, id: e, children: /* @__PURE__ */ s("div", { className: `${i}__content`, children: [
+        /* @__PURE__ */ s("div", { className: `${i}__header`, children: [
+          /* @__PURE__ */ s("div", { className: `${i}__info`, children: [
+            h && /* @__PURE__ */ t(m, { element: "span", className: `${i}__count`, variant: l.labelMedium, children: v && h && v(a) }),
+            o && /* @__PURE__ */ t(m, { element: "h3", className: `${i}__title`, variant: l.bodyMedium, children: o })
           ] }),
-          m && f && /* @__PURE__ */ c(q, { children: [
+          h && g && /* @__PURE__ */ s(q, { children: [
             /* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t(
               "div",
               {
@@ -169,15 +169,15 @@ const S = ({
                 role: "button",
                 "aria-label": R,
                 "aria-haspopup": "menu",
-                onKeyDown: (s) => {
-                  s.key === "Enter" && (s.preventDefault(), s.stopPropagation(), s.target.click());
+                onKeyDown: (d) => {
+                  d.key === "Enter" && (d.preventDefault(), d.stopPropagation(), d.target.click());
                 },
                 children: /* @__PURE__ */ t("div", { className: `${i}__icon-rotate`, children: /* @__PURE__ */ t(
                   $,
                   {
                     icon: "Icon",
-                    width: l,
-                    height: l,
+                    width: c,
+                    height: c,
                     color: "$gray-75",
                     className: `${i}__icon-button`,
                     "aria-hidden": "true"
@@ -194,23 +194,23 @@ const S = ({
                 align: "start",
                 alignOffset: 5,
                 className: `${i}__popover-content`,
-                children: /* @__PURE__ */ c("div", { className: `${i}__dropdown`, "data-testid": "dropdown-menu", children: [
+                children: /* @__PURE__ */ s("div", { className: `${i}__dropdown`, "data-testid": "dropdown-menu", children: [
                   /* @__PURE__ */ t(
                     "button",
                     {
                       className: `${i}__dropdown--item`,
-                      onClick: (s) => E?.(e, s),
+                      onClick: (d) => E?.(e, d),
                       type: "button",
-                      children: I
+                      children: /* @__PURE__ */ t(m, { variant: l.bodyMedium, children: I })
                     }
                   ),
                   /* @__PURE__ */ t(
                     "button",
                     {
                       className: `${i}__dropdown--item`,
-                      onClick: (s) => F?.(e, s),
+                      onClick: (d) => F?.(e, d),
                       type: "button",
-                      children: T
+                      children: /* @__PURE__ */ t(m, { variant: l.bodyMedium, children: M })
                     }
                   )
                 ] })
@@ -224,5 +224,5 @@ const S = ({
   )
 );
 export {
-  dt as default
+  lt as default
 };

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

@@ -82,3 +82,4 @@ export declare const TranslatedList: {
         linkClassName: string;
     };
 };
+export declare const CreateAndEmptyComparison: () => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/FiltersInline/FilterButton.js

@@ -1,36 +1,52 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import u from "../../node_modules/classnames/index.js";
-import b from "react";
-import $ from "../../components/Button/Button.js";
-import { ButtonVariants as h } from "../../components/Button/types.js";
-import x from "../../components/Icon/Icon.js";
-import { TextVariants as v } from "../../components/Text/types.js";
-import F from "../../components/Text/Text.js";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import $ from "../../node_modules/classnames/index.js";
+import h from "react";
+import x from "../../components/Button/Button.js";
+import { ButtonVariants as _ } from "../../components/Button/types.js";
+import v from "../../components/Icon/Icon.js";
+import { TextVariants as l } from "../../components/Text/types.js";
+import m from "../../components/Text/Text.js";
 import { px as t } from "../../utils/index.js";
-import { getIcon as w } from "./utils.js";
-const B = b.forwardRef(
-  ({ className: m, label: n, onClick: l, isSelected: a, type: r = "ChevronDown", count: s, id: i, ariaLabel: f, isMobile: c, totalCount: o }, d) => /* @__PURE__ */ p(
-    $,
+import { getIcon as F } from "./utils.js";
+const N = h.forwardRef(
+  ({ className: n, label: s, onClick: f, isSelected: i, type: r = "ChevronDown", count: c, id: a, ariaLabel: d, isMobile: b, totalCount: e }, p) => /* @__PURE__ */ u(
+    x,
     {
-      ref: d,
-      className: u(`${t}-filter-button`, m, {
-        [`${t}-filter-button--selected`]: a || s > 0 || r === "Filter" && o > 0,
+      ref: p,
+      className: $(`${t}-filter-button`, n, {
+        [`${t}-filter-button--selected`]: i || c > 0 || r === "Filter" && e > 0,
         [`${t}-filter-button--filter`]: r === "Filter"
       }),
-      "aria-label": f,
-      variant: h.secondary,
-      "data-testid": `${i}-filter-button`,
-      "data-viewport": c ? "mobile" : "desktop",
-      onClick: l,
+      "aria-label": d,
+      variant: _.secondary,
+      "data-testid": `${a}-filter-button`,
+      "data-viewport": b ? "mobile" : "desktop",
+      onClick: f,
       children: [
-        /* @__PURE__ */ e(F, { variant: v.string2, "data-testid": `${i}-filter-label`, children: n }),
-        /* @__PURE__ */ e(x, { icon: w(r, a), height: 8, width: 8, className: `${t}__icon` }),
-        o > 0 && r === "Filter" && /* @__PURE__ */ e("div", { className: `${t}-filter-button--count`, "data-testid": `${i}-filter-count`, children: o })
+        /* @__PURE__ */ o(
+          m,
+          {
+            className: `${t}-filter-button__label`,
+            variant: l.labelSmall,
+            "data-testid": `${a}-filter-label`,
+            children: s
+          }
+        ),
+        /* @__PURE__ */ o(v, { icon: F(r, i), height: 8, width: 8, className: `${t}__icon` }),
+        e > 0 && r === "Filter" && /* @__PURE__ */ o(
+          m,
+          {
+            variant: l.labelSmall,
+            className: `${t}-filter-button--count`,
+            "data-testid": `${a}-filter-count`,
+            children: e
+          }
+        )
       ]
     }
   )
 );
-B.displayName = "FilterButton";
+N.displayName = "FilterButton";
 export {
-  B as FilterButton
+  N as FilterButton
 };

package/dist/patterns/FiltersInline/FilterDropdownMenuDesktop.js

@@ -1,73 +1,71 @@
-import { jsxs as p, jsx as r, Fragment as w } from "react/jsx-runtime";
-import e from "../../node_modules/classnames/index.js";
-import C from "react";
-import n from "../../components/Button/Button.js";
-import { ButtonVariants as l } from "../../components/Button/types.js";
-import g from "../../components/Filter/FilterInput.js";
-import m from "../../components/Text/Text.js";
-import { TextVariants as c } from "../../components/Text/types.js";
-import { px as v } from "../../utils/index.js";
-import { getFilterDimensions as D, handleInputChange as F } from "./utils.js";
-const B = C.forwardRef(
+import { jsxs as c, jsx as e, Fragment as u } from "react/jsx-runtime";
+import r from "../../node_modules/classnames/index.js";
+import w from "react";
+import l from "../../components/Button/Button.js";
+import { ButtonVariants as n } from "../../components/Button/types.js";
+import x from "../../components/Filter/FilterInput.js";
+import { px as C } from "../../utils/index.js";
+import { getFilterDimensions as D, handleInputChange as g } from "./utils.js";
+const F = w.forwardRef(
   ({
-    className: f,
-    buttonType: i,
-    filters: _,
-    filterIndex: h,
-    onSelectFilter: b,
-    onClickClear: $,
-    onApplyFilter: d,
-    resultsCount: x,
-    ariaLabels: N,
-    dropdownMenuTranslation: o
-  }, k) => {
-    const s = i === "Sort", t = `${v}-filter-dropdown-menu`;
-    return /* @__PURE__ */ p(
+    className: d,
+    buttonType: o,
+    filters: p,
+    filterIndex: f,
+    onSelectFilter: _,
+    onClickClear: h,
+    onApplyFilter: m,
+    resultsCount: b,
+    ariaLabels: $,
+    dropdownMenuTranslation: s
+  }, N) => {
+    const i = o === "Sort", t = `${C}-filter-dropdown-menu`;
+    return /* @__PURE__ */ c(
       "div",
       {
-        className: e(t, f),
-        ref: k,
+        className: r(t, d),
+        ref: N,
         "data-testid": "filter-dropdown-desktop",
-        "aria-label": N || `${i} dropdown desktop`,
+        "aria-label": $ || `${o} dropdown desktop`,
         children: [
-          /* @__PURE__ */ r("div", { className: e(`${t}__filters`), children: D(_, h).map((a) => /* @__PURE__ */ r(
-            g,
+          /* @__PURE__ */ e("div", { className: r(`${t}__filters`), children: D(p, f).map((a) => /* @__PURE__ */ e(
+            x,
             {
               id: a.label,
               labelText: a.label,
               name: a.label,
-              type: s ? "radio" : "checkbox",
+              type: i ? "radio" : "checkbox",
               checked: a.active,
               disabled: a?.disabled,
-              onChange: (u) => F(u, i ?? "", b)
+              onChange: (k) => g(k, o ?? "", _)
             },
             a.label
           )) }),
-          /* @__PURE__ */ r("div", { className: e(s ? `${t}__button-wrap` : `${t}__buttons-wrap`), children: s ? /* @__PURE__ */ r(
-            n,
+          /* @__PURE__ */ e("div", { className: r(i ? `${t}__button-wrap` : `${t}__buttons-wrap`), children: i ? /* @__PURE__ */ e(
+            l,
             {
-              className: e(`${t}__button`),
-              variant: l.primary,
-              onClick: () => d?.(!1),
-              children: /* @__PURE__ */ r(m, { variant: c.string2, className: `${t}__button-text`, children: o?.confirm || "Confirm" })
+              className: r(`${t}__button`),
+              variant: n.primary,
+              onClick: () => m?.(!1),
+              children: /* @__PURE__ */ e("span", { className: `${t}__button-text`, children: s?.confirm || "Confirm" })
             }
-          ) : /* @__PURE__ */ p(w, { children: [
-            /* @__PURE__ */ r(
-              n,
+          ) : /* @__PURE__ */ c(u, { children: [
+            /* @__PURE__ */ e(
+              l,
               {
-                className: e(`${t}__buttons`),
-                variant: l.secondary,
-                onClick: () => $?.(i ?? ""),
-                children: /* @__PURE__ */ r(m, { variant: c.string2, children: o?.clearAll || "Clear all" })
+                className: r(`${t}__buttons`),
+                variant: n.secondary,
+                onClick: () => h?.(o ?? ""),
+                children: s?.clearAll || "Clear all"
               }
             ),
-            /* @__PURE__ */ r(
-              n,
+            /* @__PURE__ */ e(
+              l,
               {
-                className: e(`${t}__buttons`),
-                variant: l.primary,
-                onClick: () => d?.(!1),
-                children: /* @__PURE__ */ r(m, { variant: c.string2, className: `${t}__button-text`, children: o?.showAuctions || `Show ${x} Auctions` })
+                className: r(`${t}__buttons`),
+                variant: n.primary,
+                onClick: () => m?.(!1),
+                children: /* @__PURE__ */ e("span", { className: `${t}__button-text`, children: s?.showAuctions || `Show ${b} Auctions` })
               }
             )
           ] }) })
@@ -76,7 +74,7 @@ const B = C.forwardRef(
     );
   }
 );
-B.displayName = "FilterDropdownMenuDesktop";
+F.displayName = "FilterDropdownMenuDesktop";
 export {
-  B as FilterDropdownMenuDesktop
+  F as FilterDropdownMenuDesktop
 };