@kaizen/components 1.57.1 → 1.58.0

package/dist/cjs/__containers__/GuidanceBlock/v2/GuidanceBlock.cjs

@@ -0,0 +1,160 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Media = require('react-media');
+var Heading = require('../../../Heading/Heading.cjs');
+require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var ArrowForwardIcon = require('../../../Icon/ArrowForwardIcon.cjs');
+var Text = require('../../../Text/Text.cjs');
+var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
+var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
+var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Media__default = /*#__PURE__*/_interopDefault(Media);
+var WithTooltip = function (_a) {
+  var tooltipProps = _a.tooltipProps,
+    children = _a.children;
+  return !!tooltipProps ? React__default.default.createElement(index.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.Fragment, null, children);
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
+ */
+var GuidanceBlock = function (_a) {
+  var _b, _c, _d, _e;
+  var _f = _a.layout,
+    layout = _f === void 0 ? "default" : _f,
+    _g = _a.variant,
+    variant = _g === void 0 ? "default" : _g,
+    _h = _a.withActionButtonArrow,
+    withActionButtonArrow = _h === void 0 ? true : _h,
+    _j = _a.noMaxWidth,
+    noMaxWidth = _j === void 0 ? false : _j,
+    _k = _a.illustrationType,
+    illustrationType = _k === void 0 ? "spot" : _k,
+    _l = _a.smallScreenTextAlignment,
+    smallScreenTextAlignment = _l === void 0 ? "center" : _l,
+    actions = _a.actions,
+    illustration = _a.illustration,
+    secondaryDismiss = _a.secondaryDismiss,
+    restProps = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
+  var _m = React.useState(false),
+    hidden = _m[0],
+    setHidden = _m[1];
+  var _o = React.useState(false),
+    removed = _o[0],
+    setRemoved = _o[1];
+  var _p = React.useState(""),
+    mediaQueryLayout = _p[0],
+    setMediaQueryLayout = _p[1];
+  var containerRef = React__default.default.createRef();
+  React.useEffect(function () {
+    if (layout === "inline" || layout === "stacked") {
+      containerQuery();
+    }
+  }, []);
+  var handleDismissBanner = function () {
+    var _a;
+    setHidden(true);
+    (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
+  };
+  var onTransitionEnd = function (e) {
+    // Be careful: this assumes the final CSS property to be animated is "margin-top".
+    if (hidden && e.propertyName === "margin-top") {
+      setRemoved(true);
+    }
+  };
+  var containerQuery = function () {
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (entries.length === 1) {
+        handleMediaQueryLayout(entries[0].contentRect.width);
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+  };
+  var handleMediaQueryLayout = function (width) {
+    if (width <= 320) {
+      setMediaQueryLayout("centerContent");
+    } else {
+      setMediaQueryLayout("");
+    }
+  };
+  var marginTop = function () {
+    if (hidden && containerRef.current) {
+      return -containerRef.current.clientHeight + "px";
+    }
+    return "0";
+  };
+  if (removed) {
+    return React__default.default.createElement(React__default.default.Fragment, null);
+  }
+  var componentIsMobile = mediaQueryLayout.includes("centerContent");
+  return React__default.default.createElement("div", {
+    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, mediaQueryLayout === "centerContent" && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === "scene" && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === "left" && GuidanceBlock_module.smallScreenTextAlignment),
+    style: {
+      marginTop: marginTop()
+    },
+    ref: containerRef,
+    onTransitionEnd: onTransitionEnd
+  }, React__default.default.createElement("div", {
+    className: GuidanceBlock_module.illustrationWrapper
+  }, React__default.default.createElement("div", {
+    className: GuidanceBlock_module.illustration
+  }, illustrationType === "scene" ? React__default.default.cloneElement(illustration, {
+    enableAspectRatio: true
+  }) : illustration)), React__default.default.createElement("div", {
+    className: GuidanceBlock_module.descriptionAndActions
+  }, React__default.default.createElement("div", {
+    className: GuidanceBlock_module.descriptionContainer
+  }, "content" in restProps && restProps.content, "text" in restProps && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
+    className: GuidanceBlock_module.headingWrapper
+  }, React__default.default.createElement(Heading.Heading, {
+    tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
+    variant: "heading-3"
+  }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), React__default.default.createElement(Text.Text, {
+    tag: "p",
+    variant: "body"
+  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(Media__default.default, {
+    query: "(max-width: 767px)"
+  }, function (isMobile) {
+    var _a;
+    return React__default.default.createElement("div", {
+      className: classnames__default.default({
+        noRightMargin: isMobile || componentIsMobile,
+        rightMargin: !(isMobile || componentIsMobile) && layout === "default"
+      })
+    }, React__default.default.createElement("div", {
+      className: classnames__default.default(GuidanceBlock_module.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && GuidanceBlock_module.secondaryAction)
+    }, React__default.default.createElement(WithTooltip, {
+      tooltipProps: actions.primary.tooltip
+    }, React__default.default.createElement(Button.Button, tslib.__assign({
+      icon: withActionButtonArrow ? React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
+        role: "presentation"
+      }) : undefined,
+      iconPosition: "end"
+    }, actions.primary, {
+      fullWidth: isMobile || componentIsMobile
+    }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && React__default.default.createElement(WithTooltip, {
+      tooltipProps: actions.secondary.tooltip
+    }, React__default.default.createElement("div", {
+      className: GuidanceBlock_module.secondaryAction
+    }, React__default.default.createElement(Button.Button, tslib.__assign({
+      secondary: true
+    }, actions.secondary, {
+      onClick: secondaryDismiss ? function () {
+        return handleDismissBanner();
+      } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
+      fullWidth: isMobile || componentIsMobile
+    }))))));
+  })));
+};
+GuidanceBlock.displayName = "GuidanceBlock";
+exports.GuidanceBlock = GuidanceBlock;

package/dist/cjs/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__gIzig",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__xtPiX",
+  "banner": "GuidanceBlock-module_banner__ng6kh",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__V-DbD",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__-rRYc",
+  "illustration": "GuidanceBlock-module_illustration__LpEwu",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__HxwOA",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__N1EEi",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__D206m",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__w3vEh",
+  "hidden": "GuidanceBlock-module_hidden__hgakl",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__xqjf-",
+  "cancel": "GuidanceBlock-module_cancel__0lcBe",
+  "icon": "GuidanceBlock-module_icon__XVKkH",
+  "disabled": "GuidanceBlock-module_disabled__tbZPh",
+  "hover": "GuidanceBlock-module_hover__vs7Wu",
+  "active": "GuidanceBlock-module_active__eJu5N",
+  "default": "GuidanceBlock-module_default__W7fnR",
+  "expert-advice": "GuidanceBlock-module_expert-advice__uGg7D",
+  "inline": "GuidanceBlock-module_inline__DC0LQ",
+  "stacked": "GuidanceBlock-module_stacked__2SSuH",
+  "centerContent": "GuidanceBlock-module_centerContent__pS9uQ",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__iaw5d"
+};
+module.exports = styles;

package/dist/cjs/containersV1.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+var GuidanceBlock = require('./__containers__/GuidanceBlock/v1/GuidanceBlock.cjs');
+exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;

package/dist/cjs/containersV2.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+var GuidanceBlock = require('./__containers__/GuidanceBlock/v2/GuidanceBlock.cjs');
+exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;

package/dist/cjs/index.cjs

@@ -60,7 +60,6 @@ var getTruncatedLabel = require('./Filter/FilterMultiSelect/utils/getTruncatedLa
 var getSelectedOptionLabels = require('./Filter/FilterMultiSelect/utils/getSelectedOptionLabels.cjs');
 var getSelectedOptionKeys = require('./Filter/FilterMultiSelect/utils/getSelectedOptionKeys.cjs');
 var FilterSelect = require('./Filter/FilterSelect/FilterSelect.cjs');
-var GuidanceBlock = require('./GuidanceBlock/GuidanceBlock.cjs');
 var Heading = require('./Heading/Heading.cjs');
 var AcademyIcon = require('./Icon/AcademyIcon.cjs');
 var ActionOffIcon = require('./Icon/ActionOffIcon.cjs');
@@ -410,6 +409,7 @@ var index = require('./__overlays__/Tooltip/v1/index.cjs');
 var index$1 = require('./__actions__/Menu/v1/index.cjs');
 var Button = require('./__actions__/Button/v1/Button/Button.cjs');
 var IconButton = require('./__actions__/Button/v1/IconButton/IconButton.cjs');
+var GuidanceBlock = require('./__containers__/GuidanceBlock/v1/GuidanceBlock.cjs');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -503,7 +503,6 @@ exports.getTruncatedLabels = getTruncatedLabel.getTruncatedLabels;
 exports.getSelectedOptionLabels = getSelectedOptionLabels.getSelectedOptionLabels;
 exports.getSelectedOptionKeys = getSelectedOptionKeys.getSelectedOptionKeys;
 exports.FilterSelect = FilterSelect.FilterSelect;
-exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;
 exports.Heading = Heading.Heading;
 exports.AcademyIcon = AcademyIcon.AcademyIcon;
 exports.ActionOffIcon = ActionOffIcon.ActionOffIcon;
@@ -1044,3 +1043,4 @@ exports.MenuList = index$1.MenuList;
 exports.StatelessMenu = index$1.StatelessMenu;
 exports.Button = Button.Button;
 exports.IconButton = IconButton.IconButton;
+exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;

package/dist/esm/BrandMoment/BrandMoment.mjs

@@ -15,6 +15,7 @@ import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
 const BrandMoment = /*#__PURE__*/function () {
   const BrandMoment = function (_a) {
     var mood = _a.mood,
+      variant = _a.variant,
       illustration = _a.illustration,
       header = _a.header,
       body = _a.body,
@@ -22,10 +23,10 @@ const BrandMoment = /*#__PURE__*/function () {
       secondaryAction = _a.secondaryAction,
       text = _a.text,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+      restProps = __rest(_a, ["mood", "variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
     var queries = useMediaQueries().queries;
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles.body, styles[mood], classNameOverride)
+      className: classnames(styles.body, variant ? styles[variant] : styles[mood], classNameOverride)
     }, restProps), /*#__PURE__*/React.createElement("header", {
       className: styles.header
     }, header), /*#__PURE__*/React.createElement("main", {

package/dist/esm/BrandMoment/BrandMoment.module.scss.mjs

@@ -1,8 +1,10 @@
 var styles = {
   "body": "BrandMoment-module_body__J4lls",
-  "informative": "BrandMoment-module_informative__Qvwcd",
   "positive": "BrandMoment-module_positive__78wqJ",
   "negative": "BrandMoment-module_negative__atXal",
+  "informative": "BrandMoment-module_informative__Qvwcd",
+  "success": "BrandMoment-module_success__v503M",
+  "warning": "BrandMoment-module_warning__dWih8",
   "container": "BrandMoment-module_container__4ORHI",
   "header": "BrandMoment-module_header__EAP5Q",
   "main": "BrandMoment-module_main__cdWko",

package/dist/esm/Card/Card.mjs

@@ -12,15 +12,16 @@ const Card = /*#__PURE__*/function () {
     var children = _a.children,
       _b = _a.tag,
       tag = _b === void 0 ? "div" : _b,
-      _c = _a.variant,
-      variant = _c === void 0 ? "default" : _c,
+      variant = _a.variant,
+      _c = _a.color,
+      color = _c === void 0 ? "white" : _c,
       _d = _a.isElevated,
       isElevated = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["children", "tag", "variant", "isElevated", "classNameOverride"]);
-    var Tag = tag;
-    return /*#__PURE__*/React.createElement(Tag, __assign({
-      className: classnames(styles.wrapper, styles[variant], classNameOverride, isElevated && styles.elevated)
+      props = __rest(_a, ["children", "tag", "variant", "color", "isElevated", "classNameOverride"]);
+    var Element = tag;
+    return /*#__PURE__*/React.createElement(Element, __assign({
+      className: classnames(styles.wrapper, variant ? styles[variant] : styles[color], classNameOverride, isElevated && styles.elevated)
     }, props), children);
   };
   Card.displayName = "Card";

package/dist/esm/Card/Card.module.scss.mjs

@@ -1,12 +1,20 @@
 var styles = {
   "wrapper": "Card-module_wrapper__h5MUx",
+  "elevated": "Card-module_elevated__m7z8s",
+  "blue": "Card-module_blue__3-ogH",
+  "gray": "Card-module_gray__laFe8",
+  "green": "Card-module_green__FOeLt",
+  "orange": "Card-module_orange__hIZPr",
+  "purple": "Card-module_purple__7tEwm",
+  "red": "Card-module_red__e6deN",
+  "white": "Card-module_white__HD1ph",
+  "yellow": "Card-module_yellow__j4aX-",
   "default": "Card-module_default__MzW74",
   "informative": "Card-module_informative__4yRSy",
   "positive": "Card-module_positive__KvUqp",
   "cautionary": "Card-module_cautionary__iMWR-",
   "destructive": "Card-module_destructive__9wC8X",
   "assertive": "Card-module_assertive__6d1GM",
-  "highlight": "Card-module_highlight__2GSL-",
-  "elevated": "Card-module_elevated__m7z8s"
+  "highlight": "Card-module_highlight__2GSL-"
 };
 export { styles as default };

package/dist/esm/EmptyState/EmptyState.mjs

@@ -4,14 +4,21 @@ import classnames from 'classnames';
 import { Heading } from '../Heading/Heading.mjs';
 import '../Illustration/subcomponents/Base/Base.mjs';
 import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
-import { EmptyStatesPositive, EmptyStatesNeutral, EmptyStatesNegative, EmptyStatesInformative } from '../Illustration/Scene/Scene.mjs';
+import { EmptyStatesPositive, EmptyStatesNegative, EmptyStatesInformative, EmptyStatesNeutral } from '../Illustration/Scene/Scene.mjs';
 import { Text } from '../Text/Text.mjs';
 import styles from './EmptyState.module.scss.mjs';
 var ILLUSTRATIONS = {
+  success: EmptyStatesPositive,
+  warning: EmptyStatesNegative,
+  informative: EmptyStatesInformative,
+  "expert-advice": EmptyStatesNeutral,
+  /** @deprecated Replaced by success */
   positive: EmptyStatesPositive,
+  /** @deprecated Replaced by expert-advice */
   neutral: EmptyStatesNeutral,
+  /** @deprecated Replaced by warning */
   negative: EmptyStatesNegative,
-  informative: EmptyStatesInformative,
+  /** @deprecated Replaced by warning */
   action: EmptyStatesNegative
 };
 /**
@@ -22,8 +29,9 @@ const EmptyState = /*#__PURE__*/function () {
   const EmptyState = function (_a) {
     var children = _a.children,
       id = _a.id,
-      _b = _a.illustrationType,
-      illustrationType = _b === void 0 ? "informative" : _b,
+      illustrationType = _a.illustrationType,
+      _b = _a.variant,
+      variant = _b === void 0 ? "informative" : _b,
       _c = _a.layoutContext,
       layoutContext = _c === void 0 ? "sidebarAndContent" : _c,
       headingProps = _a.headingProps,
@@ -34,10 +42,10 @@ const EmptyState = /*#__PURE__*/function () {
       _e = _a.loop,
       loop = _e === void 0 ? false : _e,
       classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["children", "id", "illustrationType", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
-    var IllustrationComponent = ILLUSTRATIONS[illustrationType];
+      props = __rest(_a, ["children", "id", "illustrationType", "variant", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
+    var IllustrationComponent = ILLUSTRATIONS[illustrationType !== null && illustrationType !== void 0 ? illustrationType : variant];
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(classNameOverride, styles[illustrationType], styles.container, styles.zen, styles[layoutContext], straightCorners && styles.straightCorners),
+      className: classnames(styles.container, illustrationType ? styles[illustrationType] : styles[variant], styles[layoutContext], straightCorners && styles.straightCorners, classNameOverride),
       id: id
     }, props), /*#__PURE__*/React.createElement("div", {
       className: styles.illustrationSide

package/dist/esm/EmptyState/EmptyState.module.scss.mjs

@@ -7,7 +7,10 @@ var styles = {
   "negative": "EmptyState-module_negative__e5ci6",
   "action": "EmptyState-module_action__OdsgJ",
   "neutral": "EmptyState-module_neutral__L6fBb",
+  "success": "EmptyState-module_success__y7jKP",
+  "warning": "EmptyState-module_warning__-PrRp",
   "informative": "EmptyState-module_informative__x0GSr",
+  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
   "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
   "textSide": "EmptyState-module_textSide__tv54w",
   "illustration": "EmptyState-module_illustration__HyD2k",

package/dist/esm/ErrorPage/ErrorPage.mjs

@@ -60,7 +60,7 @@ const ErrorPage = /*#__PURE__*/function () {
         isAnimated: true,
         loop: true
       }),
-      mood: "negative",
+      variant: "warning",
       primaryAction: __assign(__assign({}, actions.primary), {
         icon: /*#__PURE__*/React.createElement(ArrowRightIcon, {
           role: "presentation"

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -18,8 +18,8 @@ import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHead
 import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
 import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
 import styles from './ConfirmationModal.module.scss.mjs';
-var getIcon = function (mood, isProminent) {
-  switch (mood) {
+var getIcon = function (variantName, isProminent) {
+  switch (variantName) {
     case "cautionary":
       return isProminent ? ( /*#__PURE__*/React.createElement(Cautionary, null)) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
         inheritSize: true,
@@ -31,11 +31,13 @@ var getIcon = function (mood, isProminent) {
         role: "presentation"
       }));
     case "negative":
+    case "warning":
       return isProminent ? ( /*#__PURE__*/React.createElement(Negative, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
         inheritSize: true,
         role: "presentation"
       }));
     case "positive":
+    case "success":
       return isProminent ? ( /*#__PURE__*/React.createElement(Positive, null)) : ( /*#__PURE__*/React.createElement(SuccessWhiteIcon, {
         inheritSize: true,
         role: "presentation"
@@ -59,6 +61,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
       _c = _a.unpadded,
       unpadded = _c === void 0 ? false : _c,
       mood = _a.mood,
+      variant = _a.variant,
       title = _a.title,
       onConfirm = _a.onConfirm,
       onAfterLeave = _a.onAfterLeave,
@@ -70,7 +73,8 @@ const ConfirmationModal = /*#__PURE__*/function () {
       confirmWorking = _a.confirmWorking,
       propsOnDismiss = _a.onDismiss,
       children = _a.children,
-      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "variant", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+    var variantName = variant || mood;
     var onDismiss = confirmWorking ? undefined : propsOnDismiss;
     var footerActions = [];
     if (onConfirm) {
@@ -102,12 +106,12 @@ const ConfirmationModal = /*#__PURE__*/function () {
     }, props), /*#__PURE__*/React.createElement(ModalHeader, {
       onDismiss: onDismiss
     }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.header, styles["".concat(mood, "Header")], isProminent && styles.prominent, !unpadded && styles.padded)
+      className: classnames(styles.header, variant ? styles[variant] : styles["".concat(mood, "Header")], isProminent && styles.prominent, !unpadded && styles.padded)
     }, /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.iconContainer, isProminent && styles.prominent)
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.spotIcon
-    }, getIcon(mood, isProminent))), /*#__PURE__*/React.createElement(ModalAccessibleLabel, {
+    }, getIcon(variantName, isProminent))), /*#__PURE__*/React.createElement(ModalAccessibleLabel, {
       isProminent: isProminent
     }, /*#__PURE__*/React.createElement(Heading, {
       tag: "h2",

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.module.scss.mjs

@@ -13,15 +13,19 @@ var styles = {
   "unscrollable": "ConfirmationModal-module_unscrollable__wg2AZ",
   "pseudoScrollbar": "ConfirmationModal-module_pseudoScrollbar__NqMuT",
   "hide": "ConfirmationModal-module_hide__jOdWV",
+  "spotIcon": "ConfirmationModal-module_spotIcon__rFSHQ",
   "header": "ConfirmationModal-module_header__Ooy23",
   "padded": "ConfirmationModal-module_padded__nGa2-",
   "iconContainer": "ConfirmationModal-module_iconContainer__QjdGa",
+  "prominent": "ConfirmationModal-module_prominent__8-gkP",
   "positiveHeader": "ConfirmationModal-module_positiveHeader__8Dmja",
-  "spotIcon": "ConfirmationModal-module_spotIcon__rFSHQ",
   "informativeHeader": "ConfirmationModal-module_informativeHeader__lTv94",
   "negativeHeader": "ConfirmationModal-module_negativeHeader__Pmob9",
   "assertiveHeader": "ConfirmationModal-module_assertiveHeader__3chNK",
   "cautionaryHeader": "ConfirmationModal-module_cautionaryHeader__ZnE4P",
-  "prominent": "ConfirmationModal-module_prominent__8-gkP"
+  "success": "ConfirmationModal-module_success__4feh-",
+  "informative": "ConfirmationModal-module_informative__-kOIo",
+  "warning": "ConfirmationModal-module_warning__QlnBO",
+  "cautionary": "ConfirmationModal-module_cautionary__AJSCG"
 };
 export { styles as default };

package/dist/esm/Notification/ToastNotification/ToastNotification/ToastNotification.mjs

@@ -5,11 +5,10 @@ var ToastNotification = function (_a) {
   var propsId = _a.id,
     _b = _a.hideCloseIcon,
     hideCloseIcon = _b === void 0 ? false : _b,
-    type = _a.type,
     title = _a.title,
     onHide = _a.onHide,
     children = _a.children,
-    restProps = __rest(_a, ["id", "hideCloseIcon", "type", "title", "onHide", "children"]);
+    restProps = __rest(_a, ["id", "hideCloseIcon", "title", "onHide", "children"]);
   var reactId = useId();
   var id = propsId || reactId;
   var addToastNotification = useToastNotificationContext().addToastNotification;
@@ -17,7 +16,6 @@ var ToastNotification = function (_a) {
   useEffect(function () {
     addToastNotification(__assign({
       id: id,
-      type: type,
       title: title,
       message: children,
       persistent: persistent,

package/dist/esm/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.mjs

@@ -12,16 +12,14 @@ const ToastNotificationsMap = /*#__PURE__*/function () {
     // this list cannot render with a container (must be portalled into one).
     return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, notifications.map(function (_a) {
       var id = _a.id,
-        type = _a.type,
         title = _a.title,
         persistent = _a.persistent,
         onHide = _a.onHide,
         message = _a.message,
-        restProps = __rest(_a, ["id", "type", "title", "persistent", "onHide", "message"]);
+        restProps = __rest(_a, ["id", "title", "persistent", "onHide", "message"]);
       return /*#__PURE__*/React.createElement(GenericNotification, __assign({
         key: id,
         style: "toast",
-        type: type,
         title: title,
         persistent: persistent,
         onHide: function () {

package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs

@@ -3,11 +3,12 @@ import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { CancelButton } from '../CancelButton/CancelButton.mjs';
 import { NotificationHeading } from '../NotificationHeading/NotificationHeading.mjs';
-import { NotificationIcon } from '../NotificationIcon/NotificationIcon.mjs';
+import { NotificationIconType, NotificationIconVariant } from '../NotificationIcon/NotificationIcon.mjs';
 import styles from './GenericNotification.module.scss.mjs';
 const GenericNotification = /*#__PURE__*/function () {
   const GenericNotification = function (_a) {
     var type = _a.type,
+      variant = _a.variant,
       style = _a.style,
       children = _a.children,
       title = _a.title,
@@ -18,7 +19,7 @@ const GenericNotification = /*#__PURE__*/function () {
       forceMultiline = _a.forceMultiline,
       headingProps = _a.headingProps,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["type", "style", "children", "title", "persistent", "onHide", "noBottomMargin", "forceMultiline", "headingProps", "classNameOverride"]);
+      restProps = __rest(_a, ["type", "variant", "style", "children", "title", "persistent", "onHide", "noBottomMargin", "forceMultiline", "headingProps", "classNameOverride"]);
     var _c = useState(true),
       isHidden = _c[0],
       setIsHidden = _c[1];
@@ -51,16 +52,18 @@ const GenericNotification = /*#__PURE__*/function () {
     }
     return /*#__PURE__*/React.createElement("div", __assign({
       ref: containerRef,
-      className: classnames(styles.notification, styles[type], styles[style], isHidden && styles.hidden, noBottomMargin && styles.noBottomMargin, classNameOverride, persistent && styles.persistent),
+      className: classnames(styles.notification, variant ? styles[variant] : styles[type], styles[style], isHidden && styles.hidden, noBottomMargin && styles.noBottomMargin, classNameOverride, persistent && styles.persistent),
       style: {
         marginTop: getMarginTop()
       },
       onTransitionEnd: onTransitionEnd
     }, restProps), /*#__PURE__*/React.createElement("div", {
       className: styles.icon
-    }, /*#__PURE__*/React.createElement(NotificationIcon, {
+    }, type ? ( /*#__PURE__*/React.createElement(NotificationIconType, {
       type: type
-    })), /*#__PURE__*/React.createElement("div", {
+    })) : ( /*#__PURE__*/React.createElement(NotificationIconVariant, {
+      variant: variant
+    }))), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.textContainer, forceMultiline && styles.forceMultiline)
     }, style !== "global" && ( /*#__PURE__*/React.createElement(NotificationHeading, {
       titleProp: title,

package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.mjs

@@ -4,8 +4,6 @@ var styles = {
   "toast": "GenericNotification-module_toast__GOVfC",
   "global": "GenericNotification-module_global__Weka-",
   "positive": "GenericNotification-module_positive__U-3HK",
-  "informative": "GenericNotification-module_informative__WLimi",
-  "cautionary": "GenericNotification-module_cautionary__lneFu",
   "security": "GenericNotification-module_security__QTALa",
   "negative": "GenericNotification-module_negative__lUWhD",
   "hidden": "GenericNotification-module_hidden__WJjct",
@@ -22,6 +20,10 @@ var styles = {
   "hover": "GenericNotification-module_hover__hUURd",
   "active": "GenericNotification-module_active__-6ahb",
   "cancelLabel": "GenericNotification-module_cancelLabel__HJzsk",
-  "notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8"
+  "notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8",
+  "success": "GenericNotification-module_success__oLGIP",
+  "informative": "GenericNotification-module_informative__WLimi",
+  "cautionary": "GenericNotification-module_cautionary__lneFu",
+  "warning": "GenericNotification-module_warning__7275P"
 };
 export { styles as default };

package/dist/esm/Notification/subcomponents/NotificationIcon/NotificationIcon.mjs

@@ -4,8 +4,8 @@ import { ExclamationIcon } from '../../../Icon/ExclamationIcon.mjs';
 import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
 import { SecurityTipIcon } from '../../../Icon/SecurityTipIcon.mjs';
 import { SuccessIcon } from '../../../Icon/SuccessIcon.mjs';
-const NotificationIcon = /*#__PURE__*/function () {
-  const NotificationIcon = function (_a) {
+const NotificationIconType = /*#__PURE__*/function () {
+  const NotificationIconType = function (_a) {
     var type = _a.type;
     switch (type) {
       case "positive":
@@ -40,7 +40,41 @@ const NotificationIcon = /*#__PURE__*/function () {
         });
     }
   };
-  NotificationIcon.displayName = "NotificationIcon";
-  return NotificationIcon;
+  NotificationIconType.displayName = "NotificationIconType";
+  return NotificationIconType;
 }();
-export { NotificationIcon };
+const NotificationIconVariant = /*#__PURE__*/function () {
+  const NotificationIconVariant = function (_a) {
+    var variant = _a.variant;
+    switch (variant) {
+      case "success":
+        return /*#__PURE__*/React.createElement(SuccessIcon, {
+          role: "presentation",
+          inheritSize: true
+        });
+      case "warning":
+        return /*#__PURE__*/React.createElement(ExclamationIcon, {
+          role: "presentation",
+          inheritSize: true
+        });
+      case "cautionary":
+        return /*#__PURE__*/React.createElement(CautionIcon, {
+          role: "presentation",
+          inheritSize: true
+        });
+      case "informative":
+        return /*#__PURE__*/React.createElement(InformationIcon, {
+          role: "presentation",
+          inheritSize: true
+        });
+      case "security":
+        return /*#__PURE__*/React.createElement(SecurityTipIcon, {
+          role: "presentation",
+          inheritSize: true
+        });
+    }
+  };
+  NotificationIconVariant.displayName = "NotificationIconVariant";
+  return NotificationIconVariant;
+}();
+export { NotificationIconType, NotificationIconVariant };