@veeqo/ui 13.19.0 → 13.21.0

package/dist/components/FeatureBanner/FeatureBanner.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var withTokens = require('../../hoc/withTokens/withTokens.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var Text = require('../Text/Text.cjs');
+var Button = require('../Button/Button.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var FeatureBanner_module = require('./FeatureBanner.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames.buildClassnames([
+            FeatureBanner_module.featureBanner,
+            FeatureBanner_module[`${size}-size`],
+            FeatureBanner_module[`${variant}-variant`],
+            className,
+        ]), role: "region", "aria-label": title, ...divProps },
+        iconSlot && React__default.default.createElement("div", { className: FeatureBanner_module.iconBackground }, iconSlot),
+        React__default.default.createElement(FlexCol.FlexCol, { gap: "sm", flexGrow: "1", className: FeatureBanner_module[layout] },
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
+                React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
+                contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
+            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)))))),
+        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" }))));
+};
+const FeatureBanner = withTokens.withTokens(FeatureBannerBase);
+
+exports.FeatureBanner = FeatureBanner;
+//# sourceMappingURL=FeatureBanner.cjs.map

package/dist/components/FeatureBanner/FeatureBanner.cjs.map

@@ -0,0 +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;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const FeatureBanner: {
+    ({ theme, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
+        variant?: import("./types").FeatureBannerVariant | undefined;
+        size?: import("./types").FeatureBannerSize | undefined;
+        layout?: import("./types").FeatureBannerLayout | undefined;
+        title: string;
+        contentSlot?: React.ReactNode;
+        iconSlot?: React.ReactNode;
+        actions?: import("./types").FeatureBannerAction[] | undefined;
+        onClose?: (() => void) | undefined;
+    }): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/FeatureBanner/FeatureBanner.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { withTokens } from '../../hoc/withTokens/withTokens.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { Text } from '../Text/Text.js';
+import { Button } from '../Button/Button.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import styles from './FeatureBanner.module.scss.js';
+
+const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames([
+            styles.featureBanner,
+            styles[`${size}-size`],
+            styles[`${variant}-variant`],
+            className,
+        ]), role: "region", "aria-label": title, ...divProps },
+        iconSlot && React__default.createElement("div", { className: styles.iconBackground }, iconSlot),
+        React__default.createElement(FlexCol, { gap: "sm", flexGrow: "1", className: styles[layout] },
+            React__default.createElement(FlexCol, { gap: "xs" },
+                React__default.createElement(Text, { variant: "headingSmall" }, title),
+                contentSlot && React__default.createElement(FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
+            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)))))),
+        onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner" }))));
+};
+const FeatureBanner = withTokens(FeatureBannerBase);
+
+export { FeatureBanner };
+//# sourceMappingURL=FeatureBanner.js.map

package/dist/components/FeatureBanner/FeatureBanner.js.map

@@ -0,0 +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;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$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}");
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=FeatureBanner.module.scss.cjs.map

package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs.map

@@ -0,0 +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;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+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}");
+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"};
+
+export { styles as default };
+//# sourceMappingURL=FeatureBanner.module.scss.js.map

package/dist/components/FeatureBanner/FeatureBanner.module.scss.js.map

@@ -0,0 +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;;;;"}

package/dist/components/FeatureBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { FeatureBanner } from './FeatureBanner';
+export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout, FeatureBannerAction } from './types';

package/dist/components/FeatureBanner/types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { WithTokensProps } from '../../hoc/withTokens/withTokens';
+/** Visual style of the banner */
+export type FeatureBannerVariant = 'primary' | 'secondary';
+/** Controls the padding density of the banner */
+export type FeatureBannerSize = 'default' | 'sm' | 'xs';
+/** Direction of the banner content flow */
+export type FeatureBannerLayout = 'vertical' | 'horizontal';
+/** Configuration for an action button within the banner */
+export type FeatureBannerAction = {
+    /** Button label text */
+    label: string;
+    /** Click handler for the action */
+    onClick: () => void;
+    /** Button style — `'primary'` for emphasis, `'default'` for secondary actions */
+    variant?: 'primary' | 'default';
+};
+export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
+    /** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
+    variant?: FeatureBannerVariant;
+    /** Controls padding density */
+    size?: FeatureBannerSize;
+    /** Direction of content flow. `'vertical'` stacks content, `'horizontal'` places content side-by-side */
+    layout?: FeatureBannerLayout;
+    /** Banner heading text, also used as the `aria-label` for the region */
+    title: string;
+    /** Flexible content area below the title for message text, links, or any custom content */
+    contentSlot?: ReactNode;
+    /** Icon displayed in a themed background container */
+    iconSlot?: ReactNode;
+    /** Action buttons rendered below the content */
+    actions?: FeatureBannerAction[];
+    /** Close handler. When provided, renders a close button */
+    onClose?: () => void;
+};

package/dist/components/SystemBanner/SystemBanner.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var Text = require('../Text/Text.cjs');
+var Anchor = require('../Anchor/Anchor.cjs');
+var Button = require('../Button/Button.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var InfoFillIcon = require('../../icons/design-system/components/InfoFillIcon.cjs');
+var WarningIcon = require('../../icons/design-system/components/WarningIcon.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var SystemBanner_module = require('./SystemBanner.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const IconMap = {
+    error: CriticalIcon.ReactComponent,
+    warning: WarningIcon.ReactComponent,
+    default: InfoFillIcon.ReactComponent,
+};
+const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
+    const Icon = IconMap[variant];
+    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 },
+        React__default.default.createElement(FlexRow.FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+            React__default.default.createElement(Icon, { role: "presentation" }),
+            React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
+                React__default.default.createElement(Text.Text, { variant: "bodyBold" }, message),
+                linkText && linkHref && (React__default.default.createElement(Anchor.Anchor, { href: linkHref, size: "base" }, linkText)))),
+        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 }))));
+};
+
+exports.SystemBanner = SystemBanner;
+//# sourceMappingURL=SystemBanner.cjs.map

package/dist/components/SystemBanner/SystemBanner.cjs.map

@@ -0,0 +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;;;;"}

package/dist/components/SystemBanner/SystemBanner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SystemBannerProps } from './types';
+export declare const SystemBanner: ({ variant, message, linkText, linkHref, onClose, className, ...divProps }: SystemBannerProps) => React.JSX.Element;

package/dist/components/SystemBanner/SystemBanner.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Text } from '../Text/Text.js';
+import { Anchor } from '../Anchor/Anchor.js';
+import { Button } from '../Button/Button.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as InfoFillIcon } from '../../icons/design-system/components/InfoFillIcon.js';
+import { ReactComponent as WarningIcon } from '../../icons/design-system/components/WarningIcon.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './SystemBanner.module.scss.js';
+
+const IconMap = {
+    error: CriticalIcon,
+    warning: WarningIcon,
+    default: InfoFillIcon,
+};
+const SystemBanner = ({ variant = 'default', message, linkText, linkHref, onClose, className, ...divProps }) => {
+    const Icon = IconMap[variant];
+    return (React__default.createElement(FlexRow, { role: "alert", alignItems: "center", justifyContent: "center", flexWrap: "nowrap", className: buildClassnames([styles.banner, styles[variant], className]), ...divProps },
+        React__default.createElement(FlexRow, { gap: "3", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+            React__default.createElement(Icon, { role: "presentation" }),
+            React__default.createElement(FlexRow, { gap: "xs", alignItems: "center", justifyContent: "center" },
+                React__default.createElement(Text, { variant: "bodyBold" }, message),
+                linkText && linkHref && (React__default.createElement(Anchor, { href: linkHref, size: "base" }, linkText)))),
+        onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: styles.closeButton }))));
+};
+
+export { SystemBanner };
+//# sourceMappingURL=SystemBanner.js.map

package/dist/components/SystemBanner/SystemBanner.js.map

@@ -0,0 +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;;;;"}

package/dist/components/SystemBanner/SystemBanner.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$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}");
+var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
+
+module.exports = styles;
+//# sourceMappingURL=SystemBanner.module.scss.cjs.map

package/dist/components/SystemBanner/SystemBanner.module.scss.cjs.map

@@ -0,0 +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;;;;"}

package/dist/components/SystemBanner/SystemBanner.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+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}");
+var styles = {"banner":"_banner_vx0y5_1","closeButton":"_closeButton_vx0y5_12","default":"_default_vx0y5_16","error":"_error_vx0y5_25","warning":"_warning_vx0y5_34"};
+
+export { styles as default };
+//# sourceMappingURL=SystemBanner.module.scss.js.map

package/dist/components/SystemBanner/SystemBanner.module.scss.js.map

@@ -0,0 +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;;;;"}

package/dist/components/SystemBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { SystemBanner } from './SystemBanner';
+export type { SystemBannerProps, SystemBannerVariant } from './types';

package/dist/components/SystemBanner/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type SystemBannerVariant = 'default' | 'error' | 'warning';
+export type SystemBannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: SystemBannerVariant;
+    message: string;
+    linkText?: string;
+    linkHref?: string;
+    onClose?: () => void;
+};

package/dist/components/TokenProvider/TokenProvider.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$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}");
-var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+___$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}");
+var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
 
 module.exports = styles;
 //# sourceMappingURL=TokenProvider.module.scss.cjs.map

package/dist/components/TokenProvider/TokenProvider.module.scss.cjs.map

@@ -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;;;;"}
+{"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;;;;"}

package/dist/components/TokenProvider/TokenProvider.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-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}");
-var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+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}");
+var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
 
 export { styles as default };
 //# sourceMappingURL=TokenProvider.module.scss.js.map

package/dist/components/TokenProvider/TokenProvider.module.scss.js.map

@@ -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;;;;"}
+{"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;;;;"}

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
 export { Divider, type DividerProps } from './Divider';
 export { Dropdown } from './Dropdown';
+export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';
@@ -53,6 +54,7 @@ export { Skeleton } from './Skeleton';
 export { Slider } from './Slider';
 export { Stack, type StackProps } from './Stack';
 export { Stepper } from './Stepper';
+export { SystemBanner, type SystemBannerProps, type SystemBannerVariant, } from './SystemBanner';
 export { Tag } from './Tag';
 export { Text } from './Text';
 export { TextField, type TextFieldType } from './TextField';

package/dist/index.cjs

@@ -38,6 +38,7 @@ var DetailPage = require('./components/DetailPage/DetailPage.cjs');
 var DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
 var Divider = require('./components/Divider/Divider.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
+var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
 var index$1 = require('./components/Grid/index.cjs');
 var Image = require('./components/Image/Image.cjs');
@@ -63,6 +64,7 @@ var Skeleton = require('./components/Skeleton/Skeleton.cjs');
 var Slider = require('./components/Slider/Slider.cjs');
 var Stack = require('./components/Stack/Stack.cjs');
 var Stepper = require('./components/Stepper/Stepper.cjs');
+var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
 var index$3 = require('./components/TextField/index.cjs');
@@ -393,6 +395,7 @@ exports.DetailPage = DetailPage.DetailPage;
 exports.DimensionsInput = DimensionsInput.DimensionsInput;
 exports.Divider = Divider.Divider;
 exports.Dropdown = Dropdown.Dropdown;
+exports.FeatureBanner = FeatureBanner.FeatureBanner;
 exports.FilterTag = FilterTag.FilterTag;
 exports.Grid = index$1.Grid;
 exports.Image = Image.Image;
@@ -418,6 +421,7 @@ exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Stack = Stack.Stack;
 exports.Stepper = Stepper.Stepper;
+exports.SystemBanner = SystemBanner.SystemBanner;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
 exports.TextField = index$3.TextField;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -36,6 +36,7 @@ export { DetailPage } from './components/DetailPage/DetailPage.js';
 export { DimensionsInput } from './components/DimensionsInput/DimensionsInput.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
+export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
 export { Image } from './components/Image/Image.js';
@@ -61,6 +62,7 @@ export { Skeleton } from './components/Skeleton/Skeleton.js';
 export { Slider } from './components/Slider/Slider.js';
 export { Stack } from './components/Stack/Stack.js';
 export { Stepper } from './components/Stepper/Stepper.js';
+export { SystemBanner } from './components/SystemBanner/SystemBanner.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Text } from './components/Text/Text.js';
 export { TextField } from './components/TextField/index.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.19.0",
+  "version": "13.21.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",