@phillips/seldon 1.232.1 → 1.235.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/components/Text/types.d.ts +3 -1
  2. package/dist/components/Text/types.js +1 -1
  3. package/dist/node_modules/@radix-ui/react-toast/dist/index.js +5 -5
  4. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-collection/dist/index.js +3 -3
  5. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-dismissable-layer/dist/index.js +4 -4
  6. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-portal/dist/index.js +1 -1
  7. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-presence/dist/index.js +2 -2
  8. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-primitive/dist/index.js +1 -1
  9. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-use-controllable-state/dist/index.js +1 -1
  10. package/dist/patterns/ObjectTile/ObjectTile.js +7 -7
  11. package/dist/patterns/SaleCard/SaleCard.js +24 -24
  12. package/dist/scss/_type.scss +8 -0
  13. package/dist/scss/_vars.scss +9 -1
  14. package/dist/scss/_vars.scss.js +9 -1
  15. package/dist/scss/components/ComboBox/_combobox.scss +0 -10
  16. package/dist/scss/components/Detail/_detail.scss +8 -19
  17. package/package.json +7 -3
  18. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/primitive/dist/index.js +0 -9
  19. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-compose-refs/dist/index.js +0 -29
  20. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-context/dist/index.js +0 -53
  21. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-slot/dist/index.js +0 -48
  22. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-use-callback-ref/dist/index.js +0 -10
  23. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-use-escape-keydown/dist/index.js +0 -14
  24. package/dist/node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-use-layout-effect/dist/index.js +0 -6
@@ -64,7 +64,9 @@ export declare enum TextVariants {
64
64
  linkStylised = "linkStylised",
65
65
  linkLarge = "linkLarge",
66
66
  linkMedium = "linkMedium",
67
- linkSmall = "linkSmall"
67
+ linkSmall = "linkSmall",
68
+ badgeSmall = "badgeSmall",
69
+ badgeMedium = "badgeMedium"
68
70
  }
69
71
  export declare enum TextAlignments {
70
72
  left = "left",
@@ -1,4 +1,4 @@
1
- var d = /* @__PURE__ */ ((l) => (l.blockquote = "blockquote", l.heading1 = "heading1", l.heading2 = "heading2", l.heading3 = "heading3", l.heading4 = "heading4", l.heading5 = "heading5", l.title1 = "title1", l.title2 = "title2", l.title3 = "title3", l.title4 = "title4", l.body1 = "body1", l.body2 = "body2", l.body3 = "body3", l.string1 = "string1", l.string2 = "string2", l.string3 = "string3", l.button = "button", l.email = "email", l.label = "label", l.link = "link", l.badge = "badge", l.snwFlyoutLink = "snwFlyoutLink", l.snwHeaderLink = "snwHeaderLink", l.snwHeadingHero1 = "snwHeadingHero1", l.snwHeadingHero2 = "snwHeadingHero2", l.displayMedium = "displayMedium", l.displaySmall = "displaySmall", l.headingLarge = "headingLarge", l.headingMedium = "headingMedium", l.headingSmall = "headingSmall", l.headingExtraSmall = "headingExtraSmall", l.bodyLarge = "bodyLarge", l.bodyMedium = "bodyMedium", l.bodySmall = "bodySmall", l.labelLarge = "labelLarge", l.labelMedium = "labelMedium", l.labelSmall = "labelSmall", l.linkStylised = "linkStylised", l.linkLarge = "linkLarge", l.linkMedium = "linkMedium", l.linkSmall = "linkSmall", l))(d || {}), g = /* @__PURE__ */ ((l) => (l.left = "left", l.center = "center", l.right = "right", l))(g || {});
1
+ var d = /* @__PURE__ */ ((l) => (l.blockquote = "blockquote", l.heading1 = "heading1", l.heading2 = "heading2", l.heading3 = "heading3", l.heading4 = "heading4", l.heading5 = "heading5", l.title1 = "title1", l.title2 = "title2", l.title3 = "title3", l.title4 = "title4", l.body1 = "body1", l.body2 = "body2", l.body3 = "body3", l.string1 = "string1", l.string2 = "string2", l.string3 = "string3", l.button = "button", l.email = "email", l.label = "label", l.link = "link", l.badge = "badge", l.snwFlyoutLink = "snwFlyoutLink", l.snwHeaderLink = "snwHeaderLink", l.snwHeadingHero1 = "snwHeadingHero1", l.snwHeadingHero2 = "snwHeadingHero2", l.displayMedium = "displayMedium", l.displaySmall = "displaySmall", l.headingLarge = "headingLarge", l.headingMedium = "headingMedium", l.headingSmall = "headingSmall", l.headingExtraSmall = "headingExtraSmall", l.bodyLarge = "bodyLarge", l.bodyMedium = "bodyMedium", l.bodySmall = "bodySmall", l.labelLarge = "labelLarge", l.labelMedium = "labelMedium", l.labelSmall = "labelSmall", l.linkStylised = "linkStylised", l.linkLarge = "linkLarge", l.linkMedium = "linkMedium", l.linkSmall = "linkSmall", l.badgeSmall = "badgeSmall", l.badgeMedium = "badgeMedium", l))(d || {}), g = /* @__PURE__ */ ((l) => (l.left = "left", l.center = "center", l.right = "right", l))(g || {});
2
2
  export {
3
3
  g as TextAlignments,
4
4
  d as TextVariants
@@ -1,16 +1,16 @@
1
1
  import * as n from "react";
2
2
  import * as ye from "react-dom";
3
- import { composeEventHandlers as h } from "../node_modules/@radix-ui/primitive/dist/index.js";
4
- import { useComposedRefs as oe } from "../node_modules/@radix-ui/react-compose-refs/dist/index.js";
3
+ import { composeEventHandlers as h } from "../../primitive/dist/index.js";
4
+ import { useComposedRefs as oe } from "../../react-compose-refs/dist/index.js";
5
5
  import { createCollection as Pe } from "../node_modules/@radix-ui/react-collection/dist/index.js";
6
- import { createContextScope as Ce } from "../node_modules/@radix-ui/react-context/dist/index.js";
6
+ import { createContextScope as Ce } from "../../react-context/dist/index.js";
7
7
  import { Branch as xe, Root as he } from "../node_modules/@radix-ui/react-dismissable-layer/dist/index.js";
8
8
  import { Portal as Re } from "../node_modules/@radix-ui/react-portal/dist/index.js";
9
9
  import { Presence as be } from "../node_modules/@radix-ui/react-presence/dist/index.js";
10
10
  import { Primitive as A, dispatchDiscreteCustomEvent as ge } from "../node_modules/@radix-ui/react-primitive/dist/index.js";
11
- import { useCallbackRef as U } from "../node_modules/@radix-ui/react-use-callback-ref/dist/index.js";
11
+ import { useCallbackRef as U } from "../../react-use-callback-ref/dist/index.js";
12
12
  import { useControllableState as Se } from "../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
13
- import { useLayoutEffect as Ie } from "../node_modules/@radix-ui/react-use-layout-effect/dist/index.js";
13
+ import { useLayoutEffect as Ie } from "../../react-use-layout-effect/dist/index.js";
14
14
  import { VisuallyHidden as re } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
15
15
  import { jsxs as z, jsx as l, Fragment as ne } from "react/jsx-runtime";
16
16
  var G = "ToastProvider", [J, Ae, Fe] = Pe("Toast"), [se, at] = Ce("Toast", [Fe]), [_e, X] = se(G), ae = (e) => {
@@ -1,7 +1,7 @@
1
1
  import r from "react";
2
- import { createContextScope as y } from "../../react-context/dist/index.js";
3
- import { useComposedRefs as M } from "../../react-compose-refs/dist/index.js";
4
- import { createSlot as x } from "../../react-slot/dist/index.js";
2
+ import { createContextScope as y } from "../../../../../react-context/dist/index.js";
3
+ import { useComposedRefs as M } from "../../../../../react-compose-refs/dist/index.js";
4
+ import { createSlot as x } from "../../../../../react-slot/dist/index.js";
5
5
  import { jsx as u } from "react/jsx-runtime";
6
6
  function g(s) {
7
7
  const m = s + "CollectionProvider", [A, N] = y(m), [_, f] = A(
@@ -1,9 +1,9 @@
1
1
  import * as n from "react";
2
- import { composeEventHandlers as h } from "../../primitive/dist/index.js";
2
+ import { composeEventHandlers as h } from "../../../../../primitive/dist/index.js";
3
3
  import { Primitive as w, dispatchDiscreteCustomEvent as z } from "../../react-primitive/dist/index.js";
4
- import { useComposedRefs as R } from "../../react-compose-refs/dist/index.js";
5
- import { useCallbackRef as g } from "../../react-use-callback-ref/dist/index.js";
6
- import { useEscapeKeydown as H } from "../../react-use-escape-keydown/dist/index.js";
4
+ import { useComposedRefs as R } from "../../../../../react-compose-refs/dist/index.js";
5
+ import { useCallbackRef as g } from "../../../../../react-use-callback-ref/dist/index.js";
6
+ import { useEscapeKeydown as H } from "../../../../../react-use-escape-keydown/dist/index.js";
7
7
  import { jsx as B } from "react/jsx-runtime";
8
8
  var M = "DismissableLayer", y = "dismissableLayer.update", K = "dismissableLayer.pointerDownOutside", j = "dismissableLayer.focusOutside", C, T = n.createContext({
9
9
  layers: /* @__PURE__ */ new Set(),
@@ -1,7 +1,7 @@
1
1
  import * as o from "react";
2
2
  import n from "react-dom";
3
3
  import { Primitive as s } from "../../react-primitive/dist/index.js";
4
- import { useLayoutEffect as c } from "../../react-use-layout-effect/dist/index.js";
4
+ import { useLayoutEffect as c } from "../../../../../react-use-layout-effect/dist/index.js";
5
5
  import { jsx as u } from "react/jsx-runtime";
6
6
  var l = "Portal", p = o.forwardRef((r, e) => {
7
7
  const { container: a, ...f } = r, [i, m] = o.useState(!1);
@@ -1,6 +1,6 @@
1
1
  import * as i from "react";
2
- import { useComposedRefs as O } from "../../react-compose-refs/dist/index.js";
3
- import { useLayoutEffect as A } from "../../react-use-layout-effect/dist/index.js";
2
+ import { useComposedRefs as O } from "../../../../../react-compose-refs/dist/index.js";
3
+ import { useLayoutEffect as A } from "../../../../../react-use-layout-effect/dist/index.js";
4
4
  function E(n, e) {
5
5
  return i.useReducer((t, r) => e[t][r] ?? t, n);
6
6
  }
@@ -1,6 +1,6 @@
1
1
  import * as f from "react";
2
2
  import * as p from "react-dom";
3
- import { createSlot as c } from "../../react-slot/dist/index.js";
3
+ import { createSlot as c } from "../../../../../react-slot/dist/index.js";
4
4
  import { jsx as l } from "react/jsx-runtime";
5
5
  var u = [
6
6
  "a",
@@ -1,5 +1,5 @@
1
1
  import * as o from "react";
2
- import { useLayoutEffect as m } from "../../react-use-layout-effect/dist/index.js";
2
+ import { useLayoutEffect as m } from "../../../../../react-use-layout-effect/dist/index.js";
3
3
  var v = o[" useInsertionEffect ".trim().toString()] || m;
4
4
  function w({
5
5
  prop: e,
@@ -13,10 +13,10 @@ const B = z(
13
13
  ({
14
14
  badgeText: N,
15
15
  className: f,
16
- children: $,
17
- element: b,
16
+ children: g,
17
+ element: $,
18
18
  estimate: n,
19
- estimateLabelText: g = "Estimate",
19
+ estimateLabelText: b = "Estimate",
20
20
  estimateOnRequestText: t,
21
21
  badgeElement: r,
22
22
  favoriteElement: o,
@@ -35,7 +35,7 @@ const B = z(
35
35
  withdrawnText: i,
36
36
  ...p
37
37
  }, D) => {
38
- const { className: a, ...x } = L(p, "ObjectTile"), O = b ?? "a", V = n || t;
38
+ const { className: a, ...x } = L(p, "ObjectTile"), O = $ ?? "a", V = n || t;
39
39
  return /* @__PURE__ */ m(O, { ...x, className: I(a, f), ...p, ref: D, children: [
40
40
  /* @__PURE__ */ e(
41
41
  A,
@@ -52,7 +52,7 @@ const B = z(
52
52
  imageBlocked: P
53
53
  }
54
54
  ),
55
- i ? null : /* @__PURE__ */ e(s, { element: "span", className: `${a}__badge`, variant: l.labelSmall, children: N }),
55
+ i ? null : /* @__PURE__ */ e(s, { element: "span", className: `${a}__badge`, variant: l.badgeSmall, children: N }),
56
56
  /* @__PURE__ */ m("div", { className: `${a}__lot-number-like`, children: [
57
57
  /* @__PURE__ */ e(s, { element: "span", className: `${a}__lot-number`, variant: l.headingSmall, children: C }),
58
58
  r && /* @__PURE__ */ e("div", { className: `${a}__lot-badge`, children: /* @__PURE__ */ e(r, {}) }),
@@ -83,14 +83,14 @@ const B = z(
83
83
  W,
84
84
  {
85
85
  className: `${a}__estimate__label`,
86
- label: g,
86
+ label: b,
87
87
  value: n || t,
88
88
  hasWrap: !1
89
89
  }
90
90
  )
91
91
  }
92
92
  ) : null,
93
- /* @__PURE__ */ e("div", { className: `${a}__section`, children: $ })
93
+ /* @__PURE__ */ e("div", { className: `${a}__section`, children: g })
94
94
  ] })
95
95
  ] });
96
96
  }
@@ -1,12 +1,12 @@
1
- import { jsxs as i, jsx as r } from "react/jsx-runtime";
2
- import g from "../../node_modules/classnames/index.js";
1
+ import { jsxs as m, jsx as e } from "react/jsx-runtime";
2
+ import b from "../../node_modules/classnames/index.js";
3
3
  import { forwardRef as L } from "react";
4
- import T from "../../components/Button/Button.js";
5
- import { ButtonVariants as A } from "../../components/Button/types.js";
6
- import I from "../../components/SeldonImage/SeldonImage.js";
7
- import { TextVariants as e } from "../../components/Text/types.js";
4
+ import M from "../../components/Button/Button.js";
5
+ import { ButtonVariants as T } from "../../components/Button/types.js";
6
+ import A from "../../components/SeldonImage/SeldonImage.js";
7
+ import { TextVariants as r } from "../../components/Text/types.js";
8
8
  import l from "../../components/Text/Text.js";
9
- import { SSRMediaQuery as M } from "../../providers/SeldonProvider/utils.js";
9
+ import { SSRMediaQuery as I } from "../../providers/SeldonProvider/utils.js";
10
10
  import { getCommonProps as x } from "../../utils/index.js";
11
11
  import { SaleCardVariants as f, SaleCardImageDisplay as P } from "./types.js";
12
12
  const R = L(
@@ -15,34 +15,34 @@ const R = L(
15
15
  imageSrc: s,
16
16
  imageAlt: h = "Auction Image",
17
17
  auctionType: N,
18
- titleText: S,
19
- date: $,
18
+ titleText: $,
19
+ date: S,
20
20
  location: u,
21
21
  badgeText: o,
22
22
  modalButtonOnClick: n,
23
23
  modalButtonText: t,
24
- variant: m = f.DEFAULT,
24
+ variant: i = f.DEFAULT,
25
25
  children: c,
26
26
  imageDisplay: d = P.LEFT,
27
27
  ..._
28
28
  }, v) => {
29
- const { className: a, ...C } = x(_, "SaleCard"), E = g(a, p, {
30
- [`${a}--${m}`]: m,
29
+ const { className: a, ...g } = x(_, "SaleCard"), C = b(a, p, {
30
+ [`${a}--${i}`]: i,
31
31
  [`${a}--image-${d}`]: d
32
- }), b = { ...C, ..._ };
33
- return /* @__PURE__ */ i("article", { ...b, className: E, ref: v, children: [
34
- s ? /* @__PURE__ */ r(I, { src: s, alt: h, className: `${a}__image` }) : null,
35
- /* @__PURE__ */ i("div", { className: `${a}__details`, children: [
36
- /* @__PURE__ */ r(l, { variant: e.labelSmall, children: N }),
37
- /* @__PURE__ */ r(l, { variant: e.headingSmall, className: `${a}__title`, children: S }),
38
- o && /* @__PURE__ */ r(l, { variant: e.labelSmall, className: `${a}__badge`, children: o }),
39
- /* @__PURE__ */ i("div", { className: `${a}__info`, children: [
40
- /* @__PURE__ */ r(l, { variant: e.labelMedium, children: u }),
41
- /* @__PURE__ */ r(l, { variant: e.labelMedium, children: $ }),
42
- t && n && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(T, { onClick: n, variant: A.link, children: t }) })
32
+ }), E = { ...g, ..._ };
33
+ return /* @__PURE__ */ m("article", { ...E, className: C, ref: v, children: [
34
+ s ? /* @__PURE__ */ e(A, { src: s, alt: h, className: `${a}__image` }) : null,
35
+ /* @__PURE__ */ m("div", { className: `${a}__details`, children: [
36
+ /* @__PURE__ */ e(l, { variant: r.labelSmall, children: N }),
37
+ /* @__PURE__ */ e(l, { variant: r.headingSmall, className: `${a}__title`, children: $ }),
38
+ o && /* @__PURE__ */ e(l, { variant: r.badgeMedium, className: `${a}__badge`, children: o }),
39
+ /* @__PURE__ */ m("div", { className: `${a}__info`, children: [
40
+ /* @__PURE__ */ e(l, { variant: r.labelMedium, children: u }),
41
+ /* @__PURE__ */ e(l, { variant: r.labelMedium, children: S }),
42
+ t && n && /* @__PURE__ */ e("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ e(M, { onClick: n, variant: T.link, children: t }) })
43
43
  ] })
44
44
  ] }),
45
- m !== f.RELATED_SALE_TILE && c && /* @__PURE__ */ r("div", { className: `${a}__ctas`, children: /* @__PURE__ */ r(M.Media, { greaterThanOrEqual: "snw-mobile", children: c }) })
45
+ i !== f.RELATED_SALE_TILE && c && /* @__PURE__ */ e("div", { className: `${a}__ctas`, children: /* @__PURE__ */ e(I.Media, { greaterThanOrEqual: "snw-mobile", children: c }) })
46
46
  ] });
47
47
  }
48
48
  );
@@ -326,6 +326,14 @@
326
326
  @include label-styles($font-size: $font-size-label-small);
327
327
  }
328
328
 
329
+ @if $token == $badgeSmall {
330
+ @include label-styles($font-size: $font-size-badge-small);
331
+ }
332
+
333
+ @if $token == $badgeMedium {
334
+ @include label-styles($font-size: $font-size-badge-medium);
335
+ }
336
+
329
337
  @if $token == $linkStylised {
330
338
  @include link-styles($font-size: $font-size-link-stylised, $text-transform: uppercase, $text-decoration: unset);
331
339
  @include DistinctDisplay;
@@ -19,6 +19,8 @@ $px: seldon;
19
19
  --font-size-link-large: 1rem; // 16px
20
20
  --font-size-link-medium: 0.875rem; // 14px
21
21
  --font-size-link-small: 0.75rem; // 12px
22
+ --font-size-badge-small: 0.75rem; // 12px
23
+ --font-size-badge-medium: 0.875rem; // 14px
22
24
  }
23
25
 
24
26
  @mixin font-size-vars--md {
@@ -42,6 +44,8 @@ $px: seldon;
42
44
  --font-size-link-large: 1.25rem; // 20px
43
45
  --font-size-link-medium: 1.125rem; // 18px
44
46
  --font-size-link-small: 1rem; // 16px
47
+ --font-size-badge-small: 1rem; // 16px
48
+ --font-size-badge-medium: 1.125rem; // 18px
45
49
  }
46
50
 
47
51
  $font-size-xs: var(--font-size-xs);
@@ -70,6 +74,8 @@ $font-size-link-stylised: var(--font-size-link-stylised);
70
74
  $font-size-link-large: var(--font-size-link-large);
71
75
  $font-size-link-medium: var(--font-size-link-medium);
72
76
  $font-size-link-small: var(--font-size-link-small);
77
+ $font-size-badge-small: var(--font-size-badge-small);
78
+ $font-size-badge-medium: var(--font-size-badge-medium);
73
79
 
74
80
  ////////////////////////
75
81
  /// COlORS:
@@ -257,11 +263,13 @@ $linkStylised: 'linkStylised';
257
263
  $linkLarge: 'linkLarge';
258
264
  $linkMedium: 'linkMedium';
259
265
  $linkSmall: 'linkSmall';
266
+ $badgeSmall: 'badgeSmall';
267
+ $badgeMedium: 'badgeMedium';
260
268
  $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
261
269
  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
262
270
  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
263
271
  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
264
- $linkStylised, $linkLarge, $linkMedium, $linkSmall;
272
+ $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium;
265
273
 
266
274
  ////////////////////////
267
275
  /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -19,6 +19,8 @@ $px: seldon;
19
19
  --font-size-link-large: 1rem; // 16px
20
20
  --font-size-link-medium: 0.875rem; // 14px
21
21
  --font-size-link-small: 0.75rem; // 12px
22
+ --font-size-badge-small: 0.75rem; // 12px
23
+ --font-size-badge-medium: 0.875rem; // 14px
22
24
  }
23
25
 
24
26
  @mixin font-size-vars--md {
@@ -42,6 +44,8 @@ $px: seldon;
42
44
  --font-size-link-large: 1.25rem; // 20px
43
45
  --font-size-link-medium: 1.125rem; // 18px
44
46
  --font-size-link-small: 1rem; // 16px
47
+ --font-size-badge-small: 1rem; // 16px
48
+ --font-size-badge-medium: 1.125rem; // 18px
45
49
  }
46
50
 
47
51
  $font-size-xs: var(--font-size-xs);
@@ -70,6 +74,8 @@ $font-size-link-stylised: var(--font-size-link-stylised);
70
74
  $font-size-link-large: var(--font-size-link-large);
71
75
  $font-size-link-medium: var(--font-size-link-medium);
72
76
  $font-size-link-small: var(--font-size-link-small);
77
+ $font-size-badge-small: var(--font-size-badge-small);
78
+ $font-size-badge-medium: var(--font-size-badge-medium);
73
79
 
74
80
  ////////////////////////
75
81
  /// COlORS:
@@ -257,11 +263,13 @@ $linkStylised: 'linkStylised';
257
263
  $linkLarge: 'linkLarge';
258
264
  $linkMedium: 'linkMedium';
259
265
  $linkSmall: 'linkSmall';
266
+ $badgeSmall: 'badgeSmall';
267
+ $badgeMedium: 'badgeMedium';
260
268
  $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
261
269
  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
262
270
  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
263
271
  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
264
- $linkStylised, $linkLarge, $linkMedium, $linkSmall;
272
+ $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium;
265
273
 
266
274
  ////////////////////////
267
275
  /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -87,16 +87,6 @@
87
87
  transition:
88
88
  opacity 0.2s ease,
89
89
  background-color 0.2s ease;
90
-
91
- &.#{$px}-icon-button {
92
- transition: background-color 0.2s ease;
93
-
94
- &:hover {
95
- svg {
96
- color: $white-100;
97
- }
98
- }
99
- }
100
90
  }
101
91
 
102
92
  &__dropdown-button {
@@ -9,43 +9,31 @@
9
9
  gap: $spacing-md;
10
10
 
11
11
  &__label-section {
12
- flex-shrink: 0;
13
- width: 160px;
12
+ flex: 1 0 160px;
13
+ max-width: 100%;
14
14
 
15
15
  &--label.#{$px}-text {
16
16
  font-variation-settings: 'wght' 600;
17
17
  }
18
18
 
19
19
  @media (max-width: $breakpoint-md) {
20
- width: 128px;
20
+ flex: 1 0 128px;
21
21
  }
22
22
 
23
23
  @media (max-width: $breakpoint-sm) {
24
- width: 96px;
24
+ flex: 1 0 96px;
25
25
  }
26
26
 
27
27
  &--has-sub-label {
28
- width: 240px;
28
+ flex: 1 0 240px;
29
29
 
30
30
  @media (max-width: $breakpoint-sm) {
31
- width: 120px;
31
+ flex: 1 0 120px;
32
32
  }
33
33
  }
34
34
 
35
35
  &--no-wrap {
36
- width: unset;
37
-
38
- @media (max-width: $breakpoint-lg) {
39
- width: unset;
40
- }
41
-
42
- @media (max-width: $breakpoint-md) {
43
- width: unset;
44
- }
45
-
46
- @media (max-width: $breakpoint-sm) {
47
- width: unset;
48
- }
36
+ flex: none;
49
37
  }
50
38
 
51
39
  span {
@@ -58,6 +46,7 @@
58
46
  }
59
47
 
60
48
  &__value {
49
+ flex: 0 1 auto;
61
50
  font-variation-settings: 'wght' 400;
62
51
  }
63
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phillips/seldon",
3
- "version": "1.232.1",
3
+ "version": "1.235.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -23,6 +23,9 @@
23
23
  "files": [
24
24
  "dist/**"
25
25
  ],
26
+ "overrides": {
27
+ "@semantic-release/npm": "^13.1.4"
28
+ },
26
29
  "scripts": {
27
30
  "start": "storybook dev -p 6006",
28
31
  "test": "vitest",
@@ -82,7 +85,8 @@
82
85
  "@figma/code-connect": "^0.2.1",
83
86
  "@semantic-release/changelog": "^6.0.3",
84
87
  "@semantic-release/git": "^10.0.1",
85
- "@semantic-release/github": "^10.1.0",
88
+ "@semantic-release/github": "^12.0.0",
89
+ "@semantic-release/npm": "^13.1.4",
86
90
  "@storybook/addon-a11y": "^8.5.8",
87
91
  "@storybook/addon-essentials": "^8.5.0",
88
92
  "@storybook/addon-interactions": "^8.5.0",
@@ -130,7 +134,7 @@
130
134
  "rollup-plugin-copy": "^3.5.0",
131
135
  "rollup-plugin-peer-deps-external": "^2.2.4",
132
136
  "sass": "^1.83.4",
133
- "semantic-release": "^23.1.1",
137
+ "semantic-release": "^25.0.0",
134
138
  "storybook": "^8.5.0",
135
139
  "stylelint": "^16.8.1",
136
140
  "stylelint-config-standard": "^36.0.1",
@@ -1,9 +0,0 @@
1
- function f(n, r, { checkForDefaultPrevented: t = !0 } = {}) {
2
- return function(e) {
3
- if (n?.(e), t === !1 || !e.defaultPrevented)
4
- return r?.(e);
5
- };
6
- }
7
- export {
8
- f as composeEventHandlers
9
- };
@@ -1,29 +0,0 @@
1
- import * as f from "react";
2
- function l(n, o) {
3
- if (typeof n == "function")
4
- return n(o);
5
- n != null && (n.current = o);
6
- }
7
- function i(...n) {
8
- return (o) => {
9
- let u = !1;
10
- const c = n.map((t) => {
11
- const e = l(t, o);
12
- return !u && typeof e == "function" && (u = !0), e;
13
- });
14
- if (u)
15
- return () => {
16
- for (let t = 0; t < c.length; t++) {
17
- const e = c[t];
18
- typeof e == "function" ? e() : l(n[t], null);
19
- }
20
- };
21
- };
22
- }
23
- function s(...n) {
24
- return f.useCallback(i(...n), n);
25
- }
26
- export {
27
- i as composeRefs,
28
- s as useComposedRefs
29
- };
@@ -1,53 +0,0 @@
1
- import * as u from "react";
2
- import { jsx as _ } from "react/jsx-runtime";
3
- function P(e, p = []) {
4
- let n = [];
5
- function m(s, t) {
6
- const o = u.createContext(t), c = n.length;
7
- n = [...n, t];
8
- const a = (i) => {
9
- const { scope: f, children: C, ...x } = i, d = f?.[e]?.[c] || o, v = u.useMemo(() => x, Object.values(x));
10
- return /* @__PURE__ */ _(d.Provider, { value: v, children: C });
11
- };
12
- a.displayName = s + "Provider";
13
- function S(i, f) {
14
- const C = f?.[e]?.[c] || o, x = u.useContext(C);
15
- if (x) return x;
16
- if (t !== void 0) return t;
17
- throw new Error(`\`${i}\` must be used within \`${s}\``);
18
- }
19
- return [a, S];
20
- }
21
- const r = () => {
22
- const s = n.map((t) => u.createContext(t));
23
- return function(o) {
24
- const c = o?.[e] || s;
25
- return u.useMemo(
26
- () => ({ [`__scope${e}`]: { ...o, [e]: c } }),
27
- [o, c]
28
- );
29
- };
30
- };
31
- return r.scopeName = e, [m, h(r, ...p)];
32
- }
33
- function h(...e) {
34
- const p = e[0];
35
- if (e.length === 1) return p;
36
- const n = () => {
37
- const m = e.map((r) => ({
38
- useScope: r(),
39
- scopeName: r.scopeName
40
- }));
41
- return function(s) {
42
- const t = m.reduce((o, { useScope: c, scopeName: a }) => {
43
- const i = c(s)[`__scope${a}`];
44
- return { ...o, ...i };
45
- }, {});
46
- return u.useMemo(() => ({ [`__scope${p.scopeName}`]: t }), [t]);
47
- };
48
- };
49
- return n.scopeName = p.scopeName, n;
50
- }
51
- export {
52
- P as createContextScope
53
- };
@@ -1,48 +0,0 @@
1
- import * as l from "react";
2
- import { composeRefs as m } from "../../react-compose-refs/dist/index.js";
3
- import { jsx as u } from "react/jsx-runtime";
4
- // @__NO_SIDE_EFFECTS__
5
- function b(e) {
6
- const r = /* @__PURE__ */ y(e), t = l.forwardRef((o, n) => {
7
- const { children: i, ...c } = o, s = l.Children.toArray(i), f = s.find(E);
8
- if (f) {
9
- const a = f.props.children, d = s.map((p) => p === f ? l.Children.count(a) > 1 ? l.Children.only(null) : l.isValidElement(a) ? a.props.children : null : p);
10
- return /* @__PURE__ */ u(r, { ...c, ref: n, children: l.isValidElement(a) ? l.cloneElement(a, void 0, d) : null });
11
- }
12
- return /* @__PURE__ */ u(r, { ...c, ref: n, children: i });
13
- });
14
- return t.displayName = `${e}.Slot`, t;
15
- }
16
- // @__NO_SIDE_EFFECTS__
17
- function y(e) {
18
- const r = l.forwardRef((t, o) => {
19
- const { children: n, ...i } = t;
20
- if (l.isValidElement(n)) {
21
- const c = S(n), s = C(i, n.props);
22
- return n.type !== l.Fragment && (s.ref = o ? m(o, c) : c), l.cloneElement(n, s);
23
- }
24
- return l.Children.count(n) > 1 ? l.Children.only(null) : null;
25
- });
26
- return r.displayName = `${e}.SlotClone`, r;
27
- }
28
- var g = Symbol("radix.slottable");
29
- function E(e) {
30
- return l.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === g;
31
- }
32
- function C(e, r) {
33
- const t = { ...r };
34
- for (const o in r) {
35
- const n = e[o], i = r[o];
36
- /^on[A-Z]/.test(o) ? n && i ? t[o] = (...s) => {
37
- i(...s), n(...s);
38
- } : n && (t[o] = n) : o === "style" ? t[o] = { ...n, ...i } : o === "className" && (t[o] = [n, i].filter(Boolean).join(" "));
39
- }
40
- return { ...e, ...t };
41
- }
42
- function S(e) {
43
- let r = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning;
44
- return t ? e.ref : (r = Object.getOwnPropertyDescriptor(e, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning, t ? e.props.ref : e.props.ref || e.ref);
45
- }
46
- export {
47
- b as createSlot
48
- };
@@ -1,10 +0,0 @@
1
- import * as e from "react";
2
- function c(r) {
3
- const t = e.useRef(r);
4
- return e.useEffect(() => {
5
- t.current = r;
6
- }), e.useMemo(() => (...u) => t.current?.(...u), []);
7
- }
8
- export {
9
- c as useCallbackRef
10
- };
@@ -1,14 +0,0 @@
1
- import * as r from "react";
2
- import { useCallbackRef as s } from "../../react-use-callback-ref/dist/index.js";
3
- function p(n, e = globalThis?.document) {
4
- const t = s(n);
5
- r.useEffect(() => {
6
- const o = (a) => {
7
- a.key === "Escape" && t(a);
8
- };
9
- return e.addEventListener("keydown", o, { capture: !0 }), () => e.removeEventListener("keydown", o, { capture: !0 });
10
- }, [t, e]);
11
- }
12
- export {
13
- p as useEscapeKeydown
14
- };
@@ -1,6 +0,0 @@
1
- import * as t from "react";
2
- var e = globalThis?.document ? t.useLayoutEffect : () => {
3
- };
4
- export {
5
- e as useLayoutEffect
6
- };