@veeqo/ui 13.19.0-beta-2 → 13.20.0

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 { 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;;;;"}
+{"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":"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"}

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

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

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

@@ -1,31 +1,46 @@
 import React__default from 'react';
-import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
-import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
-import { Text } from '../../Text/Text.js';
+import { colors } from '../../../theme/modules/colors.js';
+import { Toast as Toast$1, IconWrap, ContentStack, StyledText } from './styled.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 styles from './toast.module.scss.js';
-import { generateToastClassNames } from './utils.js';
-import { ToastTypeConfig } from './constants.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';
 
-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" })));
+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" })));
 };
 
 export { Toast };

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { 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":["React"],"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,GAAG,uBAAuB,CAAC,YAAY,CAAC;;AAG3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAA,eAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,eAAe,CAAC,IAAI;IAE3E,MAAM,YAAY,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,IAAI;AAErC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,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,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAEtB,EAAA,YAAY,CACL,CACX;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,OAAO,CACH;gBACN,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,OAAO,CACA;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAC/E,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,6BAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EACpC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}
+{"version":3,"file":"Toast.js","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":["React","ToastContainer","Text"],"mappings":"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"}

package/dist/components/ToastsLayout/components/styled.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var styled = require('styled-components');
+var Stack = require('../../Stack/Stack.cjs');
+var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
+var Text = require('../../Text/Text.cjs');
+var index = require('../../../theme/index.cjs');
+var sizes = require('../../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
+const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
+const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+
+exports.ContentStack = ContentStack;
+exports.IconWrap = IconWrap;
+exports.StyledText = StyledText;
+exports.Toast = Toast;
+exports.ToastsLayoutContainer = ToastsLayoutContainer;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}

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

@@ -0,0 +1,10 @@
+export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
+export declare const Toast: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
+    minWidth: number | string;
+    last: boolean;
+}, never>;
+export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {
+    color: string;
+}, never>;
+export declare const ContentStack: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
+export declare const StyledText: import("styled-components").StyledComponent<"span", any, {} & import("../../Text/types").TextProps, never>;

package/dist/components/ToastsLayout/components/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Stack } from '../../Stack/Stack.js';
+import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
+import { Text } from '../../Text/Text.js';
+import { theme } from '../../../theme/index.js';
+import { sizes } from '../../../theme/modules/sizes.js';
+
+const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
+const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
+const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+
+export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}

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

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

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

@@ -2,28 +2,26 @@ import { ReactElement } from 'react';
 export declare enum ToastTypes {
     info = "info",
     error = "error",
-    warning = "warning",
     success = "success",
-    merge = "merge",
-    custom = "custom"
+    merge = "merge"
 }
 export type ToastType = Record<ToastTypes, {
     accentColor: string;
-    icon?: ReactElement;
+    icon: ReactElement;
 }>;
-export type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {
+export type ToastPropTypes = Omit<Notification, 'key'> & {
+    className?: string;
     e2eClassName?: string;
     last: boolean;
     minWidth: number | string;
     onClose: () => void;
 };
 export type ToastsLayoutPropTypes = {
+    className?: string;
     e2eClassName?: string;
     toasts: Notification[];
     minWidth?: number | string;
     max?: number | null;
-    /** Portal target element. Defaults to document.body */
-    portalTarget?: Element;
     onClose: (key: string) => void;
 };
 export type ClassNamesReturnPayload = {
@@ -32,14 +30,9 @@ export type ClassNamesReturnPayload = {
     closeIcon?: string;
 };
 export type Notification = {
-    /** Unique identifier for the toast */
-    id: string;
+    key: string;
     type: keyof typeof ToastTypes;
     iconSlot?: ReactElement;
-    /** Main message text */
-    message: string;
-    /** Optional secondary message */
-    subMessage?: string;
-    /** Optional action buttons slot */
-    ctaSlot?: React.ReactNode;
+    text: string;
+    cta?: React.ReactNode;
 };

package/dist/components/TokenProvider/TokenProvider.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var TokenProvider_module = require('./TokenProvider.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const TokenProvider = ({ theme, children }) => {
+    return (React__default.default.createElement("div", { className: TokenProvider_module[theme], style: { display: 'contents' } }, children));
+};
+
+exports.TokenProvider = TokenProvider;
+//# sourceMappingURL=TokenProvider.cjs.map

package/dist/components/TokenProvider/TokenProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './TokenProvider.module.scss';\n\nexport type ThemeType = 'default' | 'purple' | 'teal';\n\ntype TokenProviderProps = {\n  theme: ThemeType;\n  children: React.ReactNode;\n};\n\nexport const TokenProvider = ({ theme, children }: TokenProviderProps) => {\n  return (\n    <div className={styles[theme]} style={{ display: 'contents' }}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;AAUa,MAAA,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB,KAAI;IACvE,QACEA,8CAAK,SAAS,EAAEC,oBAAM,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IAC1D,QAAQ,CACL;AAEV;;;;"}

package/dist/components/TokenProvider/TokenProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ThemeType = 'default' | 'purple' | 'teal';
+type TokenProviderProps = {
+    theme: ThemeType;
+    children: React.ReactNode;
+};
+export declare const TokenProvider: ({ theme, children }: TokenProviderProps) => React.JSX.Element;
+export {};

package/dist/components/TokenProvider/TokenProvider.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import styles from './TokenProvider.module.scss.js';
+
+const TokenProvider = ({ theme, children }) => {
+    return (React__default.createElement("div", { className: styles[theme], style: { display: 'contents' } }, children));
+};
+
+export { TokenProvider };
+//# sourceMappingURL=TokenProvider.js.map

package/dist/components/TokenProvider/TokenProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.js","sources":["../../../src/components/TokenProvider/TokenProvider.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './TokenProvider.module.scss';\n\nexport type ThemeType = 'default' | 'purple' | 'teal';\n\ntype TokenProviderProps = {\n  theme: ThemeType;\n  children: React.ReactNode;\n};\n\nexport const TokenProvider = ({ theme, children }: TokenProviderProps) => {\n  return (\n    <div className={styles[theme]} style={{ display: 'contents' }}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;AAUa,MAAA,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB,KAAI;IACvE,QACEA,sCAAK,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IAC1D,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._default_1ad7m_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}");
+var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+
+module.exports = styles;
+//# sourceMappingURL=TokenProvider.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.module.scss.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4tDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._default_1ad7m_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}");
+var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+
+export { styles as default };
+//# sourceMappingURL=TokenProvider.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.module.scss.js","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4tDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,2 @@
+export { TokenProvider } from './TokenProvider';
+export type { ThemeType } from './TokenProvider';

package/dist/components/index.d.ts

@@ -53,10 +53,11 @@ export { Skeleton } from './Skeleton';
 export { Slider } from './Slider';
 export { Stack, type StackProps } from './Stack';
 export { Stepper } from './Stepper';
+export { SystemBanner, type SystemBannerProps, type SystemBannerVariant, } from './SystemBanner';
 export { Tag } from './Tag';
 export { Text } from './Text';
 export { TextField, type TextFieldType } from './TextField';
-export { ToastsLayout, type Notification, ToastTypes } from './ToastsLayout';
+export { ToastsLayout, type Notification } from './ToastsLayout';
 export { Toggle } from './Toggle';
 export { ToggleButton } from './ToggleButton';
 export { Tooltip } from './Tooltip';
@@ -72,6 +73,7 @@ export { WeightInput } from './WeightInput';
 export { Indicator } from './Indicator';
 export { SelectDropdown } from './SelectDropdown';
 export { ThemeInjector } from './ThemeInjector';
+export { TokenProvider, type ThemeType } from './TokenProvider';
 export { DataGrid, type ColumnDefinition, type RowExpansion, type RowGroupingConfiguration, type SortState, } from './DataGrid';
 export { FlexCol } from './Flex/FlexCol';
 export { FlexRow } from './Flex/FlexRow';

package/dist/hoc/index.d.ts

@@ -1,3 +1,4 @@
 export { withLabels } from './withLabels';
 export { withDeprecated } from './withDeprecated';
 export { withClassNames } from './withClassNames';
+export { withTokens } from './withTokens';

package/dist/hoc/withTokens/index.d.ts

@@ -0,0 +1,2 @@
+export { withTokens } from './withTokens';
+export type { WithTokensProps } from './withTokens';

package/dist/hoc/withTokens/withTokens.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var TokenProvider = require('../../components/TokenProvider/TokenProvider.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const withTokens = (Component) => {
+    const ComponentWithTokens = ({ theme = 'default', ...props }) => (React__default.default.createElement(TokenProvider.TokenProvider, { theme: theme },
+        React__default.default.createElement(Component, { ...props })));
+    ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;
+    return ComponentWithTokens;
+};
+
+exports.withTokens = withTokens;
+//# sourceMappingURL=withTokens.cjs.map

package/dist/hoc/withTokens/withTokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTokens.cjs","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\nexport const withTokens = <P extends object>(Component: ComponentType<P>) => {\n  const ComponentWithTokens = ({ theme = 'default', ...props }: P & WithTokensProps) => (\n    <TokenProvider theme={theme}>\n      <Component {...(props as P)} />\n    </TokenProvider>\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["React","TokenProvider"],"mappings":";;;;;;;;;AAQa,MAAA,UAAU,GAAG,CAAmB,SAA2B,KAAI;IAC1E,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,EAAuB,MAC/EA,sBAAA,CAAA,aAAA,CAACC,2BAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACzB,QAAAD,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAM,EAAA,GAAA,KAAW,EAAI,CAAA,CACjB,CACjB;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withTokens/withTokens.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentType } from 'react';
+import { ThemeType } from '../../components/TokenProvider/TokenProvider';
+export type WithTokensProps = {
+    theme?: ThemeType;
+};
+export declare const withTokens: <P extends object>(Component: React.ComponentType<P>) => {
+    ({ theme, ...props }: P & WithTokensProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/hoc/withTokens/withTokens.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { TokenProvider } from '../../components/TokenProvider/TokenProvider.js';
+
+const withTokens = (Component) => {
+    const ComponentWithTokens = ({ theme = 'default', ...props }) => (React__default.createElement(TokenProvider, { theme: theme },
+        React__default.createElement(Component, { ...props })));
+    ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;
+    return ComponentWithTokens;
+};
+
+export { withTokens };
+//# sourceMappingURL=withTokens.js.map

package/dist/hoc/withTokens/withTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTokens.js","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\nexport const withTokens = <P extends object>(Component: ComponentType<P>) => {\n  const ComponentWithTokens = ({ theme = 'default', ...props }: P & WithTokensProps) => (\n    <TokenProvider theme={theme}>\n      <Component {...(props as P)} />\n    </TokenProvider>\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["React"],"mappings":";;;AAQa,MAAA,UAAU,GAAG,CAAmB,SAA2B,KAAI;IAC1E,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,EAAuB,MAC/EA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACzB,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAM,EAAA,GAAA,KAAW,EAAI,CAAA,CACjB,CACjB;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/index.cjs

@@ -63,11 +63,11 @@ var Skeleton = require('./components/Skeleton/Skeleton.cjs');
 var Slider = require('./components/Slider/Slider.cjs');
 var Stack = require('./components/Stack/Stack.cjs');
 var Stepper = require('./components/Stepper/Stepper.cjs');
+var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
 var index$3 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
-var types = require('./components/ToastsLayout/types.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
 var Tooltip = require('./components/Tooltip/Tooltip.cjs');
@@ -84,6 +84,7 @@ var WeightInput = require('./components/WeightInput/WeightInput.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
 var index$4 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
+var TokenProvider = require('./components/TokenProvider/TokenProvider.cjs');
 var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var FlexCol = require('./components/Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('./components/Flex/FlexRow/FlexRow.cjs');
@@ -107,6 +108,7 @@ var useScrollPosition = require('./hooks/useScrollPosition/useScrollPosition.cjs
 var withLabels = require('./hoc/withLabels/withLabels.cjs');
 var withDeprecated = require('./hoc/withDeprecated.cjs');
 var withClassNames = require('./hoc/withClassNames/withClassNames.cjs');
+var withTokens = require('./hoc/withTokens/withTokens.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
@@ -417,14 +419,11 @@ exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Stack = Stack.Stack;
 exports.Stepper = Stepper.Stepper;
+exports.SystemBanner = SystemBanner.SystemBanner;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
 exports.TextField = index$3.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
-Object.defineProperty(exports, "ToastTypes", {
-	enumerable: true,
-	get: function () { return types.ToastTypes; }
-});
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
 exports.Tooltip = Tooltip.Tooltip;
@@ -448,6 +447,7 @@ exports.WeightInput = WeightInput.WeightInput;
 exports.Indicator = Indicator.Indicator;
 exports.SelectDropdown = index$4.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
+exports.TokenProvider = TokenProvider.TokenProvider;
 exports.DataGrid = DataGrid.DataGrid;
 exports.FlexCol = FlexCol.FlexCol;
 exports.FlexRow = FlexRow.FlexRow;
@@ -472,6 +472,7 @@ exports.useScrollPosition = useScrollPosition.useScrollPosition;
 exports.withLabels = withLabels.withLabels;
 exports.withDeprecated = withDeprecated.withDeprecated;
 exports.withClassNames = withClassNames.withClassNames;
+exports.withTokens = withTokens.withTokens;
 exports.buildClassnames = buildClassnames.buildClassnames;
 exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -61,11 +61,11 @@ export { Skeleton } from './components/Skeleton/Skeleton.js';
 export { Slider } from './components/Slider/Slider.js';
 export { Stack } from './components/Stack/Stack.js';
 export { Stepper } from './components/Stepper/Stepper.js';
+export { SystemBanner } from './components/SystemBanner/SystemBanner.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Text } from './components/Text/Text.js';
 export { TextField } from './components/TextField/index.js';
 export { ToastsLayout } from './components/ToastsLayout/ToastsLayout.js';
-export { ToastTypes } from './components/ToastsLayout/types.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { ToggleButton } from './components/ToggleButton/ToggleButton.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
@@ -82,6 +82,7 @@ export { WeightInput } from './components/WeightInput/WeightInput.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { SelectDropdown } from './components/SelectDropdown/index.js';
 export { ThemeInjector } from './components/ThemeInjector/ThemeInjector.js';
+export { TokenProvider } from './components/TokenProvider/TokenProvider.js';
 export { DataGrid } from './components/DataGrid/DataGrid.js';
 export { FlexCol } from './components/Flex/FlexCol/FlexCol.js';
 export { FlexRow } from './components/Flex/FlexRow/FlexRow.js';
@@ -105,6 +106,7 @@ export { useScrollPosition } from './hooks/useScrollPosition/useScrollPosition.j
 export { withLabels } from './hoc/withLabels/withLabels.js';
 export { withDeprecated } from './hoc/withDeprecated.js';
 export { withClassNames } from './hoc/withClassNames/withClassNames.js';
+export { withTokens } from './hoc/withTokens/withTokens.js';
 export { buildClassnames } from './utils/buildClassnames.js';
 export { getOpaqueHexColor, hexToRgb } from './utils/color.js';
 export { generateId } from './utils/generateId.js';

package/dist/index.js.map

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

package/package.json

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