@veeqo/ui 14.9.0-beta-2 → 14.9.1

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -1,24 +1,60 @@
 'use strict';
 
-var reactTransitionGroup = require('react-transition-group');
 var React = require('react');
 var reactDom = require('react-dom');
-var ToastTransitionItem = require('./components/ToastTransitionItem.cjs');
-var Stack = require('../Stack/Stack.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
+var reactTransitionGroup = require('react-transition-group');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var Toast = require('./components/Toast.cjs');
+var Toast_module = require('./components/Toast.module.scss.cjs');
 var ToastsLayout_module = require('./ToastsLayout.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+    const nodeRefs = React.useRef(new Map());
+    // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
     React.useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
-    }, [toasts, max, onClose]);
-    return reactDom.createPortal(React__default.default.createElement(Stack.Stack, { className: buildClassnames.buildClassnames([ToastsLayout_module.container]), direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(ToastTransitionItem.ToastTransitionItem, { key: toast.key, toast: toast, last: index === toasts.length - 1, minWidth: minWidth, className: className, e2eClassName: e2eClassName, onClose: () => onClose(toast.key) }))))), document.body);
+        if (typeof max === 'number' && toasts.length > max)
+            onCloseRef.current(toasts[0].key);
+    }, [toasts, max]);
+    // Clean up refs only after exit animation completes (via onExited callback)
+    const handleExited = React.useCallback((key) => {
+        nodeRefs.current.delete(key);
+    }, []);
+    let resolvedMinWidth;
+    if (!minWidth && minWidth !== 0) {
+        resolvedMinWidth = undefined;
+    }
+    else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {
+        resolvedMinWidth = `${minWidth}px`;
+    }
+    else {
+        resolvedMinWidth = String(minWidth);
+    }
+    return reactDom.createPortal(React__default.default.createElement(FlexCol.FlexCol, { alignItems: "center", gap: "base", className: ToastsLayout_module.ToastsLayoutContainer, "aria-live": "polite", "aria-atomic": "false" },
+        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => {
+            if (!nodeRefs.current.has(toast.key)) {
+                nodeRefs.current.set(toast.key, { current: null });
+            }
+            const nodeRef = nodeRefs.current.get(toast.key);
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { nodeRef: nodeRef, key: toast.key, timeout: 500, classNames: {
+                    enter: Toast_module.enter,
+                    enterActive: Toast_module.enterActive,
+                    exit: Toast_module.exit,
+                    exitActive: Toast_module.exitActive,
+                }, onExited: () => handleExited(toast.key) },
+                React__default.default.createElement(Toast.Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })));
+        }))), document.body);
 };
 
 exports.ToastsLayout = ToastsLayout;

package/dist/components/ToastsLayout/ToastsLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastTransitionItem } from './components/ToastTransitionItem';\nimport { Stack } from '../Stack';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ToastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <Stack\n      className={buildClassnames([styles.container])}\n      direction=\"vertical\"\n      alignX=\"center\"\n      spacing={4}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <ToastTransitionItem\n            key={toast.key}\n            toast={toast}\n            last={index === toasts.length - 1}\n            minWidth={minWidth}\n            className={className}\n            e2eClassName={e2eClassName}\n            onClose={() => onClose(toast.key)}\n          />\n        ))}\n      </TransitionGroup>\n    </Stack>,\n    document.body,\n  );\n};\n"],"names":["useEffect","createPortal","React","Stack","buildClassnames","styles","TransitionGroup","ToastTransitionItem"],"mappings":";;;;;;;;;;;;;;MASa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxD,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,OAAOC,qBAAY,CACjBC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EACJ,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAM,CAAC,SAAS,CAAC,CAAC,EAC9C,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,CAAC,EAAA;AAEV,QAAAH,sBAAA,CAAA,aAAA,CAACI,oCAAe,EAAA,EAAC,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCJ,sBAAA,CAAA,aAAA,CAACK,uCAAmB,IAClB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,CACjC,CACH,CAAC,CACc,CACZ,EACR,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/**\n * A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  const nodeRefs = useRef(new Map<string, { current: HTMLDivElement | null }>());\n\n  // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (typeof max === 'number' && toasts.length > max) onCloseRef.current(toasts[0].key);\n  }, [toasts, max]);\n\n  // Clean up refs only after exit animation completes (via onExited callback)\n  const handleExited = useCallback((key: string) => {\n    nodeRefs.current.delete(key);\n  }, []);\n\n  let resolvedMinWidth: string | undefined;\n  if (!minWidth && minWidth !== 0) {\n    resolvedMinWidth = undefined;\n  } else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {\n    resolvedMinWidth = `${minWidth}px`;\n  } else {\n    resolvedMinWidth = String(minWidth);\n  }\n\n  return createPortal(\n    <FlexCol\n      alignItems=\"center\"\n      gap=\"base\"\n      className={styles.ToastsLayoutContainer}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => {\n          if (!nodeRefs.current.has(toast.key)) {\n            nodeRefs.current.set(toast.key, { current: null });\n          }\n          const nodeRef = nodeRefs.current.get(toast.key)!;\n\n          return (\n            <CSSTransition\n              nodeRef={nodeRef}\n              key={toast.key}\n              timeout={500}\n              classNames={{\n                enter: toastStyles.enter,\n                enterActive: toastStyles.enterActive,\n                exit: toastStyles.exit,\n                exitActive: toastStyles.exitActive,\n              }}\n              onExited={() => handleExited(toast.key)}\n            >\n              <Toast\n                ref={nodeRef}\n                className={className}\n                e2eClassName={e2eClassName}\n                minWidth={resolvedMinWidth}\n                last={index === toasts.length - 1}\n                onClose={() => onClose(toast.key)}\n                {...toast}\n              />\n            </CSSTransition>\n          );\n        })}\n      </TransitionGroup>\n    </FlexCol>,\n    document.body,\n  );\n};\n"],"names":["useRef","useEffect","useCallback","createPortal","React","FlexCol","styles","TransitionGroup","CSSTransition","toastStyles","Toast"],"mappings":";;;;;;;;;;;;;;AASA;;;AAGG;MACU,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,MAAM,QAAQ,GAAGA,YAAM,CAAC,IAAI,GAAG,EAA8C,CAAC;;AAG9E,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAC,OAAO,CAAC;IAClCC,eAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAC9B,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACb,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AACvF,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;;AAGjB,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,CAAC,GAAW,KAAI;AAC/C,QAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,IAAI,gBAAoC;AACxC,IAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,CAAC,EAAE;QAC/B,gBAAgB,GAAG,SAAS;AAC7B,IAAA;AAAM,SAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE;AACnE,QAAA,gBAAgB,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;AACnC,IAAA;AAAM,SAAA;AACL,QAAA,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA;IAED,OAAOC,qBAAY,CACjBC,sBAAA,CAAA,aAAA,CAACC,eAAO,IACN,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EAAA,WAAA,EAC7B,QAAQ,EAAA,aAAA,EACN,OAAO,EAAA;QAEnBF,sBAAA,CAAA,aAAA,CAACG,oCAAe,IAAC,SAAS,EAAE,IAAI,EAAA,EAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;YAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpC,gBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnD,YAAA;AACD,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAE;AAEhD,YAAA,QACEH,sBAAA,CAAA,aAAA,CAACI,kCAAa,IACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE;oBACV,KAAK,EAAEC,YAAW,CAAC,KAAK;oBACxB,WAAW,EAAEA,YAAW,CAAC,WAAW;oBACpC,IAAI,EAAEA,YAAW,CAAC,IAAI;oBACtB,UAAU,EAAEA,YAAW,CAAC,UAAU;iBACnC,EACD,QAAQ,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA;gBAEvCL,sBAAA,CAAA,aAAA,CAACM,WAAK,IACJ,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,GAC7B,KAAK,EAAA,CACT,CACY;QAEpB,CAAC,CAAC,CACc,CACV,EACV,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.d.ts

@@ -1,3 +1,7 @@
 import { FC } from 'react';
 import { ToastsLayoutPropTypes } from './types';
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 export declare const ToastsLayout: FC<ToastsLayoutPropTypes>;

package/dist/components/ToastsLayout/ToastsLayout.js

@@ -1,18 +1,54 @@
-import { TransitionGroup } from 'react-transition-group';
-import React__default, { useEffect } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ToastTransitionItem } from './components/ToastTransitionItem.js';
-import { Stack } from '../Stack/Stack.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { Toast } from './components/Toast.js';
+import toastStyles from './components/Toast.module.scss.js';
 import styles from './ToastsLayout.module.scss.js';
 
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+    const nodeRefs = useRef(new Map());
+    // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes
+    const onCloseRef = useRef(onClose);
     useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
-    }, [toasts, max, onClose]);
-    return createPortal(React__default.createElement(Stack, { className: buildClassnames([styles.container]), direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(ToastTransitionItem, { key: toast.key, toast: toast, last: index === toasts.length - 1, minWidth: minWidth, className: className, e2eClassName: e2eClassName, onClose: () => onClose(toast.key) }))))), document.body);
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    useEffect(() => {
+        if (typeof max === 'number' && toasts.length > max)
+            onCloseRef.current(toasts[0].key);
+    }, [toasts, max]);
+    // Clean up refs only after exit animation completes (via onExited callback)
+    const handleExited = useCallback((key) => {
+        nodeRefs.current.delete(key);
+    }, []);
+    let resolvedMinWidth;
+    if (!minWidth && minWidth !== 0) {
+        resolvedMinWidth = undefined;
+    }
+    else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {
+        resolvedMinWidth = `${minWidth}px`;
+    }
+    else {
+        resolvedMinWidth = String(minWidth);
+    }
+    return createPortal(React__default.createElement(FlexCol, { alignItems: "center", gap: "base", className: styles.ToastsLayoutContainer, "aria-live": "polite", "aria-atomic": "false" },
+        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => {
+            if (!nodeRefs.current.has(toast.key)) {
+                nodeRefs.current.set(toast.key, { current: null });
+            }
+            const nodeRef = nodeRefs.current.get(toast.key);
+            return (React__default.createElement(CSSTransition, { nodeRef: nodeRef, key: toast.key, timeout: 500, classNames: {
+                    enter: toastStyles.enter,
+                    enterActive: toastStyles.enterActive,
+                    exit: toastStyles.exit,
+                    exitActive: toastStyles.exitActive,
+                }, onExited: () => handleExited(toast.key) },
+                React__default.createElement(Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })));
+        }))), document.body);
 };
 
 export { ToastsLayout };

package/dist/components/ToastsLayout/ToastsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastTransitionItem } from './components/ToastTransitionItem';\nimport { Stack } from '../Stack';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ToastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <Stack\n      className={buildClassnames([styles.container])}\n      direction=\"vertical\"\n      alignX=\"center\"\n      spacing={4}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <ToastTransitionItem\n            key={toast.key}\n            toast={toast}\n            last={index === toasts.length - 1}\n            minWidth={minWidth}\n            className={className}\n            e2eClassName={e2eClassName}\n            onClose={() => onClose(toast.key)}\n          />\n        ))}\n      </TransitionGroup>\n    </Stack>,\n    document.body,\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;MASa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxD,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,OAAO,YAAY,CACjBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAC9C,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,CAAC,EAAA;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCA,cAAA,CAAA,aAAA,CAAC,mBAAmB,IAClB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,CACjC,CACH,CAAC,CACc,CACZ,EACR,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/**\n * A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  const nodeRefs = useRef(new Map<string, { current: HTMLDivElement | null }>());\n\n  // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (typeof max === 'number' && toasts.length > max) onCloseRef.current(toasts[0].key);\n  }, [toasts, max]);\n\n  // Clean up refs only after exit animation completes (via onExited callback)\n  const handleExited = useCallback((key: string) => {\n    nodeRefs.current.delete(key);\n  }, []);\n\n  let resolvedMinWidth: string | undefined;\n  if (!minWidth && minWidth !== 0) {\n    resolvedMinWidth = undefined;\n  } else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {\n    resolvedMinWidth = `${minWidth}px`;\n  } else {\n    resolvedMinWidth = String(minWidth);\n  }\n\n  return createPortal(\n    <FlexCol\n      alignItems=\"center\"\n      gap=\"base\"\n      className={styles.ToastsLayoutContainer}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => {\n          if (!nodeRefs.current.has(toast.key)) {\n            nodeRefs.current.set(toast.key, { current: null });\n          }\n          const nodeRef = nodeRefs.current.get(toast.key)!;\n\n          return (\n            <CSSTransition\n              nodeRef={nodeRef}\n              key={toast.key}\n              timeout={500}\n              classNames={{\n                enter: toastStyles.enter,\n                enterActive: toastStyles.enterActive,\n                exit: toastStyles.exit,\n                exitActive: toastStyles.exitActive,\n              }}\n              onExited={() => handleExited(toast.key)}\n            >\n              <Toast\n                ref={nodeRef}\n                className={className}\n                e2eClassName={e2eClassName}\n                minWidth={resolvedMinWidth}\n                last={index === toasts.length - 1}\n                onClose={() => onClose(toast.key)}\n                {...toast}\n              />\n            </CSSTransition>\n          );\n        })}\n      </TransitionGroup>\n    </FlexCol>,\n    document.body,\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ToastsLayout/ToastsLayout.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._container_yulmp_1 {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n._toast_yulmp_9 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n.veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n.veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n.veeqo-components-toast-exit {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n.veeqo-components-toast-exit-active {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n._iconWrap_yulmp_44 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n}\n._iconWrap_yulmp_44 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._contentStack_yulmp_60 {\n  flex-grow: 1;\n}\n\n._toastText_yulmp_64 {\n  color: white;\n  font-size: 16px;\n}");
-var styles = {"container":"_container_yulmp_1","toast":"_toast_yulmp_9","iconWrap":"_iconWrap_yulmp_44","contentStack":"_contentStack_yulmp_60","toastText":"_toastText_yulmp_64"};
+___$insertStyle("._ToastsLayoutContainer_dq7e5_1 {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}");
+var styles = {"ToastsLayoutContainer":"_ToastsLayoutContainer_dq7e5_1"};
 
 module.exports = styles;
 //# sourceMappingURL=ToastsLayout.module.scss.cjs.map

package/dist/components/ToastsLayout/ToastsLayout.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".container {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n.toast {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n:global(.veeqo-components-toast-enter) {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n:global(.veeqo-components-toast-enter-active) {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n:global(.veeqo-components-toast-exit) {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n:global(.veeqo-components-toast-exit-active) {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n.iconWrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.contentStack {\n  flex-grow: 1;\n}\n\n.toastText {\n  color: white;\n  font-size: 16px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,48CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"ToastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".ToastsLayoutContainer {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8KAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._container_yulmp_1 {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n._toast_yulmp_9 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n.veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n.veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n.veeqo-components-toast-exit {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n.veeqo-components-toast-exit-active {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n._iconWrap_yulmp_44 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n}\n._iconWrap_yulmp_44 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._contentStack_yulmp_60 {\n  flex-grow: 1;\n}\n\n._toastText_yulmp_64 {\n  color: white;\n  font-size: 16px;\n}");
-var styles = {"container":"_container_yulmp_1","toast":"_toast_yulmp_9","iconWrap":"_iconWrap_yulmp_44","contentStack":"_contentStack_yulmp_60","toastText":"_toastText_yulmp_64"};
+insertStyle("._ToastsLayoutContainer_dq7e5_1 {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}");
+var styles = {"ToastsLayoutContainer":"_ToastsLayoutContainer_dq7e5_1"};
 
 export { styles as default };
 //# sourceMappingURL=ToastsLayout.module.scss.js.map

package/dist/components/ToastsLayout/ToastsLayout.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".container {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n.toast {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n:global(.veeqo-components-toast-enter) {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n:global(.veeqo-components-toast-enter-active) {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n:global(.veeqo-components-toast-exit) {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n:global(.veeqo-components-toast-exit-active) {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n.iconWrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.contentStack {\n  flex-grow: 1;\n}\n\n.toastText {\n  color: white;\n  font-size: 16px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,48CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"ToastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".ToastsLayoutContainer {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8KAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/ToastsLayout/components/Toast.cjs

@@ -1,19 +1,18 @@
 'use strict';
 
 var React = require('react');
-var colors = require('../../../theme/modules/colors.cjs');
-var Stack = require('../../Stack/Stack.cjs');
-var Text = require('../../Text/Text.cjs');
-var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-var assignCssVars = require('../../../utils/assignCssVars.cjs');
-var Button = require('../../Button/Button.cjs');
 var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
 var InfoIcon = require('../../../icons/design-system/components/InfoIcon.cjs');
 var MergeIcon = require('../../../icons/design-system/components/MergeIcon.cjs');
 var SuccessIcon = require('../../../icons/design-system/components/SuccessIcon.cjs');
-var ToastsLayout_module = require('../ToastsLayout.module.scss.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
+var Action = require('../../Action/Action.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var Text = require('../../Text/Text.cjs');
+var Toast_module = require('./Toast.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,19 +20,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const toastTypes = {
     info: {
-        accentColor: colors.colors.brand.blue.base,
         icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
     },
     success: {
-        accentColor: colors.colors.secondary.green.base,
         icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
     },
     error: {
-        accentColor: colors.colors.secondary.red.base,
         icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
     },
     merge: {
-        accentColor: colors.colors.secondary.purple.base,
         icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
     },
 };
@@ -42,21 +37,31 @@ const generateClassNames = (prefix) => ({
     icon: prefix ? `${prefix}-toast-icon` : undefined,
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const toastVars = assignCssVars.assignCssVars({
-        toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
-        toastExitStart: last ? 'translateY(0)' : 'translateX(0)',
-        toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',
-        iconColor: toastTypes[type].accentColor,
-    });
-    return (React__default.default.createElement(Stack.Stack, { ref: ref, className: buildClassnames.buildClassnames([ToastsLayout_module.toast, classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), style: toastVars, direction: "horizontal", alignY: "center" },
-        React__default.default.createElement(BaseContainer.BaseContainer, { className: buildClassnames.buildClassnames([ToastsLayout_module.iconWrap, classNames === null || classNames === void 0 ? void 0 : classNames.icon, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
-        React__default.default.createElement(Stack.Stack, { className: ToastsLayout_module.contentStack, direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.default.createElement(Text.Text, { variant: "body", className: ToastsLayout_module.toastText }, text),
+    return (React__default.default.createElement(FlexRow.FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([
+            Toast_module['toast-container'],
+            Toast_module[`${type}-variant`],
+            last && Toast_module.last,
+            classNames.container,
+            e2eClassNames.container,
+        ]), justifyContent: "space-between", style: assignCssVars.assignCssVars({ minWidth }), gap: "base" },
+        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([classNames.icon, e2eClassNames.icon, Toast_module['icon-wrap']]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
+            React__default.default.createElement(Text.Text, { variant: "subheadingMedium", className: Toast_module.text }, text),
             cta),
-        React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+        React__default.default.createElement(Action.Action, { variant: "flat", 
+            // Always white on dark toast background
+            iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames.buildClassnames([
+                classNames.closeIcon,
+                e2eClassNames.closeIcon,
+                Toast_module.closeAction,
+            ]) })));
 });
 Toast.displayName = 'Toast';
 

package/dist/components/ToastsLayout/components/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { Stack } from '../../Stack';\nimport { Text } from '../../Text';\nimport { BaseContainer } from '../../BaseContainer';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { assignCssVars } from '../../../utils/assignCssVars';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\nimport styles from '../ToastsLayout.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    const toastVars = assignCssVars({\n      toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n      toastExitStart: last ? 'translateY(0)' : 'translateX(0)',\n      toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',\n      iconColor: toastTypes[type].accentColor,\n    });\n\n    return (\n      <Stack\n        ref={ref}\n        className={buildClassnames([styles.toast, classNames?.container, e2eClassNames?.container])}\n        style={toastVars}\n        direction=\"horizontal\"\n        alignY=\"center\"\n      >\n        <BaseContainer\n          className={buildClassnames([styles.iconWrap, classNames?.icon, e2eClassNames?.icon])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </BaseContainer>\n        <Stack className={styles.contentStack} direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n          <Text variant=\"body\" className={styles.toastText}>{text}</Text>\n          {cta}\n        </Stack>\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n        />\n      </Stack>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","assignCssVars","Stack","buildClassnames","styles","BaseContainer","Text","Button","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    icon: <InfoIcon />,\n  },\n  success: {\n    icon: <SuccessIcon />,\n  },\n  error: {\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/**\n * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.\n * Rendered internally by `ToastsLayout` — not intended for standalone use.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    return (\n      <FlexRow\n        ref={ref}\n        alignItems=\"center\"\n        flexWrap=\"nowrap\"\n        className={buildClassnames([\n          styles['toast-container'],\n          styles[`${type}-variant`],\n          last && styles.last,\n          classNames.container,\n          e2eClassNames.container,\n        ])}\n        justifyContent=\"space-between\"\n        style={assignCssVars({ minWidth })}\n        gap=\"base\"\n      >\n        <FlexRow\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexWrap=\"nowrap\"\n          className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </FlexRow>\n        <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n          <Text variant=\"subheadingMedium\" className={styles.text}>\n            {text}\n          </Text>\n          {cta}\n        </FlexRow>\n        <Action\n          variant=\"flat\"\n          // Always white on dark toast background\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n          className={buildClassnames([\n            classNames.closeIcon,\n            e2eClassNames.closeIcon,\n            styles.closeAction,\n          ])}\n        />\n      </FlexRow>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","FlexRow","buildClassnames","styles","assignCssVars","Text","Action","CrossIcon"],"mappings":"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"}

package/dist/components/ToastsLayout/components/Toast.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 export declare const Toast: React.ForwardRefExoticComponent<Omit<import("../types").Notification, "key"> & {
     className?: string | undefined;
     e2eClassName?: string | undefined;
     last: boolean;
-    minWidth: string | number;
+    minWidth?: string | undefined;
     onClose: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ToastsLayout/components/Toast.js

@@ -1,33 +1,28 @@
 import React__default from 'react';
-import { colors } from '../../../theme/modules/colors.js';
-import { Stack } from '../../Stack/Stack.js';
-import { Text } from '../../Text/Text.js';
-import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import { assignCssVars } from '../../../utils/assignCssVars.js';
-import { Button } from '../../Button/Button.js';
 import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
 import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
 import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
-import styles from '../ToastsLayout.module.scss.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import { Action } from '../../Action/Action.js';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { Text } from '../../Text/Text.js';
+import toastStyles from './Toast.module.scss.js';
 
 const toastTypes = {
     info: {
-        accentColor: colors.brand.blue.base,
         icon: React__default.createElement(InfoIcon, null),
     },
     success: {
-        accentColor: colors.secondary.green.base,
         icon: React__default.createElement(SuccessIcon, null),
     },
     error: {
-        accentColor: colors.secondary.red.base,
         icon: React__default.createElement(AttentionIcon, null),
     },
     merge: {
-        accentColor: colors.secondary.purple.base,
         icon: React__default.createElement(MergeIcon, null),
     },
 };
@@ -36,21 +31,31 @@ const generateClassNames = (prefix) => ({
     icon: prefix ? `${prefix}-toast-icon` : undefined,
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const toastVars = assignCssVars({
-        toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
-        toastExitStart: last ? 'translateY(0)' : 'translateX(0)',
-        toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',
-        iconColor: toastTypes[type].accentColor,
-    });
-    return (React__default.createElement(Stack, { ref: ref, className: buildClassnames([styles.toast, classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), style: toastVars, direction: "horizontal", alignY: "center" },
-        React__default.createElement(BaseContainer, { className: buildClassnames([styles.iconWrap, classNames === null || classNames === void 0 ? void 0 : classNames.icon, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
-        React__default.createElement(Stack, { className: styles.contentStack, direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.createElement(Text, { variant: "body", className: styles.toastText }, text),
+    return (React__default.createElement(FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames([
+            toastStyles['toast-container'],
+            toastStyles[`${type}-variant`],
+            last && toastStyles.last,
+            classNames.container,
+            e2eClassNames.container,
+        ]), justifyContent: "space-between", style: assignCssVars({ minWidth }), gap: "base" },
+        React__default.createElement(FlexRow, { justifyContent: "center", alignItems: "center", flexWrap: "nowrap", className: buildClassnames([classNames.icon, e2eClassNames.icon, toastStyles['icon-wrap']]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
+        React__default.createElement(FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
+            React__default.createElement(Text, { variant: "subheadingMedium", className: toastStyles.text }, text),
             cta),
-        React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+        React__default.createElement(Action, { variant: "flat", 
+            // Always white on dark toast background
+            iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames([
+                classNames.closeIcon,
+                e2eClassNames.closeIcon,
+                toastStyles.closeAction,
+            ]) })));
 });
 Toast.displayName = 'Toast';
 

package/dist/components/ToastsLayout/components/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { Stack } from '../../Stack';\nimport { Text } from '../../Text';\nimport { BaseContainer } from '../../BaseContainer';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { assignCssVars } from '../../../utils/assignCssVars';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\nimport styles from '../ToastsLayout.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    const toastVars = assignCssVars({\n      toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n      toastExitStart: last ? 'translateY(0)' : 'translateX(0)',\n      toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',\n      iconColor: toastTypes[type].accentColor,\n    });\n\n    return (\n      <Stack\n        ref={ref}\n        className={buildClassnames([styles.toast, classNames?.container, e2eClassNames?.container])}\n        style={toastVars}\n        direction=\"horizontal\"\n        alignY=\"center\"\n      >\n        <BaseContainer\n          className={buildClassnames([styles.iconWrap, classNames?.icon, e2eClassNames?.icon])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </BaseContainer>\n        <Stack className={styles.contentStack} direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n          <Text variant=\"body\" className={styles.toastText}>{text}</Text>\n          {cta}\n        </Stack>\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n        />\n      </Stack>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    icon: <InfoIcon />,\n  },\n  success: {\n    icon: <SuccessIcon />,\n  },\n  error: {\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/**\n * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.\n * Rendered internally by `ToastsLayout` — not intended for standalone use.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    return (\n      <FlexRow\n        ref={ref}\n        alignItems=\"center\"\n        flexWrap=\"nowrap\"\n        className={buildClassnames([\n          styles['toast-container'],\n          styles[`${type}-variant`],\n          last && styles.last,\n          classNames.container,\n          e2eClassNames.container,\n        ])}\n        justifyContent=\"space-between\"\n        style={assignCssVars({ minWidth })}\n        gap=\"base\"\n      >\n        <FlexRow\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexWrap=\"nowrap\"\n          className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </FlexRow>\n        <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n          <Text variant=\"subheadingMedium\" className={styles.text}>\n            {text}\n          </Text>\n          {cta}\n        </FlexRow>\n        <Action\n          variant=\"flat\"\n          // Always white on dark toast background\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n          className={buildClassnames([\n            classNames.closeIcon,\n            e2eClassNames.closeIcon,\n            styles.closeAction,\n          ])}\n        />\n      </FlexRow>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;QACJ,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;QACP,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEF;;;AAGG;AACI,MAAM,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,KAAI;AACvF,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC;YACzBC,WAAM,CAAC,iBAAiB,CAAC;AACzB,YAAAA,WAAM,CAAC,CAAA,EAAG,IAAI,CAAA,QAAA,CAAU,CAAC;YACzB,IAAI,IAAIA,WAAM,CAAC,IAAI;AACnB,YAAA,UAAU,CAAC,SAAS;AACpB,YAAA,aAAa,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,cAAc,EAAC,eAAe,EAC9B,KAAK,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,EAClC,GAAG,EAAC,MAAM,EAAA;QAEVD,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAEC,WAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAErF,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAC1B;AACV,QAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAA;AACxF,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAA,EACpD,IAAI,CACA;AACN,YAAA,GAAG,CACI;AACV,QAAAD,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM;;AAEd,YAAA,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,UAAU,CAAC,SAAS;AACpB,gBAAA,aAAa,CAAC,SAAS;AACvB,gBAAAC,WAAM,CAAC,WAAW;aACnB,CAAC,EAAA,CACF,CACM;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/ToastsLayout/components/Toast.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("@charset \"UTF-8\";\n._toast-container_1wwfi_2 {\n  --toast-local-z-index: 40;\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_1wwfi_2._merge-variant_1wwfi_14 {\n  --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_1wwfi_2._info-variant_1wwfi_17 {\n  --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_1wwfi_2._error-variant_1wwfi_20 {\n  --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_1wwfi_2._success-variant_1wwfi_23 {\n  --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_1wwfi_28 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._enterActive_1wwfi_33 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exit_1wwfi_38 {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_1wwfi_27._exit_1wwfi_38 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exitActive_1wwfi_55 {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n._last_1wwfi_27._exitActive_1wwfi_55 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._icon-wrap_1wwfi_65 {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n}\n._icon-wrap_1wwfi_65 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._text_1wwfi_78 {\n  color: white;\n}\n\n._closeAction_1wwfi_82 {\n  padding-left: var(--sizes-md);\n}\n._closeAction_1wwfi_82 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:hover,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:active,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
+var toastStyles = {"toast-container":"_toast-container_1wwfi_2","merge-variant":"_merge-variant_1wwfi_14","info-variant":"_info-variant_1wwfi_17","error-variant":"_error-variant_1wwfi_20","success-variant":"_success-variant_1wwfi_23","enter":"_enter_1wwfi_28","enterActive":"_enterActive_1wwfi_33","exit":"_exit_1wwfi_38","last":"_last_1wwfi_27","exitActive":"_exitActive_1wwfi_55","icon-wrap":"_icon-wrap_1wwfi_65","text":"_text_1wwfi_78","closeAction":"_closeAction_1wwfi_82"};
+
+module.exports = toastStyles;
+//# sourceMappingURL=Toast.module.scss.cjs.map

package/dist/components/ToastsLayout/components/Toast.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n  --toast-local-z-index: 40;\n\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition:\n    transform 500ms ease,\n    opacity 500ms ease;\n\n  &.merge-variant {\n    --variant-color: var(--colors-secondary-purple-base);\n  }\n  &.info-variant {\n    --variant-color: var(--colors-secondary-blue-base);\n  }\n  &.error-variant {\n    --variant-color: var(--colors-secondary-red-base);\n  }\n  &.success-variant {\n    --variant-color: var(--colors-secondary-green-base);\n  }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.enterActive {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exitActive {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n.last.exitActive {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.icon-wrap {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n.text {\n  color: white;\n}\n.closeAction {\n  padding-left: var(--sizes-md);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,q/EAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ToastsLayout/components/Toast.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("@charset \"UTF-8\";\n._toast-container_1wwfi_2 {\n  --toast-local-z-index: 40;\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_1wwfi_2._merge-variant_1wwfi_14 {\n  --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_1wwfi_2._info-variant_1wwfi_17 {\n  --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_1wwfi_2._error-variant_1wwfi_20 {\n  --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_1wwfi_2._success-variant_1wwfi_23 {\n  --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_1wwfi_28 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._enterActive_1wwfi_33 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exit_1wwfi_38 {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_1wwfi_27._exit_1wwfi_38 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exitActive_1wwfi_55 {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n._last_1wwfi_27._exitActive_1wwfi_55 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._icon-wrap_1wwfi_65 {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n}\n._icon-wrap_1wwfi_65 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._text_1wwfi_78 {\n  color: white;\n}\n\n._closeAction_1wwfi_82 {\n  padding-left: var(--sizes-md);\n}\n._closeAction_1wwfi_82 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:hover,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:active,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
+var toastStyles = {"toast-container":"_toast-container_1wwfi_2","merge-variant":"_merge-variant_1wwfi_14","info-variant":"_info-variant_1wwfi_17","error-variant":"_error-variant_1wwfi_20","success-variant":"_success-variant_1wwfi_23","enter":"_enter_1wwfi_28","enterActive":"_enterActive_1wwfi_33","exit":"_exit_1wwfi_38","last":"_last_1wwfi_27","exitActive":"_exitActive_1wwfi_55","icon-wrap":"_icon-wrap_1wwfi_65","text":"_text_1wwfi_78","closeAction":"_closeAction_1wwfi_82"};
+
+export { toastStyles as default };
+//# sourceMappingURL=Toast.module.scss.js.map

package/dist/components/ToastsLayout/components/Toast.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n  --toast-local-z-index: 40;\n\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition:\n    transform 500ms ease,\n    opacity 500ms ease;\n\n  &.merge-variant {\n    --variant-color: var(--colors-secondary-purple-base);\n  }\n  &.info-variant {\n    --variant-color: var(--colors-secondary-blue-base);\n  }\n  &.error-variant {\n    --variant-color: var(--colors-secondary-red-base);\n  }\n  &.success-variant {\n    --variant-color: var(--colors-secondary-green-base);\n  }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.enterActive {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exitActive {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n.last.exitActive {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.icon-wrap {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n.text {\n  color: white;\n}\n.closeAction {\n  padding-left: var(--sizes-md);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,q/EAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ToastsLayout/index.d.ts

@@ -1,2 +1,2 @@
 export { ToastsLayout } from './ToastsLayout';
-export type { Notification } from './types';
+export type { Notification, ToastsLayoutPropTypes } from './types';