@veeqo/ui 13.18.1 → 13.19.0-beta-2

package/dist/components/Anchor/Anchor.cjs

@@ -3,9 +3,7 @@
 var React = require('react');
 var sizes = require('../../theme/modules/sizes.cjs');
 var urlUtils = require('./utils/urlUtils.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var Anchor_module = require('./Anchor.module.scss.cjs');
+var styled = require('./styled.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
 var isExternalLink = require('./isExternalLink.cjs');
@@ -25,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * @param children - The content of the anchor
  * @param rest - All other standard anchor HTML attributes
  */
-const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...rest }) => {
+const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, ...rest }) => {
     // Process the URL to make it context-aware
     const processedHref = href ? urlUtils.createContextAwareUrl(href) : undefined;
     // Determine if link is external based on processed href
@@ -33,15 +31,11 @@ const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', h
     // Set security attributes for external links if not given in props
     const secureTarget = target || (isExternal ? '_blank' : undefined);
     const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
+    // Lookup the appropriate styled component based on variant
+    const AnchorComponent = styled.AnchorMapping[variant];
     // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)
     const shouldShowExternalLinkIcon = (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';
-    const classNames = buildClassnames.buildClassnames([
-        variant !== 'unstyled' && Anchor_module.anchor,
-        variant === 'inherit' && Anchor_module.inherit,
-        variant !== 'unstyled' && Anchor_module[size],
-        className,
-    ]);
-    return (React__default.default.createElement("a", { href: processedHref, target: secureTarget, rel: secureRel, className: classNames, ...rest },
+    return (React__default.default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
         leftIconSlot,
         showHelpIcon && !leftIconSlot && (React__default.default.createElement(HelpIcon.ReactComponent, { role: "presentation", "data-testid": "help-icon", style: { marginRight: sizes.sizes.xs } })),
         children,

package/dist/components/Anchor/Anchor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n  ({\n    variant = 'base',\n    size = 'base',\n    href,\n    showHelpIcon = false,\n    leftIconSlot = null,\n    hideExternalLinkIcon = false,\n    allowedHostnames = [],\n    children,\n    target,\n    rel,\n    className,\n    ...rest\n  }: AnchorProps) => {\n    // Process the URL to make it context-aware\n    const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n    // Determine if link is external based on processed href\n    const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n    // Set security attributes for external links if not given in props\n    const secureTarget = target || (isExternal ? '_blank' : undefined);\n    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n    // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n    const shouldShowExternalLinkIcon =\n      (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n    const classNames = buildClassnames([\n      variant !== 'unstyled' && styles.anchor,\n      variant === 'inherit' && styles.inherit,\n      variant !== 'unstyled' && styles[size],\n      className,\n    ]);\n\n    return (\n      <a\n        href={processedHref}\n        target={secureTarget}\n        rel={secureRel}\n        className={classNames}\n        {...rest}\n      >\n        {leftIconSlot}\n        {showHelpIcon && !leftIconSlot && (\n          <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n        )}\n\n        {children}\n        {shouldShowExternalLinkIcon && (\n          <LaunchIcon\n            role=\"presentation\"\n            data-testid=\"external-icon\"\n            style={{ marginLeft: sizes.xs }}\n          />\n        )}\n      </a>\n    );\n  },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","buildClassnames","styles","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAIC,aAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAIA,aAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAIA,aAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEJ,sBACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACK,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBN,sBAAA,CAAA,aAAA,CAACO,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACC;AAER,CAAC;;;;"}
+{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { AnchorMapping } from './styled';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n  ({\n    variant = 'base',\n    size = 'base',\n    href,\n    showHelpIcon = false,\n    leftIconSlot = null,\n    hideExternalLinkIcon = false,\n    allowedHostnames = [],\n    children,\n    target,\n    rel,\n    ...rest\n  }: AnchorProps) => {\n    // Process the URL to make it context-aware\n    const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n    // Determine if link is external based on processed href\n    const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n    // Set security attributes for external links if not given in props\n    const secureTarget = target || (isExternal ? '_blank' : undefined);\n    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n    // Lookup the appropriate styled component based on variant\n    const AnchorComponent = AnchorMapping[variant];\n\n    // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n    const shouldShowExternalLinkIcon =\n      (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n    return (\n      <AnchorComponent\n        href={processedHref}\n        target={secureTarget}\n        rel={secureRel}\n        size={size}\n        {...rest}\n      >\n        {leftIconSlot}\n        {showHelpIcon && !leftIconSlot && (\n          <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n        )}\n\n        {children}\n        {shouldShowExternalLinkIcon && (\n          <LaunchIcon\n            role=\"presentation\"\n            data-testid=\"external-icon\"\n            style={{ marginLeft: sizes.xs }}\n          />\n        )}\n      </AnchorComponent>\n    );\n  },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","AnchorMapping","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;AAWA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,eAAe,GAAGC,oBAAa,CAAC,OAAO,CAAC;;AAG9C,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,QACEH,qCAAC,eAAe,EAAA,EACd,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,KACN,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACI,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBL,sBAAA,CAAA,aAAA,CAACM,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACe;AAEtB,CAAC;;;;"}

package/dist/components/Anchor/Anchor.d.ts

@@ -11,4 +11,4 @@ import { AnchorProps } from './types';
  * @param children - The content of the anchor
  * @param rest - All other standard anchor HTML attributes
  */
-export declare const Anchor: React.MemoExoticComponent<({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, allowedHostnames, children, target, rel, className, ...rest }: AnchorProps) => React.JSX.Element>;
+export declare const Anchor: React.MemoExoticComponent<({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, allowedHostnames, children, target, rel, ...rest }: AnchorProps) => React.JSX.Element>;

package/dist/components/Anchor/Anchor.js

@@ -1,9 +1,7 @@
 import React__default from 'react';
 import { sizes } from '../../theme/modules/sizes.js';
 import { createContextAwareUrl } from './utils/urlUtils.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './Anchor.module.scss.js';
+import { AnchorMapping } from './styled.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { ReactComponent as LaunchIcon } from '../../icons/design-system/components/LaunchIcon.js';
 import { isExternalLink } from './isExternalLink.js';
@@ -19,7 +17,7 @@ import { isExternalLink } from './isExternalLink.js';
  * @param children - The content of the anchor
  * @param rest - All other standard anchor HTML attributes
  */
-const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...rest }) => {
+const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, ...rest }) => {
     // Process the URL to make it context-aware
     const processedHref = href ? createContextAwareUrl(href) : undefined;
     // Determine if link is external based on processed href
@@ -27,15 +25,11 @@ const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, sho
     // Set security attributes for external links if not given in props
     const secureTarget = target || (isExternal ? '_blank' : undefined);
     const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
+    // Lookup the appropriate styled component based on variant
+    const AnchorComponent = AnchorMapping[variant];
     // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)
     const shouldShowExternalLinkIcon = (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';
-    const classNames = buildClassnames([
-        variant !== 'unstyled' && styles.anchor,
-        variant === 'inherit' && styles.inherit,
-        variant !== 'unstyled' && styles[size],
-        className,
-    ]);
-    return (React__default.createElement("a", { href: processedHref, target: secureTarget, rel: secureRel, className: classNames, ...rest },
+    return (React__default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
         leftIconSlot,
         showHelpIcon && !leftIconSlot && (React__default.createElement(HelpIcon, { role: "presentation", "data-testid": "help-icon", style: { marginRight: sizes.xs } })),
         children,

package/dist/components/Anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n  ({\n    variant = 'base',\n    size = 'base',\n    href,\n    showHelpIcon = false,\n    leftIconSlot = null,\n    hideExternalLinkIcon = false,\n    allowedHostnames = [],\n    children,\n    target,\n    rel,\n    className,\n    ...rest\n  }: AnchorProps) => {\n    // Process the URL to make it context-aware\n    const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n    // Determine if link is external based on processed href\n    const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n    // Set security attributes for external links if not given in props\n    const secureTarget = target || (isExternal ? '_blank' : undefined);\n    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n    // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n    const shouldShowExternalLinkIcon =\n      (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n    const classNames = buildClassnames([\n      variant !== 'unstyled' && styles.anchor,\n      variant === 'inherit' && styles.inherit,\n      variant !== 'unstyled' && styles[size],\n      className,\n    ]);\n\n    return (\n      <a\n        href={processedHref}\n        target={secureTarget}\n        rel={secureRel}\n        className={classNames}\n        {...rest}\n      >\n        {leftIconSlot}\n        {showHelpIcon && !leftIconSlot && (\n          <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n        )}\n\n        {children}\n        {shouldShowExternalLinkIcon && (\n          <LaunchIcon\n            role=\"presentation\"\n            data-testid=\"external-icon\"\n            style={{ marginLeft: sizes.xs }}\n          />\n        )}\n      </a>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEA,cACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACC;AAER,CAAC;;;;"}
+{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { AnchorMapping } from './styled';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n  ({\n    variant = 'base',\n    size = 'base',\n    href,\n    showHelpIcon = false,\n    leftIconSlot = null,\n    hideExternalLinkIcon = false,\n    allowedHostnames = [],\n    children,\n    target,\n    rel,\n    ...rest\n  }: AnchorProps) => {\n    // Process the URL to make it context-aware\n    const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n    // Determine if link is external based on processed href\n    const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n    // Set security attributes for external links if not given in props\n    const secureTarget = target || (isExternal ? '_blank' : undefined);\n    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n    // Lookup the appropriate styled component based on variant\n    const AnchorComponent = AnchorMapping[variant];\n\n    // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n    const shouldShowExternalLinkIcon =\n      (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n    return (\n      <AnchorComponent\n        href={processedHref}\n        target={secureTarget}\n        rel={secureRel}\n        size={size}\n        {...rest}\n      >\n        {leftIconSlot}\n        {showHelpIcon && !leftIconSlot && (\n          <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n        )}\n\n        {children}\n        {shouldShowExternalLinkIcon && (\n          <LaunchIcon\n            role=\"presentation\"\n            data-testid=\"external-icon\"\n            style={{ marginLeft: sizes.xs }}\n          />\n        )}\n      </AnchorComponent>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;AAWA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC;;AAG9C,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,QACEA,6BAAC,eAAe,EAAA,EACd,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,KACN,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACe;AAEtB,CAAC;;;;"}

package/dist/components/Anchor/styled.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var styled = require('styled-components');
+var utils = require('../../theme/utils.cjs');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const sizeMappings = {
+    lg: index.theme.sizes.md,
+    md: index.theme.sizes[5],
+    base: index.theme.sizes.base,
+    sm: index.theme.sizes[3],
+};
+const styleMappings = {
+    lg: 'linkLarge',
+    md: 'linkMedium',
+    base: 'link',
+    sm: 'linkSmall',
+};
+const UnstyledAnchor = styled__default.default.a.withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--1af0loc" }) ``;
+// Standard variant styling
+const StandardAnchor = styled__default.default(UnstyledAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--k5ndq9" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => utils.getTextStyles(index.theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${index.theme.colors.secondary.blue.dark};border-radius:${index.theme.radius.base};box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}&:hover{color:${index.theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;flex-shrink:0;}`;
+// Inherit font size and line height from parent
+const InheritAnchor = styled__default.default(StandardAnchor).withConfig({ displayName: "vui--InheritAnchor", componentId: "vui--ut8az0" }) `font-size:inherit;line-height:inherit;`;
+const AnchorMapping = {
+    base: StandardAnchor,
+    unstyled: UnstyledAnchor,
+    inherit: InheritAnchor,
+};
+
+exports.AnchorMapping = AnchorMapping;
+exports.InheritAnchor = InheritAnchor;
+exports.StandardAnchor = StandardAnchor;
+exports.UnstyledAnchor = UnstyledAnchor;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/Anchor/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled, { StyledComponent } from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorProps, AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n  size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: theme.sizes.md,\n  md: theme.sizes[5],\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: 'linkLarge',\n  md: 'linkMedium',\n  base: 'link',\n  sm: 'linkSmall',\n};\n\nexport const UnstyledAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(UnstyledAnchor)<StyledAnchorProps>`\n  display: inline-flex;\n  align-items: center;\n\n  cursor: pointer;\n  transition: color 0.1s ease;\n  text-decoration: none;\n  padding: 0 2px;\n\n  ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n  &:focus {\n    outline: 0;\n    border-color: ${theme.colors.secondary.blue.dark};\n    border-radius: ${theme.radius.base};\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  svg {\n    width: ${({ size }) => sizeMappings[size]};\n    height: ${({ size }) => sizeMappings[size]};\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n`;\n\n// Inherit font size and line height from parent\nexport const InheritAnchor = styled(StandardAnchor)<StyledAnchorProps>`\n  font-size: inherit;\n  line-height: inherit;\n`;\n\nexport const AnchorMapping: Record<\n  NonNullable<AnchorProps['variant']>,\n  StyledComponent<'a', any, StyledAnchorProps>\n> = {\n  base: StandardAnchor,\n  unstyled: UnstyledAnchor,\n  inherit: InheritAnchor,\n};\n"],"names":["theme","styled","getTextStyles"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,WAAW;CAChB;MAEY,cAAc,GAAGC,uBAAM,CAAC,CAAC;AAEtC;AACa,MAAA,cAAc,GAAGA,uBAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAShD,CAAC,EAAE,IAAI,EAAE,KAAKC,mBAAa,CAACF,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5CA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/BA,WAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAM9C;MACa,aAAa,GAAGC,uBAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA;AAKtC,MAAA,aAAa,GAGtB;AACF,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;;;;;;;;"}

package/dist/components/Anchor/styled.d.ts

@@ -0,0 +1,10 @@
+import { StyledComponent } from 'styled-components';
+import { AnchorProps, AnchorSize } from './types';
+type StyledAnchorProps = {
+    size: AnchorSize;
+};
+export declare const UnstyledAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
+export declare const StandardAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
+export declare const InheritAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
+export declare const AnchorMapping: Record<NonNullable<AnchorProps['variant']>, StyledComponent<'a', any, StyledAnchorProps>>;
+export {};

package/dist/components/Anchor/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { getTextStyles } from '../../theme/utils.js';
+import { theme } from '../../theme/index.js';
+
+const sizeMappings = {
+    lg: theme.sizes.md,
+    md: theme.sizes[5],
+    base: theme.sizes.base,
+    sm: theme.sizes[3],
+};
+const styleMappings = {
+    lg: 'linkLarge',
+    md: 'linkMedium',
+    base: 'link',
+    sm: 'linkSmall',
+};
+const UnstyledAnchor = styled.a.withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--1af0loc" }) ``;
+// Standard variant styling
+const StandardAnchor = styled(UnstyledAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--k5ndq9" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => getTextStyles(theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${theme.colors.secondary.blue.dark};border-radius:${theme.radius.base};box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}&:hover{color:${theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;flex-shrink:0;}`;
+// Inherit font size and line height from parent
+const InheritAnchor = styled(StandardAnchor).withConfig({ displayName: "vui--InheritAnchor", componentId: "vui--ut8az0" }) `font-size:inherit;line-height:inherit;`;
+const AnchorMapping = {
+    base: StandardAnchor,
+    unstyled: UnstyledAnchor,
+    inherit: InheritAnchor,
+};
+
+export { AnchorMapping, InheritAnchor, StandardAnchor, UnstyledAnchor };
+//# sourceMappingURL=styled.js.map

package/dist/components/Anchor/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled, { StyledComponent } from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorProps, AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n  size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: theme.sizes.md,\n  md: theme.sizes[5],\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: 'linkLarge',\n  md: 'linkMedium',\n  base: 'link',\n  sm: 'linkSmall',\n};\n\nexport const UnstyledAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(UnstyledAnchor)<StyledAnchorProps>`\n  display: inline-flex;\n  align-items: center;\n\n  cursor: pointer;\n  transition: color 0.1s ease;\n  text-decoration: none;\n  padding: 0 2px;\n\n  ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n  &:focus {\n    outline: 0;\n    border-color: ${theme.colors.secondary.blue.dark};\n    border-radius: ${theme.radius.base};\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  svg {\n    width: ${({ size }) => sizeMappings[size]};\n    height: ${({ size }) => sizeMappings[size]};\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n`;\n\n// Inherit font size and line height from parent\nexport const InheritAnchor = styled(StandardAnchor)<StyledAnchorProps>`\n  font-size: inherit;\n  line-height: inherit;\n`;\n\nexport const AnchorMapping: Record<\n  NonNullable<AnchorProps['variant']>,\n  StyledComponent<'a', any, StyledAnchorProps>\n> = {\n  base: StandardAnchor,\n  unstyled: UnstyledAnchor,\n  inherit: InheritAnchor,\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,WAAW;CAChB;MAEY,cAAc,GAAG,MAAM,CAAC,CAAC;AAEtC;AACa,MAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAShD,CAAC,EAAE,IAAI,EAAE,KAAK,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5C,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/B,KAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAM9C;MACa,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA;AAKtC,MAAA,aAAa,GAGtB;AACF,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -3,21 +3,38 @@
 var reactTransitionGroup = require('react-transition-group');
 var React = require('react');
 var reactDom = require('react-dom');
-var styled = require('./components/styled.cjs');
 var Toast = require('./components/Toast.cjs');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var toastsLayout_module = require('./toastsLayout.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+/**
+ * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
+ * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
+ *
+ * @example
+ * ```tsx
+ * <ToastsLayout
+ *   toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
+ *   onClose={(id) => removeToast(id)}
+ *   max={3}
+ * />
+ * ```
+ */
+const ToastsLayout = ({ e2eClassName, toasts, minWidth = '50vw', max = 3, portalTarget = document.body, onClose, }) => {
     React.useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
+        if (max && toasts.length > max) {
+            onClose(toasts[0].id);
+        }
     }, [toasts, max, onClose]);
-    return reactDom.createPortal(React__default.default.createElement(styled.ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.key, timeout: 500, classNames: "veeqo-components-toast" },
-            React__default.default.createElement(Toast.Toast, { className: className, e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
+    const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
+    const content = (React__default.default.createElement(FlexCol.FlexCol, { className: toastsLayout_module.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": containerAriaLabel },
+        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.id, timeout: 225, classNames: "veeqo-components-toast" },
+            React__default.default.createElement(Toast.Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.id), ...toast })))))));
+    return reactDom.createPortal(content, portalTarget);
 };
 
 exports.ToastsLayout = ToastsLayout;

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

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastsLayoutContainer } from './components/styled';\nimport { Toast } from './components/Toast';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <ToastsLayoutContainer direction=\"vertical\" alignX=\"center\" spacing={4}>\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.key} timeout={500} classNames=\"veeqo-components-toast\">\n            <Toast\n              className={className}\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.key)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </ToastsLayoutContainer>,\n    document.body,\n  );\n};\n"],"names":["useEffect","createPortal","React","ToastsLayoutContainer","TransitionGroup","CSSTransition","Toast"],"mappings":";;;;;;;;;;;;MAOa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAOC,qBAAY,CACjBC,sBAAC,CAAA,aAAA,CAAAC,4BAAqB,IAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAA;AACpE,QAAAD,sBAAA,CAAA,aAAA,CAACE,oCAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCF,qCAACG,kCAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;YAC9EH,sBAAC,CAAA,aAAA,CAAAI,WAAK,IACJ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAC7B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACI,EACxB,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\n/**\n * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.\n * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.\n *\n * @example\n * ```tsx\n * <ToastsLayout\n *   toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}\n *   onClose={(id) => removeToast(id)}\n *   max={3}\n * />\n * ```\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  portalTarget = document.body,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) {\n      onClose(toasts[0].id);\n    }\n  }, [toasts, max, onClose]);\n\n  const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n\n  const content = (\n    <FlexCol\n      className={styles.toastsLayoutContainer}\n      alignItems=\"center\"\n      gap={4}\n      role=\"region\"\n      aria-label={containerAriaLabel}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.id} timeout={225} classNames=\"veeqo-components-toast\">\n            <Toast\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.id)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </FlexCol>\n  );\n\n  return createPortal(content, portalTarget);\n};\n"],"names":["useEffect","React","FlexCol","styles","TransitionGroup","CSSTransition","Toast","createPortal"],"mappings":";;;;;;;;;;;;;AAQA;;;;;;;;;;;;AAYG;AACU,MAAA,YAAY,GAA8B,CAAC,EACtD,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,YAAY,GAAG,QAAQ,CAAC,IAAI,EAC5B,OAAO,GACR,KAAI;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB;KACF,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,kBAAkB,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAE5F,MAAM,OAAO,IACXC,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,kBAAkB,EAAA;AAE9B,QAAAF,sBAAA,CAAA,aAAA,CAACG,oCAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCH,qCAACI,kCAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;AAC7E,YAAAJ,sBAAA,CAAA,aAAA,CAACK,WAAK,EACJ,EAAA,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAC5B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACV,CACX;AAED,IAAA,OAAOC,qBAAY,CAAC,OAAO,EAAE,YAAY,CAAC;AAC5C;;;;"}

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

@@ -1,3 +1,16 @@
 import { FC } from 'react';
 import { ToastsLayoutPropTypes } from './types';
+/**
+ * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
+ * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
+ *
+ * @example
+ * ```tsx
+ * <ToastsLayout
+ *   toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
+ *   onClose={(id) => removeToast(id)}
+ *   max={3}
+ * />
+ * ```
+ */
 export declare const ToastsLayout: FC<ToastsLayoutPropTypes>;

package/dist/components/ToastsLayout/ToastsLayout.js

@@ -1,17 +1,34 @@
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import React__default, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { ToastsLayoutContainer } from './components/styled.js';
 import { Toast } from './components/Toast.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import styles from './toastsLayout.module.scss.js';
 
-const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+/**
+ * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
+ * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
+ *
+ * @example
+ * ```tsx
+ * <ToastsLayout
+ *   toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
+ *   onClose={(id) => removeToast(id)}
+ *   max={3}
+ * />
+ * ```
+ */
+const ToastsLayout = ({ e2eClassName, toasts, minWidth = '50vw', max = 3, portalTarget = document.body, onClose, }) => {
     useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
+        if (max && toasts.length > max) {
+            onClose(toasts[0].id);
+        }
     }, [toasts, max, onClose]);
-    return createPortal(React__default.createElement(ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.key, timeout: 500, classNames: "veeqo-components-toast" },
-            React__default.createElement(Toast, { className: className, e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
+    const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
+    const content = (React__default.createElement(FlexCol, { className: styles.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": containerAriaLabel },
+        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.id, timeout: 225, classNames: "veeqo-components-toast" },
+            React__default.createElement(Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.id), ...toast })))))));
+    return createPortal(content, portalTarget);
 };
 
 export { ToastsLayout };

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

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastsLayoutContainer } from './components/styled';\nimport { Toast } from './components/Toast';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <ToastsLayoutContainer direction=\"vertical\" alignX=\"center\" spacing={4}>\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.key} timeout={500} classNames=\"veeqo-components-toast\">\n            <Toast\n              className={className}\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.key)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </ToastsLayoutContainer>,\n    document.body,\n  );\n};\n"],"names":["React"],"mappings":";;;;;;MAOa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAO,YAAY,CACjBA,cAAC,CAAA,aAAA,CAAA,qBAAqB,IAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAA;AACpE,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCA,6BAAC,aAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;YAC9EA,cAAC,CAAA,aAAA,CAAA,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAC7B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACI,EACxB,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\n/**\n * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.\n * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.\n *\n * @example\n * ```tsx\n * <ToastsLayout\n *   toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}\n *   onClose={(id) => removeToast(id)}\n *   max={3}\n * />\n * ```\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  portalTarget = document.body,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) {\n      onClose(toasts[0].id);\n    }\n  }, [toasts, max, onClose]);\n\n  const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n\n  const content = (\n    <FlexCol\n      className={styles.toastsLayoutContainer}\n      alignItems=\"center\"\n      gap={4}\n      role=\"region\"\n      aria-label={containerAriaLabel}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.id} timeout={225} classNames=\"veeqo-components-toast\">\n            <Toast\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.id)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </FlexCol>\n  );\n\n  return createPortal(content, portalTarget);\n};\n"],"names":["React"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;AAYG;AACU,MAAA,YAAY,GAA8B,CAAC,EACtD,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,YAAY,GAAG,QAAQ,CAAC,IAAI,EAC5B,OAAO,GACR,KAAI;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB;KACF,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,kBAAkB,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAE5F,MAAM,OAAO,IACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,kBAAkB,EAAA;AAE9B,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCA,6BAAC,aAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;AAC7E,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAC5B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACV,CACX;AAED,IAAA,OAAO,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC;AAC5C;;;;"}

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

@@ -1,52 +1,37 @@
 'use strict';
 
 var React = require('react');
-var colors = require('../../../theme/modules/colors.cjs');
-var styled = require('./styled.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var Text = require('../../Text/Text.cjs');
 var buildClassnames = require('../../../utils/buildClassnames.cjs');
 var Button = require('../../Button/Button.cjs');
-var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
-var InfoIcon = require('../../../icons/design-system/components/InfoIcon.cjs');
-var MergeIcon = require('../../../icons/design-system/components/MergeIcon.cjs');
-var SuccessIcon = require('../../../icons/design-system/components/SuccessIcon.cjs');
+var toast_module = require('./toast.module.scss.cjs');
+var utils = require('./utils.cjs');
+var constants = require('./constants.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const toastTypes = {
-    info: {
-        accentColor: colors.colors.brand.blue.base,
-        icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
-    },
-    success: {
-        accentColor: colors.colors.secondary.green.base,
-        icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
-    },
-    error: {
-        accentColor: colors.colors.secondary.red.base,
-        icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
-    },
-    merge: {
-        accentColor: colors.colors.secondary.purple.base,
-        icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
-    },
-};
-const generateClassNames = (prefix) => ({
-    container: prefix ? `${prefix}-toast-container` : undefined,
-    icon: prefix ? `${prefix}-toast-icon` : undefined,
-    closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
-});
-const Toast = ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose, }) => {
-    const classNames = generateClassNames(className);
-    const e2eClassNames = generateClassNames(e2eClassName);
-    return (React__default.default.createElement(styled.Toast, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), direction: "horizontal", alignY: "center", minWidth: minWidth, last: last },
-        React__default.default.createElement(styled.IconWrap, { color: toastTypes[type].accentColor, className: buildClassnames.buildClassnames([classNames.icon, e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== undefined ? iconSlot : toastTypes[type].icon),
-        React__default.default.createElement(styled.ContentStack, { direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.default.createElement(styled.StyledText, { variant: "body" }, text),
-            cta),
-        React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+const Toast = ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }) => {
+    var _a;
+    const e2eClassNames = utils.generateToastClassNames(e2eClassName);
+    // Default to Info icon
+    const { accentColor, icon } = (_a = constants.ToastTypeConfig[type]) !== null && _a !== undefined ? _a : constants.ToastTypeConfig.info;
+    const resolvedIcon = iconSlot !== null && iconSlot !== undefined ? iconSlot : icon;
+    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
+            '--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
+            '--toast-status-color': accentColor,
+        }, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base", role: "alert" },
+        resolvedIcon && (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, resolvedIcon)),
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between" },
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "none" },
+                React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "headingSmall", as: "p" }, message),
+                subMessage && (React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "body", as: "p" }, subMessage))),
+            ctaSlot),
+        React__default.default.createElement(Button.Button, { className: buildClassnames.buildClassnames([toast_module.toastCloseButton, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.closeIcon]), variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "#fff" }), onClick: onClose, "aria-label": "Close" })));
 };
 
 exports.Toast = Toast;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { IconWrap, Toast as ToastContainer, StyledText as Text, ContentStack } from './styled';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\nexport const Toast = ({\n  className,\n  e2eClassName,\n  type,\n  iconSlot,\n  text,\n  last,\n  minWidth,\n  cta,\n  onClose,\n}: ToastPropTypes) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  return (\n    <ToastContainer\n      className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n      direction=\"horizontal\"\n      alignY=\"center\"\n      minWidth={minWidth}\n      last={last}\n    >\n      <IconWrap\n        color={toastTypes[type].accentColor}\n        className={buildClassnames([classNames.icon, e2eClassNames.icon])}\n      >\n        {iconSlot ?? toastTypes[type].icon}\n      </IconWrap>\n      <ContentStack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n        <Text variant=\"body\">{text}</Text>\n        {cta}\n      </ContentStack>\n      <Button\n        variant=\"flat\"\n        iconSlot={<CrossIcon color=\"white\" />}\n        onClick={onClose}\n        aria-label=\"Close\"\n      />\n    </ToastContainer>\n  );\n};\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","ToastContainer","buildClassnames","IconWrap","ContentStack","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;AAQA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAEA,aAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;QACnC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAC,uBAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAEF,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAE,0BAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEH,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAG,4BAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEJ,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAI,wBAAS,EAAG,IAAA,CAAA;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEW,MAAA,KAAK,GAAG,CAAC,EACpB,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,OAAO,GACQ,KAAI;AACnB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,YAAc,IACb,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,SAAA,GAAA,UAAU,CAAE,SAAS,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EAAA;AAEV,QAAAN,sBAAA,CAAA,aAAA,CAACO,eAAQ,EACP,EAAA,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,EACnC,SAAS,EAAED,+BAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EAAA,EAEhE,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CACzB;AACX,QAAAN,sBAAA,CAAA,aAAA,CAACQ,mBAAY,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AACnE,YAAAR,sBAAA,CAAA,aAAA,CAACS,iBAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,IAAI,CAAQ;AACjC,YAAA,GAAG,CACS;QACfT,sBAAC,CAAA,aAAA,CAAAU,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEV,sBAAC,CAAA,aAAA,CAAAW,wBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,gBACL,OAAO,EAAA,CAClB,CACa;AAErB;;;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n  e2eClassName,\n  type,\n  iconSlot,\n  message,\n  subMessage,\n  last,\n  minWidth,\n  ctaSlot,\n  onClose,\n}: ToastPropTypes) => {\n  const e2eClassNames = generateToastClassNames(e2eClassName);\n\n  // Default to Info icon\n  const { accentColor, icon } = ToastTypeConfig[type] ?? ToastTypeConfig.info;\n\n  const resolvedIcon = iconSlot ?? icon;\n\n  return (\n    <FlexRow\n      className={buildClassnames([styles.toastContainer, e2eClassNames?.container])}\n      alignItems=\"center\"\n      style={\n        {\n          '--toast-min-width': minWidth ?? undefined,\n          '--toast-status-color': accentColor,\n        } as React.CSSProperties\n      }\n      data-toast-last={last ?? undefined}\n      gap=\"base\"\n      role=\"alert\"\n    >\n      {resolvedIcon && (\n        <FlexRow\n          className={buildClassnames([styles.iconWrapper, e2eClassNames.icon])}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {resolvedIcon}\n        </FlexRow>\n      )}\n      <FlexRow alignItems=\"center\" flexGrow={1} justifyContent=\"space-between\">\n        <FlexCol gap=\"none\">\n          <Text className={styles.toastText} variant=\"headingSmall\" as=\"p\">\n            {message}\n          </Text>\n          {subMessage && (\n            <Text className={styles.toastText} variant=\"body\" as=\"p\">\n              {subMessage}\n            </Text>\n          )}\n        </FlexCol>\n        {ctaSlot}\n      </FlexRow>\n      <Button\n        className={buildClassnames([styles.toastCloseButton, e2eClassNames?.closeIcon])}\n        variant=\"flat\"\n        iconSlot={<CrossIcon color=\"#fff\" />}\n        onClick={onClose}\n        aria-label=\"Close\"\n      />\n    </FlexRow>\n  );\n};\n"],"names":["generateToastClassNames","ToastTypeConfig","React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;AAYa,MAAA,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,GACQ,KAAI;;AACnB,IAAA,MAAM,aAAa,GAAGA,6BAAuB,CAAC,YAAY,CAAC;;AAG3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAAC,yBAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAIA,yBAAe,CAAC,IAAI;IAE3E,MAAM,YAAY,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,IAAI;AAErC,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAC,QAAQ,EACnB,KAAK,EACH;AACE,YAAA,mBAAmB,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,SAAS;AAC1C,YAAA,sBAAsB,EAAE,WAAW;AACb,SAAA,EAAA,iBAAA,EAET,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAJ,IAAI,GAAI,SAAS,EAClC,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,YAAY,KACXH,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAEtB,EAAA,YAAY,CACL,CACX;AACD,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,OAAO,CACH;gBACN,UAAU,KACTH,sBAAC,CAAA,aAAA,CAAAK,SAAI,IAAC,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,OAAO,CACA;AACV,QAAAH,sBAAA,CAAA,aAAA,CAACM,aAAM,EACL,EAAA,SAAS,EAAEJ,+BAAe,CAAC,CAACC,YAAM,CAAC,gBAAgB,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAC/E,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,qCAACO,wBAAS,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EACpC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ToastPropTypes } from '../types';
-export declare const Toast: ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose, }: ToastPropTypes) => React.JSX.Element;
+export declare const Toast: ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }: ToastPropTypes) => React.JSX.Element;

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

@@ -1,46 +1,31 @@
 import React__default from 'react';
-import { colors } from '../../../theme/modules/colors.js';
-import { Toast as Toast$1, IconWrap, ContentStack, StyledText } from './styled.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { Text } from '../../Text/Text.js';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
 import { Button } from '../../Button/Button.js';
-import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
-import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
-import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
-import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
+import styles from './toast.module.scss.js';
+import { generateToastClassNames } from './utils.js';
+import { ToastTypeConfig } from './constants.js';
 
-const toastTypes = {
-    info: {
-        accentColor: colors.brand.blue.base,
-        icon: React__default.createElement(InfoIcon, null),
-    },
-    success: {
-        accentColor: colors.secondary.green.base,
-        icon: React__default.createElement(SuccessIcon, null),
-    },
-    error: {
-        accentColor: colors.secondary.red.base,
-        icon: React__default.createElement(AttentionIcon, null),
-    },
-    merge: {
-        accentColor: colors.secondary.purple.base,
-        icon: React__default.createElement(MergeIcon, null),
-    },
-};
-const generateClassNames = (prefix) => ({
-    container: prefix ? `${prefix}-toast-container` : undefined,
-    icon: prefix ? `${prefix}-toast-icon` : undefined,
-    closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
-});
-const Toast = ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose, }) => {
-    const classNames = generateClassNames(className);
-    const e2eClassNames = generateClassNames(e2eClassName);
-    return (React__default.createElement(Toast$1, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), direction: "horizontal", alignY: "center", minWidth: minWidth, last: last },
-        React__default.createElement(IconWrap, { color: toastTypes[type].accentColor, className: buildClassnames([classNames.icon, e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== undefined ? iconSlot : toastTypes[type].icon),
-        React__default.createElement(ContentStack, { direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.createElement(StyledText, { variant: "body" }, text),
-            cta),
-        React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+const Toast = ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }) => {
+    var _a;
+    const e2eClassNames = generateToastClassNames(e2eClassName);
+    // Default to Info icon
+    const { accentColor, icon } = (_a = ToastTypeConfig[type]) !== null && _a !== undefined ? _a : ToastTypeConfig.info;
+    const resolvedIcon = iconSlot !== null && iconSlot !== undefined ? iconSlot : icon;
+    return (React__default.createElement(FlexRow, { className: buildClassnames([styles.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
+            '--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
+            '--toast-status-color': accentColor,
+        }, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base", role: "alert" },
+        resolvedIcon && (React__default.createElement(FlexRow, { className: buildClassnames([styles.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, resolvedIcon)),
+        React__default.createElement(FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between" },
+            React__default.createElement(FlexCol, { gap: "none" },
+                React__default.createElement(Text, { className: styles.toastText, variant: "headingSmall", as: "p" }, message),
+                subMessage && (React__default.createElement(Text, { className: styles.toastText, variant: "body", as: "p" }, subMessage))),
+            ctaSlot),
+        React__default.createElement(Button, { className: buildClassnames([styles.toastCloseButton, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.closeIcon]), variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "#fff" }), onClick: onClose, "aria-label": "Close" })));
 };
 
 export { Toast };