@veeqo/ui 14.12.0 → 14.14.0-beta-1

package/dist/components/Alerts/Alert/Alert.cjs

@@ -3,6 +3,7 @@
 var React = require('react');
 var Text = require('../../Text/Text.cjs');
 var Button = require('../../Button/Button.cjs');
+var Action = require('../../Action/Action.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
 var constants = require('../constants.cjs');
 var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
@@ -17,26 +18,29 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
+/**
+ * Alert component for displaying contextual feedback messages with optional actions and close button.
+ */
+const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
     const DefaultIcon = constants.IconMap[variant];
     const isXsSize = size === 'xs';
-    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", className: buildClassnames.buildClassnames([
+    return (React__default.default.createElement(FlexRow.FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames.buildClassnames([
             Alert_module.alertContainer,
             Alert_module[`${size}-size`],
+            Alert_module[`${direction}-layout`],
             Alerts_module[`${variant}-alert-variant`],
             className,
-        ]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), flexWrap: "nowrap", ...divProps },
-        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
-            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
-            children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
+        ]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
+        React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: Alert_module[direction] },
+            children || (React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
                 titleSlot ||
                     (title && (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
-                messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))),
-        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: Alert_module.rightActionsContainer },
-            rightActionsSlot,
-            rightActions && (React__default.default.createElement(FlexCol.FlexCol, { justifyContent: "center", className: Alert_module.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
-            onClickClose && (React__default.default.createElement(FlexCol.FlexCol, { className: Alert_module.closeContainer },
-                React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", size: "sm" }))))));
+                messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
+            ((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" },
+                rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
+                rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
+        onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? Alert_module.closeButton : Alert_module.closeButtonVertical }))));
 };
 
 exports.Alert = Alert;

package/dist/components/Alerts/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      role={variant === 'error' ? 'alert' : 'status'}\n      alignItems={isXsSize ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      flexWrap=\"nowrap\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        styles[`${direction}-layout`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={alertStyles.icon}\n        alignItems=\"flex-start\"\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol\n        gap={isXsSize ? 'xs' : 'sm'}\n        flexGrow={1}\n        flexWrap=\"nowrap\"\n        className={styles[direction]}\n      >\n        {children || (\n          <FlexCol gap=\"xs\">\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n\n        {((rightActions && rightActions.length > 0) || rightActionsSlot) && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {rightActionsSlot}\n            {rightActions?.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical}\n        />\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","Action","CrossIcon"],"mappings":"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"}

package/dist/components/Alerts/Alert/Alert.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { AlertProps } from './types';
-export declare const Alert: ({ size, variant, colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }: AlertProps) => React.JSX.Element;
+/**
+ * Alert component for displaying contextual feedback messages with optional actions and close button.
+ */
+export declare const Alert: ({ size, variant, direction, colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }: AlertProps) => React.JSX.Element;

package/dist/components/Alerts/Alert/Alert.js

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { Text } from '../../Text/Text.js';
 import { Button } from '../../Button/Button.js';
+import { Action } from '../../Action/Action.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
 import { IconMap } from '../constants.js';
 import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
@@ -11,26 +12,29 @@ import { assignCssVars } from '../../../utils/assignCssVars.js';
 import alertStyles from '../Alerts.module.scss.js';
 import styles from './Alert.module.scss.js';
 
-const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
+/**
+ * Alert component for displaying contextual feedback messages with optional actions and close button.
+ */
+const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
     const DefaultIcon = IconMap[variant];
     const isXsSize = size === 'xs';
-    return (React__default.createElement(FlexRow, { justifyContent: "space-between", className: buildClassnames([
+    return (React__default.createElement(FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames([
             styles.alertContainer,
             styles[`${size}-size`],
+            styles[`${direction}-layout`],
             alertStyles[`${variant}-alert-variant`],
             className,
-        ]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), flexWrap: "nowrap", ...divProps },
-        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
-            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
-            children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
+        ]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
+        React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: styles[direction] },
+            children || (React__default.createElement(FlexCol, { gap: "xs" },
                 titleSlot ||
                     (title && (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
-                messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))),
-        React__default.createElement(FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: styles.rightActionsContainer },
-            rightActionsSlot,
-            rightActions && (React__default.createElement(FlexCol, { justifyContent: "center", className: styles.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
-            onClickClose && (React__default.createElement(FlexCol, { className: styles.closeContainer },
-                React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", size: "sm" }))))));
+                messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message)))),
+            ((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" },
+                rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
+                rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
+        onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical }))));
 };
 
 export { Alert };

package/dist/components/Alerts/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      role={variant === 'error' ? 'alert' : 'status'}\n      alignItems={isXsSize ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      flexWrap=\"nowrap\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        styles[`${direction}-layout`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={alertStyles.icon}\n        alignItems=\"flex-start\"\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol\n        gap={isXsSize ? 'xs' : 'sm'}\n        flexGrow={1}\n        flexWrap=\"nowrap\"\n        className={styles[direction]}\n      >\n        {children || (\n          <FlexCol gap=\"xs\">\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n\n        {((rightActions && rightActions.length > 0) || rightActionsSlot) && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {rightActionsSlot}\n            {rightActions?.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical}\n        />\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Alerts/Alert/Alert.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._base-size_1oszc_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-spacing: var(--sizes-base);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n._sm-size_1oszc_9 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-3);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n._xs-size_1oszc_17 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-sm);\n  --alert-close-padding: var(--sizes-xs);\n  --alert-close-justify: center;\n  --alert-right-action-spacing: none;\n}\n\n._iconTextContainer_1oszc_25 {\n  gap: var(--alert-spacing);\n  margin: var(--alert-spacing);\n}\n\n._closeContainer_1oszc_30 {\n  height: 100%;\n  padding: var(--alert-close-padding);\n  justify-content: var(--alert-close-justify);\n}\n\n._rightActionsContainer_1oszc_36 {\n  gap: var(--alert-right-action-spacing);\n  margin: var(--alert-right-action-spacing);\n}\n\n._rightActions_1oszc_36 {\n  gap: var(--alert-spacing);\n}\n\n._alertContainer_1oszc_45 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  gap: 0;\n}");
-var styles = {"base-size":"_base-size_1oszc_1","sm-size":"_sm-size_1oszc_9","xs-size":"_xs-size_1oszc_17","iconTextContainer":"_iconTextContainer_1oszc_25","closeContainer":"_closeContainer_1oszc_30","rightActionsContainer":"_rightActionsContainer_1oszc_36","rightActions":"_rightActions_1oszc_36","alertContainer":"_alertContainer_1oszc_45"};
+___$insertStyle("._base-size_f9sjk_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n  gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n  align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n  align-self: flex-start;\n}");
+var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
 
 module.exports = styles;
 //# sourceMappingURL=Alert.module.scss.cjs.map

package/dist/components/Alerts/Alert/Alert.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-spacing: var(--sizes-base);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-3);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-sm);\n  --alert-close-padding: var(--sizes-xs);\n  --alert-close-justify: center;\n  --alert-right-action-spacing: none;\n}\n\n.iconTextContainer {\n  gap: var(--alert-spacing);\n  margin: var(--alert-spacing);\n}\n\n.closeContainer {\n  height: 100%;\n  padding: var(--alert-close-padding);\n  justify-content: var(--alert-close-justify);\n}\n\n.rightActionsContainer {\n  gap: var(--alert-right-action-spacing);\n  margin: var(--alert-right-action-spacing);\n}\n\n.rightActions {\n  gap: var(--alert-spacing);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  gap: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}
+{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n\n  // Specificity boost needed to override FlexRow's gap-none utility class\n  &.vertical-layout,\n  &.horizontal-layout {\n    gap: var(--alert-gap);\n  }\n}\n\n.alertContainer .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.closeButton {\n  align-self: center;\n}\n\n.closeButtonVertical {\n  align-self: flex-start;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}

package/dist/components/Alerts/Alert/Alert.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
 
-insertStyle("._base-size_1oszc_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-spacing: var(--sizes-base);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n._sm-size_1oszc_9 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-3);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n._xs-size_1oszc_17 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-sm);\n  --alert-close-padding: var(--sizes-xs);\n  --alert-close-justify: center;\n  --alert-right-action-spacing: none;\n}\n\n._iconTextContainer_1oszc_25 {\n  gap: var(--alert-spacing);\n  margin: var(--alert-spacing);\n}\n\n._closeContainer_1oszc_30 {\n  height: 100%;\n  padding: var(--alert-close-padding);\n  justify-content: var(--alert-close-justify);\n}\n\n._rightActionsContainer_1oszc_36 {\n  gap: var(--alert-right-action-spacing);\n  margin: var(--alert-right-action-spacing);\n}\n\n._rightActions_1oszc_36 {\n  gap: var(--alert-spacing);\n}\n\n._alertContainer_1oszc_45 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  gap: 0;\n}");
-var styles = {"base-size":"_base-size_1oszc_1","sm-size":"_sm-size_1oszc_9","xs-size":"_xs-size_1oszc_17","iconTextContainer":"_iconTextContainer_1oszc_25","closeContainer":"_closeContainer_1oszc_30","rightActionsContainer":"_rightActionsContainer_1oszc_36","rightActions":"_rightActions_1oszc_36","alertContainer":"_alertContainer_1oszc_45"};
+insertStyle("._base-size_f9sjk_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n  gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n  align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n  align-self: flex-start;\n}");
+var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
 
 export { styles as default };
 //# sourceMappingURL=Alert.module.scss.js.map

package/dist/components/Alerts/Alert/Alert.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-spacing: var(--sizes-base);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-3);\n  --alert-close-padding: none;\n  --alert-close-justify: start;\n  --alert-right-action-spacing: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-spacing: var(--sizes-sm);\n  --alert-close-padding: var(--sizes-xs);\n  --alert-close-justify: center;\n  --alert-right-action-spacing: none;\n}\n\n.iconTextContainer {\n  gap: var(--alert-spacing);\n  margin: var(--alert-spacing);\n}\n\n.closeContainer {\n  height: 100%;\n  padding: var(--alert-close-padding);\n  justify-content: var(--alert-close-justify);\n}\n\n.rightActionsContainer {\n  gap: var(--alert-right-action-spacing);\n  margin: var(--alert-right-action-spacing);\n}\n\n.rightActions {\n  gap: var(--alert-spacing);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  gap: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}
+{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n\n  // Specificity boost needed to override FlexRow's gap-none utility class\n  &.vertical-layout,\n  &.horizontal-layout {\n    gap: var(--alert-gap);\n  }\n}\n\n.alertContainer .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.closeButton {\n  align-self: center;\n}\n\n.closeButtonVertical {\n  align-self: flex-start;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}

package/dist/components/Alerts/Alert/index.d.ts

@@ -1 +1,2 @@
 export { Alert } from './Alert';
+export type { AlertProps, AlertSizes, AlertDirection } from './types';

package/dist/components/Alerts/Alert/types.d.ts

@@ -1,15 +1,29 @@
 import { ReactNode } from 'react';
 import { Action } from '../../Modal/types';
 import { AlertColours, BaseAlertProps } from '../types';
+/** Controls the padding density of the alert */
+export type AlertSizes = 'base' | 'sm' | 'xs';
+/** Direction of content flow */
+export type AlertDirection = 'horizontal' | 'vertical';
 export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
+    /** Controls padding density */
     size?: AlertSizes;
+    /** Direction of content flow. `'horizontal'` places content side-by-side, `'vertical'` stacks content */
+    direction?: AlertDirection;
+    /** Override the primary and background colours */
     colours?: AlertColours;
+    /** Action buttons rendered on the right (horizontal) or below the content (vertical) */
     rightActions?: Action[];
+    /** Custom content rendered in the actions area, replacing or alongside `rightActions` */
     rightActionsSlot?: ReactNode;
+    /** Replaces the default title text with custom content */
     titleSlot?: ReactNode;
+    /** Replaces the default message text with custom content */
     messageSlot?: ReactNode;
+    /** Message text displayed below the title */
     message?: string;
+    /** Replaces the title/message content area with custom content */
     children?: ReactNode;
+    /** Close handler. When provided, renders a close button */
     onClickClose?: () => void;
 };
-export type AlertSizes = 'base' | 'sm' | 'xs';

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._default-alert-variant_1b639_1 {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_1b639_6 {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_1b639_11 {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_1b639_16 {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_1b639_21 {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-orange-lightest);\n}\n\n._recommend-alert-variant_1b639_26 {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_1b639_31 > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}");
-var alertStyles = {"default-alert-variant":"_default-alert-variant_1b639_1","error-alert-variant":"_error-alert-variant_1b639_6","success-alert-variant":"_success-alert-variant_1b639_11","info-alert-variant":"_info-alert-variant_1b639_16","warning-alert-variant":"_warning-alert-variant_1b639_21","recommend-alert-variant":"_recommend-alert-variant_1b639_26","icon":"_icon_1b639_31"};
+___$insertStyle("._default-alert-variant_4imrs_1 {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_4imrs_6 {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_4imrs_11 {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_4imrs_16 {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_4imrs_21 {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n._recommend-alert-variant_4imrs_26 {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_4imrs_31 > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}");
+var alertStyles = {"default-alert-variant":"_default-alert-variant_4imrs_1","error-alert-variant":"_error-alert-variant_4imrs_6","success-alert-variant":"_success-alert-variant_4imrs_11","info-alert-variant":"_info-alert-variant_4imrs_16","warning-alert-variant":"_warning-alert-variant_4imrs_21","recommend-alert-variant":"_recommend-alert-variant_4imrs_26","icon":"_icon_4imrs_31"};
 
 module.exports = alertStyles;
 //# sourceMappingURL=Alerts.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alerts.module.scss.cjs","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-orange-lightest);\n}\n\n.recommend-alert-variant {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"Alerts.module.scss.cjs","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n.recommend-alert-variant {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._default-alert-variant_1b639_1 {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_1b639_6 {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_1b639_11 {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_1b639_16 {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_1b639_21 {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-orange-lightest);\n}\n\n._recommend-alert-variant_1b639_26 {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_1b639_31 > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}");
-var alertStyles = {"default-alert-variant":"_default-alert-variant_1b639_1","error-alert-variant":"_error-alert-variant_1b639_6","success-alert-variant":"_success-alert-variant_1b639_11","info-alert-variant":"_info-alert-variant_1b639_16","warning-alert-variant":"_warning-alert-variant_1b639_21","recommend-alert-variant":"_recommend-alert-variant_1b639_26","icon":"_icon_1b639_31"};
+insertStyle("._default-alert-variant_4imrs_1 {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_4imrs_6 {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_4imrs_11 {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_4imrs_16 {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_4imrs_21 {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n._recommend-alert-variant_4imrs_26 {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_4imrs_31 > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}");
+var alertStyles = {"default-alert-variant":"_default-alert-variant_4imrs_1","error-alert-variant":"_error-alert-variant_4imrs_6","success-alert-variant":"_success-alert-variant_4imrs_11","info-alert-variant":"_info-alert-variant_4imrs_16","warning-alert-variant":"_warning-alert-variant_4imrs_21","recommend-alert-variant":"_recommend-alert-variant_4imrs_26","icon":"_icon_4imrs_31"};
 
 export { alertStyles as default };
 //# sourceMappingURL=Alerts.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alerts.module.scss.js","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-orange-lightest);\n}\n\n.recommend-alert-variant {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"Alerts.module.scss.js","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n  --primary-color: var(--colors-neutral-ink-base);\n  --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n  --primary-color: var(--colors-secondary-red-base);\n  --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n  --primary-color: var(--colors-secondary-green-base);\n  --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n  --primary-color: var(--colors-secondary-blue-base);\n  --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n  --primary-color: var(--colors-secondary-orange-base);\n  --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n.recommend-alert-variant {\n  --primary-color: var(--colors-secondary-purple-dark);\n  --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n  min-width: var(--alert-icon-size);\n  max-width: var(--alert-icon-size);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  color: var(--icon-color, var(--primary-color));\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs

@@ -14,15 +14,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
+/**
+ * MiniAlert component for compact inline status indicators with an icon and text label.
+ */
+const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
     const DefaultIcon = constants.IconMap[variant];
-    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
+    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: customIconColour }), className: buildClassnames.buildClassnames([
                 Alerts_module.icon,
                 Alerts_module[`${variant}-alert-variant`],
                 MiniAlert_module['mini-alert-size'],
-            ]) }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
-        React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title)));
+            ]), flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+        titleSlot || (React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title))));
 };
 
 exports.MiniAlert = MiniAlert;

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      <Text\n        variant={isBold ? 'bodyBold' : 'body'}\n        style={assignCssVars({ textColor: customTitleColour })}\n        className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n      >\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAC,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,sBAAA,CAAA,aAAA,CAACM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}
+{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n  title,\n  titleSlot,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      {titleSlot || (\n        <Text\n          variant={isBold ? 'bodyBold' : 'body'}\n          style={assignCssVars({ textColor: customTitleColour })}\n          className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n        >\n          {title}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,sBAAA,CAAA,aAAA,CAACM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { MiniAlertProps } from './types';
-export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;
+/**
+ * MiniAlert component for compact inline status indicators with an icon and text label.
+ */
+export declare const MiniAlert: ({ title, titleSlot, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;

package/dist/components/Alerts/MiniAlert/MiniAlert.js

@@ -8,15 +8,18 @@ import { Text } from '../../Text/Text.js';
 import styles from './MiniAlert.module.scss.js';
 import alertStyles from '../Alerts.module.scss.js';
 
-const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
+/**
+ * MiniAlert component for compact inline status indicators with an icon and text label.
+ */
+const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
     const DefaultIcon = IconMap[variant];
-    return (React__default.createElement(FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
+    return (React__default.createElement(FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: customIconColour }), className: buildClassnames([
                 alertStyles.icon,
                 alertStyles[`${variant}-alert-variant`],
                 styles['mini-alert-size'],
-            ]) }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
-        React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title)));
+            ]), flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+        titleSlot || (React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title))));
 };
 
 export { MiniAlert };

package/dist/components/Alerts/MiniAlert/MiniAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      <Text\n        variant={isBold ? 'bodyBold' : 'body'}\n        style={assignCssVars({ textColor: customTitleColour })}\n        className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n      >\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}
+{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n  title,\n  titleSlot,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      {titleSlot || (\n        <Text\n          variant={isBold ? 'bodyBold' : 'body'}\n          style={assignCssVars({ textColor: customTitleColour })}\n          className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n        >\n          {title}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._text_hueci_1 {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n._error-variant_hueci_5 {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n._default-variant_hueci_9,\n._success-variant_hueci_10,\n._info-variant_hueci_11,\n._warning-variant_hueci_12,\n._recommended-variant_hueci_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_hueci_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
-var styles = {"text":"_text_hueci_1","error-variant":"_error-variant_hueci_5","default-variant":"_default-variant_hueci_9","success-variant":"_success-variant_hueci_10","info-variant":"_info-variant_hueci_11","warning-variant":"_warning-variant_hueci_12","recommended-variant":"_recommended-variant_hueci_13","mini-alert-size":"_mini-alert-size_hueci_17"};
+___$insertStyle("._text_1x68v_1 {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
+var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
 
 module.exports = styles;
 //# sourceMappingURL=MiniAlert.module.scss.cjs.map

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommended-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kcAAA;;;;;"}
+{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AAEE,eAAA,CAAA,kcAAA;;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
 
-insertStyle("._text_hueci_1 {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n._error-variant_hueci_5 {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n._default-variant_hueci_9,\n._success-variant_hueci_10,\n._info-variant_hueci_11,\n._warning-variant_hueci_12,\n._recommended-variant_hueci_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_hueci_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
-var styles = {"text":"_text_hueci_1","error-variant":"_error-variant_hueci_5","default-variant":"_default-variant_hueci_9","success-variant":"_success-variant_hueci_10","info-variant":"_info-variant_hueci_11","warning-variant":"_warning-variant_hueci_12","recommended-variant":"_recommended-variant_hueci_13","mini-alert-size":"_mini-alert-size_hueci_17"};
+insertStyle("._text_1x68v_1 {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
+var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
 
 export { styles as default };
 //# sourceMappingURL=MiniAlert.module.scss.js.map

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommended-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kcAAA;;;;;"}
+{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEEA,WAAA,CAAA,kcAAA;;;;;"}

package/dist/components/Alerts/MiniAlert/index.d.ts

@@ -1 +1,2 @@
 export { MiniAlert } from './MiniAlert';
+export type { MiniAlertProps } from './types';

package/dist/components/Alerts/MiniAlert/types.d.ts

@@ -1,7 +1,15 @@
 /// <reference types="react" />
-import { BaseAlertProps } from '../types';
-export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
+import { BaseAlertProps, MiniAlertVariants } from '../types';
+export type { MiniAlertVariants } from '../types';
+export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & Omit<BaseAlertProps, 'variant'> & {
+    /** Visual style variant */
+    variant?: MiniAlertVariants;
+    /** Replaces the default title text with custom content (e.g. text with inline links) */
+    titleSlot?: React.ReactNode;
+    /** Override the icon colour */
     customIconColour?: string;
+    /** Override the title text colour */
     customTitleColour?: string;
+    /** Whether the title text is bold. Defaults to `true` */
     isBold?: boolean;
 };

package/dist/components/Alerts/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { AlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":["InfoFillIcon","CriticalIcon","SuccessFillIcon","HelpFillIcon","WarningIcon","RecommendIcon"],"mappings":";;;;;;;;;;AAWO,MAAM,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAEA,2BAAY;AACrB,IAAA,KAAK,EAAEC,2BAAY;AACnB,IAAA,OAAO,EAAEC,8BAAe;AACxB,IAAA,IAAI,EAAEC,2BAAY;AAClB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;;;;"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":["InfoFillIcon","CriticalIcon","SuccessFillIcon","HelpFillIcon","WarningIcon","RecommendIcon"],"mappings":";;;;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAEA,2BAAY;AACrB,IAAA,KAAK,EAAEC,2BAAY;AACnB,IAAA,OAAO,EAAEC,8BAAe;AACxB,IAAA,IAAI,EAAEC,2BAAY;AAClB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;;;;"}

package/dist/components/Alerts/constants.d.ts

@@ -1,3 +1,3 @@
 import type { IconComponent } from 'src/icons/types';
-import { AlertVariants } from './types';
-export declare const IconMap: Record<AlertVariants, IconComponent>;
+import { MiniAlertVariants } from './types';
+export declare const IconMap: Record<MiniAlertVariants, IconComponent>;

package/dist/components/Alerts/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { AlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;;;;"}

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

@@ -3,9 +3,15 @@ export type AlertColours = {
     primary: string;
     background: string;
 };
-export type AlertVariants = 'default' | 'error' | 'success' | 'info' | 'warning' | 'recommend';
+/** Visual style variants for the Alert component */
+export type AlertVariants = 'default' | 'error' | 'success' | 'warning';
+/** Extended variants available to MiniAlert only */
+export type MiniAlertVariants = AlertVariants | 'info' | 'recommend';
 export type BaseAlertProps = {
+    /** Alert heading text */
     title?: string;
+    /** Visual style variant */
     variant?: AlertVariants;
+    /** Replaces the default variant icon */
     iconSlot?: React.ReactNode;
 };

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -11,7 +11,6 @@ require('../../../../Stack/Stack.cjs');
 require('../../../../../theme/modules/shadows.cjs');
 require('../../../../../theme/modules/sizes.cjs');
 require('../../../../../theme/modules/text.cjs');
-require('styled-components');
 require('framer-motion');
 require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('react-dom');