@veeqo/ui 13.20.0 → 13.21.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.
@@ -0,0 +1,36 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var buildClassnames = require('../../utils/buildClassnames.cjs');
5
+ require('uid/secure');
6
+ var withTokens = require('../../hoc/withTokens/withTokens.cjs');
7
+ var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
8
+ var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
9
+ var Text = require('../Text/Text.cjs');
10
+ var Button = require('../Button/Button.cjs');
11
+ var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
12
+ var FeatureBanner_module = require('./FeatureBanner.module.scss.cjs');
13
+
14
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
+
16
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
+
18
+ const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
19
+ return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames.buildClassnames([
20
+ FeatureBanner_module.featureBanner,
21
+ FeatureBanner_module[`${size}-size`],
22
+ FeatureBanner_module[`${variant}-variant`],
23
+ className,
24
+ ]), role: "region", "aria-label": title, ...divProps },
25
+ iconSlot && React__default.default.createElement("div", { className: FeatureBanner_module.iconBackground }, iconSlot),
26
+ React__default.default.createElement(FlexCol.FlexCol, { gap: "sm", flexGrow: "1", className: FeatureBanner_module[layout] },
27
+ React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
28
+ React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
29
+ contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
30
+ actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, size: "sm", variant: actionVariant, className: buildClassnames.buildClassnames([actionVariant === 'primary' && FeatureBanner_module.primaryAction]), ...actionProps }, label)))))),
31
+ 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" }))));
32
+ };
33
+ const FeatureBanner = withTokens.withTokens(FeatureBannerBase);
34
+
35
+ exports.FeatureBanner = FeatureBanner;
36
+ //# sourceMappingURL=FeatureBanner.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n variant = 'primary',\n size = 'default',\n layout = 'vertical',\n title,\n contentSlot,\n iconSlot,\n actions,\n onClose,\n className,\n ...divProps\n}: FeatureBannerProps) => {\n return (\n <FlexRow\n flexWrap=\"nowrap\"\n alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n justifyContent=\"space-between\"\n gap=\"none\"\n className={buildClassnames([\n styles.featureBanner,\n styles[`${size}-size`],\n styles[`${variant}-variant`],\n className,\n ])}\n role=\"region\"\n aria-label={title}\n {...divProps}\n >\n {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n <FlexCol gap=\"xs\">\n <Text variant=\"headingSmall\">{title}</Text>\n\n {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n </FlexCol>\n\n {actions && actions.length > 0 && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n <Button\n key={label}\n size=\"sm\"\n variant={actionVariant}\n className={buildClassnames([actionVariant === 'primary' && styles.primaryAction])}\n {...actionProps}\n >\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClose && (\n <Button\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n />\n )}\n </FlexRow>\n );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase);\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,qCAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzED,sBAAA,CAAA,aAAA,CAACM,aAAM,EACL,EAAA,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAEJ,+BAAe,CAAC,CAAC,aAAa,KAAK,SAAS,IAAIC,oBAAM,CAAC,aAAa,CAAC,CAAC,EAC7E,GAAA,WAAW,IAEd,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNH,sBAAC,CAAA,aAAA,CAAAM,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;MAEY,aAAa,GAAGC,qBAAU,CAAC,iBAAiB;;;;"}
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ export declare const FeatureBanner: {
3
+ ({ theme, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
4
+ variant?: import("./types").FeatureBannerVariant | undefined;
5
+ size?: import("./types").FeatureBannerSize | undefined;
6
+ layout?: import("./types").FeatureBannerLayout | undefined;
7
+ title: string;
8
+ contentSlot?: React.ReactNode;
9
+ iconSlot?: React.ReactNode;
10
+ actions?: import("./types").FeatureBannerAction[] | undefined;
11
+ onClose?: (() => void) | undefined;
12
+ }): React.JSX.Element;
13
+ displayName: string;
14
+ };
@@ -0,0 +1,30 @@
1
+ import React__default from 'react';
2
+ import { buildClassnames } from '../../utils/buildClassnames.js';
3
+ import 'uid/secure';
4
+ import { withTokens } from '../../hoc/withTokens/withTokens.js';
5
+ import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
6
+ import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
7
+ import { Text } from '../Text/Text.js';
8
+ import { Button } from '../Button/Button.js';
9
+ import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
10
+ import styles from './FeatureBanner.module.scss.js';
11
+
12
+ const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
13
+ return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames([
14
+ styles.featureBanner,
15
+ styles[`${size}-size`],
16
+ styles[`${variant}-variant`],
17
+ className,
18
+ ]), role: "region", "aria-label": title, ...divProps },
19
+ iconSlot && React__default.createElement("div", { className: styles.iconBackground }, iconSlot),
20
+ React__default.createElement(FlexCol, { gap: "sm", flexGrow: "1", className: styles[layout] },
21
+ React__default.createElement(FlexCol, { gap: "xs" },
22
+ React__default.createElement(Text, { variant: "headingSmall" }, title),
23
+ contentSlot && React__default.createElement(FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
24
+ actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Button, { key: label, size: "sm", variant: actionVariant, className: buildClassnames([actionVariant === 'primary' && styles.primaryAction]), ...actionProps }, label)))))),
25
+ onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner" }))));
26
+ };
27
+ const FeatureBanner = withTokens(FeatureBannerBase);
28
+
29
+ export { FeatureBanner };
30
+ //# sourceMappingURL=FeatureBanner.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n variant = 'primary',\n size = 'default',\n layout = 'vertical',\n title,\n contentSlot,\n iconSlot,\n actions,\n onClose,\n className,\n ...divProps\n}: FeatureBannerProps) => {\n return (\n <FlexRow\n flexWrap=\"nowrap\"\n alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n justifyContent=\"space-between\"\n gap=\"none\"\n className={buildClassnames([\n styles.featureBanner,\n styles[`${size}-size`],\n styles[`${variant}-variant`],\n className,\n ])}\n role=\"region\"\n aria-label={title}\n {...divProps}\n >\n {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n <FlexCol gap=\"xs\">\n <Text variant=\"headingSmall\">{title}</Text>\n\n {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n </FlexCol>\n\n {actions && actions.length > 0 && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n <Button\n key={label}\n size=\"sm\"\n variant={actionVariant}\n className={buildClassnames([actionVariant === 'primary' && styles.primaryAction])}\n {...actionProps}\n >\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClose && (\n <Button\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n />\n )}\n </FlexRow>\n );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,EAC7E,GAAA,WAAW,IAEd,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;MAEY,aAAa,GAAG,UAAU,CAAC,iBAAiB;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._featureBanner_dh7ox_1 {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_dh7ox_9 {\n --banner-padding: var(--sizes-base);\n --content-padding: 16px 8px;\n --icon-size: var(--sizes-md);\n}\n\n._sm-size_dh7ox_15 {\n --banner-padding: var(--sizes-3);\n --content-padding: 12px 8px;\n --icon-size: var(--sizes-5);\n}\n\n._xs-size_dh7ox_21 {\n --banner-padding: var(--sizes-sm);\n --content-padding: 8px 8px;\n --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_dh7ox_28 {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_dh7ox_34 {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-accent);\n border: none;\n}\n\n/* Layout */\n._vertical_dh7ox_42 {\n flex-direction: column;\n align-items: flex-start;\n padding-inline: var(--content-padding);\n}\n\n._horizontal_dh7ox_48 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_dh7ox_56 {\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n padding: var(--sizes-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n._iconBackground_dh7ox_56 > svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73 {\n background-color: var(--theme-primary);\n border-color: var(--theme-primary);\n color: var(--theme-on-primary);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:hover {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:active {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n}");
6
+ var styles = {"featureBanner":"_featureBanner_dh7ox_1","default-size":"_default-size_dh7ox_9","sm-size":"_sm-size_dh7ox_15","xs-size":"_xs-size_dh7ox_21","primary-variant":"_primary-variant_dh7ox_28","secondary-variant":"_secondary-variant_dh7ox_34","vertical":"_vertical_dh7ox_42","horizontal":"_horizontal_dh7ox_48","iconBackground":"_iconBackground_dh7ox_56","primaryAction":"_primaryAction_dh7ox_73"};
7
+
8
+ module.exports = styles;
9
+ //# sourceMappingURL=FeatureBanner.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n --banner-padding: var(--sizes-base);\n --content-padding: 16px 8px;\n --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n --banner-padding: var(--sizes-3);\n --content-padding: 12px 8px;\n --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n --banner-padding: var(--sizes-sm);\n --content-padding: 8px 8px;\n --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-accent);\n border: none;\n}\n\n/* Layout */\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n padding-inline: var(--content-padding);\n}\n\n.horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n padding: var(--sizes-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.iconBackground > svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n.primaryAction.primaryAction {\n background-color: var(--theme-primary);\n border-color: var(--theme-primary);\n color: var(--theme-on-primary);\n\n &:hover {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n }\n\n &:active {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kpEAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._featureBanner_dh7ox_1 {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_dh7ox_9 {\n --banner-padding: var(--sizes-base);\n --content-padding: 16px 8px;\n --icon-size: var(--sizes-md);\n}\n\n._sm-size_dh7ox_15 {\n --banner-padding: var(--sizes-3);\n --content-padding: 12px 8px;\n --icon-size: var(--sizes-5);\n}\n\n._xs-size_dh7ox_21 {\n --banner-padding: var(--sizes-sm);\n --content-padding: 8px 8px;\n --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_dh7ox_28 {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_dh7ox_34 {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-accent);\n border: none;\n}\n\n/* Layout */\n._vertical_dh7ox_42 {\n flex-direction: column;\n align-items: flex-start;\n padding-inline: var(--content-padding);\n}\n\n._horizontal_dh7ox_48 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_dh7ox_56 {\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n padding: var(--sizes-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n._iconBackground_dh7ox_56 > svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73 {\n background-color: var(--theme-primary);\n border-color: var(--theme-primary);\n color: var(--theme-on-primary);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:hover {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:active {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n}");
4
+ var styles = {"featureBanner":"_featureBanner_dh7ox_1","default-size":"_default-size_dh7ox_9","sm-size":"_sm-size_dh7ox_15","xs-size":"_xs-size_dh7ox_21","primary-variant":"_primary-variant_dh7ox_28","secondary-variant":"_secondary-variant_dh7ox_34","vertical":"_vertical_dh7ox_42","horizontal":"_horizontal_dh7ox_48","iconBackground":"_iconBackground_dh7ox_56","primaryAction":"_primaryAction_dh7ox_73"};
5
+
6
+ export { styles as default };
7
+ //# sourceMappingURL=FeatureBanner.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n --banner-padding: var(--sizes-base);\n --content-padding: 16px 8px;\n --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n --banner-padding: var(--sizes-3);\n --content-padding: 12px 8px;\n --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n --banner-padding: var(--sizes-sm);\n --content-padding: 8px 8px;\n --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-accent);\n border: none;\n}\n\n/* Layout */\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n padding-inline: var(--content-padding);\n}\n\n.horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n padding: var(--sizes-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.iconBackground > svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n.primaryAction.primaryAction {\n background-color: var(--theme-primary);\n border-color: var(--theme-primary);\n color: var(--theme-on-primary);\n\n &:hover {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n }\n\n &:active {\n background-color: var(--theme-primary-hover);\n border-color: var(--theme-primary-hover);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kpEAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}
@@ -0,0 +1,2 @@
1
+ export { FeatureBanner } from './FeatureBanner';
2
+ export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout, FeatureBannerAction } from './types';
@@ -0,0 +1,35 @@
1
+ import { ReactNode } from 'react';
2
+ import { WithTokensProps } from '../../hoc/withTokens/withTokens';
3
+ /** Visual style of the banner */
4
+ export type FeatureBannerVariant = 'primary' | 'secondary';
5
+ /** Controls the padding density of the banner */
6
+ export type FeatureBannerSize = 'default' | 'sm' | 'xs';
7
+ /** Direction of the banner content flow */
8
+ export type FeatureBannerLayout = 'vertical' | 'horizontal';
9
+ /** Configuration for an action button within the banner */
10
+ export type FeatureBannerAction = {
11
+ /** Button label text */
12
+ label: string;
13
+ /** Click handler for the action */
14
+ onClick: () => void;
15
+ /** Button style — `'primary'` for emphasis, `'default'` for secondary actions */
16
+ variant?: 'primary' | 'default';
17
+ };
18
+ export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
19
+ /** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
20
+ variant?: FeatureBannerVariant;
21
+ /** Controls padding density */
22
+ size?: FeatureBannerSize;
23
+ /** Direction of content flow. `'vertical'` stacks content, `'horizontal'` places content side-by-side */
24
+ layout?: FeatureBannerLayout;
25
+ /** Banner heading text, also used as the `aria-label` for the region */
26
+ title: string;
27
+ /** Flexible content area below the title for message text, links, or any custom content */
28
+ contentSlot?: ReactNode;
29
+ /** Icon displayed in a themed background container */
30
+ iconSlot?: ReactNode;
31
+ /** Action buttons rendered below the content */
32
+ actions?: FeatureBannerAction[];
33
+ /** Close handler. When provided, renders a close button */
34
+ onClose?: () => void;
35
+ };
@@ -2,8 +2,8 @@
2
2
 
3
3
  var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
4
 
5
- ___$insertStyle("._default_1ad7m_1 {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-hover: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-link: var(--colors-secondary-blue-dark);\n --theme-icon: var(--colors-secondary-blue-base);\n --theme-action-bg: var(--colors-secondary-blue-base);\n --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-hover: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-link: var(--colors-secondary-purple-dark);\n --theme-icon: var(--colors-secondary-purple-dark);\n --theme-action-bg: var(--colors-secondary-purple-base);\n --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-hover: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-link: var(--colors-secondary-teal-dark);\n --theme-icon: var(--colors-secondary-teal-dark);\n --theme-action-bg: var(--colors-secondary-teal-base);\n --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n --theme-action-text: #ffffff;\n}");
6
- var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
5
+ ___$insertStyle("._default_1f5az_1 {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text-primary: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-accent: var(--colors-secondary-blue-dark);\n --theme-accent: var(--colors-secondary-blue-base);\n --theme-primary: var(--colors-secondary-blue-base);\n --theme-primary-hover: var(--colors-secondary-blue-dark);\n --theme-on-primary: #ffffff;\n}\n\n._purple_1f5az_15 {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text-primary: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-accent: var(--colors-secondary-purple-dark);\n --theme-accent: var(--colors-secondary-purple-dark);\n --theme-primary: var(--colors-secondary-purple-base);\n --theme-primary-hover: var(--colors-secondary-purple-dark);\n --theme-on-primary: #ffffff;\n}\n\n._teal_1f5az_29 {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text-primary: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-accent: var(--colors-secondary-teal-dark);\n --theme-accent: var(--colors-secondary-teal-dark);\n --theme-primary: var(--colors-secondary-teal-base);\n --theme-primary-hover: var(--colors-secondary-teal-dark);\n --theme-on-primary: #ffffff;\n}");
6
+ var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
7
7
 
8
8
  module.exports = styles;
9
9
  //# sourceMappingURL=TokenProvider.module.scss.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TokenProvider.module.scss.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-hover: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-link: var(--colors-secondary-blue-dark);\n --theme-icon: var(--colors-secondary-blue-base);\n --theme-action-bg: var(--colors-secondary-blue-base);\n --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n --theme-action-text: #ffffff;\n}\n\n.purple {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-hover: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-link: var(--colors-secondary-purple-dark);\n --theme-icon: var(--colors-secondary-purple-dark);\n --theme-action-bg: var(--colors-secondary-purple-base);\n --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n --theme-action-text: #ffffff;\n}\n\n.teal {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-hover: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-link: var(--colors-secondary-teal-dark);\n --theme-icon: var(--colors-secondary-teal-dark);\n --theme-action-bg: var(--colors-secondary-teal-base);\n --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n --theme-action-text: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4tDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
1
+ {"version":3,"file":"TokenProvider.module.scss.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text-primary: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-accent: var(--colors-secondary-blue-dark);\n --theme-accent: var(--colors-secondary-blue-base);\n --theme-primary: var(--colors-secondary-blue-base);\n --theme-primary-hover: var(--colors-secondary-blue-dark);\n --theme-on-primary: #ffffff;\n}\n\n.purple {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text-primary: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-accent: var(--colors-secondary-purple-dark);\n --theme-accent: var(--colors-secondary-purple-dark);\n --theme-primary: var(--colors-secondary-purple-base);\n --theme-primary-hover: var(--colors-secondary-purple-dark);\n --theme-on-primary: #ffffff;\n}\n\n.teal {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text-primary: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-accent: var(--colors-secondary-teal-dark);\n --theme-accent: var(--colors-secondary-teal-dark);\n --theme-primary: var(--colors-secondary-teal-base);\n --theme-primary-hover: var(--colors-secondary-teal-dark);\n --theme-on-primary: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
@@ -1,7 +1,7 @@
1
1
  import insertStyle from '../../_virtual/____insertStyle.js';
2
2
 
3
- insertStyle("._default_1ad7m_1 {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-hover: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-link: var(--colors-secondary-blue-dark);\n --theme-icon: var(--colors-secondary-blue-base);\n --theme-action-bg: var(--colors-secondary-blue-base);\n --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-hover: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-link: var(--colors-secondary-purple-dark);\n --theme-icon: var(--colors-secondary-purple-dark);\n --theme-action-bg: var(--colors-secondary-purple-base);\n --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-hover: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-link: var(--colors-secondary-teal-dark);\n --theme-icon: var(--colors-secondary-teal-dark);\n --theme-action-bg: var(--colors-secondary-teal-base);\n --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n --theme-action-text: #ffffff;\n}");
4
- var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
3
+ insertStyle("._default_1f5az_1 {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text-primary: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-accent: var(--colors-secondary-blue-dark);\n --theme-accent: var(--colors-secondary-blue-base);\n --theme-primary: var(--colors-secondary-blue-base);\n --theme-primary-hover: var(--colors-secondary-blue-dark);\n --theme-on-primary: #ffffff;\n}\n\n._purple_1f5az_15 {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text-primary: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-accent: var(--colors-secondary-purple-dark);\n --theme-accent: var(--colors-secondary-purple-dark);\n --theme-primary: var(--colors-secondary-purple-base);\n --theme-primary-hover: var(--colors-secondary-purple-dark);\n --theme-on-primary: #ffffff;\n}\n\n._teal_1f5az_29 {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text-primary: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-accent: var(--colors-secondary-teal-dark);\n --theme-accent: var(--colors-secondary-teal-dark);\n --theme-primary: var(--colors-secondary-teal-base);\n --theme-primary-hover: var(--colors-secondary-teal-dark);\n --theme-on-primary: #ffffff;\n}");
4
+ var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
5
5
 
6
6
  export { styles as default };
7
7
  //# sourceMappingURL=TokenProvider.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TokenProvider.module.scss.js","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-hover: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-link: var(--colors-secondary-blue-dark);\n --theme-icon: var(--colors-secondary-blue-base);\n --theme-action-bg: var(--colors-secondary-blue-base);\n --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n --theme-action-text: #ffffff;\n}\n\n.purple {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-hover: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-link: var(--colors-secondary-purple-dark);\n --theme-icon: var(--colors-secondary-purple-dark);\n --theme-action-bg: var(--colors-secondary-purple-base);\n --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n --theme-action-text: #ffffff;\n}\n\n.teal {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-hover: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-link: var(--colors-secondary-teal-dark);\n --theme-icon: var(--colors-secondary-teal-dark);\n --theme-action-bg: var(--colors-secondary-teal-base);\n --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n --theme-action-text: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4tDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
1
+ {"version":3,"file":"TokenProvider.module.scss.js","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n --theme-surface: var(--colors-secondary-blue-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-blue-light);\n --theme-border: var(--colors-secondary-blue-base);\n --theme-text-primary: var(--colors-secondary-blue-darkest);\n --theme-text-secondary: var(--colors-secondary-blue-dark);\n --theme-text-accent: var(--colors-secondary-blue-dark);\n --theme-accent: var(--colors-secondary-blue-base);\n --theme-primary: var(--colors-secondary-blue-base);\n --theme-primary-hover: var(--colors-secondary-blue-dark);\n --theme-on-primary: #ffffff;\n}\n\n.purple {\n --theme-surface: var(--colors-secondary-purple-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-purple-light);\n --theme-border: var(--colors-secondary-purple-light);\n --theme-text-primary: var(--colors-secondary-purple-darkest);\n --theme-text-secondary: var(--colors-secondary-purple-dark);\n --theme-text-accent: var(--colors-secondary-purple-dark);\n --theme-accent: var(--colors-secondary-purple-dark);\n --theme-primary: var(--colors-secondary-purple-base);\n --theme-primary-hover: var(--colors-secondary-purple-dark);\n --theme-on-primary: #ffffff;\n}\n\n.teal {\n --theme-surface: var(--colors-secondary-teal-lightest);\n --theme-surface-secondary: #ffffff;\n --theme-surface-alt: var(--colors-secondary-teal-light);\n --theme-border: var(--colors-secondary-teal-light);\n --theme-text-primary: var(--colors-secondary-teal-darkest);\n --theme-text-secondary: var(--colors-secondary-teal-dark);\n --theme-text-accent: var(--colors-secondary-teal-dark);\n --theme-accent: var(--colors-secondary-teal-dark);\n --theme-primary: var(--colors-secondary-teal-base);\n --theme-primary-hover: var(--colors-secondary-teal-dark);\n --theme-on-primary: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
@@ -28,6 +28,7 @@ export { DetailPage } from './DetailPage';
28
28
  export { DimensionsInput } from './DimensionsInput';
29
29
  export { Divider, type DividerProps } from './Divider';
30
30
  export { Dropdown } from './Dropdown';
31
+ export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
31
32
  export { FilterTag } from './FilterTag';
32
33
  export { Grid } from './Grid';
33
34
  export { Image } from './Image';
package/dist/index.cjs CHANGED
@@ -38,6 +38,7 @@ var DetailPage = require('./components/DetailPage/DetailPage.cjs');
38
38
  var DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
39
39
  var Divider = require('./components/Divider/Divider.cjs');
40
40
  var Dropdown = require('./components/Dropdown/Dropdown.cjs');
41
+ var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
41
42
  var FilterTag = require('./components/FilterTag/FilterTag.cjs');
42
43
  var index$1 = require('./components/Grid/index.cjs');
43
44
  var Image = require('./components/Image/Image.cjs');
@@ -394,6 +395,7 @@ exports.DetailPage = DetailPage.DetailPage;
394
395
  exports.DimensionsInput = DimensionsInput.DimensionsInput;
395
396
  exports.Divider = Divider.Divider;
396
397
  exports.Dropdown = Dropdown.Dropdown;
398
+ exports.FeatureBanner = FeatureBanner.FeatureBanner;
397
399
  exports.FilterTag = FilterTag.FilterTag;
398
400
  exports.Grid = index$1.Grid;
399
401
  exports.Image = Image.Image;
@@ -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
@@ -36,6 +36,7 @@ export { DetailPage } from './components/DetailPage/DetailPage.js';
36
36
  export { DimensionsInput } from './components/DimensionsInput/DimensionsInput.js';
37
37
  export { Divider } from './components/Divider/Divider.js';
38
38
  export { Dropdown } from './components/Dropdown/Dropdown.js';
39
+ export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
39
40
  export { FilterTag } from './components/FilterTag/FilterTag.js';
40
41
  export { Grid } from './components/Grid/index.js';
41
42
  export { Image } from './components/Image/Image.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.20.0",
3
+ "version": "13.21.0",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",