@veeqo/ui 13.18.1 → 13.19.0-beta-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/components/Anchor/Anchor.cjs +5 -11
  2. package/dist/components/Anchor/Anchor.cjs.map +1 -1
  3. package/dist/components/Anchor/Anchor.d.ts +1 -1
  4. package/dist/components/Anchor/Anchor.js +5 -11
  5. package/dist/components/Anchor/Anchor.js.map +1 -1
  6. package/dist/components/Anchor/styled.cjs +38 -0
  7. package/dist/components/Anchor/styled.cjs.map +1 -0
  8. package/dist/components/Anchor/styled.d.ts +10 -0
  9. package/dist/components/Anchor/styled.js +29 -0
  10. package/dist/components/Anchor/styled.js.map +1 -0
  11. package/dist/components/ToastsLayout/ToastsLayout.cjs +24 -7
  12. package/dist/components/ToastsLayout/ToastsLayout.cjs.map +1 -1
  13. package/dist/components/ToastsLayout/ToastsLayout.d.ts +13 -0
  14. package/dist/components/ToastsLayout/ToastsLayout.js +24 -7
  15. package/dist/components/ToastsLayout/ToastsLayout.js.map +1 -1
  16. package/dist/components/ToastsLayout/components/Toast.cjs +23 -38
  17. package/dist/components/ToastsLayout/components/Toast.cjs.map +1 -1
  18. package/dist/components/ToastsLayout/components/Toast.d.ts +1 -1
  19. package/dist/components/ToastsLayout/components/Toast.js +23 -38
  20. package/dist/components/ToastsLayout/components/Toast.js.map +1 -1
  21. package/dist/components/ToastsLayout/components/constants.cjs +42 -0
  22. package/dist/components/ToastsLayout/components/constants.cjs.map +1 -0
  23. package/dist/components/ToastsLayout/components/constants.d.ts +2 -0
  24. package/dist/components/ToastsLayout/components/constants.js +36 -0
  25. package/dist/components/ToastsLayout/components/constants.js.map +1 -0
  26. package/dist/components/ToastsLayout/components/toast.module.scss.cjs +9 -0
  27. package/dist/components/ToastsLayout/components/toast.module.scss.cjs.map +1 -0
  28. package/dist/components/ToastsLayout/components/toast.module.scss.js +7 -0
  29. package/dist/components/ToastsLayout/components/toast.module.scss.js.map +1 -0
  30. package/dist/components/ToastsLayout/components/utils.cjs +10 -0
  31. package/dist/components/ToastsLayout/components/utils.cjs.map +1 -0
  32. package/dist/components/ToastsLayout/components/utils.d.ts +2 -0
  33. package/dist/components/ToastsLayout/components/utils.js +8 -0
  34. package/dist/components/ToastsLayout/components/utils.js.map +1 -0
  35. package/dist/components/ToastsLayout/index.d.ts +1 -0
  36. package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs +9 -0
  37. package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs.map +1 -0
  38. package/dist/components/ToastsLayout/toastsLayout.module.scss.js +7 -0
  39. package/dist/components/ToastsLayout/toastsLayout.module.scss.js.map +1 -0
  40. package/dist/components/ToastsLayout/types.cjs +12 -0
  41. package/dist/components/ToastsLayout/types.cjs.map +1 -0
  42. package/dist/components/ToastsLayout/types.d.ts +15 -8
  43. package/dist/components/ToastsLayout/types.js +12 -0
  44. package/dist/components/ToastsLayout/types.js.map +1 -0
  45. package/dist/components/index.d.ts +1 -1
  46. package/dist/index.cjs +5 -0
  47. package/dist/index.cjs.map +1 -1
  48. package/dist/index.js +1 -0
  49. package/dist/index.js.map +1 -1
  50. package/package.json +1 -1
  51. package/dist/components/Anchor/Anchor.module.scss.cjs +0 -9
  52. package/dist/components/Anchor/Anchor.module.scss.cjs.map +0 -1
  53. package/dist/components/Anchor/Anchor.module.scss.js +0 -7
  54. package/dist/components/Anchor/Anchor.module.scss.js.map +0 -1
  55. package/dist/components/ToastsLayout/components/styled.cjs +0 -25
  56. package/dist/components/ToastsLayout/components/styled.cjs.map +0 -1
  57. package/dist/components/ToastsLayout/components/styled.d.ts +0 -10
  58. package/dist/components/ToastsLayout/components/styled.js +0 -15
  59. package/dist/components/ToastsLayout/components/styled.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { 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":";;;;;;;;;;;AAQA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;QACnC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEW,MAAA,KAAK,GAAG,CAAC,EACpB,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,OAAO,GACQ,KAAI;AACnB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAAC,OAAc,IACb,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,SAAA,GAAA,UAAU,CAAE,SAAS,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EAAA;AAEV,QAAAD,cAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,EACnC,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EAAA,EAEhE,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CACzB;AACX,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AACnE,YAAAA,cAAA,CAAA,aAAA,CAACE,UAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,IAAI,CAAQ;AACjC,YAAA,GAAG,CACS;QACfF,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,gBACL,OAAO,EAAA,CAClB,CACa;AAErB;;;;"}
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;;;;"}
@@ -0,0 +1,42 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var colors = require('../../../theme/modules/colors.cjs');
5
+ var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.cjs');
6
+ var InfoIcon = require('../../../icons/design-system/components/InfoIcon.cjs');
7
+ var MergeIcon = require('../../../icons/design-system/components/MergeIcon.cjs');
8
+ var SuccessIcon = require('../../../icons/design-system/components/SuccessIcon.cjs');
9
+ var WarningOutlineIcon = require('../../../icons/design-system/components/WarningOutlineIcon.cjs');
10
+
11
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
+
13
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
+
15
+ const ToastTypeConfig = {
16
+ info: {
17
+ accentColor: colors.colors.secondary.blue.base,
18
+ icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
19
+ },
20
+ success: {
21
+ accentColor: colors.colors.secondary.green.base,
22
+ icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
23
+ },
24
+ error: {
25
+ accentColor: colors.colors.secondary.red.base,
26
+ icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
27
+ },
28
+ warning: {
29
+ accentColor: colors.colors.secondary.orange.base,
30
+ icon: React__default.default.createElement(WarningOutlineIcon.ReactComponent, null),
31
+ },
32
+ merge: {
33
+ accentColor: colors.colors.secondary.purple.base,
34
+ icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
35
+ },
36
+ custom: {
37
+ accentColor: colors.colors.secondary.blue.base,
38
+ },
39
+ };
40
+
41
+ exports.ToastTypeConfig = ToastTypeConfig;
42
+ //# sourceMappingURL=constants.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.cjs","sources":["../../../../src/components/ToastsLayout/components/constants.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors } from 'Theme/modules/colors';\nimport { ToastType } from '../types';\nimport {\n SuccessIcon,\n InfoIcon,\n AttentionIcon,\n MergeIcon,\n WarningOutlineIcon,\n} from '../../../icons';\n\nexport const ToastTypeConfig: ToastType = {\n info: {\n accentColor: colors.secondary.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 warning: {\n accentColor: colors.secondary.orange.base,\n icon: <WarningOutlineIcon />,\n },\n merge: {\n accentColor: colors.secondary.purple.base,\n icon: <MergeIcon />,\n },\n custom: {\n accentColor: colors.secondary.blue.base,\n },\n};\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","WarningOutlineIcon","MergeIcon"],"mappings":";;;;;;;;;;;;;;AAYa,MAAA,eAAe,GAAc;AACxC,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAEA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACvC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAC,uBAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAEF,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAE,0BAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEH,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAG,4BAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAEJ,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAI,iCAAkB,EAAG,IAAA,CAAA;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEL,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAK,wBAAS,EAAG,IAAA,CAAA;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAEN,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AACxC,KAAA;;;;;"}
@@ -0,0 +1,2 @@
1
+ import { ToastType } from '../types';
2
+ export declare const ToastTypeConfig: ToastType;
@@ -0,0 +1,36 @@
1
+ import React__default from 'react';
2
+ import { colors } from '../../../theme/modules/colors.js';
3
+ import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
4
+ import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
5
+ import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
6
+ import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
7
+ import { ReactComponent as WarningOutlineIcon } from '../../../icons/design-system/components/WarningOutlineIcon.js';
8
+
9
+ const ToastTypeConfig = {
10
+ info: {
11
+ accentColor: colors.secondary.blue.base,
12
+ icon: React__default.createElement(InfoIcon, null),
13
+ },
14
+ success: {
15
+ accentColor: colors.secondary.green.base,
16
+ icon: React__default.createElement(SuccessIcon, null),
17
+ },
18
+ error: {
19
+ accentColor: colors.secondary.red.base,
20
+ icon: React__default.createElement(AttentionIcon, null),
21
+ },
22
+ warning: {
23
+ accentColor: colors.secondary.orange.base,
24
+ icon: React__default.createElement(WarningOutlineIcon, null),
25
+ },
26
+ merge: {
27
+ accentColor: colors.secondary.purple.base,
28
+ icon: React__default.createElement(MergeIcon, null),
29
+ },
30
+ custom: {
31
+ accentColor: colors.secondary.blue.base,
32
+ },
33
+ };
34
+
35
+ export { ToastTypeConfig };
36
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/ToastsLayout/components/constants.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors } from 'Theme/modules/colors';\nimport { ToastType } from '../types';\nimport {\n SuccessIcon,\n InfoIcon,\n AttentionIcon,\n MergeIcon,\n WarningOutlineIcon,\n} from '../../../icons';\n\nexport const ToastTypeConfig: ToastType = {\n info: {\n accentColor: colors.secondary.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 warning: {\n accentColor: colors.secondary.orange.base,\n icon: <WarningOutlineIcon />,\n },\n merge: {\n accentColor: colors.secondary.purple.base,\n icon: <MergeIcon />,\n },\n custom: {\n accentColor: colors.secondary.blue.base,\n },\n};\n"],"names":["React"],"mappings":";;;;;;;;AAYa,MAAA,eAAe,GAAc;AACxC,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACvC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAG,IAAA,CAAA;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AACxC,KAAA;;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._toastContainer_fb3uj_1 {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton._toastCloseButton_fb3uj_12:hover {\n background-color: var(--colors-neutral-ink-light);\n}\nbutton._toastCloseButton_fb3uj_12:active {\n background-color: var(--colors-neutral-ink-lightest);\n}\n\n._iconWrapper_fb3uj_19 {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: var(--radius-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n}\n._iconWrapper_fb3uj_19 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\np._toastText_fb3uj_35 {\n color: #fff;\n}");
6
+ var styles = {"toastContainer":"_toastContainer_fb3uj_1","toastCloseButton":"_toastCloseButton_fb3uj_12","iconWrapper":"_iconWrapper_fb3uj_19","toastText":"_toastText_fb3uj_35"};
7
+
8
+ module.exports = styles;
9
+ //# sourceMappingURL=toast.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/toast.module.scss"],"sourcesContent":[".toastContainer {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton.toastCloseButton {\n &:hover {\n background-color: var(--colors-neutral-ink-light);\n }\n &:active {\n background-color: var(--colors-neutral-ink-lightest);\n }\n}\n\n.iconWrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: var(--radius-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\np.toastText {\n color: #fff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,45BAAA;AACA,aAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._toastContainer_fb3uj_1 {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton._toastCloseButton_fb3uj_12:hover {\n background-color: var(--colors-neutral-ink-light);\n}\nbutton._toastCloseButton_fb3uj_12:active {\n background-color: var(--colors-neutral-ink-lightest);\n}\n\n._iconWrapper_fb3uj_19 {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: var(--radius-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n}\n._iconWrapper_fb3uj_19 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\np._toastText_fb3uj_35 {\n color: #fff;\n}");
4
+ var styles = {"toastContainer":"_toastContainer_fb3uj_1","toastCloseButton":"_toastCloseButton_fb3uj_12","iconWrapper":"_iconWrapper_fb3uj_19","toastText":"_toastText_fb3uj_35"};
5
+
6
+ export { styles as default };
7
+ //# sourceMappingURL=toast.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/toast.module.scss"],"sourcesContent":[".toastContainer {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton.toastCloseButton {\n &:hover {\n background-color: var(--colors-neutral-ink-light);\n }\n &:active {\n background-color: var(--colors-neutral-ink-lightest);\n }\n}\n\n.iconWrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: var(--radius-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\np.toastText {\n color: #fff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,45BAAA;AACA,aAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ const generateToastClassNames = (prefix) => ({
4
+ container: prefix ? `${prefix}-toast-container` : undefined,
5
+ icon: prefix ? `${prefix}-toast-icon` : undefined,
6
+ closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
7
+ });
8
+
9
+ exports.generateToastClassNames = generateToastClassNames;
10
+ //# sourceMappingURL=utils.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.cjs","sources":["../../../../src/components/ToastsLayout/components/utils.ts"],"sourcesContent":["import { ClassNamesReturnPayload } from '../types';\n\nexport const generateToastClassNames = (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"],"names":[],"mappings":";;MAEa,uBAAuB,GAAG,CAAC,MAAe,MAA+B;IACpF,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA;;;;"}
@@ -0,0 +1,2 @@
1
+ import { ClassNamesReturnPayload } from '../types';
2
+ export declare const generateToastClassNames: (prefix?: string) => ClassNamesReturnPayload;
@@ -0,0 +1,8 @@
1
+ const generateToastClassNames = (prefix) => ({
2
+ container: prefix ? `${prefix}-toast-container` : undefined,
3
+ icon: prefix ? `${prefix}-toast-icon` : undefined,
4
+ closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
5
+ });
6
+
7
+ export { generateToastClassNames };
8
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../../../../src/components/ToastsLayout/components/utils.ts"],"sourcesContent":["import { ClassNamesReturnPayload } from '../types';\n\nexport const generateToastClassNames = (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"],"names":[],"mappings":"MAEa,uBAAuB,GAAG,CAAC,MAAe,MAA+B;IACpF,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA;;;;"}
@@ -1,2 +1,3 @@
1
1
  export { ToastsLayout } from './ToastsLayout';
2
2
  export type { Notification } from './types';
3
+ export { ToastTypes } from './types';
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._toastsLayoutContainer_o6hq3_1 {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-done {\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit {\n transform: translateX(0);\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit[data-toast-last=true] {\n transform: translateY(0);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n transform: translateY(12px);\n}");
6
+ var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o6hq3_1"};
7
+
8
+ module.exports = styles;
9
+ //# sourceMappingURL=toastsLayout.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,yjCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._toastsLayoutContainer_o6hq3_1 {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-done {\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit {\n transform: translateX(0);\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit[data-toast-last=true] {\n transform: translateY(0);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n transform: translateY(12px);\n}");
4
+ var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o6hq3_1"};
5
+
6
+ export { styles as default };
7
+ //# sourceMappingURL=toastsLayout.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,yjCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ exports.ToastTypes = void 0;
4
+ (function (ToastTypes) {
5
+ ToastTypes["info"] = "info";
6
+ ToastTypes["error"] = "error";
7
+ ToastTypes["warning"] = "warning";
8
+ ToastTypes["success"] = "success";
9
+ ToastTypes["merge"] = "merge";
10
+ ToastTypes["custom"] = "custom";
11
+ })(exports.ToastTypes || (exports.ToastTypes = {}));
12
+ //# sourceMappingURL=types.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.cjs","sources":["../../../src/components/ToastsLayout/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport enum ToastTypes {\n info = 'info',\n error = 'error',\n warning = 'warning',\n success = 'success',\n merge = 'merge',\n custom = 'custom',\n}\n\nexport type ToastType = Record<ToastTypes, { accentColor: string; icon?: ReactElement }>;\n\nexport type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {\n e2eClassName?: string;\n last: boolean;\n minWidth: number | string;\n onClose: () => void;\n};\n\nexport type ToastsLayoutPropTypes = {\n e2eClassName?: string;\n toasts: Notification[];\n minWidth?: number | string;\n max?: number | null;\n /** Portal target element. Defaults to document.body */\n portalTarget?: Element;\n onClose: (key: string) => void;\n};\n\nexport type ClassNamesReturnPayload = {\n container?: string;\n icon?: string;\n closeIcon?: string;\n};\n\nexport type Notification = {\n /** Unique identifier for the toast */\n id: string;\n type: keyof typeof ToastTypes;\n iconSlot?: ReactElement;\n /** Main message text */\n message: string;\n /** Optional secondary message */\n subMessage?: string;\n /** Optional action buttons slot */\n ctaSlot?: React.ReactNode;\n};\n"],"names":["ToastTypes"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPWA,kBAAU,KAAVA,kBAAU,GAOrB,EAAA,CAAA,CAAA;;"}
@@ -2,26 +2,28 @@ import { ReactElement } from 'react';
2
2
  export declare enum ToastTypes {
3
3
  info = "info",
4
4
  error = "error",
5
+ warning = "warning",
5
6
  success = "success",
6
- merge = "merge"
7
+ merge = "merge",
8
+ custom = "custom"
7
9
  }
8
10
  export type ToastType = Record<ToastTypes, {
9
11
  accentColor: string;
10
- icon: ReactElement;
12
+ icon?: ReactElement;
11
13
  }>;
12
- export type ToastPropTypes = Omit<Notification, 'key'> & {
13
- className?: string;
14
+ export type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {
14
15
  e2eClassName?: string;
15
16
  last: boolean;
16
17
  minWidth: number | string;
17
18
  onClose: () => void;
18
19
  };
19
20
  export type ToastsLayoutPropTypes = {
20
- className?: string;
21
21
  e2eClassName?: string;
22
22
  toasts: Notification[];
23
23
  minWidth?: number | string;
24
24
  max?: number | null;
25
+ /** Portal target element. Defaults to document.body */
26
+ portalTarget?: Element;
25
27
  onClose: (key: string) => void;
26
28
  };
27
29
  export type ClassNamesReturnPayload = {
@@ -30,9 +32,14 @@ export type ClassNamesReturnPayload = {
30
32
  closeIcon?: string;
31
33
  };
32
34
  export type Notification = {
33
- key: string;
35
+ /** Unique identifier for the toast */
36
+ id: string;
34
37
  type: keyof typeof ToastTypes;
35
38
  iconSlot?: ReactElement;
36
- text: string;
37
- cta?: React.ReactNode;
39
+ /** Main message text */
40
+ message: string;
41
+ /** Optional secondary message */
42
+ subMessage?: string;
43
+ /** Optional action buttons slot */
44
+ ctaSlot?: React.ReactNode;
38
45
  };
@@ -0,0 +1,12 @@
1
+ var ToastTypes;
2
+ (function (ToastTypes) {
3
+ ToastTypes["info"] = "info";
4
+ ToastTypes["error"] = "error";
5
+ ToastTypes["warning"] = "warning";
6
+ ToastTypes["success"] = "success";
7
+ ToastTypes["merge"] = "merge";
8
+ ToastTypes["custom"] = "custom";
9
+ })(ToastTypes || (ToastTypes = {}));
10
+
11
+ export { ToastTypes };
12
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sources":["../../../src/components/ToastsLayout/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport enum ToastTypes {\n info = 'info',\n error = 'error',\n warning = 'warning',\n success = 'success',\n merge = 'merge',\n custom = 'custom',\n}\n\nexport type ToastType = Record<ToastTypes, { accentColor: string; icon?: ReactElement }>;\n\nexport type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {\n e2eClassName?: string;\n last: boolean;\n minWidth: number | string;\n onClose: () => void;\n};\n\nexport type ToastsLayoutPropTypes = {\n e2eClassName?: string;\n toasts: Notification[];\n minWidth?: number | string;\n max?: number | null;\n /** Portal target element. Defaults to document.body */\n portalTarget?: Element;\n onClose: (key: string) => void;\n};\n\nexport type ClassNamesReturnPayload = {\n container?: string;\n icon?: string;\n closeIcon?: string;\n};\n\nexport type Notification = {\n /** Unique identifier for the toast */\n id: string;\n type: keyof typeof ToastTypes;\n iconSlot?: ReactElement;\n /** Main message text */\n message: string;\n /** Optional secondary message */\n subMessage?: string;\n /** Optional action buttons slot */\n ctaSlot?: React.ReactNode;\n};\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPW,UAAU,KAAV,UAAU,GAOrB,EAAA,CAAA,CAAA;;;;"}
@@ -56,7 +56,7 @@ export { Stepper } from './Stepper';
56
56
  export { Tag } from './Tag';
57
57
  export { Text } from './Text';
58
58
  export { TextField, type TextFieldType } from './TextField';
59
- export { ToastsLayout, type Notification } from './ToastsLayout';
59
+ export { ToastsLayout, type Notification, ToastTypes } from './ToastsLayout';
60
60
  export { Toggle } from './Toggle';
61
61
  export { ToggleButton } from './ToggleButton';
62
62
  export { Tooltip } from './Tooltip';
package/dist/index.cjs CHANGED
@@ -67,6 +67,7 @@ var Tag = require('./components/Tag/Tag.cjs');
67
67
  var Text = require('./components/Text/Text.cjs');
68
68
  var index$3 = require('./components/TextField/index.cjs');
69
69
  var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
70
+ var types = require('./components/ToastsLayout/types.cjs');
70
71
  var Toggle = require('./components/Toggle/Toggle.cjs');
71
72
  var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
72
73
  var Tooltip = require('./components/Tooltip/Tooltip.cjs');
@@ -420,6 +421,10 @@ exports.Tag = Tag.Tag;
420
421
  exports.Text = Text.Text;
421
422
  exports.TextField = index$3.TextField;
422
423
  exports.ToastsLayout = ToastsLayout.ToastsLayout;
424
+ Object.defineProperty(exports, "ToastTypes", {
425
+ enumerable: true,
426
+ get: function () { return types.ToastTypes; }
427
+ });
423
428
  exports.Toggle = Toggle.Toggle;
424
429
  exports.ToggleButton = ToggleButton.ToggleButton;
425
430
  exports.Tooltip = Tooltip.Tooltip;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -65,6 +65,7 @@ export { Tag } from './components/Tag/Tag.js';
65
65
  export { Text } from './components/Text/Text.js';
66
66
  export { TextField } from './components/TextField/index.js';
67
67
  export { ToastsLayout } from './components/ToastsLayout/ToastsLayout.js';
68
+ export { ToastTypes } from './components/ToastsLayout/types.js';
68
69
  export { Toggle } from './components/Toggle/Toggle.js';
69
70
  export { ToggleButton } from './components/ToggleButton/ToggleButton.js';
70
71
  export { Tooltip } from './components/Tooltip/Tooltip.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "13.18.1",
3
+ "version": "13.19.0-beta-2",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
-
5
- ___$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}");
6
- 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"};
7
-
8
- module.exports = styles;
9
- //# sourceMappingURL=Anchor.module.scss.cjs.map
@@ -1 +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;;;;"}
@@ -1,7 +0,0 @@
1
- import insertStyle from '../../_virtual/____insertStyle.js';
2
-
3
- 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}");
4
- 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"};
5
-
6
- export { styles as default };
7
- //# sourceMappingURL=Anchor.module.scss.js.map
@@ -1 +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;;;;"}
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- var styled = require('styled-components');
4
- var Stack = require('../../Stack/Stack.cjs');
5
- var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
6
- var Text = require('../../Text/Text.cjs');
7
- var index = require('../../../theme/index.cjs');
8
- var sizes = require('../../../theme/modules/sizes.cjs');
9
-
10
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
11
-
12
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
13
-
14
- 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};`;
15
- 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;}`;
16
- 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};}`;
17
- const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
18
- const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
19
-
20
- exports.ContentStack = ContentStack;
21
- exports.IconWrap = IconWrap;
22
- exports.StyledText = StyledText;
23
- exports.Toast = Toast;
24
- exports.ToastsLayoutContainer = ToastsLayoutContainer;
25
- //# sourceMappingURL=styled.cjs.map
@@ -1 +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;;;;;;;;"}
@@ -1,10 +0,0 @@
1
- export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
2
- export declare const Toast: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
3
- minWidth: number | string;
4
- last: boolean;
5
- }, never>;
6
- export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {
7
- color: string;
8
- }, never>;
9
- export declare const ContentStack: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
10
- export declare const StyledText: import("styled-components").StyledComponent<"span", any, {} & import("../../Text/types").TextProps, never>;
@@ -1,15 +0,0 @@
1
- import styled from 'styled-components';
2
- import { Stack } from '../../Stack/Stack.js';
3
- import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
4
- import { Text } from '../../Text/Text.js';
5
- import { theme } from '../../../theme/index.js';
6
- import { sizes } from '../../../theme/modules/sizes.js';
7
-
8
- 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};`;
9
- 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;}`;
10
- 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};}`;
11
- const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
12
- const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
13
-
14
- export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
15
- //# sourceMappingURL=styled.js.map
@@ -1 +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;;;;"}