@veeqo/ui 15.4.0 → 15.6.0

package/README.md

@@ -1,5 +1,7 @@
 # Veeqo Components
 
+> **Internal Consumers**: This repository is mirrored to GitFarm at [code.amazon.com/packages/Veeqo_veeqo-ui](https://code.amazon.com/packages/Veeqo_veeqo-ui/trees/main). **Do not open CRs or push directly to GitFarm**: it is a read-only replica. All changes must go through PRs on the [GitHub repository](https://github.com/veeqo/veeqo-ui). For internal consumption docs, see [internal_publishing.md](./docs/internal_publishing.md).
+
 ## Introduction
 
 The frontend component library for reusable components in Veeqo which aim to reflect the [Veeqo Design System](https://www.figma.com/file/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?type=design&node-id=8067-38719&mode=design&t=v1hqIzanCtyYARwt-0). When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create.

package/dist/components/Image/Image.cjs

@@ -6,6 +6,7 @@ var reactDom = require('react-dom');
 var PlaceholderImage = require('./components/PlaceholderImage.cjs');
 var utils = require('./utils.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var urlUtils = require('../Anchor/utils/urlUtils.cjs');
 var Image_module = require('./Image.module.scss.cjs');
 
@@ -13,14 +14,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
+const Image = ({ src, alt = '', className, e2eClassName, width, height, radius = 'none', hasBorder = false, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
     const classNames = utils.generateClassNames(className);
     const e2eClassNames = utils.generateClassNames(e2eClassName);
     const contextAwareSrc = urlUtils.createContextAwareUrl(src);
     const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
     const [imageState, setImageState] = React.useState({ isLoaded: false, isError: false });
     const [referenceElement, setReferenceElement] = React__default.default.useState(null);
-    const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
+    const { refs, floatingStyles, placement: resolvedPlacement, } = react.useFloating({
         elements: { reference: referenceElement },
         placement: previewPlacement,
         middleware: [react.offset(12), react.flip(), react.shift({ limiter: react.limitShift() })],
@@ -31,27 +32,34 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const onLoad = () => setImageState({ isLoaded: true, isError: false });
     const onError = () => setImageState({ isLoaded: true, isError: true });
     const isImageHidden = !imageState.isLoaded || imageState.isError;
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-            classNames === null || classNames === void 0 ? void 0 : classNames.container,
-            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            className,
-        ]) },
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
         React__default.default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames.buildClassnames([
                 Image_module.image,
+                Image_module[`${radius}-radius`],
+                hasBorder && Image_module.outline,
                 previewEnabled && Image_module.previewEnabled,
                 classNames === null || classNames === void 0 ? void 0 : classNames.image,
                 e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
             ]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
         !disablePlaceholder &&
             isImageHidden &&
-            (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
+            (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([
+                    Image_module[`${radius}-radius`],
+                    hasBorder && Image_module.outline,
+                    classNames === null || classNames === void 0 ? void 0 : classNames.placeholder,
+                    e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder,
+                ]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
             reactDom.createPortal(React__default.default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames.buildClassnames([
                     Image_module.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
                 ]) },
-                React__default.default.createElement("img", { className: Image_module.previewImage, src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+                React__default.default.createElement("img", { className: buildClassnames.buildClassnames([
+                        Image_module.previewImage,
+                        Image_module[`${radius}-radius`],
+                        hasBorder && Image_module.outline,
+                    ]), src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
 };
 
 exports.Image = Image;

package/dist/components/Image/Image.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate, Placement } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n    elements: { reference: referenceElement },\n    placement: previewPlacement,\n    middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div\n      className={buildClassnames([\n        classNames?.container,\n        e2eClassNames?.container,\n        className,\n      ])}\n    >\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={refs.setFloating}\n            style={floatingStyles}\n            data-placement={resolvedPlacement}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={imageStyles.previewImage}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","useFloating","offset","flip","shift","limitShift","autoUpdate","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":"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"}
+{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\nimport { ImageProps } from './types';\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  radius = 'none',\n  hasBorder = false,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const {\n    refs,\n    floatingStyles,\n    placement: resolvedPlacement,\n  } = useFloating({\n    elements: { reference: referenceElement },\n    placement: previewPlacement,\n    middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}>\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          imageStyles[`${radius}-radius`],\n          hasBorder && imageStyles.outline,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([\n              imageStyles[`${radius}-radius`],\n              hasBorder && imageStyles.outline,\n              classNames?.placeholder,\n              e2eClassNames?.placeholder,\n            ])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={refs.setFloating}\n            style={floatingStyles}\n            data-placement={resolvedPlacement}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={buildClassnames([\n                imageStyles.previewImage,\n                imageStyles[`${radius}-radius`],\n                hasBorder && imageStyles.outline,\n              ])}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","useFloating","offset","flip","shift","limitShift","autoUpdate","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":"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"}

package/dist/components/Image/Image.d.ts

@@ -1,20 +1,3 @@
 import React from 'react';
-import { Placement } from '@floating-ui/react';
-type ImageProps = {
-    src: string;
-    alt?: string;
-    className?: string;
-    e2eClassName?: string;
-    width?: string;
-    height?: string;
-    previewWidth?: string;
-    previewHeight?: string;
-    previewPlacement?: Placement;
-    previewEnabled?: boolean;
-    placeholder?: React.ReactNode;
-    placeholderWidth?: string;
-    placeholderHeight?: string;
-    disablePlaceholder?: boolean;
-};
-export declare const Image: ({ src, alt, className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;
-export {};
+import { ImageProps } from './types';
+export declare const Image: ({ src, alt, className, e2eClassName, width, height, radius, hasBorder, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;

package/dist/components/Image/Image.js

@@ -4,17 +4,18 @@ import { createPortal } from 'react-dom';
 import { PlaceholderImage } from './components/PlaceholderImage.js';
 import { generateClassNames } from './utils.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { createContextAwareUrl } from '../Anchor/utils/urlUtils.js';
 import imageStyles from './Image.module.scss.js';
 
-const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
+const Image = ({ src, alt = '', className, e2eClassName, width, height, radius = 'none', hasBorder = false, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
     const contextAwareSrc = createContextAwareUrl(src);
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
     const [referenceElement, setReferenceElement] = React__default.useState(null);
-    const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
+    const { refs, floatingStyles, placement: resolvedPlacement, } = useFloating({
         elements: { reference: referenceElement },
         placement: previewPlacement,
         middleware: [offset(12), flip(), shift({ limiter: limitShift() })],
@@ -25,27 +26,34 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const onLoad = () => setImageState({ isLoaded: true, isError: false });
     const onError = () => setImageState({ isLoaded: true, isError: true });
     const isImageHidden = !imageState.isLoaded || imageState.isError;
-    return (React__default.createElement("div", { className: buildClassnames([
-            classNames === null || classNames === void 0 ? void 0 : classNames.container,
-            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            className,
-        ]) },
+    return (React__default.createElement("div", { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
         React__default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames([
                 imageStyles.image,
+                imageStyles[`${radius}-radius`],
+                hasBorder && imageStyles.outline,
                 previewEnabled && imageStyles.previewEnabled,
                 classNames === null || classNames === void 0 ? void 0 : classNames.image,
                 e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
             ]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
         !disablePlaceholder &&
             isImageHidden &&
-            (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
+            (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([
+                    imageStyles[`${radius}-radius`],
+                    hasBorder && imageStyles.outline,
+                    classNames === null || classNames === void 0 ? void 0 : classNames.placeholder,
+                    e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder,
+                ]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
             createPortal(React__default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames([
                     imageStyles.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
                 ]) },
-                React__default.createElement("img", { className: imageStyles.previewImage, src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+                React__default.createElement("img", { className: buildClassnames([
+                        imageStyles.previewImage,
+                        imageStyles[`${radius}-radius`],
+                        hasBorder && imageStyles.outline,
+                    ]), src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
 };
 
 export { Image };

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate, Placement } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n    elements: { reference: referenceElement },\n    placement: previewPlacement,\n    middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div\n      className={buildClassnames([\n        classNames?.container,\n        e2eClassNames?.container,\n        className,\n      ])}\n    >\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={refs.setFloating}\n            style={floatingStyles}\n            data-placement={resolvedPlacement}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={imageStyles.previewImage}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\nimport { ImageProps } from './types';\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  radius = 'none',\n  hasBorder = false,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const {\n    refs,\n    floatingStyles,\n    placement: resolvedPlacement,\n  } = useFloating({\n    elements: { reference: referenceElement },\n    placement: previewPlacement,\n    middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}>\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          imageStyles[`${radius}-radius`],\n          hasBorder && imageStyles.outline,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([\n              imageStyles[`${radius}-radius`],\n              hasBorder && imageStyles.outline,\n              classNames?.placeholder,\n              e2eClassNames?.placeholder,\n            ])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={refs.setFloating}\n            style={floatingStyles}\n            data-placement={resolvedPlacement}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={buildClassnames([\n                imageStyles.previewImage,\n                imageStyles[`${radius}-radius`],\n                hasBorder && imageStyles.outline,\n              ])}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._image_1hh00_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._previewEnabled_1hh00_6 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1hh00_10 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1hh00_10 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
-var imageStyles = {"image":"_image_1hh00_1","previewEnabled":"_previewEnabled_1hh00_6","previewImageContainer":"_previewImageContainer_1hh00_10","previewImage":"_previewImage_1hh00_10"};
+___$insertStyle("._image_1v0xt_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._none-radius_1v0xt_6 {\n  border-radius: 0;\n}\n\n._base-radius_1v0xt_10 {\n  border-radius: var(--radius-base);\n}\n\n._md-radius_1v0xt_14 {\n  border-radius: var(--radius-md);\n}\n\n._outline_1v0xt_18 {\n  border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n._previewEnabled_1v0xt_22 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1v0xt_26 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1v0xt_26 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
+var imageStyles = {"image":"_image_1v0xt_1","none-radius":"_none-radius_1v0xt_6","base-radius":"_base-radius_1v0xt_10","md-radius":"_md-radius_1v0xt_14","outline":"_outline_1v0xt_18","previewEnabled":"_previewEnabled_1v0xt_22","previewImageContainer":"_previewImageContainer_1v0xt_26","previewImage":"_previewImage_1v0xt_26"};
 
 module.exports = imageStyles;
 //# sourceMappingURL=Image.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.scss.cjs","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,sSAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"Image.module.scss.cjs","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.none-radius {\n  border-radius: 0;\n}\n\n.base-radius {\n  border-radius: var(--radius-base);\n}\n\n.md-radius {\n  border-radius: var(--radius-md);\n}\n\n.outline {\n  border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kkBAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._image_1hh00_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._previewEnabled_1hh00_6 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1hh00_10 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1hh00_10 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
-var imageStyles = {"image":"_image_1hh00_1","previewEnabled":"_previewEnabled_1hh00_6","previewImageContainer":"_previewImageContainer_1hh00_10","previewImage":"_previewImage_1hh00_10"};
+insertStyle("._image_1v0xt_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._none-radius_1v0xt_6 {\n  border-radius: 0;\n}\n\n._base-radius_1v0xt_10 {\n  border-radius: var(--radius-base);\n}\n\n._md-radius_1v0xt_14 {\n  border-radius: var(--radius-md);\n}\n\n._outline_1v0xt_18 {\n  border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n._previewEnabled_1v0xt_22 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1v0xt_26 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1v0xt_26 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
+var imageStyles = {"image":"_image_1v0xt_1","none-radius":"_none-radius_1v0xt_6","base-radius":"_base-radius_1v0xt_10","md-radius":"_md-radius_1v0xt_14","outline":"_outline_1v0xt_18","previewEnabled":"_previewEnabled_1v0xt_22","previewImageContainer":"_previewImageContainer_1v0xt_26","previewImage":"_previewImage_1v0xt_26"};
 
 export { imageStyles as default };
 //# sourceMappingURL=Image.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.scss.js","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,sSAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"Image.module.scss.js","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.none-radius {\n  border-radius: 0;\n}\n\n.base-radius {\n  border-radius: var(--radius-base);\n}\n\n.md-radius {\n  border-radius: var(--radius-md);\n}\n\n.outline {\n  border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kkBAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1 +1,2 @@
 export { Image } from './Image';
+export type { ImageProps } from './types';

package/dist/components/Image/types.d.ts

@@ -1,6 +1,26 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react';
 export type ClassNamesReturnPayload = {
     container?: string;
     image?: string;
     placeholder?: string;
     previewImageContainer?: string;
 };
+export type ImageProps = {
+    src: string;
+    alt?: string;
+    className?: string;
+    e2eClassName?: string;
+    width?: string;
+    height?: string;
+    radius?: 'none' | 'base' | 'md';
+    hasBorder?: boolean;
+    previewWidth?: string;
+    previewHeight?: string;
+    previewPlacement?: Placement;
+    previewEnabled?: boolean;
+    placeholder?: React.ReactNode;
+    placeholderWidth?: string;
+    placeholderHeight?: string;
+    disablePlaceholder?: boolean;
+};

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -24,8 +24,9 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         onCloseRef.current = onClose;
     }, [onClose]);
     React.useEffect(() => {
-        if (typeof max === 'number' && toasts.length > max)
+        if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {
             onCloseRef.current(toasts[0].key);
+        }
     }, [toasts, max]);
     // Clean up refs only after exit animation completes (via onExited callback)
     const handleExited = React.useCallback((key) => {
@@ -53,7 +54,7 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
                     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 })));
+                React__default.default.createElement(Toast.Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: onClose ? () => onClose(toast.key) : undefined, ...toast })));
         }))), document.body);
 };
 

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

@@ -1 +1 @@
-{"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":"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"}
+{"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) {\n      onCloseRef.current(toasts[0].key);\n    }\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 ? () => onClose(toast.key) : undefined}\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":"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"}

package/dist/components/ToastsLayout/ToastsLayout.js

@@ -18,8 +18,9 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         onCloseRef.current = onClose;
     }, [onClose]);
     useEffect(() => {
-        if (typeof max === 'number' && toasts.length > max)
+        if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {
             onCloseRef.current(toasts[0].key);
+        }
     }, [toasts, max]);
     // Clean up refs only after exit animation completes (via onExited callback)
     const handleExited = useCallback((key) => {
@@ -47,7 +48,7 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
                     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 })));
+                React__default.createElement(Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: onClose ? () => onClose(toast.key) : undefined, ...toast })));
         }))), document.body);
 };
 

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

@@ -1 +1 @@
-{"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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"}
+{"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) {\n      onCloseRef.current(toasts[0].key);\n    }\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 ? () => onClose(toast.key) : undefined}\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/components/Toast.cjs

@@ -38,10 +38,10 @@ const generateClassNames = (prefix) => ({
     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.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
-const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
+const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
     return (React__default.default.createElement(FlexRow.FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([
@@ -55,13 +55,13 @@ const Toast = React__default.default.forwardRef(({ className, e2eClassName, type
         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(Action.Action, { variant: "flat", 
+        onClose && (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 { 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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"}
+{"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 notification bar with a coloured icon, message text, and optional call-to-action.\n * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last = false, 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        {onClose && (\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        )}\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,12 +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.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
 export declare const Toast: React.ForwardRefExoticComponent<Omit<import("../types").Notification, "key"> & {
     className?: string | undefined;
     e2eClassName?: string | undefined;
-    last: boolean;
+    last?: boolean | undefined;
     minWidth?: string | undefined;
-    onClose: () => void;
+    onClose?: (() => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -32,10 +32,10 @@ const generateClassNames = (prefix) => ({
     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.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
-const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
+const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
     return (React__default.createElement(FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames([
@@ -49,13 +49,13 @@ const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSl
         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(Action, { variant: "flat", 
+        onClose && (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 { 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":"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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 notification bar with a coloured icon, message text, and optional call-to-action.\n * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last = false, 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        {onClose && (\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        )}\n      </FlexRow>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","styles"],"mappings":"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"}

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

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

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

@@ -11,17 +11,20 @@ export type ToastType = Record<ToastTypes, {
 export type ToastPropTypes = Omit<Notification, 'key'> & {
     className?: string;
     e2eClassName?: string;
-    last: boolean;
+    last?: boolean;
     minWidth?: string;
-    onClose: () => void;
+    onClose?: () => void;
 };
+/** Public-facing props for standalone `<Toast>` usage. */
+export type ToastProps = Omit<ToastPropTypes, 'last' | 'minWidth' | 'e2eClassName'>;
 export type ToastsLayoutPropTypes = {
     className?: string;
     e2eClassName?: string;
     toasts: Notification[];
     minWidth?: number | string;
+    /** Maximum number of visible toasts. Excess toasts are evicted via `onClose`. Has no effect when `onClose` is not provided. */
     max?: number | null;
-    onClose: (key: string) => void;
+    onClose?: (key: string) => void;
 };
 export type ClassNamesReturnPayload = {
     container?: string;

package/dist/components/index.d.ts

@@ -34,6 +34,7 @@ export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';
+export type { ImageProps } from './Image';
 export { InputAffix } from './InputAffix';
 export { InputGroup, type InputGroupProps } from './InputGroup';
 export { LegacyDataTable } from './LegacyDataTable';
@@ -62,7 +63,7 @@ export { Tag } from './Tag';
 export { Text } from './Text';
 export type { TextProps, TextVariant, ValidTextTag } from './Text';
 export { TextField, type TextFieldType } from './TextField';
-export { ToastsLayout, type Notification, type ToastsLayoutPropTypes } from './ToastsLayout';
+export { Toast, ToastsLayout, type Notification, type ToastProps, type ToastsLayoutPropTypes } from './ToastsLayout';
 export { Toggle } from './Toggle';
 export { ToggleButton } from './ToggleButton';
 export { Tooltip } from './Tooltip';

package/dist/index.cjs

@@ -71,6 +71,7 @@ var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
 var index$3 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
+var Toast = require('./components/ToastsLayout/components/Toast.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
 var Tooltip = require('./components/Tooltip/Tooltip.cjs');
@@ -429,6 +430,7 @@ exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
 exports.TextField = index$3.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
+exports.Toast = Toast.Toast;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
 exports.Tooltip = Tooltip.Tooltip;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -69,6 +69,7 @@ export { Tag } from './components/Tag/Tag.js';
 export { Text } from './components/Text/Text.js';
 export { TextField } from './components/TextField/index.js';
 export { ToastsLayout } from './components/ToastsLayout/ToastsLayout.js';
+export { Toast } from './components/ToastsLayout/components/Toast.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { ToggleButton } from './components/ToggleButton/ToggleButton.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/theme/modules/colors.cjs

@@ -12,6 +12,9 @@ const colors = {
             dark: '#3878A2',
             darkest: '#1A384B',
         },
+        /**
+         * @deprecated
+         */
         peach: {
             lightest: '#FDECE9',
             light: '#F8B2A9',

package/dist/theme/modules/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs","sources":["../../../src/theme/modules/colors.ts"],"sourcesContent":["export type ColourPalette = {\n  lightest: string;\n  light: string;\n  base: string;\n  dark: string;\n  darkest: string;\n};\n\nexport const colors = {\n  /**\n   * @deprecated\n   * Old brand colour scheme for legacy app. Use secondary colours instead */\n  brand: {\n    blue: {\n      lightest: '#E4F0F9',\n      light: '#93C6E8',\n      base: '#4CA1D9',\n      dark: '#3878A2',\n      darkest: '#1A384B',\n    },\n    peach: {\n      lightest: '#FDECE9',\n      light: '#F8B2A9',\n      base: '#F48070',\n      dark: '#B65F53',\n      darkest: '#562D27',\n    },\n  },\n  neutral: {\n    ink: {\n      lightest: '#959FA8',\n      light: '#637381',\n      base: '#37424D',\n      dark: '#1B2126',\n    },\n    grey: {\n      lightest: '#FAFAFB',\n      light: '#F2F3F5',\n      base: '#DFE3E8',\n      dark: '#CDD1D5',\n    },\n    greyBlue: {\n      lightest: '#AAC5D8',\n      light: '#558BB1',\n      base: '#406885',\n      dark: '#1E313E',\n    },\n  },\n  secondary: {\n    red: {\n      lightest: '#FDEEEE',\n      light: '#F7BCBC',\n      base: '#EB5757',\n      dark: '#A53D3D',\n      darkest: '#5E2323',\n    },\n    yellow: {\n      lightest: '#FFF6D9',\n      light: '#FFE999',\n      base: '#FFC900',\n      dark: '#BF9600',\n      darkest: '#594600',\n    },\n    green: {\n      lightest: '#E9F7EF',\n      light: '#BEE7CF',\n      base: '#27AE60',\n      dark: '#1B7A43',\n      darkest: '#104626',\n    },\n    lime: {\n      lightest: '#F6FAEB',\n      light: '#DBEBAE',\n      base: '#A5CD35',\n      dark: '#7B9927',\n      darkest: '#394712',\n    },\n    teal: {\n      lightest: '#E5F8F5',\n      light: '#99E5D7',\n      base: '#00BD9A',\n      dark: '#00715C',\n      darkest: '#00392E',\n    },\n    aqua: {\n      lightest: '#EEFAFE',\n      light: '#BBEBFA',\n      base: '#56CCF2',\n      dark: '#3C8FA9',\n      darkest: '#225261',\n    },\n    purple: {\n      lightest: '#F6EFFC',\n      light: '#D9C0F1',\n      base: '#A162DD',\n      dark: '#694090',\n      darkest: '#38224D',\n    },\n    blue: {\n      lightest: '#D9EBF8',\n      light: '#80BCE8',\n      base: '#0072C6',\n      dark: '#005A9C',\n      darkest: '#003053',\n    },\n    pink: {\n      lightest: '#FFF1FC',\n      light: '#FFC7F3',\n      base: '#FFA3EB',\n      dark: '#BF7AB0',\n      darkest: '#593852',\n    },\n    orange: {\n      lightest: '#FEF5ED',\n      light: '#FAD6B7',\n      base: '#F2994A',\n      dark: '#9D6330',\n      darkest: '#613D1E',\n    },\n  },\n  system: {\n    scrollbar: {\n      thumb: 'rgba(99, 115, 129, .5)',\n      background: 'transparent',\n    },\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"colors.cjs","sources":["../../../src/theme/modules/colors.ts"],"sourcesContent":["export type ColourPalette = {\n  lightest: string;\n  light: string;\n  base: string;\n  dark: string;\n  darkest: string;\n};\n\nexport const colors = {\n  /**\n   * @deprecated\n   * Old brand colour scheme for legacy app. Use secondary colours instead */\n  brand: {\n    blue: {\n      lightest: '#E4F0F9',\n      light: '#93C6E8',\n      base: '#4CA1D9',\n      dark: '#3878A2',\n      darkest: '#1A384B',\n    },\n    /**\n     * @deprecated\n     */\n    peach: {\n      lightest: '#FDECE9',\n      light: '#F8B2A9',\n      base: '#F48070',\n      dark: '#B65F53',\n      darkest: '#562D27',\n    },\n  },\n  neutral: {\n    ink: {\n      lightest: '#959FA8',\n      light: '#637381',\n      base: '#37424D',\n      dark: '#1B2126',\n    },\n    grey: {\n      lightest: '#FAFAFB',\n      light: '#F2F3F5',\n      base: '#DFE3E8',\n      dark: '#CDD1D5',\n    },\n    greyBlue: {\n      lightest: '#AAC5D8',\n      light: '#558BB1',\n      base: '#406885',\n      dark: '#1E313E',\n    },\n  },\n  secondary: {\n    red: {\n      lightest: '#FDEEEE',\n      light: '#F7BCBC',\n      base: '#EB5757',\n      dark: '#A53D3D',\n      darkest: '#5E2323',\n    },\n    yellow: {\n      lightest: '#FFF6D9',\n      light: '#FFE999',\n      base: '#FFC900',\n      dark: '#BF9600',\n      darkest: '#594600',\n    },\n    green: {\n      lightest: '#E9F7EF',\n      light: '#BEE7CF',\n      base: '#27AE60',\n      dark: '#1B7A43',\n      darkest: '#104626',\n    },\n    lime: {\n      lightest: '#F6FAEB',\n      light: '#DBEBAE',\n      base: '#A5CD35',\n      dark: '#7B9927',\n      darkest: '#394712',\n    },\n    teal: {\n      lightest: '#E5F8F5',\n      light: '#99E5D7',\n      base: '#00BD9A',\n      dark: '#00715C',\n      darkest: '#00392E',\n    },\n    aqua: {\n      lightest: '#EEFAFE',\n      light: '#BBEBFA',\n      base: '#56CCF2',\n      dark: '#3C8FA9',\n      darkest: '#225261',\n    },\n    purple: {\n      lightest: '#F6EFFC',\n      light: '#D9C0F1',\n      base: '#A162DD',\n      dark: '#694090',\n      darkest: '#38224D',\n    },\n    blue: {\n      lightest: '#D9EBF8',\n      light: '#80BCE8',\n      base: '#0072C6',\n      dark: '#005A9C',\n      darkest: '#003053',\n    },\n    pink: {\n      lightest: '#FFF1FC',\n      light: '#FFC7F3',\n      base: '#FFA3EB',\n      dark: '#BF7AB0',\n      darkest: '#593852',\n    },\n    orange: {\n      lightest: '#FEF5ED',\n      light: '#FAD6B7',\n      base: '#F2994A',\n      dark: '#9D6330',\n      darkest: '#613D1E',\n    },\n  },\n  system: {\n    scrollbar: {\n      thumb: 'rgba(99, 115, 129, .5)',\n      background: 'transparent',\n    },\n  },\n};\n"],"names":[],"mappings":";;AAQO,MAAM,MAAM,GAAG;AACpB;;AAE2E;AAC3E,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD;;AAEG;AACH,QAAA,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,EAAE;AACH,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,EAAE;AACH,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,UAAU,EAAE,aAAa;AAC1B,SAAA;AACF,KAAA;;;;;"}

package/dist/theme/modules/colors.d.ts

@@ -17,6 +17,9 @@ export declare const colors: {
             dark: string;
             darkest: string;
         };
+        /**
+         * @deprecated
+         */
         peach: {
             lightest: string;
             light: string;

package/dist/theme/modules/colors.js

@@ -10,6 +10,9 @@ const colors = {
             dark: '#3878A2',
             darkest: '#1A384B',
         },
+        /**
+         * @deprecated
+         */
         peach: {
             lightest: '#FDECE9',
             light: '#F8B2A9',

package/dist/theme/modules/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../../src/theme/modules/colors.ts"],"sourcesContent":["export type ColourPalette = {\n  lightest: string;\n  light: string;\n  base: string;\n  dark: string;\n  darkest: string;\n};\n\nexport const colors = {\n  /**\n   * @deprecated\n   * Old brand colour scheme for legacy app. Use secondary colours instead */\n  brand: {\n    blue: {\n      lightest: '#E4F0F9',\n      light: '#93C6E8',\n      base: '#4CA1D9',\n      dark: '#3878A2',\n      darkest: '#1A384B',\n    },\n    peach: {\n      lightest: '#FDECE9',\n      light: '#F8B2A9',\n      base: '#F48070',\n      dark: '#B65F53',\n      darkest: '#562D27',\n    },\n  },\n  neutral: {\n    ink: {\n      lightest: '#959FA8',\n      light: '#637381',\n      base: '#37424D',\n      dark: '#1B2126',\n    },\n    grey: {\n      lightest: '#FAFAFB',\n      light: '#F2F3F5',\n      base: '#DFE3E8',\n      dark: '#CDD1D5',\n    },\n    greyBlue: {\n      lightest: '#AAC5D8',\n      light: '#558BB1',\n      base: '#406885',\n      dark: '#1E313E',\n    },\n  },\n  secondary: {\n    red: {\n      lightest: '#FDEEEE',\n      light: '#F7BCBC',\n      base: '#EB5757',\n      dark: '#A53D3D',\n      darkest: '#5E2323',\n    },\n    yellow: {\n      lightest: '#FFF6D9',\n      light: '#FFE999',\n      base: '#FFC900',\n      dark: '#BF9600',\n      darkest: '#594600',\n    },\n    green: {\n      lightest: '#E9F7EF',\n      light: '#BEE7CF',\n      base: '#27AE60',\n      dark: '#1B7A43',\n      darkest: '#104626',\n    },\n    lime: {\n      lightest: '#F6FAEB',\n      light: '#DBEBAE',\n      base: '#A5CD35',\n      dark: '#7B9927',\n      darkest: '#394712',\n    },\n    teal: {\n      lightest: '#E5F8F5',\n      light: '#99E5D7',\n      base: '#00BD9A',\n      dark: '#00715C',\n      darkest: '#00392E',\n    },\n    aqua: {\n      lightest: '#EEFAFE',\n      light: '#BBEBFA',\n      base: '#56CCF2',\n      dark: '#3C8FA9',\n      darkest: '#225261',\n    },\n    purple: {\n      lightest: '#F6EFFC',\n      light: '#D9C0F1',\n      base: '#A162DD',\n      dark: '#694090',\n      darkest: '#38224D',\n    },\n    blue: {\n      lightest: '#D9EBF8',\n      light: '#80BCE8',\n      base: '#0072C6',\n      dark: '#005A9C',\n      darkest: '#003053',\n    },\n    pink: {\n      lightest: '#FFF1FC',\n      light: '#FFC7F3',\n      base: '#FFA3EB',\n      dark: '#BF7AB0',\n      darkest: '#593852',\n    },\n    orange: {\n      lightest: '#FEF5ED',\n      light: '#FAD6B7',\n      base: '#F2994A',\n      dark: '#9D6330',\n      darkest: '#613D1E',\n    },\n  },\n  system: {\n    scrollbar: {\n      thumb: 'rgba(99, 115, 129, .5)',\n      background: 'transparent',\n    },\n  },\n};\n"],"names":[],"mappings":"AAQO,MAAM,MAAM,GAAG;AACpB;;AAE2E;AAC3E,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,EAAE;AACH,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,EAAE;AACH,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,UAAU,EAAE,aAAa;AAC1B,SAAA;AACF,KAAA;;;;;"}
+{"version":3,"file":"colors.js","sources":["../../../src/theme/modules/colors.ts"],"sourcesContent":["export type ColourPalette = {\n  lightest: string;\n  light: string;\n  base: string;\n  dark: string;\n  darkest: string;\n};\n\nexport const colors = {\n  /**\n   * @deprecated\n   * Old brand colour scheme for legacy app. Use secondary colours instead */\n  brand: {\n    blue: {\n      lightest: '#E4F0F9',\n      light: '#93C6E8',\n      base: '#4CA1D9',\n      dark: '#3878A2',\n      darkest: '#1A384B',\n    },\n    /**\n     * @deprecated\n     */\n    peach: {\n      lightest: '#FDECE9',\n      light: '#F8B2A9',\n      base: '#F48070',\n      dark: '#B65F53',\n      darkest: '#562D27',\n    },\n  },\n  neutral: {\n    ink: {\n      lightest: '#959FA8',\n      light: '#637381',\n      base: '#37424D',\n      dark: '#1B2126',\n    },\n    grey: {\n      lightest: '#FAFAFB',\n      light: '#F2F3F5',\n      base: '#DFE3E8',\n      dark: '#CDD1D5',\n    },\n    greyBlue: {\n      lightest: '#AAC5D8',\n      light: '#558BB1',\n      base: '#406885',\n      dark: '#1E313E',\n    },\n  },\n  secondary: {\n    red: {\n      lightest: '#FDEEEE',\n      light: '#F7BCBC',\n      base: '#EB5757',\n      dark: '#A53D3D',\n      darkest: '#5E2323',\n    },\n    yellow: {\n      lightest: '#FFF6D9',\n      light: '#FFE999',\n      base: '#FFC900',\n      dark: '#BF9600',\n      darkest: '#594600',\n    },\n    green: {\n      lightest: '#E9F7EF',\n      light: '#BEE7CF',\n      base: '#27AE60',\n      dark: '#1B7A43',\n      darkest: '#104626',\n    },\n    lime: {\n      lightest: '#F6FAEB',\n      light: '#DBEBAE',\n      base: '#A5CD35',\n      dark: '#7B9927',\n      darkest: '#394712',\n    },\n    teal: {\n      lightest: '#E5F8F5',\n      light: '#99E5D7',\n      base: '#00BD9A',\n      dark: '#00715C',\n      darkest: '#00392E',\n    },\n    aqua: {\n      lightest: '#EEFAFE',\n      light: '#BBEBFA',\n      base: '#56CCF2',\n      dark: '#3C8FA9',\n      darkest: '#225261',\n    },\n    purple: {\n      lightest: '#F6EFFC',\n      light: '#D9C0F1',\n      base: '#A162DD',\n      dark: '#694090',\n      darkest: '#38224D',\n    },\n    blue: {\n      lightest: '#D9EBF8',\n      light: '#80BCE8',\n      base: '#0072C6',\n      dark: '#005A9C',\n      darkest: '#003053',\n    },\n    pink: {\n      lightest: '#FFF1FC',\n      light: '#FFC7F3',\n      base: '#FFA3EB',\n      dark: '#BF7AB0',\n      darkest: '#593852',\n    },\n    orange: {\n      lightest: '#FEF5ED',\n      light: '#FAD6B7',\n      base: '#F2994A',\n      dark: '#9D6330',\n      darkest: '#613D1E',\n    },\n  },\n  system: {\n    scrollbar: {\n      thumb: 'rgba(99, 115, 129, .5)',\n      background: 'transparent',\n    },\n  },\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "15.4.0",
+  "version": "15.6.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",