@phillips/seldon 1.195.1 → 1.196.0

package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { Root as q, Trigger as B, Portal as G, Content as H } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
-import l from "../../node_modules/classnames/index.js";
+import d from "../../node_modules/classnames/index.js";
 import { memo as J, forwardRef as Q, useRef as U } from "react";
 import $ from "../../components/Icon/Icon.js";
 import W from "../../components/Link/Link.js";
@@ -10,9 +10,9 @@ import v from "../../components/Text/Text.js";
 import { getCommonProps as Z } from "../../utils/index.js";
 const S = ({
   baseClassName: e,
-  iconSize: o,
+  iconSize: r,
   createFirstListText: a,
-  onClick: r
+  onClick: o
 }) => /* @__PURE__ */ t(
   "button",
   {
@@ -21,17 +21,17 @@ const S = ({
     "data-testid": "create-list",
     "aria-label": a,
     onClick: (n) => {
-      n.stopPropagation(), r?.(n);
+      n.stopPropagation(), o?.(n);
     },
-    children: /* @__PURE__ */ t("span", { className: l(`${e}__empty`, `${e}__empty--create-list`), children: /* @__PURE__ */ c("span", { className: `${e}__empty__content`, children: [
+    children: /* @__PURE__ */ t("span", { className: d(`${e}__empty`, `${e}__empty--create-list`), children: /* @__PURE__ */ c("span", { className: `${e}__empty__content`, children: [
       /* @__PURE__ */ t(
         $,
         {
           icon: "Add",
-          width: o,
-          height: o,
-          color: "$dark-gray",
-          className: l(`${e}__icon`, `${e}__icon-circle`),
+          width: r,
+          height: r,
+          color: "$gray-75",
+          className: d(`${e}__icon`, `${e}__icon-circle`),
           "aria-hidden": "true"
         }
       ),
@@ -40,41 +40,41 @@ const S = ({
   }
 ), N = ({
   baseClassName: e,
-  iconSize: o,
+  iconSize: r,
   text: a,
-  ariaLabel: r,
+  ariaLabel: o,
   dataTestId: n
-}) => /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": n, "aria-label": r, role: "region", children: /* @__PURE__ */ t("div", { className: l(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ c("div", { className: `${e}__empty__content`, children: [
+}) => /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": n, "aria-label": o, role: "region", children: /* @__PURE__ */ t("div", { className: d(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ c("div", { className: `${e}__empty__content`, children: [
   /* @__PURE__ */ t(
     $,
     {
       icon: "Favorite",
-      width: o,
-      height: o,
-      color: "$dark-gray",
-      className: l(`${e}__icon`),
+      width: r,
+      height: r,
+      color: "$gray-75",
+      className: d(`${e}__icon`),
       "aria-hidden": "true"
     }
   ),
   /* @__PURE__ */ t("div", { className: `${e}__text`, children: a })
 ] }) }) }), z = ({
   baseClassName: e,
-  imageRef: o,
+  imageRef: r,
   listAriaLabel: a,
-  name: r,
+  name: o,
   imageSrc: n
 }) => /* @__PURE__ */ t(
   "div",
   {
     className: `${e}__media-container`,
-    ref: o,
+    ref: r,
     "aria-label": a,
     "data-testid": "list",
     role: "region",
     children: /* @__PURE__ */ t(
       X,
       {
-        alt: r,
+        alt: o,
         aspectRatio: "1/1",
         className: `${e}__media`,
         objectFit: "contain",
@@ -85,48 +85,48 @@ const S = ({
       }
     )
   }
-), lt = J(
+), dt = J(
   Q(
     ({
       id: e,
-      className: o,
+      className: r,
       count: a,
-      name: r,
+      name: o,
       imageSrc: n,
       variant: _,
       element: L = W,
-      href: k,
-      emptyFavoritesText: w = "You have not added any objects to your Favorites yet.",
-      emptyListsText: b = "You have not added any objects to your List yet.",
-      createFirstListText: x = "Create your first List.",
+      href: w,
+      emptyFavoritesText: b = "You have not added any objects to your Favorites yet.",
+      emptyListsText: x = "You have not added any objects to your List yet.",
+      createFirstListText: k = "Create your first List.",
       editListText: I = "Edit List",
       deleteListText: T = "Delete List",
       onEdit: E,
       onDelete: F,
       formatlotStr: u = (i, p = i === 1 ? "LOT" : "LOTS") => `${i} ${p}`,
       linkClassName: P,
-      iconSize: d = 22,
+      iconSize: l = 22,
       menuAriaLabel: R = "Manage List",
       favoritesAriaLabel: V = "Favorites",
       emptyListAriaLabel: j = "Empty List",
       listAriaLabel: C = "List",
       ...y
     }, O) => {
-      const { className: i, ...p } = Z({ id: e, ...y }, "FavoritesCollectionTile"), D = U(null), m = r && a !== null && a !== void 0, h = a === 0, f = _ === "lists", A = _ === "create", M = _ === "favorites" && h, Y = m && h && f, K = () => A ? /* @__PURE__ */ t(
+      const { className: i, ...p } = Z({ id: e, ...y }, "FavoritesCollectionTile"), D = U(null), m = o && a !== null && a !== void 0, h = a === 0, f = _ === "lists", A = _ === "create", M = _ === "favorites" && h, Y = m && h && f, K = () => A ? /* @__PURE__ */ t(
         S,
         {
           baseClassName: i,
-          iconSize: d,
-          createFirstListText: x,
+          iconSize: l,
+          createFirstListText: k,
           onClick: y.onClick
         }
-      ) : /* @__PURE__ */ c(L, { href: k, className: l(`${i}__media-link`, P), tabIndex: 0, children: [
+      ) : /* @__PURE__ */ c(L, { href: w, className: d(`${i}__media-link`, P), tabIndex: 0, children: [
         M && /* @__PURE__ */ t(
           N,
           {
             baseClassName: i,
-            iconSize: d,
-            text: w,
+            iconSize: l,
+            text: b,
             ariaLabel: V,
             dataTestId: "favorites"
           }
@@ -135,8 +135,8 @@ const S = ({
           N,
           {
             baseClassName: i,
-            iconSize: d,
-            text: b,
+            iconSize: l,
+            text: x,
             ariaLabel: j,
             dataTestId: "empty-list"
           }
@@ -147,17 +147,17 @@ const S = ({
             baseClassName: i,
             imageRef: D,
             listAriaLabel: C,
-            name: r,
+            name: o,
             imageSrc: n,
-            iconSize: d
+            iconSize: l
           }
         )
       ] });
-      return /* @__PURE__ */ t("div", { ...p, className: l(i, o), ref: O, id: e, children: /* @__PURE__ */ c("div", { className: `${i}__content`, children: [
+      return /* @__PURE__ */ t("div", { ...p, className: d(i, r), ref: O, id: e, children: /* @__PURE__ */ c("div", { className: `${i}__content`, children: [
         /* @__PURE__ */ c("div", { className: `${i}__header`, children: [
           /* @__PURE__ */ c("div", { className: `${i}__info`, children: [
             m && /* @__PURE__ */ t(v, { element: "span", className: `${i}__count`, variant: g.body3, children: u && m && u(a) }),
-            r && /* @__PURE__ */ t(v, { element: "h3", className: `${i}__title`, variant: g.heading5, children: r })
+            o && /* @__PURE__ */ t(v, { element: "h3", className: `${i}__title`, variant: g.heading5, children: o })
           ] }),
           m && f && /* @__PURE__ */ c(q, { children: [
             /* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t(
@@ -176,9 +176,9 @@ const S = ({
                   $,
                   {
                     icon: "Icon",
-                    width: d,
-                    height: d,
-                    color: "$dark-gray",
+                    width: l,
+                    height: l,
+                    color: "$gray-75",
                     className: `${i}__icon-button`,
                     "aria-hidden": "true"
                   }
@@ -224,5 +224,5 @@ const S = ({
   )
 );
 export {
-  lt as default
+  dt as default
 };

package/dist/providers/SeldonProvider/utils.d.ts

@@ -1,5 +1,5 @@
 /**
  * Used to hide or show components based on the current breakpoint in a SSR friendly way
  */
-export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "xsm", never>;
+export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "snw-mobile" | "xsm", never>;
 export declare const ssrMediaQueryStyle: string;

package/dist/scss/_utils.scss

@@ -101,6 +101,20 @@
     }
   }
 
+  @if $breakpoint == $size-snw-mobile or $breakpoint == $breakpoint-snw-mobile {
+    @if $type == 'min' {
+      @media (min-width: $breakpoint-snw-mobile) {
+        @content;
+      }
+    }
+
+    @if $type == 'max' {
+      @media (max-width: calc($breakpoint-snw-mobile - 1px)) {
+        @content;
+      }
+    }
+  }
+
   @if $breakpoint == $size-md or $breakpoint == $breakpoint-md {
     // $breakpoint-md: 961px;
     @if $type == 'min' {

package/dist/scss/_vars.scss

@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 
+// Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+$breakpoint-snw-mobile: 768px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
 $size-lg: 'lg';
 $size-xl: 'xl';
 $size-xxl: 'xxl';
+$size-snw-mobile: 'snw-mobile';
 $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
 $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
 $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);

package/dist/scss/_vars.scss.js

@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 
+// Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+$breakpoint-snw-mobile: 768px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
 $size-lg: 'lg';
 $size-xl: 'xl';
 $size-xxl: 'xxl';
+$size-snw-mobile: 'snw-mobile';
 $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
 $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
 $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);

package/dist/scss/components/Tabs/_tabs.scss

@@ -9,7 +9,6 @@
     display: flex;
     gap: 1rem;
     overflow: hidden; /* Prevent overflow */
-    padding: 0 $padding-md;
     position: relative;
   }
 
@@ -17,7 +16,8 @@
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
-    padding: $padding-xsm $padding-xsm $padding-sm;
+    padding-bottom: $snowflake-menu-padding;
+    padding-inline: 0;
     transition:
       background 0.2s ease,
       font-weight 0.2s ease-out,
@@ -33,6 +33,7 @@
       cursor: pointer;
       font-size: $body-size2;
       font-variation-settings: 'wght' 600;
+      letter-spacing: normal;
       line-height: $body-line-height-size2;
 
       &:hover {

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   gap: $spacing-md;
 
-  @include media($breakpoint-md) {
+  @include media($breakpoint-snw-mobile) {
     flex-direction: row;
   }
 
@@ -19,7 +19,7 @@
     justify-content: center;
     min-width: 100%;
 
-    @include media($breakpoint-md) {
+    @include media($breakpoint-snw-mobile) {
       min-width: auto;
     }
 
@@ -37,7 +37,7 @@
     flex-grow: 1;
     gap: $spacing-micro;
 
-    @include media($size-md, 'max') {
+    @include media($size-snw-mobile, 'max') {
       align-self: flex-start;
     }
   }
@@ -45,7 +45,7 @@
   &__ctas {
     flex: 0 0 0%;
 
-    @include media($breakpoint-md) {
+    @include media($breakpoint-snw-mobile) {
       flex-basis: 191px;
     }
 
@@ -116,7 +116,7 @@
     align-items: flex-start;
     gap: $spacing-sm;
 
-    @include media($size-md, 'max') {
+    @include media($size-snw-mobile, 'max') {
       flex-direction: row;
     }
 

package/dist/scss/patterns/TextBanner/_textBanner.scss

@@ -8,7 +8,7 @@
     gap: $spacing-md;
     justify-content: center;
     max-width: none;
-    padding: $spacing-lg $spacing-md;
+    padding: $spacing-lg 0;
 
     h1 {
       white-space: nowrap;

package/dist/utils/constants.d.ts

@@ -5,5 +5,6 @@ export declare const BREAKPOINTS: {
     md: number;
     lg: number;
     xl: number;
+    "snw-mobile": number;
 };
 export declare const DEFAULT_REM_SIZE = 16;

package/dist/utils/constants.js

@@ -3,9 +3,11 @@ const s = {
   sm: 361,
   md: 961,
   lg: 1401,
-  xl: 1801
-}, E = 16;
+  xl: 1801,
+  // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+  "snw-mobile": 768
+}, m = 16;
 export {
   s as BREAKPOINTS,
-  E as DEFAULT_REM_SIZE
+  m as DEFAULT_REM_SIZE
 };

package/package.json

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