@veeqo/ui 14.4.0 → 14.4.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.
@@ -1,16 +1,15 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var Text = require('../Text/Text.cjs');
5
- var Anchor = require('../Anchor/Anchor.cjs');
6
- var Button = require('../Button/Button.cjs');
7
- var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
8
4
  var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
9
5
  var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
10
6
  var InfoFillIcon = require('../../icons/design-system/components/InfoFillIcon.cjs');
11
7
  var WarningIcon = require('../../icons/design-system/components/WarningIcon.cjs');
12
8
  var buildClassnames = require('../../utils/buildClassnames.cjs');
13
9
  require('uid/secure');
10
+ var Action = require('../Action/Action.cjs');
11
+ var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
12
+ var Text = require('../Text/Text.cjs');
14
13
  var SystemBanner_module = require('./SystemBanner.module.scss.cjs');
15
14
 
16
15
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -22,15 +21,20 @@ const IconMap = {
22
21
  warning: WarningIcon.ReactComponent,
23
22
  default: InfoFillIcon.ReactComponent,
24
23
  };
25
- const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
24
+ const SystemBanner = ({ variant = 'default', message, linkText, linkHref, linkTarget, onClose, className, ...divProps }) => {
26
25
  const Icon = IconMap[variant];
27
- return (React__default.default.createElement(FlexRow.FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([SystemBanner_module.banner, SystemBanner_module[variant], className]), ...divProps },
26
+ return (React__default.default.createElement(FlexRow.FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([
27
+ SystemBanner_module.banner,
28
+ SystemBanner_module[variant],
29
+ onClose && SystemBanner_module.hasClose,
30
+ className,
31
+ ]), ...divProps },
28
32
  React__default.default.createElement(FlexRow.FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
29
33
  React__default.default.createElement(Icon, { role: "presentation" }),
30
34
  React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
31
35
  React__default.default.createElement(Text.Text, { variant: "bodyBold" }, message),
32
- linkText && linkHref && (React__default.default.createElement(Anchor.Anchor, { href: linkHref, size: "base" }, linkText)))),
33
- onClose && (React__default.default.createElement(Button.Button, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: SystemBanner_module.closeButton }))));
36
+ linkText && linkHref && (React__default.default.createElement(Action.Action, { href: linkHref, size: "base", target: linkTarget }, linkText)))),
37
+ onClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: SystemBanner_module.closeButton }))));
34
38
  };
35
39
 
36
40
  exports.SystemBanner = SystemBanner;
@@ -1 +1 @@
1
- {"version":3,"file":"SystemBanner.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { IconComponent } from 'src/icons/types';\nimport { Text } from '../Text';\nimport { Anchor } from '../Anchor';\nimport { Button } from '../Button';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { CriticalIcon, WarningIcon, InfoFillIcon, CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n error: CriticalIcon,\n warning: WarningIcon,\n default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n variant = 'default',\n message,\n linkText,\n linkHref,\n onClose,\n className,\n ...divProps\n}: SystemBannerProps) => {\n const Icon = IconMap[variant];\n\n return (\n <FlexRow\n role=\"alert\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([styles.banner, styles[variant], className])}\n {...divProps}\n >\n <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n <Icon role=\"presentation\" />\n <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n <Text variant=\"bodyBold\">{message}</Text>\n {linkText && linkHref && (\n <Anchor href={linkHref} size=\"base\">\n {linkText}\n </Anchor>\n )}\n </FlexRow>\n </FlexRow>\n {onClose && (\n <Button\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={styles.closeButton}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["CriticalIcon","WarningIcon","InfoFillIcon","React","FlexRow","buildClassnames","styles","Text","Anchor","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAEA,2BAAY;AACnB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,OAAO,EAAEC,2BAAY;CACtB;AAEM,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAM,CAAC,MAAM,EAAEA,mBAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG;AAC5B,YAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAD,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBJ,sBAAA,CAAA,aAAA,CAACK,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNL,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAEJ,mBAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
1
+ {"version":3,"file":"SystemBanner.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CriticalIcon, CrossIcon, InfoFillIcon, WarningIcon } from '../../icons';\nimport type { IconComponent } from '../../icons/types';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n error: CriticalIcon,\n warning: WarningIcon,\n default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n variant = 'default',\n message,\n linkText,\n linkHref,\n linkTarget,\n onClose,\n className,\n ...divProps\n}: SystemBannerProps) => {\n const Icon = IconMap[variant];\n\n return (\n <FlexRow\n role=\"alert\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.banner,\n styles[variant],\n onClose && styles.hasClose,\n className,\n ])}\n {...divProps}\n >\n <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n <Icon role=\"presentation\" />\n <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n <Text variant=\"bodyBold\">{message}</Text>\n {linkText && linkHref && (\n <Action href={linkHref} size=\"base\" target={linkTarget}>\n {linkText}\n </Action>\n )}\n </FlexRow>\n </FlexRow>\n {onClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={styles.closeButton}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["CriticalIcon","WarningIcon","InfoFillIcon","React","FlexRow","buildClassnames","styles","Text","Action","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAEA,2BAAY;AACnB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,OAAO,EAAEC,2BAAY;CACtB;AAEM,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;IAE7B,QACEC,qCAACC,eAAO,EAAA,EACN,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,mBAAM,CAAC,MAAM;YACbA,mBAAM,CAAC,OAAO,CAAC;YACf,OAAO,IAAIA,mBAAM,CAAC,QAAQ;YAC1B,SAAS;AACV,SAAA,CAAC,KACE,QAAQ,EAAA;AAEZ,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG;AAC5B,YAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAD,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;gBACxC,QAAQ,IAAI,QAAQ,KACnBJ,qCAACK,aAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,UAAU,IACnD,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNL,sBAAA,CAAA,aAAA,CAACK,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEL,sBAAA,CAAA,aAAA,CAACM,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAEH,mBAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { SystemBannerProps } from './types';
3
- export declare const SystemBanner: ({ variant, message, linkText, linkHref, onClose, className, ...divProps }: SystemBannerProps) => React.JSX.Element;
3
+ export declare const SystemBanner: ({ variant, message, linkText, linkHref, linkTarget, onClose, className, ...divProps }: SystemBannerProps) => React.JSX.Element;
@@ -1,14 +1,13 @@
1
1
  import React__default from 'react';
2
- import { Text } from '../Text/Text.js';
3
- import { Anchor } from '../Anchor/Anchor.js';
4
- import { Button } from '../Button/Button.js';
5
- import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
6
2
  import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
7
3
  import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
8
4
  import { ReactComponent as InfoFillIcon } from '../../icons/design-system/components/InfoFillIcon.js';
9
5
  import { ReactComponent as WarningIcon } from '../../icons/design-system/components/WarningIcon.js';
10
6
  import { buildClassnames } from '../../utils/buildClassnames.js';
11
7
  import 'uid/secure';
8
+ import { Action } from '../Action/Action.js';
9
+ import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
10
+ import { Text } from '../Text/Text.js';
12
11
  import styles from './SystemBanner.module.scss.js';
13
12
 
14
13
  const IconMap = {
@@ -16,15 +15,20 @@ const IconMap = {
16
15
  warning: WarningIcon,
17
16
  default: InfoFillIcon,
18
17
  };
19
- const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
18
+ const SystemBanner = ({ variant = 'default', message, linkText, linkHref, linkTarget, onClose, className, ...divProps }) => {
20
19
  const Icon = IconMap[variant];
21
- return (React__default.createElement(FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames([styles.banner, styles[variant], className]), ...divProps },
20
+ return (React__default.createElement(FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames([
21
+ styles.banner,
22
+ styles[variant],
23
+ onClose && styles.hasClose,
24
+ className,
25
+ ]), ...divProps },
22
26
  React__default.createElement(FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
23
27
  React__default.createElement(Icon, { role: "presentation" }),
24
28
  React__default.createElement(FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
25
29
  React__default.createElement(Text, { variant: "bodyBold" }, message),
26
- linkText && linkHref && (React__default.createElement(Anchor, { href: linkHref, size: "base" }, linkText)))),
27
- onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: styles.closeButton }))));
30
+ linkText && linkHref && (React__default.createElement(Action, { href: linkHref, size: "base", target: linkTarget }, linkText)))),
31
+ onClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: styles.closeButton }))));
28
32
  };
29
33
 
30
34
  export { SystemBanner };
@@ -1 +1 @@
1
- {"version":3,"file":"SystemBanner.js","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { IconComponent } from 'src/icons/types';\nimport { Text } from '../Text';\nimport { Anchor } from '../Anchor';\nimport { Button } from '../Button';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { CriticalIcon, WarningIcon, InfoFillIcon, CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n error: CriticalIcon,\n warning: WarningIcon,\n default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n variant = 'default',\n message,\n linkText,\n linkHref,\n onClose,\n className,\n ...divProps\n}: SystemBannerProps) => {\n const Icon = IconMap[variant];\n\n return (\n <FlexRow\n role=\"alert\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([styles.banner, styles[variant], className])}\n {...divProps}\n >\n <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n <Icon role=\"presentation\" />\n <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n <Text variant=\"bodyBold\">{message}</Text>\n {linkText && linkHref && (\n <Anchor href={linkHref} size=\"base\">\n {linkText}\n </Anchor>\n )}\n </FlexRow>\n </FlexRow>\n {onClose && (\n <Button\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={styles.closeButton}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,OAAO,EAAE,YAAY;CACtB;AAEM,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG;AAC5B,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBA,cAAA,CAAA,aAAA,CAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
1
+ {"version":3,"file":"SystemBanner.js","sources":["../../../src/components/SystemBanner/SystemBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CriticalIcon, CrossIcon, InfoFillIcon, WarningIcon } from '../../icons';\nimport type { IconComponent } from '../../icons/types';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { SystemBannerProps, SystemBannerVariant } from './types';\n\nimport styles from './SystemBanner.module.scss';\n\nconst IconMap: Record<SystemBannerVariant, IconComponent> = {\n error: CriticalIcon,\n warning: WarningIcon,\n default: InfoFillIcon,\n};\n\nexport const SystemBanner = ({\n variant = 'default',\n message,\n linkText,\n linkHref,\n linkTarget,\n onClose,\n className,\n ...divProps\n}: SystemBannerProps) => {\n const Icon = IconMap[variant];\n\n return (\n <FlexRow\n role=\"alert\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.banner,\n styles[variant],\n onClose && styles.hasClose,\n className,\n ])}\n {...divProps}\n >\n <FlexRow gap=\"3\" alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n <Icon role=\"presentation\" />\n <FlexRow gap=\"xs\" alignItems=\"center\" justifyContent=\"center\">\n <Text variant=\"bodyBold\">{message}</Text>\n {linkText && linkHref && (\n <Action href={linkHref} size=\"base\" target={linkTarget}>\n {linkText}\n </Action>\n )}\n </FlexRow>\n </FlexRow>\n {onClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={styles.closeButton}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAYA,MAAM,OAAO,GAA+C;AAC1D,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,OAAO,EAAE,YAAY;CACtB;AAEM,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;IAE7B,QACEA,6BAAC,OAAO,EAAA,EACN,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,MAAM;YACb,MAAM,CAAC,OAAO,CAAC;YACf,OAAO,IAAI,MAAM,CAAC,QAAQ;YAC1B,SAAS;AACV,SAAA,CAAC,KACE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG;AAC5B,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;gBACxC,QAAQ,IAAI,QAAQ,KACnBA,6BAAC,MAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,UAAU,IACnD,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
@@ -2,8 +2,8 @@
2
2
 
3
3
  var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
4
 
5
- ___$insertStyle("._banner_pnt3b_1 {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_pnt3b_1 span,\n._banner_pnt3b_1 svg,\n._banner_pnt3b_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_pnt3b_13 {\n margin-left: auto;\n}\n\n._default_pnt3b_17 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_pnt3b_17 ._closeButton_pnt3b_13:hover,\n._default_pnt3b_17 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_pnt3b_26 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_pnt3b_26 ._closeButton_pnt3b_13:hover,\n._error_pnt3b_26 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_pnt3b_35 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_pnt3b_35 ._closeButton_pnt3b_13:hover,\n._warning_pnt3b_35 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
6
- var styles = {"banner":"_banner_pnt3b_1","closeButton":"_closeButton_pnt3b_13","default":"_default_pnt3b_17","error":"_error_pnt3b_26","warning":"_warning_pnt3b_35"};
5
+ ___$insertStyle("._banner_1ssfj_1 {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_1ssfj_1 span,\n._banner_1ssfj_1 svg,\n._banner_1ssfj_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_1ssfj_13 {\n margin-left: auto;\n}\n\n._default_1ssfj_17 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_1ssfj_17 ._closeButton_1ssfj_13:hover,\n._default_1ssfj_17 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n}\n\n._error_1ssfj_26 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_1ssfj_26 ._closeButton_1ssfj_13:hover,\n._error_1ssfj_26 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n}\n\n._warning_1ssfj_35 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_1ssfj_35 ._closeButton_1ssfj_13:hover,\n._warning_1ssfj_35 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 20%, transparent);\n}\n\n._hasClose_1ssfj_44 {\n padding-left: var(--sizes-12);\n}");
6
+ var styles = {"banner":"_banner_1ssfj_1","closeButton":"_closeButton_1ssfj_13","default":"_default_1ssfj_17","error":"_error_1ssfj_26","warning":"_warning_1ssfj_35","hasClose":"_hasClose_1ssfj_44"};
7
7
 
8
8
  module.exports = styles;
9
9
  //# sourceMappingURL=SystemBanner.module.scss.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"SystemBanner.module.scss.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,guCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
1
+ {"version":3,"file":"SystemBanner.module.scss.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 20%, transparent);\n }\n}\n\n.hasClose {\n padding-left: var(--sizes-12);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ywCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
@@ -1,7 +1,7 @@
1
1
  import insertStyle from '../../_virtual/____insertStyle.js';
2
2
 
3
- insertStyle("._banner_pnt3b_1 {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_pnt3b_1 span,\n._banner_pnt3b_1 svg,\n._banner_pnt3b_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_pnt3b_13 {\n margin-left: auto;\n}\n\n._default_pnt3b_17 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_pnt3b_17 ._closeButton_pnt3b_13:hover,\n._default_pnt3b_17 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_pnt3b_26 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_pnt3b_26 ._closeButton_pnt3b_13:hover,\n._error_pnt3b_26 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_pnt3b_35 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_pnt3b_35 ._closeButton_pnt3b_13:hover,\n._warning_pnt3b_35 ._closeButton_pnt3b_13:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
4
- var styles = {"banner":"_banner_pnt3b_1","closeButton":"_closeButton_pnt3b_13","default":"_default_pnt3b_17","error":"_error_pnt3b_26","warning":"_warning_pnt3b_35"};
3
+ insertStyle("._banner_1ssfj_1 {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_1ssfj_1 span,\n._banner_1ssfj_1 svg,\n._banner_1ssfj_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_1ssfj_13 {\n margin-left: auto;\n}\n\n._default_1ssfj_17 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_1ssfj_17 ._closeButton_1ssfj_13:hover,\n._default_1ssfj_17 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n}\n\n._error_1ssfj_26 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_1ssfj_26 ._closeButton_1ssfj_13:hover,\n._error_1ssfj_26 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n}\n\n._warning_1ssfj_35 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_1ssfj_35 ._closeButton_1ssfj_13:hover,\n._warning_1ssfj_35 ._closeButton_1ssfj_13:active {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 20%, transparent);\n}\n\n._hasClose_1ssfj_44 {\n padding-left: var(--sizes-12);\n}");
4
+ var styles = {"banner":"_banner_1ssfj_1","closeButton":"_closeButton_1ssfj_13","default":"_default_1ssfj_17","error":"_error_1ssfj_26","warning":"_warning_1ssfj_35","hasClose":"_hasClose_1ssfj_44"};
5
5
 
6
6
  export { styles as default };
7
7
  //# sourceMappingURL=SystemBanner.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SystemBanner.module.scss.js","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,guCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
1
+ {"version":3,"file":"SystemBanner.module.scss.js","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n box-sizing: border-box;\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, white 20%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:active {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 20%, transparent);\n }\n}\n\n.hasClose {\n padding-left: var(--sizes-12);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ywCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
@@ -5,5 +5,6 @@ export type SystemBannerProps = React.HTMLAttributes<HTMLDivElement> & {
5
5
  message: string;
6
6
  linkText?: string;
7
7
  linkHref?: string;
8
+ linkTarget?: React.HTMLAttributeAnchorTarget;
8
9
  onClose?: () => void;
9
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "14.4.0",
3
+ "version": "14.4.2",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",
@@ -139,7 +139,7 @@
139
139
  "@internationalized/date": "^3.5.4",
140
140
  "@popperjs/core": "^2.11.8",
141
141
  "@tanstack/react-table": "^8.21.2",
142
- "framer-motion": "^6.5.1",
142
+ "framer-motion": ">=6.5.1",
143
143
  "lodash.throttle": "^4.1.1",
144
144
  "react": "^17.0.2",
145
145
  "react-aria-components": "^1.2.1",