@veeqo/ui 13.19.0-beta-2 → 13.20.0

package/dist/components/Anchor/Anchor.cjs

@@ -3,7 +3,9 @@
 var React = require('react');
 var sizes = require('../../theme/modules/sizes.cjs');
 var urlUtils = require('./utils/urlUtils.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Anchor_module = require('./Anchor.module.scss.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
 var isExternalLink = require('./isExternalLink.cjs');
@@ -23,7 +25,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, ...rest }) => {
+const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...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
@@ -31,11 +33,15 @@ 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';
-    return (React__default.default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
+    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 },
         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 { 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;;;;"}
+{"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;;;;"}

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, ...rest }: AnchorProps) => React.JSX.Element>;
+export declare const Anchor: React.MemoExoticComponent<({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, allowedHostnames, children, target, rel, className, ...rest }: AnchorProps) => React.JSX.Element>;

package/dist/components/Anchor/Anchor.js

@@ -1,7 +1,9 @@
 import React__default from 'react';
 import { sizes } from '../../theme/modules/sizes.js';
 import { createContextAwareUrl } from './utils/urlUtils.js';
-import { AnchorMapping } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Anchor.module.scss.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';
@@ -17,7 +19,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, ...rest }) => {
+const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...rest }) => {
     // Process the URL to make it context-aware
     const processedHref = href ? createContextAwareUrl(href) : undefined;
     // Determine if link is external based on processed href
@@ -25,11 +27,15 @@ 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';
-    return (React__default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
+    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 },
         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 { 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;;;;"}
+{"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;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._anchor_1dmmh_1 {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n  outline: 0;\n  border-radius: var(--radius-base);\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n  text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  vertical-align: middle;\n  flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n  --icon-size: var(--sizes-md);\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._md_1dmmh_35 {\n  --icon-size: var(--sizes-5);\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._base_1dmmh_47 {\n  --icon-size: var(--sizes-base);\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._sm_1dmmh_59 {\n  --icon-size: var(--sizes-3);\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._inherit_1dmmh_71 {\n  font-size: inherit;\n  line-height: inherit;\n}");
+var styles = {"anchor":"_anchor_1dmmh_1","lg":"_lg_1dmmh_23","md":"_md_1dmmh_35","base":"_base_1dmmh_47","sm":"_sm_1dmmh_59","inherit":"_inherit_1dmmh_71"};
+
+module.exports = styles;
+//# sourceMappingURL=Anchor.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.module.scss.cjs","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 0 2px;\n\n  &:focus-visible {\n    outline: 0;\n    border-radius: var(--radius-base);\n    box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    text-decoration-thickness: 2px;\n  }\n\n  svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n}\n\n.lg {\n  --icon-size: var(--sizes-md);\n\n  @include text.link-large;\n}\n\n.md {\n  --icon-size: var(--sizes-5);\n\n  @include text.link-medium;\n}\n\n.base {\n  --icon-size: var(--sizes-base);\n\n  @include text.link;\n}\n\n.sm {\n  --icon-size: var(--sizes-3);\n\n  @include text.link-small;\n}\n\n.inherit {\n  font-size: inherit;\n  line-height: inherit;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,m1EAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._anchor_1dmmh_1 {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n  outline: 0;\n  border-radius: var(--radius-base);\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n  text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  vertical-align: middle;\n  flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n  --icon-size: var(--sizes-md);\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._md_1dmmh_35 {\n  --icon-size: var(--sizes-5);\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._base_1dmmh_47 {\n  --icon-size: var(--sizes-base);\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._sm_1dmmh_59 {\n  --icon-size: var(--sizes-3);\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._inherit_1dmmh_71 {\n  font-size: inherit;\n  line-height: inherit;\n}");
+var styles = {"anchor":"_anchor_1dmmh_1","lg":"_lg_1dmmh_23","md":"_md_1dmmh_35","base":"_base_1dmmh_47","sm":"_sm_1dmmh_59","inherit":"_inherit_1dmmh_71"};
+
+export { styles as default };
+//# sourceMappingURL=Anchor.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.module.scss.js","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 0 2px;\n\n  &:focus-visible {\n    outline: 0;\n    border-radius: var(--radius-base);\n    box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    text-decoration-thickness: 2px;\n  }\n\n  svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    vertical-align: middle;\n    flex-shrink: 0;\n  }\n}\n\n.lg {\n  --icon-size: var(--sizes-md);\n\n  @include text.link-large;\n}\n\n.md {\n  --icon-size: var(--sizes-5);\n\n  @include text.link-medium;\n}\n\n.base {\n  --icon-size: var(--sizes-base);\n\n  @include text.link;\n}\n\n.sm {\n  --icon-size: var(--sizes-3);\n\n  @include text.link-small;\n}\n\n.inherit {\n  font-size: inherit;\n  line-height: inherit;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,m1EAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/dist/components/SystemBanner/SystemBanner.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var Text = require('../Text/Text.cjs');
+var Anchor = require('../Anchor/Anchor.cjs');
+var Button = require('../Button/Button.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var InfoFillIcon = require('../../icons/design-system/components/InfoFillIcon.cjs');
+var WarningIcon = require('../../icons/design-system/components/WarningIcon.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var SystemBanner_module = require('./SystemBanner.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const IconMap = {
+    error: CriticalIcon.ReactComponent,
+    warning: WarningIcon.ReactComponent,
+    default: InfoFillIcon.ReactComponent,
+};
+const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
+    const Icon = IconMap[variant];
+    return (React__default.default.createElement(FlexRow.FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([SystemBanner_module.banner, SystemBanner_module[variant], className]), ...divProps },
+        React__default.default.createElement(FlexRow.FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+            React__default.default.createElement(Icon, { role: "presentation" }),
+            React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
+                React__default.default.createElement(Text.Text, { variant: "bodyBold" }, message),
+                linkText && linkHref && (React__default.default.createElement(Anchor.Anchor, { href: linkHref, size: "base" }, linkText)))),
+        onClose && (React__default.default.createElement(Button.Button, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: SystemBanner_module.closeButton }))));
+};
+
+exports.SystemBanner = SystemBanner;
+//# sourceMappingURL=SystemBanner.cjs.map

package/dist/components/SystemBanner/SystemBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemBanner.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { IconComponent } from 'src/icons/types';\nimport { Text } from '../Text';\nimport { Anchor } from '../Anchor';\nimport { Button } from '../Button';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { CriticalIcon, WarningIcon, InfoFillIcon, CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n  error: CriticalIcon,\n  warning: WarningIcon,\n  default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n  variant = 'default',\n  message,\n  linkText,\n  linkHref,\n  onClose,\n  className,\n  ...divProps\n}: SystemBannerProps) => {\n  const Icon = IconMap[variant];\n\n  return (\n    <FlexRow\n      role=\"alert\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flexWrap=\"nowrap\"\n      className={buildClassnames([styles.banner, styles[variant], className])}\n      {...divProps}\n    >\n      <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n        <Icon role=\"presentation\" />\n        <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n          <Text variant=\"bodyBold\">{message}</Text>\n          {linkText && linkHref && (\n            <Anchor href={linkHref} size=\"base\">\n              {linkText}\n            </Anchor>\n          )}\n        </FlexRow>\n      </FlexRow>\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={styles.closeButton}\n        />\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["CriticalIcon","WarningIcon","InfoFillIcon","React","FlexRow","buildClassnames","styles","Text","Anchor","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAEA,2BAAY;AACnB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,OAAO,EAAEC,2BAAY;CACtB;AAEY,MAAA,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAM,CAAC,MAAM,EAAEA,mBAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,EAAA,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAG,CAAA;AAC5B,YAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAD,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBJ,sBAAC,CAAA,aAAA,CAAAK,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNL,sBAAC,CAAA,aAAA,CAAAM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAC,CAAA,aAAA,CAAAO,wBAAS,EAAG,IAAA,CAAA,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAEJ,mBAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}

package/dist/components/SystemBanner/SystemBanner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SystemBannerProps } from './types';
+export declare const SystemBanner: ({ variant, message, linkText, linkHref, onClose, className, ...divProps }: SystemBannerProps) => React.JSX.Element;

package/dist/components/SystemBanner/SystemBanner.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Text } from '../Text/Text.js';
+import { Anchor } from '../Anchor/Anchor.js';
+import { Button } from '../Button/Button.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as InfoFillIcon } from '../../icons/design-system/components/InfoFillIcon.js';
+import { ReactComponent as WarningIcon } from '../../icons/design-system/components/WarningIcon.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './SystemBanner.module.scss.js';
+
+const IconMap = {
+    error: CriticalIcon,
+    warning: WarningIcon,
+    default: InfoFillIcon,
+};
+const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
+    const Icon = IconMap[variant];
+    return (React__default.createElement(FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames([styles.banner, styles[variant], className]), ...divProps },
+        React__default.createElement(FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+            React__default.createElement(Icon, { role: "presentation" }),
+            React__default.createElement(FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
+                React__default.createElement(Text, { variant: "bodyBold" }, message),
+                linkText && linkHref && (React__default.createElement(Anchor, { href: linkHref, size: "base" }, linkText)))),
+        onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: styles.closeButton }))));
+};
+
+export { SystemBanner };
+//# sourceMappingURL=SystemBanner.js.map

package/dist/components/SystemBanner/SystemBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemBanner.js","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { IconComponent } from 'src/icons/types';\nimport { Text } from '../Text';\nimport { Anchor } from '../Anchor';\nimport { Button } from '../Button';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { CriticalIcon, WarningIcon, InfoFillIcon, CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n  error: CriticalIcon,\n  warning: WarningIcon,\n  default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n  variant = 'default',\n  message,\n  linkText,\n  linkHref,\n  onClose,\n  className,\n  ...divProps\n}: SystemBannerProps) => {\n  const Icon = IconMap[variant];\n\n  return (\n    <FlexRow\n      role=\"alert\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flexWrap=\"nowrap\"\n      className={buildClassnames([styles.banner, styles[variant], className])}\n      {...divProps}\n    >\n      <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n        <Icon role=\"presentation\" />\n        <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n          <Text variant=\"bodyBold\">{message}</Text>\n          {linkText && linkHref && (\n            <Anchor href={linkHref} size=\"base\">\n              {linkText}\n            </Anchor>\n          )}\n        </FlexRow>\n      </FlexRow>\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={styles.closeButton}\n        />\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,OAAO,EAAE,YAAY;CACtB;AAEY,MAAA,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAG,CAAA;AAC5B,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBA,cAAC,CAAA,aAAA,CAAA,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._banner_vx0y5_1 {\n  padding: var(--sizes-sm);\n  height: var(--sizes-xl);\n}\n\n._banner_vx0y5_1 span,\n._banner_vx0y5_1 svg,\n._banner_vx0y5_1 a {\n  color: var(--banner-text-color);\n}\n\n._closeButton_vx0y5_12 {\n  margin-left: auto;\n}\n\n._default_vx0y5_16 {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-blue-base);\n}\n._default_vx0y5_16 ._closeButton_vx0y5_12:hover,\n._default_vx0y5_16 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_vx0y5_25 {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-red-dark);\n}\n._error_vx0y5_25 ._closeButton_vx0y5_12:hover,\n._error_vx0y5_25 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_vx0y5_34 {\n  --banner-text-color: var(--colors-neutral-ink-base);\n  background-color: var(--colors-secondary-yellow-base);\n}\n._warning_vx0y5_34 ._closeButton_vx0y5_12:hover,\n._warning_vx0y5_34 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
+var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
+
+module.exports = styles;
+//# sourceMappingURL=SystemBanner.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SystemBanner.module.scss.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n  padding: var(--sizes-sm);\n  height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n  color: var(--banner-text-color);\n}\n\n.closeButton {\n  margin-left: auto;\n}\n\n.default {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-blue-base);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, white 15%, transparent);\n  }\n}\n\n.error {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-red-dark);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, white 15%, transparent);\n  }\n}\n\n.warning {\n  --banner-text-color: var(--colors-neutral-ink-base);\n  background-color: var(--colors-secondary-yellow-base);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qsCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._banner_vx0y5_1 {\n  padding: var(--sizes-sm);\n  height: var(--sizes-xl);\n}\n\n._banner_vx0y5_1 span,\n._banner_vx0y5_1 svg,\n._banner_vx0y5_1 a {\n  color: var(--banner-text-color);\n}\n\n._closeButton_vx0y5_12 {\n  margin-left: auto;\n}\n\n._default_vx0y5_16 {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-blue-base);\n}\n._default_vx0y5_16 ._closeButton_vx0y5_12:hover,\n._default_vx0y5_16 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_vx0y5_25 {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-red-dark);\n}\n._error_vx0y5_25 ._closeButton_vx0y5_12:hover,\n._error_vx0y5_25 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_vx0y5_34 {\n  --banner-text-color: var(--colors-neutral-ink-base);\n  background-color: var(--colors-secondary-yellow-base);\n}\n._warning_vx0y5_34 ._closeButton_vx0y5_12:hover,\n._warning_vx0y5_34 ._closeButton_vx0y5_12:focus-visible {\n  background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
+var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
+
+export { styles as default };
+//# sourceMappingURL=SystemBanner.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SystemBanner.module.scss.js","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n  padding: var(--sizes-sm);\n  height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n  color: var(--banner-text-color);\n}\n\n.closeButton {\n  margin-left: auto;\n}\n\n.default {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-blue-base);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, white 15%, transparent);\n  }\n}\n\n.error {\n  --banner-text-color: var(--colors-neutral-grey-lightest);\n  background-color: var(--colors-secondary-red-dark);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, white 15%, transparent);\n  }\n}\n\n.warning {\n  --banner-text-color: var(--colors-neutral-ink-base);\n  background-color: var(--colors-secondary-yellow-base);\n\n  .closeButton:hover,\n  .closeButton:focus-visible {\n    background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qsCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,2 @@
+export { SystemBanner } from './SystemBanner';
+export type { SystemBannerProps, SystemBannerVariant } from './types';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type SystemBannerVariant = 'default' | 'error' | 'warning';
+export type SystemBannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: SystemBannerVariant;
+    message: string;
+    linkText?: string;
+    linkHref?: string;
+    onClose?: () => void;
+};

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -3,38 +3,21 @@
 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);
 
-/**
- * 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, }) => {
+const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
     React.useEffect(() => {
-        if (max && toasts.length > max) {
-            onClose(toasts[0].id);
-        }
+        if (max && toasts.length > max)
+            onClose(toasts[0].key);
     }, [toasts, max, onClose]);
-    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);
+    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);
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

@@ -1,16 +1,3 @@
 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,34 +1,17 @@
 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';
 
-/**
- * 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, }) => {
+const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
     useEffect(() => {
-        if (max && toasts.length > max) {
-            onClose(toasts[0].id);
-        }
+        if (max && toasts.length > max)
+            onClose(toasts[0].key);
     }, [toasts, max, onClose]);
-    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);
+    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);
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

@@ -1,37 +1,52 @@
 'use strict';
 
 var React = require('react');
-var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
-var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
-var Text = require('../../Text/Text.cjs');
+var colors = require('../../../theme/modules/colors.cjs');
+var styled = require('./styled.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 toast_module = require('./toast.module.scss.cjs');
-var utils = require('./utils.cjs');
-var constants = require('./constants.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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-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" })));
+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" })));
 };
 
 exports.Toast = Toast;