@veeqo/ui 11.2.0 → 11.3.1

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

@@ -1,44 +1,39 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
-var constants = require('./constants.cjs');
 var Text = require('../../Text/Text.cjs');
-var index = require('../../../theme/index.cjs');
-var Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/types.cjs');
 var Button = require('../../Button/Button.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
-var constants$1 = require('../constants.cjs');
+var constants = require('../constants.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
+var Alerts_module = require('../Alerts.module.scss.cjs');
+var Alert_module = require('./Alert.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* eslint-disable react/destructuring-assignment */
 const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, ...divProps }) => {
-    const colours = passedColours !== null && passedColours !== undefined ? passedColours : constants$1.ColourMap[variant];
-    const IconSlot = iconSlot || constants$1.IconMap[variant];
+    const DefaultIcon = constants.IconMap[variant];
     const isXsSize = size === 'xs';
-    return (React__default.default.createElement(styled.AlertContainer, { colours: colours, direction: "horizontal", alignX: "between", spacing: "0", ...divProps },
-        React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: isXsSize ? 'center' : 'start', style: { margin: constants.SpacingMap[size], gap: constants.SpacingMap[size] }, spacing: 0 },
-            React__default.default.createElement(IconSlot, { "aria-hidden": true, style: {
-                    minWidth: constants.IconSizeMap[size],
-                    minHeight: constants.IconSizeMap[size],
-                    width: constants.IconSizeMap[size],
-                    height: constants.IconSizeMap[size],
-                }, color: colours.primary }),
-            children || (React__default.default.createElement(Stack.Stack, { direction: "vertical", spacing: isXsSize ? 0 : 'xs' },
-                titleSlot || (React__default.default.createElement(Text.Text, { variant: isXsSize ? 'bodySmallBold' : 'bodyBold', style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
-                messageSlot || React__default.default.createElement(Text.Text, { variant: isXsSize ? 'bodySmall' : 'body' }, message)))),
-        React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: "end", spacing: 0, style: {
-                margin: isXsSize ? undefined : index.theme.sizes[3],
-                gap: isXsSize ? undefined : constants.SpacingMap[size],
-                alignItems: 'center',
-            } },
+    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", className: buildClassnames.buildClassnames([
+            Alert_module.alertContainer,
+            Alert_module[`${size}-size`],
+            Alerts_module[`${variant}-alert-variant`],
+        ]), ...divProps },
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'start', className: Alert_module.iconTextContainer },
+            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+            children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
+                titleSlot || (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
+                messageSlot || React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
+        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", className: Alert_module.rightActionsContainer },
             rightActionsSlot,
-            rightActions && (React__default.default.createElement(Stack.Stack, { alignY: "center", spacing: 0, style: { gap: constants.SpacingMap[size] } }, rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
-            onClickClose && (React__default.default.createElement(Stack.Stack, { alignY: isXsSize ? 'center' : 'start', style: { height: '100%', padding: isXsSize ? index.theme.sizes.xs : undefined } },
+            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" }))))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React from 'react';\n\nimport { AlertContainer } from './styled';\nimport { IconSizeMap, SpacingMap } from './constants';\n\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { Stack } from '../../Stack';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { ColourMap, IconMap } from '../constants';\nimport { AlertProps } from './types';\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  ...divProps\n}: AlertProps) => {\n  const colours = passedColours ?? ColourMap[variant];\n  const IconSlot = iconSlot || IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <AlertContainer\n      colours={colours}\n      direction=\"horizontal\"\n      alignX=\"between\"\n      spacing=\"0\"\n      {...divProps}\n    >\n      <Stack\n        direction=\"horizontal\"\n        alignY={isXsSize ? 'center' : 'start'}\n        style={{ margin: SpacingMap[size], gap: SpacingMap[size] }}\n        spacing={0}\n      >\n        <IconSlot\n          aria-hidden\n          style={{\n            minWidth: IconSizeMap[size],\n            minHeight: IconSizeMap[size],\n            width: IconSizeMap[size],\n            height: IconSizeMap[size],\n          }}\n          color={colours.primary}\n        />\n\n        {children || (\n          <Stack direction=\"vertical\" spacing={isXsSize ? 0 : 'xs'}>\n            {titleSlot || (\n              <Text\n                variant={isXsSize ? 'bodySmallBold' : 'bodyBold'}\n                style={size === 'base' ? { lineHeight: '24px' } : {}}\n              >\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant={isXsSize ? 'bodySmall' : 'body'}>{message}</Text>}\n          </Stack>\n        )}\n      </Stack>\n\n      <Stack\n        direction=\"horizontal\"\n        alignX=\"end\"\n        spacing={0}\n        style={{\n          margin: isXsSize ? undefined : theme.sizes[3],\n          gap: isXsSize ? undefined : SpacingMap[size],\n          alignItems: 'center',\n        }}\n      >\n        {rightActionsSlot}\n\n        {rightActions && (\n          <Stack alignY=\"center\" spacing={0} style={{ gap: SpacingMap[size] }}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </Stack>\n        )}\n\n        {onClickClose && (\n          <Stack\n            alignY={isXsSize ? 'center' : 'start'}\n            style={{ height: '100%', padding: isXsSize ? theme.sizes.xs : undefined }}\n          >\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </Stack>\n        )}\n      </Stack>\n    </AlertContainer>\n  );\n};\n"],"names":["ColourMap","IconMap","React","AlertContainer","Stack","SpacingMap","IconSizeMap","Text","theme","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 { 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  ...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      ])}\n      {...divProps}\n    >\n      <FlexRow alignItems={isXsSize ? 'center' : 'start'} className={styles.iconTextContainer}>\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" 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":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;AACxC,SAAA,CAAC,KACE,QAAQ,EAAA;AAEZ,QAAAJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,EAAA,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,EAAE,SAAS,EAAEE,YAAM,CAAC,iBAAiB,EAAA;AACrF,YAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEI,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAED,aAAW,CAAC,IAAI,EAE1B,EAAA,QAAQ,IAAIJ,sBAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRN,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;QAEVP,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,cAAc,EAAC,UAAU,EAAC,SAAS,EAAEE,YAAM,CAAC,qBAAqB,EAAA;YACvE,gBAAgB;YAEhB,YAAY,KACXH,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAEH,YAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXR,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,SAAS,EAAEH,YAAM,CAAC,cAAc,EAAA;gBACvCH,sBAAC,CAAA,aAAA,CAAAQ,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}

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

@@ -1,38 +1,33 @@
 import React__default from 'react';
-import { AlertContainer } from './styled.js';
-import { SpacingMap, IconSizeMap } from './constants.js';
 import { Text } from '../../Text/Text.js';
-import { theme } from '../../../theme/index.js';
-import { Stack } from '../../Stack/Stack.js';
-import '../../Stack/types.js';
 import { Button } from '../../Button/Button.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
-import { ColourMap, IconMap } from '../constants.js';
+import { IconMap } from '../constants.js';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import alertStyles from '../Alerts.module.scss.js';
+import styles from './Alert.module.scss.js';
 
-/* eslint-disable react/destructuring-assignment */
 const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, ...divProps }) => {
-    const colours = passedColours !== null && passedColours !== undefined ? passedColours : ColourMap[variant];
-    const IconSlot = iconSlot || IconMap[variant];
+    const DefaultIcon = IconMap[variant];
     const isXsSize = size === 'xs';
-    return (React__default.createElement(AlertContainer, { colours: colours, direction: "horizontal", alignX: "between", spacing: "0", ...divProps },
-        React__default.createElement(Stack, { direction: "horizontal", alignY: isXsSize ? 'center' : 'start', style: { margin: SpacingMap[size], gap: SpacingMap[size] }, spacing: 0 },
-            React__default.createElement(IconSlot, { "aria-hidden": true, style: {
-                    minWidth: IconSizeMap[size],
-                    minHeight: IconSizeMap[size],
-                    width: IconSizeMap[size],
-                    height: IconSizeMap[size],
-                }, color: colours.primary }),
-            children || (React__default.createElement(Stack, { direction: "vertical", spacing: isXsSize ? 0 : 'xs' },
-                titleSlot || (React__default.createElement(Text, { variant: isXsSize ? 'bodySmallBold' : 'bodyBold', style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
-                messageSlot || React__default.createElement(Text, { variant: isXsSize ? 'bodySmall' : 'body' }, message)))),
-        React__default.createElement(Stack, { direction: "horizontal", alignX: "end", spacing: 0, style: {
-                margin: isXsSize ? undefined : theme.sizes[3],
-                gap: isXsSize ? undefined : SpacingMap[size],
-                alignItems: 'center',
-            } },
+    return (React__default.createElement(FlexRow, { justifyContent: "space-between", className: buildClassnames([
+            styles.alertContainer,
+            styles[`${size}-size`],
+            alertStyles[`${variant}-alert-variant`],
+        ]), ...divProps },
+        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'start', className: styles.iconTextContainer },
+            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+            children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
+                titleSlot || (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
+                messageSlot || React__default.createElement(Text, { variant: "body" }, message)))),
+        React__default.createElement(FlexRow, { justifyContent: "flex-end", className: styles.rightActionsContainer },
             rightActionsSlot,
-            rightActions && (React__default.createElement(Stack, { alignY: "center", spacing: 0, style: { gap: SpacingMap[size] } }, rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
-            onClickClose && (React__default.createElement(Stack, { alignY: isXsSize ? 'center' : 'start', style: { height: '100%', padding: isXsSize ? theme.sizes.xs : undefined } },
+            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" }))))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React from 'react';\n\nimport { AlertContainer } from './styled';\nimport { IconSizeMap, SpacingMap } from './constants';\n\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { Stack } from '../../Stack';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { ColourMap, IconMap } from '../constants';\nimport { AlertProps } from './types';\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  ...divProps\n}: AlertProps) => {\n  const colours = passedColours ?? ColourMap[variant];\n  const IconSlot = iconSlot || IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <AlertContainer\n      colours={colours}\n      direction=\"horizontal\"\n      alignX=\"between\"\n      spacing=\"0\"\n      {...divProps}\n    >\n      <Stack\n        direction=\"horizontal\"\n        alignY={isXsSize ? 'center' : 'start'}\n        style={{ margin: SpacingMap[size], gap: SpacingMap[size] }}\n        spacing={0}\n      >\n        <IconSlot\n          aria-hidden\n          style={{\n            minWidth: IconSizeMap[size],\n            minHeight: IconSizeMap[size],\n            width: IconSizeMap[size],\n            height: IconSizeMap[size],\n          }}\n          color={colours.primary}\n        />\n\n        {children || (\n          <Stack direction=\"vertical\" spacing={isXsSize ? 0 : 'xs'}>\n            {titleSlot || (\n              <Text\n                variant={isXsSize ? 'bodySmallBold' : 'bodyBold'}\n                style={size === 'base' ? { lineHeight: '24px' } : {}}\n              >\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant={isXsSize ? 'bodySmall' : 'body'}>{message}</Text>}\n          </Stack>\n        )}\n      </Stack>\n\n      <Stack\n        direction=\"horizontal\"\n        alignX=\"end\"\n        spacing={0}\n        style={{\n          margin: isXsSize ? undefined : theme.sizes[3],\n          gap: isXsSize ? undefined : SpacingMap[size],\n          alignItems: 'center',\n        }}\n      >\n        {rightActionsSlot}\n\n        {rightActions && (\n          <Stack alignY=\"center\" spacing={0} style={{ gap: SpacingMap[size] }}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </Stack>\n        )}\n\n        {onClickClose && (\n          <Stack\n            alignY={isXsSize ? 'center' : 'start'}\n            style={{ height: '100%', padding: isXsSize ? theme.sizes.xs : undefined }}\n          >\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </Stack>\n        )}\n      </Stack>\n    </AlertContainer>\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 { 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  ...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      ])}\n      {...divProps}\n    >\n      <FlexRow alignItems={isXsSize ? 'center' : 'start'} className={styles.iconTextContainer}>\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" 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":";;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;AACxC,SAAA,CAAC,KACE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;AACrF,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAE,WAAW,CAAC,IAAI,EAE1B,EAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;QAEVA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,cAAc,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA;YACvE,gBAAgB;YAEhB,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=Alert.module.scss.cjs.map

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

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

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=Alert.module.scss.js.map

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = alertStyles;
+//# sourceMappingURL=Alerts.module.scss.cjs.map

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

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

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

@@ -0,0 +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"};
+
+export { alertStyles as default };
+//# sourceMappingURL=Alerts.module.scss.js.map

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

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

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

@@ -1,23 +1,28 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
 var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
 var constants = require('../constants.cjs');
 var Text = require('../../Text/Text.cjs');
-var constants$1 = require('./constants.cjs');
+var MiniAlert_module = require('./MiniAlert.module.scss.cjs');
+var Alerts_module = require('../Alerts.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-// Will need to use themeInjector every time this component is used
 const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
-    const IconSlot = iconSlot || constants.IconMap[variant];
-    const iconColour = customIconColour !== null && customIconColour !== undefined ? customIconColour : constants.ColourMap[variant].primary;
-    const titleColour = customTitleColour !== null && customTitleColour !== undefined ? customTitleColour : constants$1.TextColourMap[variant];
-    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs" },
-        React__default.default.createElement(IconSlot, { "aria-hidden": true, color: iconColour, style: constants$1.IconStyles }),
-        React__default.default.createElement(Text.Text, { variant: "bodySmallBold", style: { color: titleColour } }, title)));
+    const DefaultIcon = constants.IconMap[variant];
+    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status" },
+        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: "bodyBold", 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 { FlexRow } from '../../Flex/FlexRow';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\n\n// Will need to use themeInjector every time this component is used\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n}: MiniAlertProps) => {\n  const IconSlot = iconSlot || IconMap[variant];\n  const iconColour = customIconColour ?? ColourMap[variant].primary;\n  const titleColour = customTitleColour ?? TextColourMap[variant];\n  return (\n    <FlexRow gap=\"xs\">\n      <IconSlot aria-hidden color={iconColour} style={IconStyles} />\n      <Text variant=\"bodySmallBold\" style={{ color: titleColour }}>\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","ColourMap","TextColourMap","React","FlexRow","IconStyles","Text"],"mappings":";;;;;;;;;;;;AAQA;AACa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;IACnB,MAAM,QAAQ,GAAG,QAAQ,IAAIA,iBAAO,CAAC,OAAO,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,SAAA,GAAA,gBAAgB,GAAIC,mBAAS,CAAC,OAAO,CAAC,CAAC,OAAO;AACjE,IAAA,MAAM,WAAW,GAAG,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,SAAA,GAAjB,iBAAiB,GAAIC,yBAAa,CAAC,OAAO,CAAC;AAC/D,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;QACfD,sBAAC,CAAA,aAAA,CAAA,QAAQ,yBAAa,KAAK,EAAE,UAAU,EAAE,KAAK,EAAEE,sBAAU,EAAI,CAAA;AAC9D,QAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,EACxD,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\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\">\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=\"bodyBold\"\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":";;;;;;;;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAA;AAC7B,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,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,sBAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,sBAAA,CAAA,aAAA,CAACM,SAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}

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

@@ -1,17 +1,22 @@
 import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
 import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
-import { ColourMap, IconMap } from '../constants.js';
+import { IconMap } from '../constants.js';
 import { Text } from '../../Text/Text.js';
-import { IconStyles, TextColourMap } from './constants.js';
+import styles from './MiniAlert.module.scss.js';
+import alertStyles from '../Alerts.module.scss.js';
 
-// Will need to use themeInjector every time this component is used
 const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
-    const IconSlot = iconSlot || IconMap[variant];
-    const iconColour = customIconColour !== null && customIconColour !== undefined ? customIconColour : ColourMap[variant].primary;
-    const titleColour = customTitleColour !== null && customTitleColour !== undefined ? customTitleColour : TextColourMap[variant];
-    return (React__default.createElement(FlexRow, { gap: "xs" },
-        React__default.createElement(IconSlot, { "aria-hidden": true, color: iconColour, style: IconStyles }),
-        React__default.createElement(Text, { variant: "bodySmallBold", style: { color: titleColour } }, title)));
+    const DefaultIcon = IconMap[variant];
+    return (React__default.createElement(FlexRow, { gap: "xs", role: "status" },
+        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: "bodyBold", 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 { FlexRow } from '../../Flex/FlexRow';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\n\n// Will need to use themeInjector every time this component is used\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n}: MiniAlertProps) => {\n  const IconSlot = iconSlot || IconMap[variant];\n  const iconColour = customIconColour ?? ColourMap[variant].primary;\n  const titleColour = customTitleColour ?? TextColourMap[variant];\n  return (\n    <FlexRow gap=\"xs\">\n      <IconSlot aria-hidden color={iconColour} style={IconStyles} />\n      <Text variant=\"bodySmallBold\" style={{ color: titleColour }}>\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAQA;AACa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;IACnB,MAAM,QAAQ,GAAG,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,SAAA,GAAA,gBAAgB,GAAI,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO;AACjE,IAAA,MAAM,WAAW,GAAG,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,SAAA,GAAjB,iBAAiB,GAAI,aAAa,CAAC,OAAO,CAAC;AAC/D,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;QACfA,cAAC,CAAA,aAAA,CAAA,QAAQ,yBAAa,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAI,CAAA;AAC9D,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,EACxD,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\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\">\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=\"bodyBold\"\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":";;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAA;AAC7B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,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,cAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=MiniAlert.module.scss.cjs.map

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

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

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=MiniAlert.module.scss.js.map

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

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

package/dist/components/Alerts/constants.cjs

@@ -1,49 +1,21 @@
 'use strict';
 
-var index = require('../../theme/index.cjs');
 require('react');
-var AttentionIcon = require('../../icons/design-system/components/AttentionIcon.cjs');
-var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
-var InfoIcon = require('../../icons/design-system/components/InfoIcon.cjs');
-var SuccessIcon = require('../../icons/design-system/components/SuccessIcon.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var HelpFillIcon = require('../../icons/design-system/components/HelpFillIcon.cjs');
+var InfoFillIcon = require('../../icons/design-system/components/InfoFillIcon.cjs');
+var SuccessFillIcon = require('../../icons/design-system/components/SuccessFillIcon.cjs');
 var WarningIcon = require('../../icons/design-system/components/WarningIcon.cjs');
 var RecommendIcon = require('../../icons/custom/components/RecommendIcon.cjs');
 
 const IconMap = {
-    default: InfoIcon.ReactComponent,
-    error: AttentionIcon.ReactComponent,
-    success: SuccessIcon.ReactComponent,
-    info: HelpIcon.ReactComponent,
+    default: InfoFillIcon.ReactComponent,
+    error: CriticalIcon.ReactComponent,
+    success: SuccessFillIcon.ReactComponent,
+    info: HelpFillIcon.ReactComponent,
     warning: WarningIcon.ReactComponent,
     recommend: RecommendIcon.RecommendIcon,
 };
-const ColourMap = {
-    default: {
-        primary: index.theme.colors.neutral.ink.base,
-        background: index.theme.colors.neutral.grey.lightest,
-    },
-    error: {
-        primary: index.theme.colors.secondary.red.base,
-        background: index.theme.colors.secondary.red.lightest,
-    },
-    success: {
-        primary: index.theme.colors.secondary.green.base,
-        background: index.theme.colors.secondary.green.lightest,
-    },
-    info: {
-        primary: index.theme.colors.secondary.blue.base,
-        background: index.theme.colors.secondary.blue.lightest,
-    },
-    warning: {
-        primary: index.theme.colors.secondary.orange.base,
-        background: index.theme.colors.secondary.orange.lightest,
-    },
-    recommend: {
-        primary: index.theme.colors.secondary.purple.dark,
-        background: index.theme.colors.secondary.purple.lightest,
-    },
-};
 
-exports.ColourMap = ColourMap;
 exports.IconMap = IconMap;
 //# sourceMappingURL=constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import { theme } from 'Theme';\nimport type { IconComponent } from 'src/icons/types';\nimport { AlertColours, AlertVariants } from './types';\nimport {\n  AttentionIcon,\n  HelpIcon,\n  InfoIcon,\n  RecommendIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoIcon,\n  error: AttentionIcon,\n  success: SuccessIcon,\n  info: HelpIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n\nexport const ColourMap: Record<AlertVariants, AlertColours> = {\n  default: {\n    primary: theme.colors.neutral.ink.base,\n    background: theme.colors.neutral.grey.lightest,\n  },\n  error: {\n    primary: theme.colors.secondary.red.base,\n    background: theme.colors.secondary.red.lightest,\n  },\n  success: {\n    primary: theme.colors.secondary.green.base,\n    background: theme.colors.secondary.green.lightest,\n  },\n  info: {\n    primary: theme.colors.secondary.blue.base,\n    background: theme.colors.secondary.blue.lightest,\n  },\n  warning: {\n    primary: theme.colors.secondary.orange.base,\n    background: theme.colors.secondary.orange.lightest,\n  },\n  recommend: {\n    primary: theme.colors.secondary.purple.dark,\n    background: theme.colors.secondary.purple.lightest,\n  },\n};\n"],"names":["InfoIcon","AttentionIcon","SuccessIcon","HelpIcon","WarningIcon","RecommendIcon","theme"],"mappings":";;;;;;;;;;;AAYa,MAAA,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAEA,uBAAQ;AACjB,IAAA,KAAK,EAAEC,4BAAa;AACpB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,IAAI,EAAEC,uBAAQ;AACd,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;AAGb,MAAA,SAAS,GAAwC;AAC5D,IAAA,OAAO,EAAE;QACP,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;QACtC,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAC/C,KAAA;AACD,IAAA,KAAK,EAAE;QACL,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACxC,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ;AAChD,KAAA;AACD,IAAA,OAAO,EAAE;QACP,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QAC1C,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ;AAClD,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACzC,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;AACjD,KAAA;AACD,IAAA,OAAO,EAAE;QACP,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QAC3C,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ;AACnD,KAAA;AACD,IAAA,SAAS,EAAE;QACT,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QAC3C,UAAU,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ;AACnD,KAAA;;;;;;"}
+{"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":";;;;;;;;;;AAWa,MAAA,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;;;;;"}

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

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

package/dist/components/Alerts/constants.js

@@ -1,46 +1,19 @@
-import { theme } from '../../theme/index.js';
 import 'react';
-import { ReactComponent as AttentionIcon } from '../../icons/design-system/components/AttentionIcon.js';
-import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
-import { ReactComponent as InfoIcon } from '../../icons/design-system/components/InfoIcon.js';
-import { ReactComponent as SuccessIcon } from '../../icons/design-system/components/SuccessIcon.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as HelpFillIcon } from '../../icons/design-system/components/HelpFillIcon.js';
+import { ReactComponent as InfoFillIcon } from '../../icons/design-system/components/InfoFillIcon.js';
+import { ReactComponent as SuccessFillIcon } from '../../icons/design-system/components/SuccessFillIcon.js';
 import { ReactComponent as WarningIcon } from '../../icons/design-system/components/WarningIcon.js';
 import { RecommendIcon } from '../../icons/custom/components/RecommendIcon.js';
 
 const IconMap = {
-    default: InfoIcon,
-    error: AttentionIcon,
-    success: SuccessIcon,
-    info: HelpIcon,
+    default: InfoFillIcon,
+    error: CriticalIcon,
+    success: SuccessFillIcon,
+    info: HelpFillIcon,
     warning: WarningIcon,
     recommend: RecommendIcon,
 };
-const ColourMap = {
-    default: {
-        primary: theme.colors.neutral.ink.base,
-        background: theme.colors.neutral.grey.lightest,
-    },
-    error: {
-        primary: theme.colors.secondary.red.base,
-        background: theme.colors.secondary.red.lightest,
-    },
-    success: {
-        primary: theme.colors.secondary.green.base,
-        background: theme.colors.secondary.green.lightest,
-    },
-    info: {
-        primary: theme.colors.secondary.blue.base,
-        background: theme.colors.secondary.blue.lightest,
-    },
-    warning: {
-        primary: theme.colors.secondary.orange.base,
-        background: theme.colors.secondary.orange.lightest,
-    },
-    recommend: {
-        primary: theme.colors.secondary.purple.dark,
-        background: theme.colors.secondary.purple.lightest,
-    },
-};
 
-export { ColourMap, IconMap };
+export { IconMap };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import { theme } from 'Theme';\nimport type { IconComponent } from 'src/icons/types';\nimport { AlertColours, AlertVariants } from './types';\nimport {\n  AttentionIcon,\n  HelpIcon,\n  InfoIcon,\n  RecommendIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoIcon,\n  error: AttentionIcon,\n  success: SuccessIcon,\n  info: HelpIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n\nexport const ColourMap: Record<AlertVariants, AlertColours> = {\n  default: {\n    primary: theme.colors.neutral.ink.base,\n    background: theme.colors.neutral.grey.lightest,\n  },\n  error: {\n    primary: theme.colors.secondary.red.base,\n    background: theme.colors.secondary.red.lightest,\n  },\n  success: {\n    primary: theme.colors.secondary.green.base,\n    background: theme.colors.secondary.green.lightest,\n  },\n  info: {\n    primary: theme.colors.secondary.blue.base,\n    background: theme.colors.secondary.blue.lightest,\n  },\n  warning: {\n    primary: theme.colors.secondary.orange.base,\n    background: theme.colors.secondary.orange.lightest,\n  },\n  recommend: {\n    primary: theme.colors.secondary.purple.dark,\n    background: theme.colors.secondary.purple.lightest,\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;AAYa,MAAA,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAE,QAAQ;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;AAGb,MAAA,SAAS,GAAwC;AAC5D,IAAA,OAAO,EAAE;QACP,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;QACtC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAC/C,KAAA;AACD,IAAA,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACxC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ;AAChD,KAAA;AACD,IAAA,OAAO,EAAE;QACP,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QAC1C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ;AAClD,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACzC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;AACjD,KAAA;AACD,IAAA,OAAO,EAAE;QACP,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QAC3C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ;AACnD,KAAA;AACD,IAAA,SAAS,EAAE;QACT,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QAC3C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ;AACnD,KAAA;;;;;"}
+{"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":";;;;;;;;AAWa,MAAA,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;;;;;"}

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

@@ -7,5 +7,5 @@ export type AlertVariants = 'default' | 'error' | 'success' | 'info' | 'warning'
 export type BaseAlertProps = {
     title?: string;
     variant?: AlertVariants;
-    iconSlot?: (props: any) => React.JSX.Element;
+    iconSlot?: React.ReactNode;
 };

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var assignCssVars = require('../../utils/assignCssVars.cjs');
 var Skeleton_module = require('./Skeleton.module.scss.cjs');
 
@@ -8,8 +10,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Skeleton = ({ width, height }) => {
-    return (React__default.default.createElement("div", { "aria-hidden": "true", style: assignCssVars.assignCssVars({ width, height }), className: Skeleton_module.skeleton }));
+const Skeleton = ({ width, height, style, className, ...rest }) => {
+    return (React__default.default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars.assignCssVars({ width, height }), ...style }, className: buildClassnames.buildClassnames([Skeleton_module.skeleton, className]), ...rest }));
 };
 
 exports.Skeleton = Skeleton;

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React","assignCssVars","styles"],"mappings":";;;;;;;;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,6DAAiB,MAAM,EAAC,KAAK,EAAEC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAEC,eAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React","assignCssVars","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAYa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,sBACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-type SkeletonProps = {
+import React, { HTMLAttributes } from 'react';
+type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
     width?: string;
     height?: string;
 };
-export declare const Skeleton: ({ width, height }: SkeletonProps) => React.JSX.Element;
+export declare const Skeleton: ({ width, height, style, className, ...rest }: SkeletonProps) => React.JSX.Element;
 export {};

package/dist/components/Skeleton/Skeleton.js

@@ -1,9 +1,11 @@
 import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { assignCssVars } from '../../utils/assignCssVars.js';
 import styles from './Skeleton.module.scss.js';
 
-const Skeleton = ({ width, height }) => {
-    return (React__default.createElement("div", { "aria-hidden": "true", style: assignCssVars({ width, height }), className: styles.skeleton }));
+const Skeleton = ({ width, height, style, className, ...rest }) => {
+    return (React__default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars({ width, height }), ...style }, className: buildClassnames([styles.skeleton, className]), ...rest }));
 };
 
 export { Skeleton };

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,qDAAiB,MAAM,EAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAYa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,cACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/index.cjs

@@ -99,6 +99,7 @@ var withDeprecated = require('./hoc/withDeprecated.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
+var assignCssVars = require('./utils/assignCssVars.cjs');
 var index$5 = require('./theme/index.cjs');
 var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
 var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
@@ -427,6 +428,7 @@ exports.buildClassnames = buildClassnames.buildClassnames;
 exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;
 exports.generateId = generateId.generateId;
+exports.assignCssVars = assignCssVars.assignCssVars;
 exports.theme = index$5.theme;
 exports.AccountsIcon = AccountsIcon.ReactComponent;
 exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -97,6 +97,7 @@ export { withDeprecated } from './hoc/withDeprecated.js';
 export { buildClassnames } from './utils/buildClassnames.js';
 export { getOpaqueHexColor, hexToRgb } from './utils/color.js';
 export { generateId } from './utils/generateId.js';
+export { assignCssVars } from './utils/assignCssVars.js';
 export { theme } from './theme/index.js';
 export { ReactComponent as AccountsIcon } from './icons/design-system/components/AccountsIcon.js';
 export { ReactComponent as AccountsOutlineIcon } from './icons/design-system/components/AccountsOutlineIcon.js';

package/dist/index.js.map

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

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { buildClassnames } from './buildClassnames';
 export { getOpaqueHexColor, hexToRgb } from './color';
 export { generateId } from './generateId';
+export { assignCssVars } from './assignCssVars';

package/package.json

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

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

@@ -1,18 +0,0 @@
-'use strict';
-
-var index = require('../../../theme/index.cjs');
-
-const SpacingMap = {
-    base: index.theme.sizes.base,
-    sm: index.theme.sizes[3],
-    xs: index.theme.sizes.sm,
-};
-const IconSizeMap = {
-    base: index.theme.sizes.md,
-    sm: index.theme.sizes[5],
-    xs: index.theme.sizes[5],
-};
-
-exports.IconSizeMap = IconSizeMap;
-exports.SpacingMap = SpacingMap;
-//# sourceMappingURL=constants.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/Alerts/Alert/constants.ts"],"sourcesContent":["import { theme } from '../../../theme';\n\nimport type { AlertSizes } from './types';\n\nexport const SpacingMap: Record<AlertSizes, string> = {\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n  xs: theme.sizes.sm,\n};\n\nexport const IconSizeMap: Record<AlertSizes, string> = {\n  base: theme.sizes.md, // 24px\n  sm: theme.sizes[5], // 20px\n  xs: theme.sizes[5],\n};\n"],"names":["theme"],"mappings":";;;;AAIa,MAAA,UAAU,GAA+B;AACpD,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;;AAGP,MAAA,WAAW,GAA+B;AACrD,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;AACpB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;;"}

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

@@ -1,3 +0,0 @@
-import type { AlertSizes } from './types';
-export declare const SpacingMap: Record<AlertSizes, string>;
-export declare const IconSizeMap: Record<AlertSizes, string>;

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

@@ -1,15 +0,0 @@
-import { theme } from '../../../theme/index.js';
-
-const SpacingMap = {
-    base: theme.sizes.base,
-    sm: theme.sizes[3],
-    xs: theme.sizes.sm,
-};
-const IconSizeMap = {
-    base: theme.sizes.md,
-    sm: theme.sizes[5],
-    xs: theme.sizes[5],
-};
-
-export { IconSizeMap, SpacingMap };
-//# sourceMappingURL=constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/Alerts/Alert/constants.ts"],"sourcesContent":["import { theme } from '../../../theme';\n\nimport type { AlertSizes } from './types';\n\nexport const SpacingMap: Record<AlertSizes, string> = {\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n  xs: theme.sizes.sm,\n};\n\nexport const IconSizeMap: Record<AlertSizes, string> = {\n  base: theme.sizes.md, // 24px\n  sm: theme.sizes[5], // 20px\n  xs: theme.sizes[5],\n};\n"],"names":[],"mappings":";;AAIa,MAAA,UAAU,GAA+B;AACpD,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;;AAGP,MAAA,WAAW,GAA+B;AACrD,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACpB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;"}

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

@@ -1,20 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/types.cjs');
-var index = require('../../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const AlertContainer = styled__default.default(Stack.Stack).attrs({
-    direction: 'horizontal',
-    alignX: 'between',
-    alignY: 'top',
-    spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${index.theme.radius.base};background-color:${({ colours: { background } }) => background};`;
-
-exports.AlertContainer = AlertContainer;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":["styled","Stack","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxCC,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

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

@@ -1,4 +0,0 @@
-import { AlertColours } from '../types';
-export declare const AlertContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
-    colours: AlertColours;
-}, never>;

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

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { Stack } from '../../Stack/Stack.js';
-import '../../Stack/types.js';
-import { theme } from '../../../theme/index.js';
-
-const AlertContainer = styled(Stack).attrs({
-    direction: 'horizontal',
-    alignX: 'between',
-    alignY: 'top',
-    spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${theme.radius.base};background-color:${({ colours: { background } }) => background};`;
-
-export { AlertContainer };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

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

@@ -1,22 +0,0 @@
-'use strict';
-
-var index = require('../../../theme/index.cjs');
-
-const TextColourMap = {
-    default: index.theme.colors.neutral.ink.dark,
-    error: index.theme.colors.secondary.red.darkest,
-    success: index.theme.colors.neutral.ink.dark,
-    info: index.theme.colors.neutral.ink.dark,
-    warning: index.theme.colors.neutral.ink.dark,
-    recommend: index.theme.colors.neutral.ink.dark,
-};
-const IconStyles = {
-    minWidth: index.theme.sizes[4],
-    minHeight: index.theme.sizes[4],
-    width: index.theme.sizes[4],
-    height: index.theme.sizes[4],
-};
-
-exports.IconStyles = IconStyles;
-exports.TextColourMap = TextColourMap;
-//# sourceMappingURL=constants.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/Alerts/MiniAlert/constants.ts"],"sourcesContent":["import { theme } from 'Theme';\nimport { AlertVariants } from '../types';\n\nexport const TextColourMap: Record<AlertVariants, string> = {\n  default: theme.colors.neutral.ink.dark,\n  error: theme.colors.secondary.red.darkest,\n  success: theme.colors.neutral.ink.dark,\n  info: theme.colors.neutral.ink.dark,\n  warning: theme.colors.neutral.ink.dark,\n  recommend: theme.colors.neutral.ink.dark,\n};\n\nexport const IconStyles = {\n  minWidth: theme.sizes[4],\n  minHeight: theme.sizes[4],\n  width: theme.sizes[4],\n  height: theme.sizes[4],\n};\n"],"names":["theme"],"mappings":";;;;AAGa,MAAA,aAAa,GAAkC;IAC1D,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO;IACzC,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACnC,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;;AAG7B,MAAA,UAAU,GAAG;AACxB,IAAA,QAAQ,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,SAAS,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACzB,IAAA,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;;"}

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

@@ -1,8 +0,0 @@
-import { AlertVariants } from '../types';
-export declare const TextColourMap: Record<AlertVariants, string>;
-export declare const IconStyles: {
-    minWidth: string;
-    minHeight: string;
-    width: string;
-    height: string;
-};

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

@@ -1,19 +0,0 @@
-import { theme } from '../../../theme/index.js';
-
-const TextColourMap = {
-    default: theme.colors.neutral.ink.dark,
-    error: theme.colors.secondary.red.darkest,
-    success: theme.colors.neutral.ink.dark,
-    info: theme.colors.neutral.ink.dark,
-    warning: theme.colors.neutral.ink.dark,
-    recommend: theme.colors.neutral.ink.dark,
-};
-const IconStyles = {
-    minWidth: theme.sizes[4],
-    minHeight: theme.sizes[4],
-    width: theme.sizes[4],
-    height: theme.sizes[4],
-};
-
-export { IconStyles, TextColourMap };
-//# sourceMappingURL=constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/Alerts/MiniAlert/constants.ts"],"sourcesContent":["import { theme } from 'Theme';\nimport { AlertVariants } from '../types';\n\nexport const TextColourMap: Record<AlertVariants, string> = {\n  default: theme.colors.neutral.ink.dark,\n  error: theme.colors.secondary.red.darkest,\n  success: theme.colors.neutral.ink.dark,\n  info: theme.colors.neutral.ink.dark,\n  warning: theme.colors.neutral.ink.dark,\n  recommend: theme.colors.neutral.ink.dark,\n};\n\nexport const IconStyles = {\n  minWidth: theme.sizes[4],\n  minHeight: theme.sizes[4],\n  width: theme.sizes[4],\n  height: theme.sizes[4],\n};\n"],"names":[],"mappings":";;AAGa,MAAA,aAAa,GAAkC;IAC1D,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO;IACzC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACnC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;;AAG7B,MAAA,UAAU,GAAG;AACxB,IAAA,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACzB,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;"}