@phillips/seldon 1.278.1 → 1.279.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.
- package/dist/_virtual/index10.cjs +1 -1
- package/dist/_virtual/index10.js +2 -2
- package/dist/_virtual/index9.cjs +1 -1
- package/dist/_virtual/index9.js +2 -2
- package/dist/components/Toast/Toast.d.ts +3 -0
- package/dist/components/Toast/Toast.stories.d.ts +31 -1
- package/dist/components/Toast/ToastContextProvider.cjs +1 -1
- package/dist/components/Toast/ToastContextProvider.d.ts +18 -1
- package/dist/components/Toast/ToastContextProvider.js +38 -28
- package/dist/components/Toast/index.d.ts +2 -2
- package/dist/components/Toast/useToast.cjs +1 -1
- package/dist/components/Toast/useToast.d.ts +24 -1
- package/dist/components/Toast/useToast.js +5 -5
- package/dist/components/Toast/useToastContext.cjs +1 -1
- package/dist/components/Toast/useToastContext.js +2 -0
- package/dist/node_modules/ics/dist/index.cjs +1 -1
- package/dist/node_modules/ics/dist/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.cjs +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/scss/_vars.scss +5 -6
- package/dist/scss/_vars.scss.cjs +5 -6
- package/dist/scss/_vars.scss.js +5 -6
- package/dist/scss/components/Toast/_toast.scss +3 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
|
package/dist/_virtual/index10.js
CHANGED
package/dist/_virtual/index9.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
|
package/dist/_virtual/index9.js
CHANGED
|
@@ -29,6 +29,9 @@ export interface PrimitiveToastProps extends Omit<PrimitiveToast.ToastProps, 'ti
|
|
|
29
29
|
* This component requires a `ToastProvider` to be present in your application. Make sure to
|
|
30
30
|
* wrap your application or the relevant section with the `ToastProvider` component.
|
|
31
31
|
*
|
|
32
|
+
* Pass `offset={{ x, y }}` to `ToastProvider` for an initial viewport inset (mount-only),
|
|
33
|
+
* or call `useToast().setOffset({ x, y })` / destructure `{ show, setOffset }` for runtime updates.
|
|
34
|
+
*
|
|
32
35
|
* [Figma Link](https://www.figma.com/design/f3vm6hItGjnsmkJxLLbe3P/MANAGE---MUI-v5.9.0--24?node-id=6586-47081&m=dev)
|
|
33
36
|
*
|
|
34
37
|
* [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-toast--overview)
|
|
@@ -6,11 +6,24 @@ export default meta;
|
|
|
6
6
|
export declare const Playground: {
|
|
7
7
|
(): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
parameters: {
|
|
9
|
+
a11y: {
|
|
10
|
+
config: {
|
|
11
|
+
rules: {
|
|
12
|
+
id: string;
|
|
13
|
+
enabled: boolean;
|
|
14
|
+
}[];
|
|
15
|
+
};
|
|
16
|
+
};
|
|
9
17
|
docs: {
|
|
10
18
|
description: {
|
|
11
19
|
story: string;
|
|
12
20
|
};
|
|
13
21
|
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export declare const Interactive: {
|
|
25
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
parameters: {
|
|
14
27
|
a11y: {
|
|
15
28
|
config: {
|
|
16
29
|
rules: {
|
|
@@ -21,4 +34,21 @@ export declare const Playground: {
|
|
|
21
34
|
};
|
|
22
35
|
};
|
|
23
36
|
};
|
|
24
|
-
export declare const
|
|
37
|
+
export declare const WithOffset: {
|
|
38
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
parameters: {
|
|
40
|
+
a11y: {
|
|
41
|
+
config: {
|
|
42
|
+
rules: {
|
|
43
|
+
id: string;
|
|
44
|
+
enabled: boolean;
|
|
45
|
+
}[];
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
docs: {
|
|
49
|
+
description: {
|
|
50
|
+
story: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../node_modules/@radix-ui/react-toast/dist/index.cjs"),t=require("react"),p=require("./Toast.cjs"),m=require("../../utils/index.cjs"),O=require("../../node_modules/uuid/dist/v4.cjs"),j={x:0,y:0},l=t.createContext(void 0),q=({children:x,offset:T=j})=>{const[r,a]=t.useState([]),[c,f]=t.useState(T),d=t.useCallback(e=>{const s=O.default();a(n=>[...n,{...e,id:s}])},[]),i=t.useCallback(e=>{a(s=>s.filter(n=>n.id!==e))},[]),v=t.useMemo(()=>({toasts:r,addToast:d,removeToast:i,setOffset:f}),[r,d,i]);return o.jsx(l.Provider,{value:v,children:o.jsxs(u.Provider,{children:[x,o.jsx(u.Viewport,{className:`${m.px}-toast-viewport`,style:{bottom:c.y,left:c.x}}),r.map(e=>o.jsx(p.default,{...e,onOpenChange:s=>!s&&i(e.id),title:e.title??""},e.id))]})})};exports.ToastContext=l;exports.ToastProvider=q;
|
|
@@ -3,10 +3,27 @@ import { default as Toast, PrimitiveToastProps } from './Toast';
|
|
|
3
3
|
interface Toast extends PrimitiveToastProps {
|
|
4
4
|
id: string;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Extra distance (px) added to the toast viewport's default bottom-left spacing.
|
|
8
|
+
*/
|
|
9
|
+
export interface ToastOffset {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
}
|
|
13
|
+
export interface ToastProviderProps extends PropsWithChildren {
|
|
14
|
+
/**
|
|
15
|
+
* Initial viewport offset (px). Mount-only — use `useToast().setOffset` for later updates.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* <ToastProvider offset={{ x: 16, y: 24 }}>...</ToastProvider>
|
|
19
|
+
*/
|
|
20
|
+
offset?: ToastOffset;
|
|
21
|
+
}
|
|
6
22
|
export interface ToastContextType {
|
|
7
23
|
toasts: Toast[];
|
|
8
24
|
addToast: (toast: Omit<Toast, 'id'>) => void;
|
|
9
25
|
removeToast: (id: string) => void;
|
|
26
|
+
setOffset: (offset: ToastOffset) => void;
|
|
10
27
|
}
|
|
11
28
|
/**
|
|
12
29
|
* Context for managing toast notifications
|
|
@@ -15,5 +32,5 @@ export declare const ToastContext: import('react').Context<ToastContextType | un
|
|
|
15
32
|
/**
|
|
16
33
|
* Provider component that manages toast notifications state and operations
|
|
17
34
|
*/
|
|
18
|
-
export declare const ToastProvider: ({ children }:
|
|
35
|
+
export declare const ToastProvider: ({ children, offset }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
36
|
export {};
|
|
@@ -1,35 +1,45 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Provider as
|
|
3
|
-
import { useState as
|
|
4
|
-
import
|
|
5
|
-
import { px as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
const [
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
}, []),
|
|
12
|
-
|
|
13
|
-
}, []),
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import { jsx as i, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { Provider as x, Viewport as O } from "../../node_modules/@radix-ui/react-toast/dist/index.js";
|
|
3
|
+
import { useState as c, useCallback as f, useMemo as u, createContext as w } from "react";
|
|
4
|
+
import C from "./Toast.js";
|
|
5
|
+
import { px as h } from "../../utils/index.js";
|
|
6
|
+
import y from "../../node_modules/uuid/dist/v4.js";
|
|
7
|
+
const F = { x: 0, y: 0 }, P = w(void 0), _ = ({ children: p, offset: d = F }) => {
|
|
8
|
+
const [e, m] = c([]), [n, l] = c(d), a = f((t) => {
|
|
9
|
+
const o = y();
|
|
10
|
+
m((r) => [...r, { ...t, id: o }]);
|
|
11
|
+
}, []), s = f((t) => {
|
|
12
|
+
m((o) => o.filter((r) => r.id !== t));
|
|
13
|
+
}, []), T = u(
|
|
14
|
+
() => ({
|
|
15
|
+
toasts: e,
|
|
16
|
+
addToast: a,
|
|
17
|
+
removeToast: s,
|
|
18
|
+
setOffset: l
|
|
19
|
+
}),
|
|
20
|
+
[e, a, s]
|
|
21
|
+
);
|
|
22
|
+
return /* @__PURE__ */ i(P.Provider, { value: T, children: /* @__PURE__ */ v(x, { children: [
|
|
23
|
+
p,
|
|
24
|
+
/* @__PURE__ */ i(
|
|
25
|
+
O,
|
|
23
26
|
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
className: `${h}-toast-viewport`,
|
|
28
|
+
style: { bottom: n.y, left: n.x }
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
e.map((t) => /* @__PURE__ */ i(
|
|
32
|
+
C,
|
|
33
|
+
{
|
|
34
|
+
...t,
|
|
35
|
+
onOpenChange: (o) => !o && s(t.id),
|
|
36
|
+
title: t.title ?? ""
|
|
27
37
|
},
|
|
28
|
-
|
|
38
|
+
t.id
|
|
29
39
|
))
|
|
30
40
|
] }) });
|
|
31
41
|
};
|
|
32
42
|
export {
|
|
33
|
-
|
|
34
|
-
|
|
43
|
+
P as ToastContext,
|
|
44
|
+
_ as ToastProvider
|
|
35
45
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as Toast } from './Toast';
|
|
2
|
-
export { ToastProvider } from './ToastContextProvider';
|
|
3
|
-
export { useToast } from './useToast';
|
|
2
|
+
export { ToastProvider, type ToastOffset, type ToastProviderProps } from './ToastContextProvider';
|
|
3
|
+
export { useToast, type ToastFn } from './useToast';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./useToastContext.cjs"),c=require("react"),o=()=>{const{addToast:t,setOffset:a}=u.useToastContext(),s=c.useCallback(e=>{typeof e=="object"&&e!==null&&"title"in e?t(e):t({title:e})},[t]);return Object.assign(s,{show:s,setOffset:a})};exports.useToast=o;
|
|
@@ -1,3 +1,26 @@
|
|
|
1
1
|
import { PrimitiveToastProps as ToastProps } from './Toast';
|
|
2
|
+
import { ToastOffset } from './ToastContextProvider';
|
|
2
3
|
import { ReactNode } from 'react';
|
|
3
|
-
export
|
|
4
|
+
export type ToastFn = ((options: ToastProps | ReactNode) => void) & {
|
|
5
|
+
/** Same as calling the toast function — for `const { show, setOffset } = useToast()`. */
|
|
6
|
+
show: (options: ToastProps | ReactNode) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Updates the toast viewport offset from the bottom-left corner.
|
|
9
|
+
* Values are pixels added to the existing viewport spacing.
|
|
10
|
+
*/
|
|
11
|
+
setOffset: (offset: ToastOffset) => void;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Trigger toasts and update viewport offset.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const toast = useToast();
|
|
18
|
+
* toast('Saved');
|
|
19
|
+
* toast.setOffset({ x: 0, y: 24 });
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* const { show, setOffset } = useToast();
|
|
23
|
+
* show('Saved');
|
|
24
|
+
* setOffset({ x: 0, y: 24 });
|
|
25
|
+
*/
|
|
26
|
+
export declare const useToast: () => ToastFn;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useToastContext as
|
|
1
|
+
import { useToastContext as l } from "./useToastContext.js";
|
|
2
2
|
import { useCallback as o } from "react";
|
|
3
|
-
const
|
|
4
|
-
const { addToast: e } =
|
|
5
|
-
return o(
|
|
3
|
+
const f = () => {
|
|
4
|
+
const { addToast: e, setOffset: a } = l(), s = o(
|
|
6
5
|
(t) => {
|
|
7
6
|
typeof t == "object" && t !== null && "title" in t ? e(t) : e({ title: t });
|
|
8
7
|
},
|
|
9
8
|
[e]
|
|
10
9
|
);
|
|
10
|
+
return Object.assign(s, { show: s, setOffset: a });
|
|
11
11
|
};
|
|
12
12
|
export {
|
|
13
|
-
|
|
13
|
+
f as useToast
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),s=require("./ToastContextProvider.cjs"),e={toasts:[],addToast:()=>{},removeToast:()=>{},setOffset:()=>{}},n=()=>{const t=o.useContext(s.ToastContext);return t===void 0?(console.warn("useToastContext must be used within a ToastProvider"),e):t};exports.fallbackContext=e;exports.useToastContext=n;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../_virtual/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../_virtual/index9.cjs"),q=require("./pipeline/index.cjs");var h;function U(){if(h)return o.__exports;h=1,Object.defineProperty(o.__exports,"__esModule",{value:!0}),o.__exports.convertTimestampToArray=T,o.__exports.createEvent=E,o.__exports.createEvents=d,o.__exports.isValidURL=j;var u=q.__require();function a(e){"@babel/helpers - typeof";return a=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(r){return typeof r}:function(r){return r&&typeof Symbol=="function"&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},a(e)}function s(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter(function(c){return Object.getOwnPropertyDescriptor(e,c).enumerable})),n.push.apply(n,t)}return n}function i(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?s(Object(n),!0).forEach(function(t){O(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function O(e,r,n){return r=P(r),r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function P(e){var r=S(e,"string");return a(r)==="symbol"?r:String(r)}function S(e,r){if(a(e)!=="object"||e===null)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var t=n.call(e,r);if(a(t)!=="object")return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}function w(e){return(0,u.validateHeader)((0,u.buildHeader)(e))}function v(e){return(0,u.validateHeaderAndEvent)(i(i({},(0,u.buildHeader)(e)),(0,u.buildEvent)(e)))}function T(e){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"local",n=[],t=new Date(e);return n.push(r==="local"?t.getFullYear():t.getUTCFullYear()),n.push((r==="local"?t.getMonth():t.getUTCMonth())+1),n.push(r==="local"?t.getDate():t.getUTCDate()),n.push(r==="local"?t.getHours():t.getUTCHours()),n.push(r==="local"?t.getMinutes():t.getUTCMinutes()),n}function E(e,r){return d([e],r)}function d(e,r,n){var t=a(r)==="object"?r:{},c=arguments.length===3?n:typeof r=="function"?r:null,x=function(){if(!e)return{error:new Error("one argument is required"),value:null};var g=e.length===0?w(t):v(i(i({},e[0]),t)),m=g.error,D=g.value;if(m)return{error:m,value:null};var f="";f+=(0,u.formatHeader)(D);for(var p=0;p<e.length;p++){var b=v(e[p]),_=b.error,H=b.value;if(_)return{error:_,value:null};f+=(0,u.formatEvent)(H)}return f+=(0,u.formatFooter)(),{error:null,value:f}},l;try{l=x()}catch(y){l={error:y,value:null}}return c?c(l.error,l.value):l}function j(e){return u.urlRegex.test(e)}return o.__exports}exports.__require=U;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/index10.cjs"),t=require("./cjs/react-is.production.min.cjs"),o=require("./cjs/react-is.development.cjs");var r;function u(){return r||(r=1,process.env.NODE_ENV==="production"?e.__module.exports=t.__require():e.__module.exports=o.__require()),e.__module.exports}exports.__require=u;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as e } from "../../../../_virtual/
|
|
1
|
+
import { __module as e } from "../../../../_virtual/index10.js";
|
|
2
2
|
import { __require as o } from "./cjs/react-is.production.min.js";
|
|
3
3
|
import { __require as t } from "./cjs/react-is.development.js";
|
|
4
4
|
var r;
|
package/dist/scss/_vars.scss
CHANGED
|
@@ -245,12 +245,11 @@ $linkSmall: 'linkSmall';
|
|
|
245
245
|
$badgeSmall: 'badgeSmall';
|
|
246
246
|
$badgeMedium: 'badgeMedium';
|
|
247
247
|
$stringSmall: 'stringSmall';
|
|
248
|
-
$text-tokens:
|
|
249
|
-
$
|
|
250
|
-
$
|
|
251
|
-
$
|
|
252
|
-
$
|
|
253
|
-
$linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
248
|
+
$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
|
|
249
|
+
$title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
|
|
250
|
+
$snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
|
|
251
|
+
$headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
|
|
252
|
+
$linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
254
253
|
|
|
255
254
|
////////////////////////
|
|
256
255
|
/// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
|
package/dist/scss/_vars.scss.cjs
CHANGED
|
@@ -245,12 +245,11 @@ $linkSmall: 'linkSmall';
|
|
|
245
245
|
$badgeSmall: 'badgeSmall';
|
|
246
246
|
$badgeMedium: 'badgeMedium';
|
|
247
247
|
$stringSmall: 'stringSmall';
|
|
248
|
-
$text-tokens:
|
|
249
|
-
$
|
|
250
|
-
$
|
|
251
|
-
$
|
|
252
|
-
$
|
|
253
|
-
$linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
248
|
+
$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
|
|
249
|
+
$title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
|
|
250
|
+
$snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
|
|
251
|
+
$headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
|
|
252
|
+
$linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
254
253
|
|
|
255
254
|
////////////////////////
|
|
256
255
|
/// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
|
package/dist/scss/_vars.scss.js
CHANGED
|
@@ -245,12 +245,11 @@ $linkSmall: 'linkSmall';
|
|
|
245
245
|
$badgeSmall: 'badgeSmall';
|
|
246
246
|
$badgeMedium: 'badgeMedium';
|
|
247
247
|
$stringSmall: 'stringSmall';
|
|
248
|
-
$text-tokens:
|
|
249
|
-
$
|
|
250
|
-
$
|
|
251
|
-
$
|
|
252
|
-
$
|
|
253
|
-
$linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
248
|
+
$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
|
|
249
|
+
$title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
|
|
250
|
+
$snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
|
|
251
|
+
$headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
|
|
252
|
+
$linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
|
|
254
253
|
|
|
255
254
|
////////////////////////
|
|
256
255
|
/// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
|
|
@@ -10,11 +10,13 @@
|
|
|
10
10
|
grid-template-areas: 'title action';
|
|
11
11
|
grid-template-columns: auto max-content;
|
|
12
12
|
padding: $spacing-xsm $spacing-sm;
|
|
13
|
+
|
|
13
14
|
// Viewport is pointer-events: none so empty space doesn't block the page; re-enable on
|
|
14
15
|
// each toast so actions stay clickable (including when DismissableLayer sets body to none).
|
|
15
16
|
pointer-events: auto;
|
|
16
17
|
|
|
17
18
|
&__content {
|
|
19
|
+
align-items: center;
|
|
18
20
|
display: flex;
|
|
19
21
|
gap: $spacing-sm;
|
|
20
22
|
}
|
|
@@ -92,6 +94,7 @@
|
|
|
92
94
|
max-width: 100vw;
|
|
93
95
|
outline: none;
|
|
94
96
|
padding: $spacing-lg;
|
|
97
|
+
|
|
95
98
|
// Pass clicks through empty viewport space; individual toasts re-enable pointer events.
|
|
96
99
|
pointer-events: none;
|
|
97
100
|
position: fixed;
|