@phillips/seldon 1.137.0 → 1.138.0

package/dist/components/Drawer/Drawer.js

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

package/dist/components/Dropdown/Dropdown.js

@@ -5,9 +5,9 @@ import i from "../../node_modules/classnames/index.js";
 import { Root as $, Trigger as v, Value as I, Icon as b, Portal as x, Content as R, ScrollUpButton as S, Viewport as O, ScrollDownButton as P, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
 import c from "../Icon/Icon.js";
 const y = d.forwardRef(
-  ({ options: n, value: a, onValueChange: l, label: s, className: _, id: m, disabled: h, ...f }, u) => {
-    const { className: o, ...w } = D({ id: m }, "Dropdown"), [N, g] = C(!1);
-    return /* @__PURE__ */ e("div", { className: i(o, _), id: m, ...w, ...f, children: /* @__PURE__ */ t(
+  ({ options: n, value: a, onValueChange: l, label: s, className: h, id: m, disabled: _, ...f }, w) => {
+    const { className: o, ...u } = D({ id: m }, "Dropdown"), [N, g] = C(!1);
+    return /* @__PURE__ */ e("div", { className: i(o, h), id: m, ...u, ...f, children: /* @__PURE__ */ t(
       $,
       {
         value: a,
@@ -21,15 +21,17 @@ const y = d.forwardRef(
             {
               className: `${o}__trigger`,
               "aria-label": s,
-              ref: u,
-              disabled: h,
+              ref: w,
+              disabled: _,
               children: [
                 /* @__PURE__ */ e(I, { placeholder: a }),
                 /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
                   c,
                   {
                     icon: "ChevronDown",
-                    className: i({ [`${o}__trigger-icon-expanded`]: N })
+                    className: i({ [`${o}__trigger-icon-expanded`]: N }),
+                    height: "1rem",
+                    width: "1rem"
                   }
                 ) })
               ]

package/dist/components/Filter/Filter.js

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

package/dist/components/Filter/FilterHeader.js

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

package/dist/components/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import * as iconComponents from '../../assets/formatted';
 export type IconName = keyof typeof iconComponents;
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,7 +11,7 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     width?: number | string | null;
     /**
-     * Color of the icon. Only accepts valid seldon color tokens. Defaults to $pure-black
+     * Color of the icon. Can be set to "currentColor" if you want to control the color through css. Otherwise, it only accepts valid seldon color tokens. Defaults to $pure-black
      */
     color?: string;
     /**
@@ -25,5 +26,5 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-icon--overview)
  */
-declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/components/Icon/Icon.js

@@ -1,18 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
 import d from "../../node_modules/classnames/index.js";
 import { getCommonProps as u, px as x } from "../../utils/index.js";
-import { getScssVar as N } from "../../utils/scssUtils.js";
-import * as C from "../../assets/formatted/index.js";
+import { getScssVar as C } from "../../utils/scssUtils.js";
+import * as N from "../../assets/formatted/index.js";
 const I = i(
-  ({ className: a, height: o, width: r, color: c, icon: m, ...e }, p) => {
-    const { className: t, ...l } = u(e, `Icon-${m}`), s = C[m], f = {
-      color: N(c ?? "", "$pure-black"),
-      ...o ? { height: o } : {},
-      ...r ? { width: r } : {},
+  ({ className: e, height: r, width: m, color: o, icon: s, ...t }, c) => {
+    const { className: p, ...l } = u(t, `Icon-${s}`), n = N[s], f = {
+      color: o === "currentColor" ? o : C(o ?? "", "$pure-black"),
+      ...r ? { height: r } : {},
+      ...m ? { width: m } : {},
       ...l
     };
-    return s ? /* @__PURE__ */ n("div", { className: d(`${x}-icon`, t, a), ref: p, children: /* @__PURE__ */ n(s, { ...f }) }) : null;
+    return n ? /* @__PURE__ */ a("div", { className: d(`${x}-icon`, p, e), ref: c, children: /* @__PURE__ */ a(n, { ...f }) }) : null;
   }
 );
 I.displayName = "Icon";

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
 import t from "../../node_modules/classnames/index.js";
-import { getCommonProps as y, noOp as C } from "../../utils/index.js";
+import { getCommonProps as C, noOp as y } from "../../utils/index.js";
 import h from "../Icon/Icon.js";
-import l from "../../node_modules/react-modal/lib/index.js";
+import s from "../../node_modules/react-modal/lib/index.js";
 import b from "../IconButton/IconButton.js";
 import { ButtonVariants as v } from "../Button/types.js";
 const g = ({
@@ -10,21 +10,21 @@ const g = ({
   className: n,
   overlayClassName: i,
   isOpen: o = !1,
-  onClose: a = C,
+  onClose: r = y,
   appElementSelector: d = "main",
   style: c,
-  ...r
+  ...a
 }) => {
   if (!o)
     return null;
-  const { className: e, "data-testid": f, ...p } = y(r, "Modal");
-  return l.setAppElement(d), /* @__PURE__ */ u(
-    l,
+  const { className: e, "data-testid": f, ...p } = C(a, "Modal");
+  return s.setAppElement(d), /* @__PURE__ */ u(
+    s,
     {
       ...p,
-      ...r,
+      ...a,
       isOpen: o,
-      onRequestClose: a,
+      onRequestClose: r,
       className: t(e, n),
       overlayClassName: t(`${e}__overlay`, i),
       ariaHideApp: o,
@@ -33,15 +33,15 @@ const g = ({
       onAfterOpen: () => document.body.style.overflow = "hidden",
       onAfterClose: () => document.body.style.overflow = "unset",
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ l(
           b,
           {
             id: "modal-button",
-            onClick: a,
+            onClick: r,
             "aria-label": "Close Modal",
             className: t(`${e}__close`),
             variant: v.tertiary,
-            children: /* @__PURE__ */ s(h, { icon: "Close", height: 32, width: 32 })
+            children: /* @__PURE__ */ l(h, { icon: "CloseX", height: 32, width: 32, color: "currentColor" })
           }
         ),
         m

package/dist/components/Search/SearchButton.js

@@ -20,7 +20,7 @@ const f = ({
     onClick: (i) => {
       b?.(), u(!1), i.stopPropagation();
     },
-    children: /* @__PURE__ */ n(e, { icon: "Close", "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
+    children: /* @__PURE__ */ n(e, { icon: "CloseX", "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
   }
 ) : null : /* @__PURE__ */ n(
   "button",

package/dist/components/Tags/Tags.js

@@ -1,47 +1,47 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import N, { forwardRef as y } from "react";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import N, { forwardRef as C } from "react";
 import d from "../../node_modules/classnames/index.js";
-import { getCommonProps as b, px as r } from "../../utils/index.js";
+import { getCommonProps as y, px as t } from "../../utils/index.js";
 import $ from "../Button/Button.js";
 import { ButtonVariants as g } from "../Button/types.js";
-import p from "../Icon/Icon.js";
-const R = ({ id: o, className: a, onRemove: i, label: s, removeText: e = "Remove" }) => /* @__PURE__ */ m(
+import u from "../Icon/Icon.js";
+const j = ({ id: i, className: a, onRemove: e, label: o, removeText: s = "Remove" }) => /* @__PURE__ */ n(
   $,
   {
-    className: d(`${r}-tag`, `${r}-button`, a),
-    "aria-label": `${e} ${s}`,
-    onClick: () => i(s),
+    className: d(`${t}-tag`, `${t}-button`, a),
+    "aria-label": `${s} ${o}`,
+    onClick: () => e(o),
     variant: g.tertiary,
     children: [
-      /* @__PURE__ */ t("div", { className: `${r}-tag__label`, children: s }),
-      /* @__PURE__ */ t("div", { className: `${r}-tag__button`, "data-testid": `${o}-item-close-button`, children: /* @__PURE__ */ t(p, { icon: "Close", height: 24, width: 24 }) })
+      /* @__PURE__ */ r("div", { className: `${t}-tag__label`, children: o }),
+      /* @__PURE__ */ r("div", { className: `${t}-tag__button`, "data-testid": `${i}-item-close-button`, children: /* @__PURE__ */ r(u, { icon: "CloseX", height: 8, width: 8, color: "currentColor", className: `${t}-tag__icon` }) })
     ]
   }
-), v = y(
-  ({ className: o, children: a, clearAllLabel: i = "Clear All", onClear: s, ...e }, f) => {
-    const l = "tags-list", { className: h, ...u } = b(e, "TagsList"), { id: n } = e;
-    return /* @__PURE__ */ m(
+), _ = C(
+  ({ className: i, children: a, clearAllLabel: e = "Clear All", onClear: o, ...s }, f) => {
+    const l = "tags-list", { className: p, ...h } = y(s, "TagsList"), { id: m } = s;
+    return /* @__PURE__ */ n(
       "ul",
       {
-        className: d(`${r}-${l}`, h, o),
-        ...u,
-        ...e,
+        className: d(`${t}-${l}`, p, i),
+        ...h,
+        ...s,
         tabIndex: 0,
-        "data-testid": `${l}-${n}`,
+        "data-testid": `${l}-${m}`,
         ref: f,
         children: [
-          Array.isArray(a) ? N.Children.map(a, (c) => /* @__PURE__ */ t("li", { children: c }, c.props.id)) : a,
-          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ m(
+          Array.isArray(a) ? N.Children.map(a, (c) => /* @__PURE__ */ r("li", { children: c }, c.props.id)) : a,
+          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ r("li", { children: /* @__PURE__ */ n(
             $,
             {
-              onClick: s,
-              "data-testid": `${n}-clear-all-button`,
-              className: `${r}-${l}--clear`,
-              "aria-label": i,
+              onClick: o,
+              "data-testid": `${m}-clear-all-button`,
+              className: `${t}-${l}--clear`,
+              "aria-label": e,
               variant: g.tertiary,
               children: [
-                /* @__PURE__ */ t(p, { icon: "ArrowPrev", height: 24, width: 24 }),
-                /* @__PURE__ */ t("div", { className: `${r}-label`, children: i })
+                /* @__PURE__ */ r(u, { icon: "ArrowLeft", color: "currentColor", height: 24, width: 24 }),
+                /* @__PURE__ */ r("div", { className: `${t}-label`, children: e })
               ]
             }
           ) })
@@ -50,8 +50,8 @@ const R = ({ id: o, className: a, onRemove: i, label: s, removeText: e = "Remove
     );
   }
 );
-v.displayName = "Tags";
+_.displayName = "Tags";
 export {
-  R as Tag,
-  v as default
+  j as Tag,
+  _ as default
 };

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,16 +1,16 @@
-import { jsx as o, Fragment as L, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { getCommonProps as A, noOp as w } from "../../utils/index.js";
+import { jsx as o, Fragment as x, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
+import { getCommonProps as w, noOp as C } from "../../utils/index.js";
 import $ from "../../node_modules/classnames/index.js";
 import { AuthState as e } from "./types.js";
 import { TextVariants as m } from "../../components/Text/types.js";
-import i from "../../components/Text/Text.js";
-import s from "../../components/Icon/Icon.js";
-const b = x(
+import s from "../../components/Text/Text.js";
+import i from "../../components/Icon/Icon.js";
+const b = A(
   ({
     accountDetailsLinkComponent: l = "a",
     className: d,
-    onLogin: g = w,
+    onLogin: g = C,
     authState: t = e.LoggedOut,
     loginLabel: h = "Login",
     accountLabel: u = "Account",
@@ -18,29 +18,13 @@ const b = x(
     disabled: a = !1,
     ...c
   }, p) => {
-    const { className: n, ...N } = A(c, "UserManagement"), _ = t === e.LoggedIn, C = t !== e.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: C && /* @__PURE__ */ o(L, { children: _ ? /* @__PURE__ */ r(l, { className: `${n}__login`, href: f, disabled: a, children: [
-      /* @__PURE__ */ o(
-        s,
-        {
-          icon: "AccountCircle",
-          className: `${n}__account-icon`,
-          height: "1.5rem",
-          width: "1.5rem"
-        }
-      ),
-      /* @__PURE__ */ o(i, { variant: m.body3, children: u })
+    const { className: n, ...N } = w(c, "UserManagement"), _ = t === e.LoggedIn, L = t !== e.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ r(l, { className: `${n}__login`, href: f, disabled: a, children: [
+      /* @__PURE__ */ o(i, { icon: "Account", className: `${n}__account-icon`, height: "1rem", width: "1rem" }),
+      /* @__PURE__ */ o(s, { variant: m.body3, children: u })
     ] }) : /* @__PURE__ */ r("button", { className: `${n}__login`, onClick: g, disabled: a, children: [
-      /* @__PURE__ */ o(
-        s,
-        {
-          icon: "AccountCircle",
-          className: `${n}__account-icon`,
-          height: "1.5rem",
-          width: "1.5rem"
-        }
-      ),
-      /* @__PURE__ */ o(i, { variant: m.body3, children: h })
+      /* @__PURE__ */ o(i, { icon: "Account", className: `${n}__account-icon`, height: "1rem", width: "1rem" }),
+      /* @__PURE__ */ o(s, { variant: m.body3, children: h })
     ] }) }) });
   }
 );

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

@@ -37,11 +37,6 @@
     }
   }
 
-  &__chevron {
-    height: 1rem;
-    width: 1rem;
-  }
-
   ol {
     display: flex;
     flex-direction: row;
@@ -57,6 +52,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    .#{$px}-icon-chevron-right {
+      flex-shrink: 0;
+    }
   }
 
   &--current {

package/dist/scss/components/Drawer/_drawer.scss

@@ -18,6 +18,10 @@
     outline: none;
   }
 
+  .#{$px}-icon-close-x:hover {
+    color: $white;
+  }
+
   @media (max-width: $breakpoint-sm) {
     max-width: 100%;
   }

package/dist/scss/components/Filter/_filter.scss

@@ -41,10 +41,6 @@ $chevron-scale: 0.8;
 
       margin-top: $spacing-sm;
     }
-
-    &__chevron {
-      transform: rotateY(180deg) scale($chevron-scale);
-    }
   }
 
   &__chevron {

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

@@ -11,6 +11,10 @@
   & svg {
     height: $button-label-line-height;
     width: $button-label-line-height;
+
+    &:hover {
+      color: $white;
+    }
   }
 
   &:focus-visible {
@@ -30,7 +34,7 @@
     color: $pure-black;
 
     & svg {
-      fill: $pure-black;
+      color: $pure-black;
       height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
       margin-inline-end: unset;
       width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
@@ -42,10 +46,10 @@
 
     &:hover {
       svg {
-        fill: $pure-white;
+        color: $pure-white;
 
         path {
-          fill: $pure-white;
+          color: $pure-white;
         }
       }
     }
@@ -55,10 +59,10 @@
     border-color: transparent;
 
     svg {
-      fill: $keyline-gray;
+      color: $keyline-gray;
 
       path {
-        fill: $keyline-gray;
+        color: $keyline-gray;
       }
     }
   }

package/dist/scss/components/Tags/_tags.scss

@@ -18,6 +18,14 @@
     gap: $spacing-micro;
     padding: $spacing-micro $spacing-xsm $spacing-micro $spacing-sm;
 
+    &__icon {
+      svg {
+        color: $button-hover;
+        height: 1rem;
+        width: 1rem;
+      }
+    }
+
     &__label {
       color: $button-hover;
       font-size: $body-size3;
@@ -29,23 +37,11 @@
       }
     }
 
-    svg {
-      fill: $button-hover;
-
-      path {
-        fill: $button-hover;
-      }
-    }
-
     &:hover {
       color: $pure-black;
 
       svg {
-        fill: $pure-black;
-
-        path {
-          fill: $pure-black;
-        }
+        color: $pure-black;
       }
     }
   }

package/dist/scss/patterns/ObjectTile/_objectTile.scss

@@ -14,9 +14,6 @@
   &__badge {
     color: $widget-red;
     display: block; // Ensures the badge can be sized correctly
-  }
-
-  &__badge:empty {
     min-height: 1rem;
   }
 

package/dist/scss/patterns/Social/_social.scss

@@ -1,6 +1,8 @@
 @use '../../allPartials' as *;
 
-$social_icon_height: 1.75rem;
+$icon_width: 1.75rem;
+$icon_gap: 2rem;
+$num_icons: 5;
 
 .#{$px}-social {
   align-items: center;
@@ -56,29 +58,16 @@ $social_icon_height: 1.75rem;
       align-items: center;
       border-top: 1px solid #eae8e4;
       display: flex;
-      gap: 0 1.75rem;
-      justify-content: center;
+      gap: 0 $icon_gap;
+      justify-content: flex-start;
       list-style: none;
       margin: $spacing-md 0 0;
+      max-width: calc($num_icons * $icon_width + ($num_icons - 1) * $icon_gap);
       padding: $spacing-sm 0 0;
       width: 100%;
 
-      @include media($size-md) {
-        gap: 0 2rem;
-        justify-content: flex-start;
-        margin: $spacing-md 0 $spacing-md;
-        padding: $spacing-sm 0 0;
-        width: 100%;
-      }
-
       li {
         cursor: pointer;
-        height: $social_icon_height;
-
-        svg {
-          height: $social_icon_height;
-          width: $social_icon_height;
-        }
       }
     }