@veeqo/ui 14.5.0 → 14.6.0

package/dist/components/FeatureBanner/FeatureBanner.cjs

@@ -1,34 +1,35 @@
 'use strict';
 
 var React = require('react');
+var withTokens = require('../../hoc/withTokens/withTokens.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var withTokens = require('../../hoc/withTokens/withTokens.cjs');
-var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Action = require('../Action/Action.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.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: "flex-start", justifyContent: "space-between", gap: "none", className: buildClassnames.buildClassnames([
+const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames.buildClassnames([
             FeatureBanner_module.featureBanner,
             FeatureBanner_module[`${size}-size`],
             FeatureBanner_module[`${variant}-variant`],
+            FeatureBanner_module[`${direction}-layout`],
             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: size === 'base' ? 'base' : '3', flexGrow: "1", className: FeatureBanner_module[direction] },
             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, ...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", className: layout === 'horizontal' ? FeatureBanner_module.centerButton : undefined }))));
+                contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: "sm" }, contentSlot)),
+            actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: FeatureBanner_module[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
+        onClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? FeatureBanner_module.centerButton : undefined }))));
 };
 const FeatureBanner = withTokens.withTokens(FeatureBannerBase, 'default');
 

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

@@ -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=\"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 key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\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          className={layout === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\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;IACvB,QACEA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,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,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAA,EAAG,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,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,qCAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAA,EAAG,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EAChC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzED,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNN,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,MAAM,KAAK,YAAY,GAAGJ,oBAAM,CAAC,YAAY,GAAG,SAAS,GACpE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAGK,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
+{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'base',\n  direction = '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=\"flex-start\"\n      gap=\"none\"\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        styles[`${direction}-layout`],\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={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Action>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={direction === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Action","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,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;AAC5B,YAAAA,oBAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAEE,oBAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEH,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNN,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAGJ,oBAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAGK,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

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

@@ -2,10 +2,12 @@ import React from 'react';
 export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
     variant?: import("./types").FeatureBannerVariant | undefined;
     size?: import("./types").FeatureBannerSize | undefined;
-    layout?: import("./types").FeatureBannerLayout | undefined;
+    direction?: import("./types").FeatureBannerDirection | undefined;
     title: string;
     contentSlot?: React.ReactNode;
     iconSlot?: React.ReactNode;
-    actions?: import("..").ModalAction[] | undefined;
+    actions?: ((Omit<import("../Action").ActionProps<"button">, "children" | "size"> | Omit<import("../Action").ActionProps<"a">, "children" | "size">) & {
+        label: string;
+    })[] | undefined;
     onClose?: (() => void) | undefined;
 } & React.RefAttributes<never>>;

package/dist/components/FeatureBanner/FeatureBanner.js

@@ -1,28 +1,29 @@
 import React__default from 'react';
+import { withTokens } from '../../hoc/withTokens/withTokens.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { withTokens } from '../../hoc/withTokens/withTokens.js';
-import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Action } from '../Action/Action.js';
 import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.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: "flex-start", justifyContent: "space-between", gap: "none", className: buildClassnames([
+const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames([
             styles.featureBanner,
             styles[`${size}-size`],
             styles[`${variant}-variant`],
+            styles[`${direction}-layout`],
             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: size === 'base' ? 'base' : '3', flexGrow: "1", className: styles[direction] },
             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, ...actionProps }, label)))))),
-        onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: layout === 'horizontal' ? styles.centerButton : undefined }))));
+                contentSlot && React__default.createElement(FlexCol, { gap: "sm" }, contentSlot)),
+            actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
+        onClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? styles.centerButton : undefined }))));
 };
 const FeatureBanner = withTokens(FeatureBannerBase, 'default');
 

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

@@ -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=\"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 key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\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          className={layout === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\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;IACvB,QACEA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,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,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,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,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAA,EAAG,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EAChC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,MAAM,KAAK,YAAY,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,GACpE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
+{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'base',\n  direction = '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=\"flex-start\"\n      gap=\"none\"\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        styles[`${direction}-layout`],\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={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Action>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={direction === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,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;AAC5B,YAAA,MAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("/* Sizes */\n._default-size_1lkzx_2 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n._sm-size_1lkzx_9 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n._xs-size_1lkzx_16 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n._primary-variant_1lkzx_24 {\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_1lkzx_30 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n._featureBanner_1lkzx_37 {\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/* Layout */\n._vertical_1lkzx_45 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n._horizontal_1lkzx_52 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n._iconBackground_1lkzx_61 {\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._iconBackground_1lkzx_61 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_1lkzx_76 {\n  align-self: center;\n}");
-var styles = {"default-size":"_default-size_1lkzx_2","sm-size":"_sm-size_1lkzx_9","xs-size":"_xs-size_1lkzx_16","primary-variant":"_primary-variant_1lkzx_24","secondary-variant":"_secondary-variant_1lkzx_30","featureBanner":"_featureBanner_1lkzx_37","vertical":"_vertical_1lkzx_45","horizontal":"_horizontal_1lkzx_52","iconBackground":"_iconBackground_1lkzx_61","centerButton":"_centerButton_1lkzx_76"};
+___$insertStyle("._base-size_i33v4_1 {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_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_i33v4_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\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._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n  gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n  gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n  padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n  padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
 
 module.exports = styles;
 //# sourceMappingURL=FeatureBanner.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\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-primary);\n  border: none;\n}\n\n.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/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\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  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":[],"mappings":";;;;AACA,eAAA,CAAA,m1DAAA;AACE,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\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-primary);\n}\n\n.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  &.vertical-layout {\n    gap: var(--banner-gap);\n  }\n\n  &.horizontal-layout {\n    gap: var(--horizontal-gap);\n  }\n}\n\n.featureBanner .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n  padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n  padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("/* Sizes */\n._default-size_1lkzx_2 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n._sm-size_1lkzx_9 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n._xs-size_1lkzx_16 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n._primary-variant_1lkzx_24 {\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_1lkzx_30 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n._featureBanner_1lkzx_37 {\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/* Layout */\n._vertical_1lkzx_45 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n._horizontal_1lkzx_52 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n._iconBackground_1lkzx_61 {\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._iconBackground_1lkzx_61 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_1lkzx_76 {\n  align-self: center;\n}");
-var styles = {"default-size":"_default-size_1lkzx_2","sm-size":"_sm-size_1lkzx_9","xs-size":"_xs-size_1lkzx_16","primary-variant":"_primary-variant_1lkzx_24","secondary-variant":"_secondary-variant_1lkzx_30","featureBanner":"_featureBanner_1lkzx_37","vertical":"_vertical_1lkzx_45","horizontal":"_horizontal_1lkzx_52","iconBackground":"_iconBackground_1lkzx_61","centerButton":"_centerButton_1lkzx_76"};
+insertStyle("._base-size_i33v4_1 {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_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_i33v4_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\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._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n  gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n  gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n  padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n  padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
 
 export { styles as default };
 //# sourceMappingURL=FeatureBanner.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\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-primary);\n  border: none;\n}\n\n.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/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\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  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACAA,WAAA,CAAA,m1DAAA;AACE,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\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-primary);\n}\n\n.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  &.vertical-layout {\n    gap: var(--banner-gap);\n  }\n\n  &.horizontal-layout {\n    gap: var(--horizontal-gap);\n  }\n}\n\n.featureBanner .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n  padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n  padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

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

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

@@ -1,27 +1,29 @@
-import { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { WithTokensProps } from '../../hoc/withTokens/withTokens';
-import { Action } from '../Modal';
+import type { ActionProps } from '../Action/types';
 /** Visual style of the banner */
 export type FeatureBannerVariant = 'primary' | 'secondary';
 /** Controls the padding density of the banner */
-export type FeatureBannerSize = 'default' | 'sm' | 'xs';
+export type FeatureBannerSize = 'base' | 'sm' | 'xs';
 /** Direction of the banner content flow */
-export type FeatureBannerLayout = 'vertical' | 'horizontal';
-export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
+export type FeatureBannerDirection = 'vertical' | 'horizontal';
+export type FeatureBannerProps = Omit<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;
+    direction?: FeatureBannerDirection;
     /** 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?: Action[];
+    /** Actions rendered below the content. Supports both button and link actions. */
+    actions?: ((Omit<ActionProps<'button'>, 'children' | 'size'> | Omit<ActionProps<'a'>, 'children' | 'size'>) & {
+        label: string;
+    })[];
     /** Close handler. When provided, renders a close button */
     onClose?: () => void;
 };

package/package.json

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