@veeqo/ui 13.19.0 → 13.20.0
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.
- package/dist/components/SystemBanner/SystemBanner.cjs +37 -0
- package/dist/components/SystemBanner/SystemBanner.cjs.map +1 -0
- package/dist/components/SystemBanner/SystemBanner.d.ts +3 -0
- package/dist/components/SystemBanner/SystemBanner.js +31 -0
- package/dist/components/SystemBanner/SystemBanner.js.map +1 -0
- package/dist/components/SystemBanner/SystemBanner.module.scss.cjs +9 -0
- package/dist/components/SystemBanner/SystemBanner.module.scss.cjs.map +1 -0
- package/dist/components/SystemBanner/SystemBanner.module.scss.js +7 -0
- package/dist/components/SystemBanner/SystemBanner.module.scss.js.map +1 -0
- package/dist/components/SystemBanner/index.d.ts +2 -0
- package/dist/components/SystemBanner/types.d.ts +9 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
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
|
+
var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
|
|
9
|
+
var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
|
|
10
|
+
var InfoFillIcon = require('../../icons/design-system/components/InfoFillIcon.cjs');
|
|
11
|
+
var WarningIcon = require('../../icons/design-system/components/WarningIcon.cjs');
|
|
12
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
13
|
+
require('uid/secure');
|
|
14
|
+
var SystemBanner_module = require('./SystemBanner.module.scss.cjs');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
17
|
+
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
19
|
+
|
|
20
|
+
const IconMap = {
|
|
21
|
+
error: CriticalIcon.ReactComponent,
|
|
22
|
+
warning: WarningIcon.ReactComponent,
|
|
23
|
+
default: InfoFillIcon.ReactComponent,
|
|
24
|
+
};
|
|
25
|
+
const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
|
|
26
|
+
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 },
|
|
28
|
+
React__default.default.createElement(FlexRow.FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
|
|
29
|
+
React__default.default.createElement(Icon, { role: "presentation" }),
|
|
30
|
+
React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
|
|
31
|
+
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 }))));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.SystemBanner = SystemBanner;
|
|
37
|
+
//# sourceMappingURL=SystemBanner.cjs.map
|
|
@@ -0,0 +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;AAEY,MAAA,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAM,CAAC,MAAM,EAAEA,mBAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,EAAA,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAG,CAAA;AAC5B,YAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAD,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBJ,sBAAC,CAAA,aAAA,CAAAK,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNL,sBAAC,CAAA,aAAA,CAAAM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAC,CAAA,aAAA,CAAAO,wBAAS,EAAG,IAAA,CAAA,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAEJ,mBAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
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
|
+
import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
|
|
7
|
+
import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
|
|
8
|
+
import { ReactComponent as InfoFillIcon } from '../../icons/design-system/components/InfoFillIcon.js';
|
|
9
|
+
import { ReactComponent as WarningIcon } from '../../icons/design-system/components/WarningIcon.js';
|
|
10
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
11
|
+
import 'uid/secure';
|
|
12
|
+
import styles from './SystemBanner.module.scss.js';
|
|
13
|
+
|
|
14
|
+
const IconMap = {
|
|
15
|
+
error: CriticalIcon,
|
|
16
|
+
warning: WarningIcon,
|
|
17
|
+
default: InfoFillIcon,
|
|
18
|
+
};
|
|
19
|
+
const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
|
|
20
|
+
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 },
|
|
22
|
+
React__default.createElement(FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
|
|
23
|
+
React__default.createElement(Icon, { role: "presentation" }),
|
|
24
|
+
React__default.createElement(FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
|
|
25
|
+
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 }))));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { SystemBanner };
|
|
31
|
+
//# sourceMappingURL=SystemBanner.js.map
|
|
@@ -0,0 +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;AAEY,MAAA,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACO,KAAI;AACtB,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;AAE7B,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,KACnE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAG,CAAA;AAC5B,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA;AAC3D,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,OAAO,CAAQ;AACxC,gBAAA,QAAQ,IAAI,QAAQ,KACnBA,cAAC,CAAA,aAAA,CAAA,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAA,EAChC,QAAQ,CACF,CACV,CACO,CACF;AACT,QAAA,OAAO,KACNA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA,EACvB,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAC7B,CACH,CACO;AAEd;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._banner_vx0y5_1 {\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_vx0y5_1 span,\n._banner_vx0y5_1 svg,\n._banner_vx0y5_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_vx0y5_12 {\n margin-left: auto;\n}\n\n._default_vx0y5_16 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_vx0y5_16 ._closeButton_vx0y5_12:hover,\n._default_vx0y5_16 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_vx0y5_25 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_vx0y5_25 ._closeButton_vx0y5_12:hover,\n._error_vx0y5_25 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_vx0y5_34 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_vx0y5_34 ._closeButton_vx0y5_12:hover,\n._warning_vx0y5_34 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
|
|
6
|
+
var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=SystemBanner.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemBanner.module.scss.cjs","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qsCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._banner_vx0y5_1 {\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n._banner_vx0y5_1 span,\n._banner_vx0y5_1 svg,\n._banner_vx0y5_1 a {\n color: var(--banner-text-color);\n}\n\n._closeButton_vx0y5_12 {\n margin-left: auto;\n}\n\n._default_vx0y5_16 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n}\n._default_vx0y5_16 ._closeButton_vx0y5_12:hover,\n._default_vx0y5_16 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._error_vx0y5_25 {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n}\n._error_vx0y5_25 ._closeButton_vx0y5_12:hover,\n._error_vx0y5_25 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n}\n\n._warning_vx0y5_34 {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n}\n._warning_vx0y5_34 ._closeButton_vx0y5_12:hover,\n._warning_vx0y5_34 ._closeButton_vx0y5_12:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n}");
|
|
4
|
+
var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=SystemBanner.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemBanner.module.scss.js","sources":["../../../src/components/SystemBanner/SystemBanner.module.scss"],"sourcesContent":[".banner {\n padding: var(--sizes-sm);\n height: var(--sizes-xl);\n}\n\n.banner span,\n.banner svg,\n.banner a {\n color: var(--banner-text-color);\n}\n\n.closeButton {\n margin-left: auto;\n}\n\n.default {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-blue-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.error {\n --banner-text-color: var(--colors-neutral-grey-lightest);\n background-color: var(--colors-secondary-red-dark);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, white 15%, transparent);\n }\n}\n\n.warning {\n --banner-text-color: var(--colors-neutral-ink-base);\n background-color: var(--colors-secondary-yellow-base);\n\n .closeButton:hover,\n .closeButton:focus-visible {\n background-color: color-mix(in srgb, var(--colors-neutral-ink-dark) 15%, transparent);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qsCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type SystemBannerVariant = 'default' | 'error' | 'warning';
|
|
3
|
+
export type SystemBannerProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
|
+
variant?: SystemBannerVariant;
|
|
5
|
+
message: string;
|
|
6
|
+
linkText?: string;
|
|
7
|
+
linkHref?: string;
|
|
8
|
+
onClose?: () => void;
|
|
9
|
+
};
|
|
@@ -53,6 +53,7 @@ export { Skeleton } from './Skeleton';
|
|
|
53
53
|
export { Slider } from './Slider';
|
|
54
54
|
export { Stack, type StackProps } from './Stack';
|
|
55
55
|
export { Stepper } from './Stepper';
|
|
56
|
+
export { SystemBanner, type SystemBannerProps, type SystemBannerVariant, } from './SystemBanner';
|
|
56
57
|
export { Tag } from './Tag';
|
|
57
58
|
export { Text } from './Text';
|
|
58
59
|
export { TextField, type TextFieldType } from './TextField';
|
package/dist/index.cjs
CHANGED
|
@@ -63,6 +63,7 @@ var Skeleton = require('./components/Skeleton/Skeleton.cjs');
|
|
|
63
63
|
var Slider = require('./components/Slider/Slider.cjs');
|
|
64
64
|
var Stack = require('./components/Stack/Stack.cjs');
|
|
65
65
|
var Stepper = require('./components/Stepper/Stepper.cjs');
|
|
66
|
+
var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
|
|
66
67
|
var Tag = require('./components/Tag/Tag.cjs');
|
|
67
68
|
var Text = require('./components/Text/Text.cjs');
|
|
68
69
|
var index$3 = require('./components/TextField/index.cjs');
|
|
@@ -418,6 +419,7 @@ exports.Skeleton = Skeleton.Skeleton;
|
|
|
418
419
|
exports.Slider = Slider.Slider;
|
|
419
420
|
exports.Stack = Stack.Stack;
|
|
420
421
|
exports.Stepper = Stepper.Stepper;
|
|
422
|
+
exports.SystemBanner = SystemBanner.SystemBanner;
|
|
421
423
|
exports.Tag = Tag.Tag;
|
|
422
424
|
exports.Text = Text.Text;
|
|
423
425
|
exports.TextField = index$3.TextField;
|
package/dist/index.cjs.map
CHANGED
|
@@ -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
|
@@ -61,6 +61,7 @@ export { Skeleton } from './components/Skeleton/Skeleton.js';
|
|
|
61
61
|
export { Slider } from './components/Slider/Slider.js';
|
|
62
62
|
export { Stack } from './components/Stack/Stack.js';
|
|
63
63
|
export { Stepper } from './components/Stepper/Stepper.js';
|
|
64
|
+
export { SystemBanner } from './components/SystemBanner/SystemBanner.js';
|
|
64
65
|
export { Tag } from './components/Tag/Tag.js';
|
|
65
66
|
export { Text } from './components/Text/Text.js';
|
|
66
67
|
export { TextField } from './components/TextField/index.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|