@veeqo/ui 14.0.0-beta-1 → 14.0.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.
- package/dist/components/IconGroup/IconGroup.cjs +1 -1
- package/dist/components/IconGroup/IconGroup.cjs.map +1 -1
- package/dist/components/IconGroup/IconGroup.js +1 -1
- package/dist/components/IconGroup/IconGroup.js.map +1 -1
- package/dist/components/IconGroup/types.d.ts +1 -1
- package/dist/components/SystemBanner/SystemBanner.module.scss.cjs +2 -2
- package/dist/components/SystemBanner/SystemBanner.module.scss.cjs.map +1 -1
- package/dist/components/SystemBanner/SystemBanner.module.scss.js +2 -2
- package/dist/components/SystemBanner/SystemBanner.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
14
14
|
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
15
15
|
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
16
16
|
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
17
|
-
return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([IconGroup_module.list, className])
|
|
17
|
+
return (React__default.default.createElement("ul", { ...listProps, "aria-label": ariaLabel, className: buildClassnames.buildClassnames([IconGroup_module.list, className]) },
|
|
18
18
|
hiddenIcons.length > 0 && (React__default.default.createElement("li", { key: "icon-group-item-remaining-count", className: IconGroup_module.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
19
19
|
'--icon-z-index': maxVisible,
|
|
20
20
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])}
|
|
1
|
+
{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","buildClassnames","styles","Icon","theme","index"],"mappings":";;;;;;;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,sBAAQ,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAA,SAAS,EAAc,YAAA,EAAA,SAAS,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YAAC,QACjCL,6CACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAEE,gBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAGG,OAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -8,7 +8,7 @@ import styles from './IconGroup.module.scss.js';
|
|
|
8
8
|
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
9
9
|
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
10
10
|
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
11
|
-
return (React__default.createElement("ul", { className: buildClassnames([styles.list, className])
|
|
11
|
+
return (React__default.createElement("ul", { ...listProps, "aria-label": ariaLabel, className: buildClassnames([styles.list, className]) },
|
|
12
12
|
hiddenIcons.length > 0 && (React__default.createElement("li", { key: "icon-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
13
13
|
'--icon-z-index': maxVisible,
|
|
14
14
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])}
|
|
1
|
+
{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","Icon"],"mappings":";;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,cAAQ,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAA,SAAS,EAAc,YAAA,EAAA,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAAC,MAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;YAAC,QACjCD,qCACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAG,KAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -6,7 +6,7 @@ export type IconProps = Omit<AvatarProps, 'hasIndicator'>;
|
|
|
6
6
|
export type IconGroupProps = React.HTMLAttributes<HTMLUListElement> & {
|
|
7
7
|
/** List of icons to display */
|
|
8
8
|
icons: IconProps[];
|
|
9
|
-
/** Number of icons to show before collapsing. 3 is the default
|
|
9
|
+
/** Number of icons to show before collapsing. 3 is the default. */
|
|
10
10
|
maxVisible?: number;
|
|
11
11
|
/** Switches all icon sizes from lg to md */
|
|
12
12
|
compact?: boolean;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"banner":"
|
|
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"};
|
|
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 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,
|
|
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,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"banner":"
|
|
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"};
|
|
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 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,
|
|
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;;;;"}
|