@veeqo/ui 15.1.1 → 15.1.2

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

@@ -22,25 +22,28 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * Alert component for displaying contextual feedback messages with optional actions and close button.
  */
 const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
+    var _a;
     const DefaultIcon = constants.IconMap[variant];
-    const isXsSize = size === 'xs';
-    return (React__default.default.createElement(FlexRow.FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames.buildClassnames([
+    const isVertical = direction === 'vertical';
+    const hasActions = ((_a = rightActions === null || rightActions === void 0 ? void 0 : rightActions.length) !== null && _a !== void 0 ? _a : 0) > 0 || Boolean(rightActionsSlot);
+    const hasSingleContent = !children && !hasActions && !((title || titleSlot) && (message || messageSlot));
+    return (React__default.default.createElement(FlexCol.FlexCol, { role: variant === 'error' ? 'alert' : 'status', gap: "none", className: buildClassnames.buildClassnames([
             Alert_module.alertContainer,
             Alert_module[`${size}-size`],
-            Alert_module[`${direction}-layout`],
+            isVertical ? Alert_module.vertical : undefined,
+            hasSingleContent ? Alert_module.centered : undefined,
             Alerts_module[`${variant}-alert-variant`],
             className,
         ]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
-        React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
-        React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: Alert_module[direction] },
-            children || (React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
-                titleSlot ||
-                    (title && (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
-                messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
-            ((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" },
-                rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
-                rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
-        onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? Alert_module.closeButton : Alert_module.closeButtonVertical }))));
+        React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: buildClassnames.buildClassnames([Alerts_module.icon, Alert_module.iconArea]) }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.default.createElement(FlexCol.FlexCol, { className: Alert_module.content, flexWrap: "nowrap" }, children || (React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'xs' ? 'xs' : 'sm' },
+            titleSlot ||
+                (title && (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
+            messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))),
+        hasActions && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: Alert_module.actions },
+            rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
+            rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
+        onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: Alert_module.close }))));
 };
 
 exports.Alert = Alert;

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

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

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

@@ -16,25 +16,28 @@ import styles from './Alert.module.scss.js';
  * Alert component for displaying contextual feedback messages with optional actions and close button.
  */
 const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
+    var _a;
     const DefaultIcon = IconMap[variant];
-    const isXsSize = size === 'xs';
-    return (React__default.createElement(FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames([
+    const isVertical = direction === 'vertical';
+    const hasActions = ((_a = rightActions === null || rightActions === void 0 ? void 0 : rightActions.length) !== null && _a !== void 0 ? _a : 0) > 0 || Boolean(rightActionsSlot);
+    const hasSingleContent = !children && !hasActions && !((title || titleSlot) && (message || messageSlot));
+    return (React__default.createElement(FlexCol, { role: variant === 'error' ? 'alert' : 'status', gap: "none", className: buildClassnames([
             styles.alertContainer,
             styles[`${size}-size`],
-            styles[`${direction}-layout`],
+            isVertical ? styles.vertical : undefined,
+            hasSingleContent ? styles.centered : undefined,
             alertStyles[`${variant}-alert-variant`],
             className,
         ]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
-        React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
-        React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: styles[direction] },
-            children || (React__default.createElement(FlexCol, { gap: "xs" },
-                titleSlot ||
-                    (title && (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
-                messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message)))),
-            ((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" },
-                rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
-                rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
-        onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical }))));
+        React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: buildClassnames([alertStyles.icon, styles.iconArea]) }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.createElement(FlexCol, { className: styles.content, flexWrap: "nowrap" }, children || (React__default.createElement(FlexCol, { gap: size === 'xs' ? 'xs' : 'sm' },
+            titleSlot ||
+                (title && (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
+            messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))),
+        hasActions && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles.actions },
+            rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
+            rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
+        onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: styles.close }))));
 };
 
 export { Alert };

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

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

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._base-size_f9sjk_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n  gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n  align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n  align-self: flex-start;\n}");
-var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
+___$insertStyle("._base-size_2iq88_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_2iq88_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_2iq88_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_2iq88_20 {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  grid-template-areas: \"icon content actions close\";\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n  gap: var(--alert-gap);\n  align-items: start;\n}\n\n._centered_2iq88_33 {\n  align-items: center;\n}\n\n._vertical_2iq88_37 {\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas: \"icon content close\" \".    actions .\";\n}\n._vertical_2iq88_37 ._close_2iq88_41 {\n  align-self: start;\n}\n\n._iconArea_2iq88_45 {\n  grid-area: icon;\n}\n\n._content_2iq88_49 {\n  grid-area: content;\n  min-width: 0;\n}\n\n._actions_2iq88_54 {\n  grid-area: actions;\n  align-self: center;\n}\n\n._close_2iq88_41 {\n  grid-area: close;\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_2iq88_1","sm-size":"_sm-size_2iq88_7","xs-size":"_xs-size_2iq88_13","alertContainer":"_alertContainer_2iq88_20","centered":"_centered_2iq88_33","vertical":"_vertical_2iq88_37","close":"_close_2iq88_41","iconArea":"_iconArea_2iq88_45","content":"_content_2iq88_49","actions":"_actions_2iq88_54"};
 
 module.exports = styles;
 //# sourceMappingURL=Alert.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n\n  // Specificity boost needed to override FlexRow's gap-none utility class\n  &.vertical-layout,\n  &.horizontal-layout {\n    gap: var(--alert-gap);\n  }\n}\n\n.alertContainer .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.closeButton {\n  align-self: center;\n}\n\n.closeButtonVertical {\n  align-self: flex-start;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}
+{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  grid-template-areas: 'icon content actions close';\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n  gap: var(--alert-gap);\n  align-items: start;\n}\n\n.centered {\n  align-items: center;\n}\n\n.vertical {\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas:\n    'icon content close'\n    '.    actions .';\n\n  .close {\n    align-self: start;\n  }\n}\n\n.iconArea {\n  grid-area: icon;\n}\n\n.content {\n  grid-area: content;\n  min-width: 0;\n}\n\n.actions {\n  grid-area: actions;\n  align-self: center;\n}\n\n.close {\n  grid-area: close;\n  align-self: center;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g7CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
 
-insertStyle("._base-size_f9sjk_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n  gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n  align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n  align-self: flex-start;\n}");
-var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
+insertStyle("._base-size_2iq88_1 {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n._sm-size_2iq88_7 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n._xs-size_2iq88_13 {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm);\n  --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_2iq88_20 {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  grid-template-areas: \"icon content actions close\";\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n  gap: var(--alert-gap);\n  align-items: start;\n}\n\n._centered_2iq88_33 {\n  align-items: center;\n}\n\n._vertical_2iq88_37 {\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas: \"icon content close\" \".    actions .\";\n}\n._vertical_2iq88_37 ._close_2iq88_41 {\n  align-self: start;\n}\n\n._iconArea_2iq88_45 {\n  grid-area: icon;\n}\n\n._content_2iq88_49 {\n  grid-area: content;\n  min-width: 0;\n}\n\n._actions_2iq88_54 {\n  grid-area: actions;\n  align-self: center;\n}\n\n._close_2iq88_41 {\n  grid-area: close;\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_2iq88_1","sm-size":"_sm-size_2iq88_7","xs-size":"_xs-size_2iq88_13","alertContainer":"_alertContainer_2iq88_20","centered":"_centered_2iq88_33","vertical":"_vertical_2iq88_37","close":"_close_2iq88_41","iconArea":"_iconArea_2iq88_45","content":"_content_2iq88_49","actions":"_actions_2iq88_54"};
 
 export { styles as default };
 //# sourceMappingURL=Alert.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n\n  // Specificity boost needed to override FlexRow's gap-none utility class\n  &.vertical-layout,\n  &.horizontal-layout {\n    gap: var(--alert-gap);\n  }\n}\n\n.alertContainer .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.closeButton {\n  align-self: center;\n}\n\n.closeButtonVertical {\n  align-self: flex-start;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}
+{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n  --alert-icon-size: var(--sizes-md);\n  --alert-padding: var(--sizes-base);\n  --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-3);\n  --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --alert-icon-size: var(--sizes-5);\n  --alert-padding: var(--sizes-1);\n  --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n  --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  grid-template-areas: 'icon content actions close';\n  border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n  border-radius: var(--radius-base);\n  background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n  padding: var(--alert-padding);\n  padding-left: var(--alert-padding-left, var(--alert-padding));\n  gap: var(--alert-gap);\n  align-items: start;\n}\n\n.centered {\n  align-items: center;\n}\n\n.vertical {\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas:\n    'icon content close'\n    '.    actions .';\n\n  .close {\n    align-self: start;\n  }\n}\n\n.iconArea {\n  grid-area: icon;\n}\n\n.content {\n  grid-area: content;\n  min-width: 0;\n}\n\n.actions {\n  grid-area: actions;\n  align-self: center;\n}\n\n.close {\n  grid-area: close;\n  align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g7CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/dist/components/Badge/Badge.cjs

@@ -9,6 +9,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/**
+ * @deprecated
+ * Use Tag or FilterTag instead!
+ */
 const Badge = ({ variant = 'default', hideBorder = false, iconSlot, tooltip, className, e2eClassName, children, }) => {
     return (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip },
         React__default.default.createElement("div", { className: buildClassnames.buildClassnames([

package/dist/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../Tooltip';\n\nimport { BadgeProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './Badge.module.scss';\n\nexport const Badge = ({\n  variant = 'default',\n  hideBorder = false,\n  iconSlot,\n  tooltip,\n  className,\n  e2eClassName,\n  children,\n}: BadgeProps) => {\n  return (\n    <Tooltip text={tooltip}>\n      <div\n        className={buildClassnames([\n          styles.badge,\n          styles[`${variant}-variant`],\n          hideBorder && styles.hideBorder,\n          className,\n          e2eClassName,\n        ])}\n      >\n        {iconSlot && iconSlot}\n        {children && <span>{children}</span>}\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["React","Tooltip","buildClassnames","styles"],"mappings":";;;;;;;;;;;AAOO,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,IAAI,EAAE,OAAO,EAAA;QACpBD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,gBAAAC,YAAM,CAAC,KAAK;AACZ,gBAAAA,YAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;gBAC5B,UAAU,IAAIA,YAAM,CAAC,UAAU;gBAC/B,SAAS;gBACT,YAAY;aACb,CAAC,EAAA;AAED,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAIH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,QAAQ,CAAQ,CAChC,CACE;AAEd;;;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../Tooltip';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './Badge.module.scss';\nimport { BadgeProps } from './types';\n\n/**\n * @deprecated\n * Use Tag or FilterTag instead!\n */\n\nexport const Badge = ({\n  variant = 'default',\n  hideBorder = false,\n  iconSlot,\n  tooltip,\n  className,\n  e2eClassName,\n  children,\n}: BadgeProps) => {\n  return (\n    <Tooltip text={tooltip}>\n      <div\n        className={buildClassnames([\n          styles.badge,\n          styles[`${variant}-variant`],\n          hideBorder && styles.hideBorder,\n          className,\n          e2eClassName,\n        ])}\n      >\n        {iconSlot && iconSlot}\n        {children && <span>{children}</span>}\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["React","Tooltip","buildClassnames","styles"],"mappings":";;;;;;;;;;;AAOA;;;AAGG;AAEI,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,IAAI,EAAE,OAAO,EAAA;QACpBD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,gBAAAC,YAAM,CAAC,KAAK;AACZ,gBAAAA,YAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;gBAC5B,UAAU,IAAIA,YAAM,CAAC,UAAU;gBAC/B,SAAS;gBACT,YAAY;aACb,CAAC,EAAA;AAED,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAIH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,QAAQ,CAAQ,CAChC,CACE;AAEd;;;;"}

package/dist/components/Badge/Badge.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
 import { BadgeProps } from './types';
+/**
+ * @deprecated
+ * Use Tag or FilterTag instead!
+ */
 export declare const Badge: ({ variant, hideBorder, iconSlot, tooltip, className, e2eClassName, children, }: BadgeProps) => React.JSX.Element;

package/dist/components/Badge/Badge.js

@@ -3,6 +3,10 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import styles from './Badge.module.scss.js';
 
+/**
+ * @deprecated
+ * Use Tag or FilterTag instead!
+ */
 const Badge = ({ variant = 'default', hideBorder = false, iconSlot, tooltip, className, e2eClassName, children, }) => {
     return (React__default.createElement(Tooltip, { text: tooltip },
         React__default.createElement("div", { className: buildClassnames([

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../Tooltip';\n\nimport { BadgeProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './Badge.module.scss';\n\nexport const Badge = ({\n  variant = 'default',\n  hideBorder = false,\n  iconSlot,\n  tooltip,\n  className,\n  e2eClassName,\n  children,\n}: BadgeProps) => {\n  return (\n    <Tooltip text={tooltip}>\n      <div\n        className={buildClassnames([\n          styles.badge,\n          styles[`${variant}-variant`],\n          hideBorder && styles.hideBorder,\n          className,\n          e2eClassName,\n        ])}\n      >\n        {iconSlot && iconSlot}\n        {children && <span>{children}</span>}\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAOO,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,OAAO,EAAA;QACpBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,MAAM,CAAC,KAAK;AACZ,gBAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;gBAC5B,UAAU,IAAI,MAAM,CAAC,UAAU;gBAC/B,SAAS;gBACT,YAAY;aACb,CAAC,EAAA;AAED,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,QAAQ,CAAQ,CAChC,CACE;AAEd;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../Tooltip';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './Badge.module.scss';\nimport { BadgeProps } from './types';\n\n/**\n * @deprecated\n * Use Tag or FilterTag instead!\n */\n\nexport const Badge = ({\n  variant = 'default',\n  hideBorder = false,\n  iconSlot,\n  tooltip,\n  className,\n  e2eClassName,\n  children,\n}: BadgeProps) => {\n  return (\n    <Tooltip text={tooltip}>\n      <div\n        className={buildClassnames([\n          styles.badge,\n          styles[`${variant}-variant`],\n          hideBorder && styles.hideBorder,\n          className,\n          e2eClassName,\n        ])}\n      >\n        {iconSlot && iconSlot}\n        {children && <span>{children}</span>}\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAOA;;;AAGG;AAEI,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,OAAO,EAAA;QACpBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,MAAM,CAAC,KAAK;AACZ,gBAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;gBAC5B,UAAU,IAAI,MAAM,CAAC,UAAU;gBAC/B,SAAS;gBACT,YAAY;aACb,CAAC,EAAA;AAED,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,QAAQ,CAAQ,CAChC,CACE;AAEd;;;;"}

package/dist/components/Banner/Banner.cjs

@@ -19,7 +19,9 @@ const accentColors = {
     success: 'var(--colors-secondary-green-base)',
 };
 /**
+ * @deprecated
  * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ * Use Alert, FeatureBanner or SystemBanner instead
  */
 const Banner = ({ type = 'info', text, iconSlot, onClose, className, header, children, backgroundColor = 'white', ...props }) => {
     const accentColor = accentColors[type];

package/dist/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;AAEG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,aAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,SAAS,IAC7B,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,SAAS,EAAED,aAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNF,qCAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEJ,sBAAA,CAAA,aAAA,CAACK,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,aAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,SAAS,IAC7B,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,SAAS,EAAED,aAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNF,qCAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEJ,sBAAA,CAAA,aAAA,CAACK,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}

package/dist/components/Banner/Banner.d.ts

@@ -11,7 +11,9 @@ type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode;
 };
 /**
+ * @deprecated
  * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ * Use Alert, FeatureBanner or SystemBanner instead
  */
 export declare const Banner: ({ type, text, iconSlot, onClose, className, header, children, backgroundColor, ...props }: BannerProps) => React.JSX.Element;
 export {};

package/dist/components/Banner/Banner.js

@@ -13,7 +13,9 @@ const accentColors = {
     success: 'var(--colors-secondary-green-base)',
 };
 /**
+ * @deprecated
  * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ * Use Alert, FeatureBanner or SystemBanner instead
  */
 const Banner = ({ type = 'info', text, iconSlot, onClose, className, header, children, backgroundColor = 'white', ...props }) => {
     const accentColor = accentColors[type];

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;AAEG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAC7B,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAC7B,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}

package/dist/components/Button/Button.cjs

@@ -47,6 +47,10 @@ const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant =
             React__default.default.createElement(Loader.Loader, null)))))));
 });
 ButtonBase.displayName = 'Button';
+/**
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
+ */
 const Button = withTokens.withTokens(ButtonBase);
 
 exports.Button = Button;

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps, ButtonVariant } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size,\n      dropdown = false,\n      loading = false,\n      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isLink = variant === 'link';\n\n    const appearance = isLink ? 'link' : 'button';\n\n    const resolvedSize = size === undefined && appearance === 'button' ? 'base' : size;\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      ...(!isLink && { variant: variant as Exclude<ButtonVariant, 'link' | 'unstyled'> }),\n      disabled,\n      size: resolvedSize,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={\n          variant === 'unstyled' ? getAppearanceClasses('unstyled', { className }) : classNames\n        }\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink || variant === 'unstyled' ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} aria-hidden=\"true\">\n                <Loader />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","getAppearanceClasses","React","DropdownIcon","buildClassnames","buttonStyles","Loader","withTokens"],"mappings":";;;;;;;;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAGA,gBAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IAEjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAElF,IAAA,MAAM,UAAU,GAAGC,0BAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,IAAI,CAAC,MAAM,IAAI,EAAE,OAAO,EAAE,OAAsD,EAAE,CAAC;QACnF,QAAQ;AACR,QAAA,IAAI,EAAE,YAAY;QAClB,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;AAER,QAAA,IAAI,EAAE,IAAI,EACV,SAAS,EACP,OAAO,KAAK,UAAU,GAAGD,0BAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,GAAG,UAAU,EAEvF,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,MAAM,IAAI,OAAO,KAAK,UAAU,IAC/BC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,qCAACC,yBAAY,EAAA,IAAA,CAAG,CAC5B,KAEHD,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACEA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,gBAAAC,aAAY,CAAC,OAAO;gBACpB,OAAO,IAAIA,aAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIH,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,IAAA,CAAG,CACxB;QACN,OAAO,KACND,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,aAAY,CAAC,cAAc,EAAA,aAAA,EAAc,MAAM,EAAA;YAC7DH,sBAAA,CAAA,aAAA,CAACI,aAAM,OAAG,CACN,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;MAEpB,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps, ButtonVariant } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size,\n      dropdown = false,\n      loading = false,\n      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isLink = variant === 'link';\n\n    const appearance = isLink ? 'link' : 'button';\n\n    const resolvedSize = size === undefined && appearance === 'button' ? 'base' : size;\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      ...(!isLink && { variant: variant as Exclude<ButtonVariant, 'link' | 'unstyled'> }),\n      disabled,\n      size: resolvedSize,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={\n          variant === 'unstyled' ? getAppearanceClasses('unstyled', { className }) : classNames\n        }\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink || variant === 'unstyled' ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} aria-hidden=\"true\">\n                <Loader />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","getAppearanceClasses","React","DropdownIcon","buildClassnames","buttonStyles","Loader","withTokens"],"mappings":";;;;;;;;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAGA,gBAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IAEjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAElF,IAAA,MAAM,UAAU,GAAGC,0BAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,IAAI,CAAC,MAAM,IAAI,EAAE,OAAO,EAAE,OAAsD,EAAE,CAAC;QACnF,QAAQ;AACR,QAAA,IAAI,EAAE,YAAY;QAClB,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;AAER,QAAA,IAAI,EAAE,IAAI,EACV,SAAS,EACP,OAAO,KAAK,UAAU,GAAGD,0BAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,GAAG,UAAU,EAEvF,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,MAAM,IAAI,OAAO,KAAK,UAAU,IAC/BC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,qCAACC,yBAAY,EAAA,IAAA,CAAG,CAC5B,KAEHD,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACEA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,gBAAAC,aAAY,CAAC,OAAO;gBACpB,OAAO,IAAIA,aAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIH,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,IAAA,CAAG,CACxB;QACN,OAAO,KACND,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,aAAY,CAAC,cAAc,EAAA,aAAA,EAAc,MAAM,EAAA;YAC7DH,sBAAA,CAAA,aAAA,CAACI,aAAM,OAAG,CACN,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;AAEjC;;;AAGG;MACU,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;;"}

package/dist/components/Button/Button.d.ts

@@ -12,6 +12,10 @@ export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTM
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
+ */
 export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: React.ReactNode;
     variant?: ButtonVariant | undefined;

package/dist/components/Button/Button.js

@@ -41,6 +41,10 @@ const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'defau
             React__default.createElement(Loader, null)))))));
 });
 ButtonBase.displayName = 'Button';
+/**
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
+ */
 const Button = withTokens(ButtonBase);
 
 export { Button, ButtonBase };

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps, ButtonVariant } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size,\n      dropdown = false,\n      loading = false,\n      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isLink = variant === 'link';\n\n    const appearance = isLink ? 'link' : 'button';\n\n    const resolvedSize = size === undefined && appearance === 'button' ? 'base' : size;\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      ...(!isLink && { variant: variant as Exclude<ButtonVariant, 'link' | 'unstyled'> }),\n      disabled,\n      size: resolvedSize,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={\n          variant === 'unstyled' ? getAppearanceClasses('unstyled', { className }) : classNames\n        }\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink || variant === 'unstyled' ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} aria-hidden=\"true\">\n                <Loader />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IAEjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAElF,IAAA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,IAAI,CAAC,MAAM,IAAI,EAAE,OAAO,EAAE,OAAsD,EAAE,CAAC;QACnF,QAAQ;AACR,QAAA,IAAI,EAAE,YAAY;QAClB,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;AAER,QAAA,IAAI,EAAE,IAAI,EACV,SAAS,EACP,OAAO,KAAK,UAAU,GAAG,oBAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,GAAG,UAAU,EAEvF,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,MAAM,IAAI,OAAO,KAAK,UAAU,IAC/BA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,6BAAC,YAAY,EAAA,IAAA,CAAG,CAC5B,KAEHA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,YAAY,CAAC,OAAO;gBACpB,OAAO,IAAI,YAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACxB;QACN,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,cAAc,EAAA,aAAA,EAAc,MAAM,EAAA;YAC7DA,cAAA,CAAA,aAAA,CAAC,MAAM,OAAG,CACN,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;MAEpB,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps, ButtonVariant } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size,\n      dropdown = false,\n      loading = false,\n      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isLink = variant === 'link';\n\n    const appearance = isLink ? 'link' : 'button';\n\n    const resolvedSize = size === undefined && appearance === 'button' ? 'base' : size;\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      ...(!isLink && { variant: variant as Exclude<ButtonVariant, 'link' | 'unstyled'> }),\n      disabled,\n      size: resolvedSize,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={\n          variant === 'unstyled' ? getAppearanceClasses('unstyled', { className }) : classNames\n        }\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink || variant === 'unstyled' ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} aria-hidden=\"true\">\n                <Loader />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IAEjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAElF,IAAA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,IAAI,CAAC,MAAM,IAAI,EAAE,OAAO,EAAE,OAAsD,EAAE,CAAC;QACnF,QAAQ;AACR,QAAA,IAAI,EAAE,YAAY;QAClB,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;AAER,QAAA,IAAI,EAAE,IAAI,EACV,SAAS,EACP,OAAO,KAAK,UAAU,GAAG,oBAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,GAAG,UAAU,EAEvF,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,MAAM,IAAI,OAAO,KAAK,UAAU,IAC/BA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,6BAAC,YAAY,EAAA,IAAA,CAAG,CAC5B,KAEHA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,YAAY,CAAC,OAAO;gBACpB,OAAO,IAAI,YAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACxB;QACN,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,cAAc,EAAA,aAAA,EAAc,MAAM,EAAA;YAC7DA,cAAA,CAAA,aAAA,CAAC,MAAM,OAAG,CACN,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;AAEjC;;;AAGG;MACU,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}

package/package.json

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