@phillips/seldon 1.103.1 → 1.103.3

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,7 +3,7 @@ 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 c } from "../../providers/SeldonProvider/utils.js";
-import N from "../../assets/arrowPrev.svg.js";
+import g from "../../assets/arrowPrev.svg.js";
 const v = ({
   className: s,
   items: a = [],
@@ -11,25 +11,25 @@ const v = ({
   linkElement: l = "a",
   ...e
 }) => {
-  const { className: n, ...i } = u(e, "Breadcrumb"), { id: b } = e;
-  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: f(n, s), ...i, ...e, children: [
+  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: a[1].href ? a[1].href : "/",
-        className: `${t}-icon-button ${t}-icon-button--secondary`,
+        className: `${t}-icon-button ${t}-icon-button--primary ${m}__back-button`,
         "data-testid": `${b}-back-button`,
-        children: /* @__PURE__ */ r(N, { className: `${n}__back-button` })
+        children: /* @__PURE__ */ r(g, {})
       }
     ) }),
-    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: a.map((o, m) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: a.map((o, n) => /* @__PURE__ */ r(
       p,
       {
         href: o.href,
         label: o.label,
         element: l,
-        isCurrent: a.length - 1 === m,
-        isTruncateText: d === m
+        isCurrent: a.length - 1 === n,
+        isTruncateText: d === n
       },
       o.label
     )) }) })

package/dist/components/Button/Button.d.ts

@@ -16,10 +16,6 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      * Is this the principal call to action on the page?
      */
     variant?: ButtonVariants;
-    /**
-     * How large should the button be?
-     */
-    size?: 'sm' | 'md' | 'lg';
     /**
      * The type of the button.
      */

package/dist/components/Button/Button.js

@@ -1,64 +1,61 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import p from "../../node_modules/classnames/index.js";
-import { getCommonProps as d } from "../../utils/index.js";
+import { getCommonProps as c } from "../../utils/index.js";
 import { ButtonVariants as b } from "./types.js";
-import { forwardRef as B } from "react";
-const N = B(
+import { forwardRef as d } from "react";
+const B = d(
   ({
-    variant: t = b.primary,
-    size: s = "md",
-    children: r,
-    className: a,
-    isIconLast: m = !1,
+    variant: s = b.primary,
+    children: t,
+    className: r,
+    isIconLast: a = !1,
     type: u = "button",
-    isDisabled: c = !1,
-    href: e,
-    target: n,
-    ...l
-  }, $) => {
-    const { className: o, ...f } = d(l, "Button");
-    return e ? /* @__PURE__ */ i(
+    isDisabled: $ = !1,
+    href: m,
+    target: e,
+    ...n
+  }, l) => {
+    const { className: o, ...i } = c(n, "Button");
+    return m ? /* @__PURE__ */ f(
       "a",
       {
-        ...f,
-        ref: $,
-        href: e,
+        ...i,
+        ref: l,
+        href: m,
         className: p(
           `${o}`,
           `${o}--${s}`,
-          `${o}--${t}`,
           {
-            [`${o}--icon-last`]: m
+            [`${o}--icon-last`]: a
           },
-          a
+          r
         ),
-        target: n,
-        rel: n === "_blank" ? "noopener noreferrer" : void 0,
-        children: r
+        target: e,
+        rel: e === "_blank" ? "noopener noreferrer" : void 0,
+        children: t
       }
-    ) : /* @__PURE__ */ i(
+    ) : /* @__PURE__ */ f(
       "button",
       {
-        ...f,
-        ref: $,
+        ...i,
+        ref: l,
         type: u,
         className: p(
           `${o}`,
           `${o}--${s}`,
-          `${o}--${t}`,
           {
-            [`${o}--icon-last`]: m
+            [`${o}--icon-last`]: a
           },
-          a
+          r
         ),
-        disabled: c,
-        ...l,
-        children: r
+        disabled: $,
+        ...n,
+        children: t
       }
     );
   }
 );
-N.displayName = "Button";
+B.displayName = "Button";
 export {
-  N as default
+  B as default
 };

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

@@ -4,12 +4,6 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     argTypes: {
-        size: {
-            options: string[];
-            control: {
-                type: "select";
-            };
-        };
         variant: {
             options: ButtonVariants[];
             control: {

package/dist/components/IconButton/IconButton.d.ts

@@ -4,10 +4,6 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      * Button contents
      */
     children?: React.ReactElement<SVGElement>;
-    /**
-     * How large should the button be?
-     */
-    size?: 'sm' | 'md' | 'lg';
     /**
      * Mainly used for styling
      */
@@ -17,5 +13,5 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      */
     isDisabled?: boolean;
 }
-declare const IconButton: ({ children, size, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -1,29 +1,28 @@
-import { jsx as c } from "react/jsx-runtime";
-import f from "../../node_modules/classnames/index.js";
-import p from "../Button/Button.js";
-import { getCommonProps as i } from "../../utils/index.js";
-import { ButtonVariants as l } from "../Button/types.js";
-const C = ({
+import { jsx as e } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
+import f from "../Button/Button.js";
+import { getCommonProps as p } from "../../utils/index.js";
+import { ButtonVariants as i } from "../Button/types.js";
+const I = ({
   children: s,
-  size: r = "md",
-  variant: m = l.primary,
-  isDisabled: a = !1,
-  className: n,
+  variant: o = i.primary,
+  isDisabled: r = !1,
+  className: a,
   ...t
 }) => {
-  const { className: o, ...e } = i(t, "IconButton");
-  return /* @__PURE__ */ c(
-    p,
+  const { className: m, ...n } = p(t, "IconButton");
+  return /* @__PURE__ */ e(
+    f,
     {
-      ...e,
-      variant: m,
-      className: f(o, `${o}--${r}`, `${o}--${m}`, n),
-      isDisabled: a,
+      ...n,
+      variant: o,
+      className: c(m, `${m}--${o}`, a),
+      isDisabled: r,
       ...t,
       children: s
     }
   );
 };
 export {
-  C as default
+  I as default
 };

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

@@ -1,14 +1,8 @@
 import { ButtonVariants } from '../Button/types';
 declare const meta: {
     title: string;
-    component: ({ children, size, variant, isDisabled, className, ...props }: import('./IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, variant, isDisabled, className, ...props }: import('./IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        size: {
-            options: string[];
-            control: {
-                type: "select";
-            };
-        };
         variant: {
             options: ButtonVariants[];
             control: {

package/dist/components/Pagination/Pagination.js

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

package/dist/patterns/ViewingsList/ViewingsList.js

@@ -5,7 +5,7 @@ import S from "../../node_modules/classnames/index.js";
 import { getCommonProps as M } from "../../utils/index.js";
 import P from "./ViewingsListCard.js";
 import R from "../../components/Button/Button.js";
-const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
+const $ = () => Math.floor(Math.random() * 100) + Date.now(), H = ({
   cardTitle: C = "Viewing Details",
   className: E,
   i18n: f = {},
@@ -16,28 +16,28 @@ const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
   viewings: c,
   ...i
 }) => {
-  const [a, h] = d.useState(c), [m, n] = d.useState(""), [s, u] = d.useState(), { className: p, ...D } = M(i, "ViewingsList");
+  const [a, h] = d.useState(c), [m, s] = d.useState(""), [o, u] = d.useState(), { className: p, ...D } = M(i, "ViewingsList");
   d.useEffect(() => {
     h(c);
   }, [c]);
   const { addViewingsBtnLabel: y = "ADD VIEWINGS" } = f, b = () => {
     const t = `${$()}${a ? "-" + a.length : ""}`;
-    n(t), u(t), r && r(t);
+    s(t), u(t), r && r(t);
   }, V = (t) => {
-    n(""), typeof e == "function" && e(t);
+    s(""), typeof e == "function" && e(t);
   }, k = (t) => {
-    n(t), u(a == null ? void 0 : a.find((o) => o.id === t));
+    s(t), u(a == null ? void 0 : a.find((n) => n.id === t));
   }, x = (t) => {
-    N(t) && n("");
+    N(t) && s("");
   }, B = () => {
-    typeof s == "string" ? typeof e == "function" && e(s) : m === (s == null ? void 0 : s.id) && h((t) => t == null ? void 0 : t.map((o) => o.id === s.id ? s : o)), n("");
+    typeof o == "string" ? typeof e == "function" && e(o) : m === (o == null ? void 0 : o.id) && h((t) => t == null ? void 0 : t.map((n) => n.id === o.id ? o : n)), s("");
   };
-  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, o) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, n) => /* @__PURE__ */ l(
     P,
     {
       ...t,
       ...f,
-      cardTitle: t.location ? `${C} ${o + 1}` : void 0,
+      cardTitle: t.location ? `${C} ${n + 1}` : void 0,
       isEditState: m === t.id,
       onCancel: B,
       onDelete: V,
@@ -45,8 +45,8 @@ const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
       onSave: x
     },
     `${t.id}`
-  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, size: "sm", onClick: b, children: y }));
+  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, onClick: b, children: y }));
 };
 export {
-  G as default
+  H as default
 };

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -1,31 +1,31 @@
-import { jsxs as m, jsx as t, Fragment as $ } from "react/jsx-runtime";
-import * as a from "react";
-import mt from "../../node_modules/classnames/index.js";
-import { px as u } from "../../utils/index.js";
+import { jsxs as f, jsx as t, Fragment as $ } from "react/jsx-runtime";
+import * as c from "react";
+import ft from "../../node_modules/classnames/index.js";
+import { px as i } from "../../utils/index.js";
 import y from "../../components/Input/Input.js";
-import c from "../../components/Button/Button.js";
+import s from "../../components/Button/Button.js";
 import { ButtonVariants as l } from "../../components/Button/types.js";
-import ft from "./ViewingsListCardForm.js";
-const i = `${u}-viewings-list-card`, dt = ({
+import mt from "./ViewingsListCardForm.js";
+const u = `${i}-viewings-list-card`, dt = ({
   address1: d,
   address1Label: C,
   addressUrl: O,
   addressUrlLabel: w,
   address2: v,
   address2Label: x,
-  address3: z,
-  address3Label: A,
-  cancelBtnLabel: L = "CANCEL",
-  cardTitle: T = "Add New Viewing",
-  deleteBtnLabel: V = "DELETE",
-  editBtnLabel: _ = "EDIT",
+  address3: A,
+  address3Label: L,
+  cancelBtnLabel: T = "CANCEL",
+  cardTitle: V = "Add New Viewing",
+  deleteBtnLabel: _ = "DELETE",
+  editBtnLabel: k = "EDIT",
   isEditState: o,
-  enableOnSite: f = "false",
-  enableOnSiteToggleLabel: k = "Enabled on website",
-  email: I,
-  emailLabel: N = "Email",
-  emailLink: S,
-  emailLinkLabel: j = "Email Address",
+  enableOnSite: m = "false",
+  enableOnSiteToggleLabel: I = "Enabled on website",
+  email: N,
+  emailLabel: S = "Email",
+  emailLink: j,
+  emailLinkLabel: z = "Email Address",
   emailOn: B = "false",
   emailToggleLabel: D = "Include Email Address",
   id: e,
@@ -54,35 +54,35 @@ const i = `${u}-viewings-list-card`, dt = ({
   viewingHours1: nt,
   viewingHours1Label: ot,
   viewingHours2: rt,
-  viewingHours2Label: st
+  viewingHours2Label: at
 }) => {
-  const [at, ct] = a.useState(f === "true"), s = a.useRef(null);
-  a.useEffect(() => {
-    o && s.current && s.current.focus();
-  }, [o]), a.useEffect(() => {
+  const [ct, st] = c.useState(m === "true"), a = c.useRef(null);
+  c.useEffect(() => {
+    o && a.current && a.current.focus();
+  }, [o]), c.useEffect(() => {
     var r, E;
-    n && s.current && ((E = (r = s.current.closest(`.${u}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${u}-input--invalid input`)) == null || E.focus());
+    n && a.current && ((E = (r = a.current.closest(`.${i}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${i}-input--invalid input`)) == null || E.focus());
   }, [n]);
   const lt = () => {
     typeof p == "function" && p();
-  }, it = () => {
+  }, ut = () => {
     typeof h == "function" && h();
-  }, ut = (r) => {
+  }, it = (r) => {
     typeof g == "function" && g(r);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ f(
     "section",
     {
       "data-testid": `viewings-list-card-${e}`,
       id: e,
-      className: mt(`${i}`, { [`${i}--edit-state`]: o }),
+      className: ft(`${u}`, { [`${u}--edit-state`]: o }),
       children: [
-        /* @__PURE__ */ t("h3", { className: `${i}__title`, children: T }),
+        /* @__PURE__ */ t("h3", { className: `${u}__title`, children: V }),
         /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
         /* @__PURE__ */ t(
           y,
           {
-            ref: s,
+            ref: a,
             id: `location-${e}`,
             defaultValue: R,
             labelText: q,
@@ -94,7 +94,7 @@ const i = `${u}-viewings-list-card`, dt = ({
           }
         ),
         o ? /* @__PURE__ */ t(
-          ft,
+          mt,
           {
             address1: d,
             address1Label: C,
@@ -102,12 +102,12 @@ const i = `${u}-viewings-list-card`, dt = ({
             addressUrlLabel: w,
             address2: v,
             address2Label: x,
-            address3: z,
-            address3Label: A,
-            email: I,
-            emailLabel: N,
-            emailLink: S,
-            emailLinkLabel: j,
+            address3: A,
+            address3Label: L,
+            email: N,
+            emailLabel: S,
+            emailLink: j,
+            emailLinkLabel: z,
             emailOn: B,
             emailToggleLabel: D,
             id: e,
@@ -129,7 +129,7 @@ const i = `${u}-viewings-list-card`, dt = ({
             viewingHours1: nt,
             viewingHours1Label: ot,
             viewingHours2: rt,
-            viewingHours2Label: st
+            viewingHours2Label: at
           }
         ) : null,
         /* @__PURE__ */ t(
@@ -137,62 +137,31 @@ const i = `${u}-viewings-list-card`, dt = ({
           {
             id: `enableOnSite-${e}`,
             type: "toggle",
-            defaultChecked: f === "true",
-            labelText: k,
+            defaultChecked: m === "true",
+            labelText: I,
             size: "md",
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => ct((r) => !r),
+            onChange: () => st((r) => !r),
             readOnly: !o
           }
         ),
-        at ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        ct ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
         /* @__PURE__ */ t("hr", {}),
-        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${u}-button__group`, children: o ? /* @__PURE__ */ m($, { children: [
+        /* @__PURE__ */ t("div", { className: `${u}__btn-group ${i}-button__group`, children: o ? /* @__PURE__ */ f($, { children: [
+          /* @__PURE__ */ t(s, { id: `vlc-save-btn-${e}`, variant: l.ghost, type: "submit", onClick: it, children: Y }),
+          /* @__PURE__ */ t(s, { id: `vlc-cancel-btn-${e}`, variant: l.ghost, type: "button", onClick: lt, children: T })
+        ] }) : /* @__PURE__ */ f($, { children: [
+          /* @__PURE__ */ t(s, { id: `vlc-edit-btn-${e}`, variant: l.ghost, type: "button", onClick: ut, children: k }),
           /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-save-btn-${e}`,
-              variant: l.ghost,
-              type: "submit",
-              size: "sm",
-              onClick: ut,
-              children: Y
-            }
-          ),
-          /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-cancel-btn-${e}`,
-              variant: l.ghost,
-              type: "button",
-              size: "sm",
-              onClick: lt,
-              children: L
-            }
-          )
-        ] }) : /* @__PURE__ */ m($, { children: [
-          /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-edit-btn-${e}`,
-              variant: l.ghost,
-              type: "button",
-              size: "sm",
-              onClick: it,
-              children: _
-            }
-          ),
-          /* @__PURE__ */ t(
-            c,
+            s,
             {
               id: `vlc-delete-btn-${e}`,
               variant: l.ghost,
               type: "button",
-              size: "sm",
               onClick: () => typeof b == "function" && b(e),
-              children: V
+              children: _
             }
           )
         ] }) })

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

@@ -5,11 +5,8 @@
 
   color: $pure-black;
 
-  &__back-button {
-    svg {
-      height: 1rem;
-      width: 1rem;
-    }
+  &__back-button:hover svg path {
+    fill: $pure-black;
   }
 
   &__item {

package/dist/scss/components/Button/_button.scss

@@ -2,6 +2,7 @@
 
 .#{$px}-button {
   @include bodyText;
+  @include labelText($button);
 
   align-items: center;
   background-color: $pure-black;
@@ -13,7 +14,7 @@
   font-variation-settings: 'wght' 600;
   gap: $margin-xsm;
   justify-content: center;
-  padding: 0 $padding-md;
+  padding: $padding-sm $padding-md;
   position: relative;
   transition:
     color 0.25s,
@@ -21,6 +22,8 @@
 
   svg {
     fill: $pure-white;
+    height: $button-label-line-height;
+    width: $button-label-line-height;
 
     path {
       fill: $pure-white;
@@ -45,27 +48,6 @@
     }
   }
 
-  &--sm {
-    font-size: 0.75rem;
-    height: 44px;
-
-    svg {
-      height: 1rem;
-      width: 1rem;
-    }
-  }
-
-  &--md,
-  &--lg {
-    font-size: 1rem;
-    height: 48px;
-
-    svg {
-      height: 1.25rem;
-      width: 1.25rem;
-    }
-  }
-
   &--link {
     background-color: transparent;
     border: 0;
@@ -146,8 +128,7 @@
     background-color: transparent;
     border: 0;
     color: $pure-black;
-    height: 28px;
-    padding: 0;
+    padding: 0 $spacing-micro;
 
     svg {
       fill: $pure-black;

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

@@ -3,8 +3,15 @@
 .#{$px}-icon-button {
   align-items: center;
   display: flex;
+  height: $spacing-md;
   justify-content: center;
   padding: 0;
+  width: $spacing-md;
+
+  & > svg {
+    height: $button-label-line-height;
+    width: $button-label-line-height;
+  }
 
   &:focus-visible {
     &:focus-visible {
@@ -21,14 +28,12 @@
   &--ghost {
     background: $pure-white;
     color: $pure-black;
-    height: 44px;
-    width: 44px;
 
     & > svg {
       fill: $pure-black;
-      height: 1.5rem;
+      height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
       margin-inline-end: unset;
-      width: 1.5rem;
+      width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
 
       path {
         fill: $pure-black;
@@ -58,22 +63,21 @@
     }
   }
 
+  &--secondary {
+    height: $spacing-lg;
+    width: $spacing-lg;
+  }
+
   &--secondary,
   &--tertiary.#{$px}-icon-button {
-    height: 28px;
-    padding: $spacing-xsm;
-    width: 28px;
-
     &:focus-visible {
       border-radius: 100px;
     }
 
     & > svg {
       fill: $pure-black;
-      height: 1.25rem;
       margin-inline-end: unset;
       position: absolute;
-      width: 1.25rem;
 
       path {
         fill: $pure-black;
@@ -85,6 +89,20 @@
     &:focus-visible {
       border-radius: 100px;
     }
+
+    &:hover {
+      background-color: $button-hover;
+
+      & > svg {
+        fill: $pure-white;
+        margin-inline-end: unset;
+        position: absolute;
+
+        path {
+          fill: $pure-white;
+        }
+      }
+    }
   }
 
   &:disabled {

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

@@ -4,68 +4,66 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: $spacing-sm;
-}
+  gap: $spacing-xsm;
 
-.#{$px} {
-  &-icon-button {
+  &__button {
     &:disabled {
       border: unset;
     }
-    &.#{$px}__pagination-button {
-      @include media($breakpoint-md) {
-        > svg {
-          height: 1.75rem;
-          width: 1.75rem;
-        }
+
+    &:hover:not(:disabled) {
+      background-color: inherit;
+
+      svg path {
+        fill: $pure-black;
       }
     }
   }
+}
 
-  &--inline-pagination__wrapper {
-    select {
-      @include pText($body-size2);
-
-      appearance: none;
-      border: none;
-      font-variation-settings: 'wght' 600;
-      line-height: 1.75rem;
-      margin-bottom: 0;
-      outline: none;
-      padding: 0 $spacing-xsm;
-      text-align: center;
-      text-align-last: center;
-      text-decoration: underline;
-      text-underline-offset: 6px;
+.#{$px}--inline-pagination__wrapper {
+  select {
+    @include pText($body-size2);
 
-      @include isHeaderDesktop {
-        line-height: 2.5rem;
-        text-underline-offset: 10px;
-      }
+    appearance: none;
+    border: none;
+    font-variation-settings: 'wght' 600;
+    line-height: 1.75rem;
+    margin-bottom: 0;
+    outline: none;
+    padding: 0 $spacing-xsm;
+    text-align: center;
+    text-align-last: center;
+    text-decoration: underline;
+    text-underline-offset: 6px;
 
-      &:disabled {
-        border: 1px solid $medium-gray;
-        margin: auto;
-        max-height: 3.5rem;
-        max-width: 5rem;
-        padding: 0.5rem;
-        text-decoration: none;
-      }
+    @include isHeaderDesktop {
+      line-height: 2.5rem;
+      text-underline-offset: 10px;
+    }
 
-      &:hover {
-        cursor: pointer;
-      }
+    &:disabled {
+      border: 1px solid $medium-gray;
+      margin: auto;
+      max-height: 3.5rem;
+      max-width: 5rem;
+      padding: 0.5rem;
+      text-decoration: none;
+    }
 
-      &:focus-visible {
-        outline: 1px solid $medium-gray;
-      }
+    &:hover {
+      cursor: pointer;
     }
 
-    select::-ms-expand {
-      border: none;
-      display: none;
+    &:focus-visible {
+      outline: 1px solid $medium-gray;
     }
   }
+
+  select::-ms-expand {
+    border: none;
+    display: none;
+  }
 }
 
 .#{$px}-left-arrow {

package/package.json

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