@phillips/seldon 1.215.0 → 1.217.0

package/dist/components/Pagination/Pagination.js

@@ -1,7 +1,7 @@
 import { jsxs as k, jsx as i } from "react/jsx-runtime";
 import { forwardRef as B, useMemo as T } from "react";
 import u from "../../node_modules/classnames/index.js";
-import { getCommonProps as F, px as b } from "../../utils/index.js";
+import { getCommonProps as F, px as g } from "../../utils/index.js";
 import M from "../Select/Select.js";
 import x from "../IconButton/IconButton.js";
 import { ButtonVariants as $ } from "../Button/types.js";
@@ -12,34 +12,34 @@ const z = B(
   ({
     className: P,
     onChange: _,
-    variant: j = "inline",
+    variant: S = "inline",
     options: r = [],
-    value: g,
+    value: b,
     isDisabled: c,
-    previousLabel: C = "Previous",
-    nextLabel: N = "Next",
+    previousLabel: j = "Previous",
+    nextLabel: C = "Next",
     selectLabel: v = "Select",
     ...m
-  }, S) => {
-    const I = "pagination", { className: a, ...O } = F(m, "Pagination"), { id: l } = m, { pendingState: w, setPendingState: R } = q(f(g)), s = w || g, p = (e, o) => {
-      const d = f(e);
-      R(d), _(d, o);
+  }, N) => {
+    const w = "pagination", { className: a, ...I } = F(m, "Pagination"), { id: l } = m, { pendingState: O, setPendingState: R } = q(f(b)), d = O || b, p = (e, o) => {
+      const s = f(e);
+      R(s), _(s, o);
     }, [t, n] = T(() => {
-      const e = r.findIndex((h) => f(h) === s) - 1, o = r.at(e) || "", d = (r.findIndex((h) => f(h) === s) + 1) % r.length, V = r[d];
+      const e = r.findIndex((h) => f(h) === d) - 1, o = r.at(e) || "", s = (r.findIndex((h) => f(h) === d) + 1) % r.length, V = r[s];
       return [o, V];
-    }, [r, s]);
+    }, [r, d]);
     return /* @__PURE__ */ k(
       "div",
       {
-        ref: S,
-        className: u(`${b}-${I}`, { [`${a}__wrapper`]: a }, P),
-        ...O,
+        ref: N,
+        className: u(`${g}-${w}`, { [`${a}__wrapper`]: a }, P),
+        ...I,
         ...m,
         children: [
           /* @__PURE__ */ i(
             x,
             {
-              className: u(`${a}__button`, `${b}-left-arrow`, {
+              className: u(`${a}__button`, `${g}-left-arrow`, {
                 [`${a}__button--is-disabled`]: c
               }),
               onClick: (e) => {
@@ -47,19 +47,19 @@ const z = B(
               },
               "data-testid": `${l}-previous-button`,
               isDisabled: c,
-              "aria-label": C,
+              "aria-label": j,
               variant: $.primary,
               href: typeof t == "object" && t.href ? t.href : void 0,
               prefetch: typeof t == "object" && t.prefetch ? t.prefetch : void 0,
-              children: /* @__PURE__ */ i(y, { icon: "ChevronRight" })
+              children: /* @__PURE__ */ i(y, { icon: "ChevronRight", height: "16", width: "16" })
             }
           ),
           /* @__PURE__ */ i(
             M,
             {
-              className: j === "inline" ? `${b}--inline-pagination` : void 0,
+              className: S === "inline" ? `${g}--inline-pagination` : void 0,
               "aria-label": v,
-              value: s,
+              value: d,
               onChange: (e) => {
                 const o = W(r, e?.currentTarget.value);
                 o && p(o, e);
@@ -70,6 +70,7 @@ const z = B(
               disabled: c,
               showIcon: !1,
               id: `${l}-select-button`,
+              isStandalone: !0,
               children: r.map((e) => {
                 const o = f(e);
                 return /* @__PURE__ */ i("option", { value: o, children: typeof e == "string" || typeof e == "number" ? e : e.label }, o);
@@ -87,11 +88,11 @@ const z = B(
               },
               "data-testid": `${l}-next-button`,
               isDisabled: c,
-              "aria-label": N,
+              "aria-label": C,
               variant: $.primary,
               href: typeof n == "object" && n.href ? n.href : void 0,
               prefetch: typeof n == "object" && n.prefetch ? n.prefetch : void 0,
-              children: /* @__PURE__ */ i(y, { icon: "ChevronRight" })
+              children: /* @__PURE__ */ i(y, { icon: "ChevronRight", height: "16", width: "16" })
             }
           )
         ]

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,54 +1,54 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { Root as P } from "../../node_modules/@radix-ui/react-progress/dist/index.js";
-import { forwardRef as $, Fragment as C } from "react";
-import { getCommonProps as I } from "../../utils/index.js";
+import { forwardRef as S, Fragment as $ } from "react";
+import { getCommonProps as C } from "../../utils/index.js";
 import h from "../../node_modules/classnames/index.js";
-import S from "../Icon/Icon.js";
+import I from "../Icon/Icon.js";
 import { TextVariants as p } from "../Text/types.js";
 import _ from "../Text/Text.js";
-const T = $(
+const T = S(
   ({
-    totalSteps: i,
+    totalSteps: l,
     currentStep: f,
     className: u,
     stepLabels: e,
-    progressIndicatorAriaLabel: g = "Progress Indicator",
-    completedIconAriaLabel: N = "Completed Icon",
-    ...n
+    progressIndicatorAriaLabel: N = "Progress Indicator",
+    completedIconAriaLabel: g = "Completed Icon",
+    ...m
   }, v) => {
-    const { className: a, ...M } = I(n, "ProgressIndicator");
-    if (i <= 0) return null;
-    const t = Math.max(1, Math.min(10, Math.floor(i))), c = Math.max(1, Math.min(t, Math.floor(f)));
-    return /* @__PURE__ */ r("div", { ...M, className: h(a, u), ...n, ref: v, children: /* @__PURE__ */ r(P, { value: c, max: t, "aria-label": g, children: /* @__PURE__ */ r("div", { className: `${a}__steps`, children: Array.from({ length: t }).map((x, o) => {
-      const s = o + 1, m = c > s, l = c === s;
-      return /* @__PURE__ */ d(C, { children: [
+    const { className: a, ...M } = C(m, "ProgressIndicator");
+    if (l <= 0) return null;
+    const t = Math.max(1, Math.min(10, Math.floor(l))), c = Math.max(1, Math.min(t, Math.floor(f)));
+    return /* @__PURE__ */ r("div", { ...M, className: h(a, u), ...m, ref: v, children: /* @__PURE__ */ r(P, { value: c, max: t, "aria-label": N, children: /* @__PURE__ */ r("div", { className: `${a}__steps`, children: Array.from({ length: t }).map((x, o) => {
+      const s = o + 1, i = c > s, n = c === s;
+      return /* @__PURE__ */ d($, { children: [
         /* @__PURE__ */ d(
           "div",
           {
             className: `${a}__item`,
-            "aria-current": l ? "step" : void 0,
+            "aria-current": n ? "step" : void 0,
             "data-testid": `progress-step-${s}`,
             children: [
               /* @__PURE__ */ r(
                 "span",
                 {
                   className: h(`${a}__circle`, {
-                    [`${a}__circle--active`]: m,
-                    [`${a}__circle--current`]: l
+                    [`${a}__circle--active`]: i,
+                    [`${a}__circle--current`]: n
                   }),
-                  children: m ? /* @__PURE__ */ r(
-                    S,
+                  children: i ? /* @__PURE__ */ r(
+                    I,
                     {
                       icon: "Success",
-                      "aria-label": N,
+                      "aria-label": g,
                       color: "currentColor",
                       width: 20,
                       height: 20
                     }
-                  ) : /* @__PURE__ */ r(_, { variant: p.badge, children: s })
+                  ) : /* @__PURE__ */ r(_, { variant: p.labelSmall, children: s })
                 }
               ),
-              e && e[o] && /* @__PURE__ */ r("span", { className: `${a}__label`, children: /* @__PURE__ */ r(_, { variant: p.string2, children: e[o] }) })
+              e && e[o] && /* @__PURE__ */ r("span", { className: `${a}__label`, children: /* @__PURE__ */ r(_, { variant: p.bodySmall, children: e[o] }) })
             ]
           }
         ),

package/dist/components/Search/Search.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import { forwardRef as j, useContext as D, useRef as p, useState as H, useEffect as O } from "react";
-import { getCommonProps as A, px as F, encodeURLSearchParams as N } from "../../utils/index.js";
-import f from "../../node_modules/classnames/index.js";
+import { forwardRef as j, useContext as D, useRef as f, useState as H, useEffect as O } from "react";
+import { getCommonProps as A, px as F, encodeURLSearchParams as w } from "../../utils/index.js";
+import s from "../../node_modules/classnames/index.js";
 import K from "../Input/Input.js";
 import M from "../Link/Link.js";
 import U from "./SearchResults/SearchResults.js";
@@ -11,86 +11,87 @@ import { useOnClickOutside as z } from "../../node_modules/usehooks-ts/dist/inde
 import { HeaderContext as B } from "../../site-furniture/Header/Header.js";
 import { SearchButton as G } from "./SearchButton.js";
 import J from "../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
-import Q from "../../node_modules/react-transition-group/esm/CSSTransition.js";
-const W = j(
+import { LinkVariants as Q } from "../Link/types.js";
+import W from "../../node_modules/react-transition-group/esm/CSSTransition.js";
+const X = j(
   ({
     onSearch: S,
     onCancel: _,
-    searchResults: R = [],
-    state: n = "idle",
-    defaultValue: w = "",
+    searchResults: N = [],
+    state: o = "idle",
+    defaultValue: R = "",
     className: C,
     placeholder: I = "",
-    searchButtonText: o = "Search",
+    searchButtonText: i = "Search",
     loadingText: E = "Search In Progress...",
     invalidText: b = "Invalid search",
-    getAllResultsText: P = (e) => `View all results for ${e}`,
+    getAllResultsText: k = (e) => `View all results for ${e}`,
     getAllResultsLink: v = (e) => `/Search?Search=${e}`,
     ...x
-  }, k) => {
-    const { className: e, "data-testid": i, ...L } = A(x, "Search"), c = D(B), l = p(null), d = p(null), g = p(null), a = c.isSearchExpanded, s = l.current?.value, [T, m] = H(!0), y = S ? (r) => {
+  }, L) => {
+    const { className: e, "data-testid": l, ...P } = A(x, "Search"), c = D(B), d = f(null), m = f(null), g = f(null), a = c.isSearchExpanded, n = d.current?.value, [T, h] = H(!0), y = S ? (r) => {
       S(r.target.value);
     } : void 0;
     z(g, (r) => {
-      _?.(), h(!1), r.stopPropagation();
+      _?.(), p(!1), r.stopPropagation();
     });
     const $ = (r) => {
       if (r.stopPropagation(), r.key === "Enter") {
-        if (r.preventDefault(), s && s.length > 2) {
-          const V = N(v(s));
-          m(!1), window.location.href = V;
+        if (r.preventDefault(), n && n.length > 2) {
+          const V = w(v(n));
+          h(!1), window.location.href = V;
         }
-        r.currentTarget instanceof HTMLAnchorElement && (m(!1), r.currentTarget.click());
+        r.currentTarget instanceof HTMLAnchorElement && (h(!1), r.currentTarget.click());
       }
-      r.key === "Escape" && (d.current?.reset(), c.setIsSearchExpanded(!1));
+      r.key === "Escape" && (m.current?.reset(), c.setIsSearchExpanded(!1));
     };
     O(() => {
       if (a) {
-        l.current?.focus();
+        d.current?.focus();
         return;
       }
     }, [a]);
-    const h = (r) => {
-      d.current?.reset(), c.setIsSearchExpanded(r);
+    const p = (r) => {
+      m.current?.reset(), c.setIsSearchExpanded(r);
     };
-    return /* @__PURE__ */ t(J, { enabled: a, allowPinchZoom: !0, removeScrollBar: !1, children: /* @__PURE__ */ t("div", { className: `${e}__container`, ref: k, children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ t(J, { enabled: a, allowPinchZoom: !0, removeScrollBar: !1, children: /* @__PURE__ */ t("div", { className: `${e}__container`, ref: L, children: /* @__PURE__ */ u(
       "div",
       {
         className: `${e}__container__inner`,
         ref: g,
         onClick: (r) => {
-          a || (h(!0), r.stopPropagation());
+          a || (p(!0), r.stopPropagation());
         },
         children: [
-          /* @__PURE__ */ t(q, { variant: Z.heading4, className: `${e}__container__inner__label`, children: o }),
+          /* @__PURE__ */ t(q, { variant: Z.headingSmall, className: `${e}__container__inner__label`, children: i }),
           /* @__PURE__ */ t(
             "div",
             {
-              ...L,
-              className: f(e, C, { [`${e}--active`]: a }),
-              "data-testid": i,
+              ...P,
+              className: s(e, C, { [`${e}--active`]: a }),
+              "data-testid": l,
               role: "search",
               ...x,
               children: /* @__PURE__ */ u(
                 "form",
                 {
-                  "data-testid": `${i}-form`,
-                  className: f(`${e}__form`, {
+                  "data-testid": `${l}-form`,
+                  className: s(`${e}__form`, {
                     [`${e}__form--active`]: a
                   }),
-                  ref: d,
+                  ref: m,
                   children: [
                     /* @__PURE__ */ u(
                       "div",
                       {
-                        className: f(`${e}__content-wrapper`, {
+                        className: s(`${e}__content-wrapper`, {
                           [`${e}__content-wrapper--active`]: a
                         }),
                         role: "combobox",
                         "aria-haspopup": "listbox",
                         children: [
                           /* @__PURE__ */ t(
-                            Q,
+                            W,
                             {
                               in: a,
                               classNames: `${F}-input`,
@@ -103,15 +104,15 @@ const W = j(
                                   className: `${e}__input`,
                                   id: "search-input",
                                   hideLabel: !0,
-                                  labelText: o,
+                                  labelText: i,
                                   placeholder: a ? I : "",
                                   type: "text",
-                                  defaultValue: w,
-                                  invalid: n === "invalid",
+                                  defaultValue: R,
+                                  invalid: o === "invalid",
                                   invalidText: b,
                                   onKeyDown: $,
                                   onChange: y,
-                                  ref: l
+                                  ref: d
                                 }
                               )
                             }
@@ -120,33 +121,34 @@ const W = j(
                             G,
                             {
                               className: e,
-                              searchButtonText: o,
-                              state: n,
-                              testId: i,
+                              searchButtonText: i,
+                              state: o,
+                              testId: l,
                               isSearchExpanded: a,
-                              setIsSearchExpanded: h,
+                              setIsSearchExpanded: p,
                               onCancel: _
                             }
                           )
                         ]
                       }
                     ),
-                    a && T && s && s.length > 2 ? /* @__PURE__ */ t(
+                    a && T && n && n.length > 2 ? /* @__PURE__ */ t(
                       U,
                       {
-                        autoCompleteResults: R,
-                        isLoading: n === "loading",
+                        autoCompleteResults: N,
+                        isLoading: o === "loading",
                         loadingText: E,
                         onKeyDown: $,
-                        userInputValue: s,
-                        closeSearch: m,
-                        children: /* @__PURE__ */ t("li", { className: `${e}__result`, children: /* @__PURE__ */ t(
-                          M,
+                        userInputValue: n,
+                        closeSearch: h,
+                        children: /* @__PURE__ */ t(
+                          "li",
                           {
-                            href: ((r) => N(v(r)))(s),
-                            children: /* @__PURE__ */ t("p", { children: P(s) })
-                          }
-                        ) }, "viewAllSearchResults")
+                            className: s(`${e}__result`, `${e}__result--view-all`),
+                            children: /* @__PURE__ */ t(M, { href: w(v(n)), variant: Q.linkLarge, children: /* @__PURE__ */ t("p", { children: k(n) }) })
+                          },
+                          "viewAllSearchResults"
+                        )
                       }
                     ) : null
                   ]
@@ -159,7 +161,7 @@ const W = j(
     ) }) });
   }
 );
-W.displayName = "Search";
+X.displayName = "Search";
 export {
-  W as default
+  X as default
 };

package/dist/components/Search/SearchResults/SearchResults.js

@@ -1,37 +1,37 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
 import { px as e } from "../../../utils/index.js";
 import f from "../../Link/Link.js";
 import { LinkVariants as L } from "../../Link/types.js";
-const w = ({
+const b = ({
   autoCompleteResults: l = [],
-  isLoading: t,
-  children: i,
+  isLoading: n,
+  children: t,
   loadingText: c = "Loading...",
   onKeyDown: o,
   userInputValue: h = "",
   closeSearch: d
 }) => {
   const m = Array.isArray(l) && l.length > 0;
-  function _(s, a) {
-    return s.split(new RegExp(`(${a})`, "gi")).map(
-      (n, u) => n.toLocaleLowerCase() === a.toLocaleLowerCase() ? /* @__PURE__ */ r("strong", { children: n }, u) : n
+  function _(a, s) {
+    return a.split(new RegExp(`(${s})`, "gi")).map(
+      (i, p) => i.toLocaleLowerCase() === s.toLocaleLowerCase() ? /* @__PURE__ */ r("strong", { children: i }, p) : i
     );
   }
-  return /* @__PURE__ */ r("div", { className: `${e}-search__results`, children: /* @__PURE__ */ p("ul", { "data-testid": "search-results", className: `${e}-search__results-container`, children: [
-    t ? /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: c }) : null,
-    m && l.map((s, a) => /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r("div", { className: `${e}-search__results`, children: /* @__PURE__ */ u("ul", { "data-testid": "search-results", className: `${e}-search__results-container`, children: [
+    n ? /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: c }) : null,
+    m && l.map((a, s) => /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: /* @__PURE__ */ r(
       f,
       {
-        href: s.url,
+        href: a.url,
         onKeyDown: o,
         onClick: () => d(!1),
-        variant: L.snwFlyoutLink,
-        children: /* @__PURE__ */ r("span", { "data-testid": `search-result-${a}`, className: "${px}-search__result__label", children: _(s.label, h) })
+        variant: L.linkLarge,
+        children: /* @__PURE__ */ r("span", { "data-testid": `search-result-${s}`, className: "${px}-search__result__label", children: _(a.label, h) })
       }
-    ) }, s.id)),
-    i
+    ) }, a.id)),
+    t
   ] }) });
 };
 export {
-  w as default
+  b as default
 };

package/dist/components/Select/Select.d.ts

@@ -19,6 +19,10 @@ export interface SelectProps extends Merge<InputProps, React.ComponentProps<'sel
      * Determines the variant of the select
      */
     variant?: SelectVariants;
+    /**
+     * Determines if the select is not in a form
+     */
+    isStandalone?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Select/Select.js

@@ -1,86 +1,92 @@
 import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import * as z from "react";
-import a from "../../node_modules/classnames/index.js";
-import { px as e, useNormalizedInputProps as D } from "../../utils/index.js";
+import * as k from "react";
+import n from "../../node_modules/classnames/index.js";
+import { px as e, useNormalizedInputProps as z } from "../../utils/index.js";
 import { SelectVariants as c } from "./types.js";
-import F from "../Icon/Icon.js";
-const I = z.forwardRef(
+import D from "../Icon/Icon.js";
+import { TextVariants as F } from "../Text/types.js";
+import I from "../Text/Text.js";
+const M = k.forwardRef(
   ({
-    children: d,
+    children: m,
     className: i,
-    defaultValue: m,
+    defaultValue: d,
     disabled: u,
     hideLabel: $,
     id: t,
-    showIcon: l = !0,
+    showIcon: r = !0,
     variant: _ = c.default,
     inline: f,
     invalid: b,
-    invalidText: h,
-    labelText: v,
+    invalidText: v,
+    labelText: h,
     onChange: w,
-    onClick: V,
-    readOnly: r,
-    size: C = "md",
-    value: x,
+    onClick: g,
+    readOnly: o,
+    size: x = "md",
+    value: C,
     warn: y,
     warnText: N,
-    ...S
-  }, j) => {
-    const o = "select", n = D({
+    isStandalone: S = !1,
+    ...j
+  }, P) => {
+    const l = "select", a = z({
       disabled: u,
       id: t,
       invalid: b,
-      invalidText: h,
-      readOnly: r,
-      type: o,
+      invalidText: v,
+      readOnly: o,
+      type: l,
       warn: y,
       warnText: N
-    }), P = a(`${e}-${o}-input`, `${e}-input`, `${e}-input--${C}`, {
+    }), R = n(`${e}-${l}-input`, `${e}-input`, `${e}-input--${x}`, {
       [`${e}-input--inline`]: f,
-      [`${e}-input--readonly`]: r,
-      [`${e}-input--disabled`]: n.disabled,
-      [`${e}-input--invalid`]: n.invalid,
-      [`${e}-input--warn`]: n.warn,
-      [`${i}__wrapper`]: i
-    }), R = a(i, `${e}-input__input`, {
+      [`${e}-input--readonly`]: o,
+      [`${e}-input--disabled`]: a.disabled,
+      [`${e}-input--invalid`]: a.invalid,
+      [`${e}-input--warn`]: a.warn,
+      [`${i}__wrapper`]: i,
+      [`${e}-${l}-input__standalone`]: S
+    }), T = n(i, `${e}-input__input`, {
       [`${e}-input__select--tertiary`]: _ === c.tertiary
-    }), k = a(`${e}-select-container`, {
-      [`${e}-select-container--show__icon`]: l
+    }), V = n(`${e}-select-container`, {
+      [`${e}-select-container--show__icon`]: r
     });
-    return /* @__PURE__ */ p("div", { className: P, children: [
+    return /* @__PURE__ */ p("div", { className: R, children: [
       /* @__PURE__ */ s(
-        "label",
+        I,
         {
+          element: "label",
+          variant: F.labelMedium,
           "data-testid": `${t}-label`,
           htmlFor: t,
-          className: a(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
-          children: v
+          className: n(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
+          children: h
         }
       ),
-      /* @__PURE__ */ p("div", { className: k, children: [
+      /* @__PURE__ */ p("div", { className: V, children: [
         /* @__PURE__ */ s(
           "select",
           {
-            className: R,
+            className: T,
             "data-testid": t,
-            defaultValue: m,
-            disabled: n.disabled,
+            defaultValue: d,
+            disabled: a.disabled,
             id: t,
             onChange: w,
-            ref: j,
-            value: x,
-            ...S,
-            children: d
+            ref: P,
+            value: C,
+            ...j,
+            children: m
           }
         ),
-        l ? /* @__PURE__ */ s(F, { icon: "ChevronDown" }) : null
+        r ? /* @__PURE__ */ s(D, { icon: "ChevronDown" }) : null
       ] }),
-      n.validation
+      a.validation
     ] });
   }
 );
-I.displayName = "Select";
+M.displayName = "Select";
 export {
-  I as default
+  M as default
 };

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

@@ -120,6 +120,7 @@ export declare const Tertiary: {
         };
     };
 };
+export declare const IsStandalone: ({ playgroundWidth, ...args }: StoryProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CustomLabel: {
     ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/components/Tabs/TabsContainer.js

@@ -26,7 +26,7 @@ const x = N(
                 value: e.value,
                 className: `${a}__tabs-trigger`,
                 onClick: f,
-                children: /* @__PURE__ */ r(C, { variant: v.label, children: e.label })
+                children: /* @__PURE__ */ r(C, { variant: v.labelMedium, children: e.label })
               },
               e.value
             )),