@phillips/seldon 1.67.2 → 1.68.1

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -14,10 +14,6 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
      * Index of the item to truncate
      */
     truncateIndex?: number;
-    /**
-     * Max length for truncation
-     */
-    truncateLength?: number;
     /**
      * Custom element to render for the link
      */
@@ -32,5 +28,5 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-breadcrumb--overview)
  */
-declare const Breadcrumb: ({ className, items, truncateIndex, truncateLength, linkElement: CustomElement, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumb: ({ className, items, truncateIndex, linkElement: CustomElement, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,42 +1,40 @@
 import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { getCommonProps as f } from "../../utils/index.js";
-import u from "../../node_modules/classnames/index.js";
+import { getCommonProps as u, px as t } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
 import p from "./BreadcrumbItem.js";
-import { SSRMediaQuery as t } from "../../providers/utils.js";
+import { SSRMediaQuery as c } from "../../providers/utils.js";
 import N from "../../assets/arrowPrev.svg.js";
-const M = ({
-  className: c,
-  items: e = [],
-  truncateIndex: n,
-  truncateLength: s = 10,
-  linkElement: m = "a",
-  ...a
+const v = ({
+  className: s,
+  items: a = [],
+  truncateIndex: d,
+  linkElement: l = "a",
+  ...e
 }) => {
-  const { className: d, ...i } = f(a, "Breadcrumb"), { id: b } = a;
-  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: u(d, c), ...i, ...a, children: [
-    /* @__PURE__ */ r(t.Media, { lessThan: "md", children: /* @__PURE__ */ r(
-      m,
+  const { className: m, ...i } = u(e, "Breadcrumb"), { id: b } = e;
+  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: f(m, s), ...i, ...e, children: [
+    /* @__PURE__ */ r(c.Media, { lessThan: "md", children: /* @__PURE__ */ r(
+      l,
       {
-        href: e[1].href ? e[1].href : "/",
-        className: "back-button",
+        href: a[1].href ? a[1].href : "/",
+        className: `${t}-icon-button ${t}-icon-button--secondary`,
         "data-testid": `${b}-back-button`,
-        children: /* @__PURE__ */ r(N, {})
+        children: /* @__PURE__ */ r(N, { className: `${m}__back-button` })
       }
     ) }),
-    /* @__PURE__ */ r(t.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: e.map((l, o) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: a.map((o, n) => /* @__PURE__ */ r(
       p,
       {
-        href: l.href,
-        label: l.label,
-        element: m,
-        isCurrent: e.length - 1 === o,
-        isTruncateText: n === o,
-        truncateLength: s
+        href: o.href,
+        label: o.label,
+        element: l,
+        isCurrent: a.length - 1 === n,
+        isTruncateText: d === n
       },
-      l.label
+      o.label
     )) }) })
   ] });
 };
 export {
-  M as default
+  v as default
 };

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -16,14 +16,10 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement
      * truncate text boolean
      * */
     isTruncateText?: boolean;
-    /**
-     * Length to which the text should be truncated
-     * */
-    truncateLength?: number;
     /**
      * Custom element to render for the link
      */
     element?: React.ElementType<React.ComponentProps<'a'>>;
 }
-declare const BreadcrumbItem: ({ className, href, label, isCurrent, isTruncateText, truncateLength, element: CustomElement, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbItem: ({ className, href, label, isCurrent, isTruncateText, element: CustomElement, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
 export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -1,32 +1,40 @@
-import { jsxs as h, jsx as s } from "react/jsx-runtime";
-import { getCommonProps as N } from "../../utils/index.js";
-import c from "../../node_modules/classnames/index.js";
-import g from "../../assets/chevronNext.svg.js";
-const B = ({
-  className: m,
-  href: t,
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { getCommonProps as d } from "../../utils/index.js";
+import s from "../../node_modules/classnames/index.js";
+import h from "../../assets/chevronNext.svg.js";
+const g = ({
+  className: c,
+  href: o,
   label: r,
-  isCurrent: e = !1,
-  isTruncateText: n = !1,
-  truncateLength: a = 30,
-  element: f = "a",
-  ...p
+  isCurrent: a = !1,
+  isTruncateText: t = !1,
+  element: n = "a",
+  ...l
 }) => {
-  const { className: o, ...l } = N(p, "Breadcrumb"), d = e ? "page" : !1, i = e ? "" : t, u = () => r && r.length > a ? `${r.slice(0, a)}...` : r;
-  return /* @__PURE__ */ h("li", { children: [
-    e ? /* @__PURE__ */ s("span", { className: c(o, m, { [`${o}--current`]: e }), children: r }) : /* @__PURE__ */ s(
-      f,
-      {
-        "aria-current": d,
-        className: c(o, m, { [`${o}--current`]: e }),
-        href: i,
-        ...l,
-        children: n ? u() : r
-      }
-    ),
-    e ? null : /* @__PURE__ */ s(g, {})
-  ] });
+  const { className: e, ...f } = d(l, "Breadcrumb"), p = a ? "page" : !1, i = a ? "" : o;
+  return /* @__PURE__ */ N(
+    "li",
+    {
+      "aria-label": r,
+      className: s(`${e}__item`, { [`${e}--truncate`]: t }),
+      children: [
+        a ? /* @__PURE__ */ m("span", { className: s(e, c, { [`${e}--current`]: a }), children: r }) : /* @__PURE__ */ m(
+          n,
+          {
+            "aria-current": p,
+            className: s(e, c, {
+              [`${e}--current`]: a
+            }),
+            href: i,
+            ...f,
+            children: r
+          }
+        ),
+        a ? null : /* @__PURE__ */ m(h, { className: `${e}__chevron` })
+      ]
+    }
+  );
 };
 export {
-  B as default
+  g as default
 };

package/dist/components/Drawer/Drawer.js

@@ -1,39 +1,39 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { getCommonProps as d, noOp as p } from "../../utils/index.js";
-import o from "../../node_modules/classnames/index.js";
+import e from "../../node_modules/classnames/index.js";
 import { Root as f, Portal as C, Overlay as h, Content as N, Title as u, Description as v, Close as w } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
 import y from "../../assets/close.svg.js";
 import _ from "../IconButton/IconButton.js";
 import { ButtonVariants as g } from "../Button/types.js";
-const B = ({ className: i, isOpen: l = !1, onClose: a = p, children: m, ...t }) => {
-  const { className: e, ...n } = d(t, "Drawer");
+const B = ({ className: i, isOpen: l = !1, onClose: o = p, children: m, ...t }) => {
+  const { className: a, ...n } = d(t, "Drawer");
   return /* @__PURE__ */ r(
     f,
     {
       open: l,
       onOpenChange: (c) => {
-        c || a();
+        c || o();
       },
       children: /* @__PURE__ */ s(C, { children: [
         /* @__PURE__ */ r(
           h,
           {
-            onClick: a,
-            className: o(`${e}__overlay`),
+            onClick: o,
+            className: e(`${a}__overlay`),
             "data-testid": "drawer-overlay"
           }
         ),
-        /* @__PURE__ */ s(N, { className: o(e, i), id: t.id, ...n, children: [
+        /* @__PURE__ */ s(N, { className: e(a, i), id: t.id, ...n, children: [
           /* @__PURE__ */ r(u, {}),
           /* @__PURE__ */ r(v, {}),
           /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ r(
             _,
             {
-              onClick: a,
-              className: o(`${e}__close`),
+              onClick: o,
+              className: e(`${a}__close`),
               "aria-label": "Close",
               "data-testid": "drawer-close",
-              variant: g.tertiary,
+              variant: g.secondary,
               children: /* @__PURE__ */ r(y, {})
             }
           ) }),

package/dist/components/Modal/Modal.js

@@ -37,7 +37,7 @@ const g = ({
             onClick: a,
             "aria-label": "Close Modal",
             className: t(`${e}__close`),
-            variant: v.tertiary,
+            variant: v.secondary,
             children: /* @__PURE__ */ s(y, {})
           }
         ),

package/dist/components/Pagination/Pagination.d.ts

@@ -1,4 +1,12 @@
 import React, { ComponentProps } from 'react';
+export type PaginationOptionValue = string | number;
+export interface PaginationOption {
+    /**
+     * label is translatable
+     */
+    label: string;
+    value: string | number;
+}
 export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * Unique id for component testing
@@ -11,7 +19,7 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
     /**
      * Options Array of string
      */
-    options?: string[];
+    options: (PaginationOption | PaginationOptionValue)[];
     /**
      * Boolean to specify whether the `<Pagination>` should be disabled
      */
@@ -19,11 +27,11 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
     /**
      * Current value of the `<Pagination>` component
      */
-    value: string | number;
+    value: PaginationOptionValue;
     /**
      * `onChange` handler that is called whenever the `<Pagination>` value is changed
      */
-    onChange: (selectedValue: string, event?: React.ChangeEvent<HTMLSelectElement>) => void;
+    onChange: (selectedValue: PaginationOptionValue, event?: React.ChangeEvent<HTMLSelectElement>) => void;
     /**
      * Specify the variant style of the `<Pagination>`
      */

package/dist/components/Pagination/Pagination.js

@@ -1,65 +1,78 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import s from "../../node_modules/classnames/index.js";
+import { jsxs as O, jsx as n } from "react/jsx-runtime";
+import u from "../../node_modules/classnames/index.js";
 import { getCommonProps as P, px as i } from "../../utils/index.js";
-import C from "../Select/Select.js";
-import d from "../../assets/chevronRight.svg.js";
-import u from "../IconButton/IconButton.js";
-import { ButtonVariants as f } from "../Button/types.js";
-const B = ({
-  className: g,
-  onChange: e,
-  variant: p = "inline",
-  options: t = [],
-  value: n,
-  isDisabled: o,
-  previousLabel: $ = "Previous",
-  nextLabel: b = "Next",
-  selectLabel: h = "Select",
-  ...l
+import S from "../Select/Select.js";
+import f from "../../assets/chevronRight.svg.js";
+import g from "../IconButton/IconButton.js";
+import { ButtonVariants as x } from "../Button/types.js";
+import { determineOptionValue as r, findOptionFromSelectString as v } from "./utils.js";
+const R = ({
+  className: b,
+  onChange: o,
+  variant: $ = "inline",
+  options: e = [],
+  value: l,
+  isDisabled: c,
+  previousLabel: h = "Previous",
+  nextLabel: N = "Next",
+  selectLabel: _ = "Select",
+  ...m
 }) => {
-  const x = "pagination", { className: c, ...N } = P(l, "Pagination"), { id: m } = l;
-  return /* @__PURE__ */ _(
+  const y = "pagination", { className: p, ...I } = P(m, "Pagination"), { id: s } = m;
+  return /* @__PURE__ */ O(
     "div",
     {
-      className: s(`${i}-${x}`, { [`${c}__wrapper`]: c }, g),
-      ...N,
-      ...l,
+      className: u(`${i}-${y}`, { [`${p}__wrapper`]: p }, b),
+      ...I,
+      ...m,
       children: [
-        /* @__PURE__ */ r(
-          u,
+        /* @__PURE__ */ n(
+          g,
           {
-            className: s(`${i}__pagination-button`, `${i}-left-arrow`),
-            onClick: () => e(t.at(t.findIndex((a) => a === n) - 1) || ""),
-            "data-testid": `${m}-previous-button`,
-            isDisabled: o,
-            "aria-label": $,
-            variant: f.tertiary,
-            children: /* @__PURE__ */ r(d, {})
+            className: u(`${i}__pagination-button`, `${i}-left-arrow`),
+            onClick: () => {
+              const t = e.findIndex((d) => r(d) === l) - 1, a = e.at(t) || "";
+              o(r(a));
+            },
+            "data-testid": `${s}-previous-button`,
+            isDisabled: c,
+            "aria-label": h,
+            variant: x.tertiary,
+            children: /* @__PURE__ */ n(f, {})
           }
         ),
-        /* @__PURE__ */ r(
-          C,
+        /* @__PURE__ */ n(
+          S,
           {
-            className: p === "inline" && `${i}--inline-pagination`,
-            "aria-label": h,
-            value: n,
-            onChange: (a) => e(a == null ? void 0 : a.currentTarget.value, a),
-            "data-testid": `${m}-select-button`,
+            className: $ === "inline" && `${i}--inline-pagination`,
+            "aria-label": _,
+            value: l,
+            onChange: (t) => {
+              const a = v(e, t == null ? void 0 : t.currentTarget.value);
+              a && o(r(a), t);
+            },
+            "data-testid": `${s}-select-button`,
             hideLabel: !0,
-            disabled: o,
-            children: t.map((a) => /* @__PURE__ */ r("option", { value: a, children: a }, a))
+            disabled: c,
+            children: e.map((t) => {
+              const a = r(t);
+              return /* @__PURE__ */ n("option", { value: a, children: typeof t == "string" || typeof t == "number" ? t : t.label }, a);
+            })
           }
         ),
-        /* @__PURE__ */ r(
-          u,
+        /* @__PURE__ */ n(
+          g,
           {
             className: `${i}__pagination-button`,
-            onClick: () => e(t[(t.findIndex((a) => a === n) + 1) % t.length] || ""),
-            "data-testid": `${m}-next-button`,
-            isDisabled: o,
-            "aria-label": b,
-            variant: f.tertiary,
-            children: /* @__PURE__ */ r(d, {})
+            onClick: () => {
+              const t = (e.findIndex((d) => r(d) === l) + 1) % e.length, a = e[t];
+              o(r(a));
+            },
+            "data-testid": `${s}-next-button`,
+            isDisabled: c,
+            "aria-label": N,
+            variant: x.tertiary,
+            children: /* @__PURE__ */ n(f, {})
           }
         )
       ]
@@ -67,5 +80,5 @@ const B = ({
   );
 };
 export {
-  B as default
+  R as default
 };

package/dist/components/Pagination/utils.d.ts

@@ -0,0 +1,3 @@
+import { PaginationOption, PaginationOptionValue } from './Pagination';
+export declare const determineOptionValue: (option: PaginationOption | PaginationOptionValue) => string | number;
+export declare const findOptionFromSelectString: (options: (PaginationOption | PaginationOptionValue)[], value: string) => PaginationOptionValue | PaginationOption | undefined;

package/dist/components/Pagination/utils.js

@@ -0,0 +1,7 @@
+const n = (e) => typeof e == "string" || typeof e == "number" ? e : e == null ? void 0 : e.value, f = (e, r) => e.find(
+  (t) => n(t) === r || n(t) === parseInt(r)
+);
+export {
+  n as determineOptionValue,
+  f as findOptionFromSelectString
+};

package/dist/components/Search/Search.d.ts

@@ -7,6 +7,10 @@ export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
      * @returns void
      */
     onSearch?: (searchQuery: string) => void;
+    /**
+     * called when the search is cancelled
+     */
+    onCancel?: () => void;
     /**
      * The search results to display
      */
@@ -40,5 +44,5 @@ export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     invalidText?: string;
 }
-declare const Search: ({ onSearch, searchResults, state, defaultValue, className, placeholder, searchButtonText, loadingText, invalidText, getAllResultsText, getAllResultsLink, ...props }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Search: ({ onSearch, onCancel, searchResults, state, defaultValue, className, placeholder, searchButtonText, loadingText, invalidText, getAllResultsText, getAllResultsLink, ...props }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
 export default Search;

package/dist/components/Search/Search.js

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

package/dist/components/Search/SearchButton.d.ts

@@ -1,7 +1,7 @@
 import { SearchProps } from './Search';
 import { ComponentProps } from 'react';
-export declare const SearchButton: ({ state, isSearchExpanded, setIsSearchExpanded, searchButtonText, className, testId, ...props }: {
+export declare const SearchButton: ({ state, isSearchExpanded, setIsSearchExpanded, searchButtonText, className, testId, onCancel, ...props }: {
     testId: string;
     isSearchExpanded: boolean;
     setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
-} & Pick<SearchProps, "state" | "searchButtonText"> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
+} & Pick<SearchProps, "onCancel" | "state" | "searchButtonText"> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Search/SearchButton.js

@@ -1,41 +1,42 @@
-import { jsx as n } from "react/jsx-runtime";
-import _ from "../../assets/search.svg.js";
-import b from "../../assets/close.svg.js";
-const m = ({
-  state: l,
-  isSearchExpanded: i,
-  setIsSearchExpanded: u,
-  searchButtonText: e,
+import { jsx as r } from "react/jsx-runtime";
+import e from "../../assets/search.svg.js";
+import l from "../../assets/close.svg.js";
+const p = ({
+  state: $,
+  isSearchExpanded: u,
+  setIsSearchExpanded: _,
+  searchButtonText: a,
   className: t,
   testId: o,
-  ...a
-}) => i ? i ? /* @__PURE__ */ n(
+  onCancel: i,
+  ...b
+}) => u ? u ? /* @__PURE__ */ r(
   "button",
   {
-    ...a,
+    ...b,
     type: "button",
     "data-testid": `${o}-close-button`,
     "aria-label": "Close Search",
     className: `${t}__button ${t}__button--close`,
-    onClick: (r) => {
-      u(!1), r.stopPropagation();
+    onClick: (n) => {
+      i == null || i(), _(!1), n.stopPropagation();
     },
-    children: /* @__PURE__ */ n(b, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
+    children: /* @__PURE__ */ r(l, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
   }
-) : null : /* @__PURE__ */ n(
+) : null : /* @__PURE__ */ r(
   "button",
   {
-    ...a,
+    ...b,
     type: "button",
     "data-testid": `${o}-button`,
-    "aria-label": e,
+    "aria-label": a,
     className: `${t}__button ${t}__button--search`,
-    onClick: (r) => {
-      u(!0), r.stopPropagation();
+    onClick: (n) => {
+      _(!0), n.stopPropagation();
     },
-    children: /* @__PURE__ */ n(_, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
+    children: /* @__PURE__ */ r(e, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
   }
 );
 export {
-  m as SearchButton
+  p as SearchButton
 };

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { default as Social, type SocialProps } from './patterns/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './patterns/ViewingsList/ViewingsList';
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
-export { default as Pagination, type PaginationProps } from './components/Pagination/Pagination';
+export { default as Pagination, type PaginationProps, type PaginationOption, type PaginationOptionValue, } from './components/Pagination/Pagination';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/TextSymbol';

package/dist/scss/components/Breadcrumb/_breadcrumb.scss

@@ -5,61 +5,66 @@
 
   color: $pure-black;
 
-  @media (max-width: $breakpoint-sm) {
-    display: none;
+  &__back-button {
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
   }
 
-  .back-button {
+  &__item {
     align-items: center;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
     display: flex;
-    height: 44px;
-    justify-content: center;
-    width: 44px;
+    flex-direction: row;
+    flex-shrink: 0;
 
-    svg {
-      height: 24px;
-      width: 24px;
+    a {
+      margin: $margin-sm;
+      outline: none;
+      text-decoration: none;
+      text-wrap: nowrap;
+
+      &:hover {
+        color: $button-hover;
+        text-decoration: none;
+      }
+
+      &:focus-visible {
+        border-radius: 5px;
+        outline: 1px solid $medium-gray;
+      }
+    }
+
+    span {
+      margin: $margin-sm;
     }
   }
 
+  &__chevron {
+    height: 1rem;
+    width: 1rem;
+  }
+
   ol {
     display: flex;
     flex-direction: row;
     padding: 0;
+  }
 
-    li {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-
-      a {
-        margin: $margin-sm;
-        overflow: hidden;
-        text-decoration: none;
-        text-wrap: nowrap;
+  &--truncate {
+    flex-shrink: 1;
+    overflow: hidden;
 
-        &:hover {
-          color: $button-hover;
-          text-decoration: none;
-        }
-      }
-
-      span {
-        margin: $margin-sm;
-      }
+    a {
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
   &--current {
     color: $primary-black;
     font-variation-settings: 'wght' 700;
+    white-space: nowrap;
   }
 }

package/dist/scss/components/IconButton/_iconButton.scss

@@ -1,12 +1,11 @@
 @use '../../allPartials' as *;
 
 .#{$px}-icon-button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
   padding: 0;
 
-  & > svg {
-    position: absolute;
-  }
-
   &:focus-visible {
     &:focus-visible {
       outline: 0.5px solid $soft-black;
@@ -27,11 +26,8 @@
 
     & > svg {
       fill: $pure-black;
-      height: 100%;
       height: 1.5rem;
       margin-inline-end: unset;
-      position: absolute;
-      width: 100%;
       width: 1.5rem;
 
       path {
@@ -63,18 +59,21 @@
   }
 
   &--secondary,
-  &--tertiary {
+  &--tertiary.#{$px}-icon-button {
     height: 28px;
+    padding: $spacing-xsm;
     width: 28px;
 
+    &:focus-visible {
+      border-radius: 100px;
+    }
+
     & > svg {
       fill: $pure-black;
-      height: 100%;
-      height: 1rem;
+      height: 1.25rem;
       margin-inline-end: unset;
       position: absolute;
-      width: 100%;
-      width: 1rem;
+      width: 1.25rem;
 
       path {
         fill: $pure-black;
@@ -82,12 +81,6 @@
     }
   }
 
-  &--tertiary {
-    &:focus {
-      border-radius: 100px;
-    }
-  }
-
   &:disabled {
     background-color: $white;
     border: 1px solid $light-gray;

package/dist/scss/components/Modal/_modal.scss

@@ -6,7 +6,7 @@
   max-height: 100%;
   max-width: 100%;
   overflow: auto;
-  padding: 2rem;
+  padding: $padding-md;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);

package/dist/scss/components/Pagination/_pagination.scss

@@ -35,7 +35,7 @@
         cursor: pointer;
       }
 
-      &:focus {
+      &:focus-visible {
         outline: 1px solid $medium-gray;
       }
     }
@@ -47,16 +47,6 @@
   }
 }
 
-.#{$px}__pagination-button {
-  svg {
-    width: 2rem;
-
-    @include media($size-md, $type: 'max') {
-      width: 1rem;
-    }
-  }
-}
-
 .#{$px}-left-arrow {
   transform: scaleX(-1);
 }

package/package.json

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