@kaizen/components 1.47.0 → 1.47.2

package/dist/cjs/MultiSelect/subcomponents/Popover/Popover.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject = require('../../../__build-tools/styleInject.cjs');
+var css_248z = ".Popover-module_popover__B7k5I{background:var(--color-white,#fff);border:var(--border-focus-ring-border-width,2px) var(--border-focus-ring-border-style,solid) transparent;border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));box-sizing:border-box;overflow:auto}.Popover-module_popover__B7k5I:focus{outline:none}.Popover-module_popover__B7k5I:focus-visible{border-color:var(--color-blue-500,#0168b3)}";
+var styles = {
+  "popover": "Popover-module_popover__B7k5I"
+};
+styleInject.styleInject(css_248z);
+module.exports = styles;

package/dist/cjs/Notification/GlobalNotification/GlobalNotification.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var GenericNotification = require('../subcomponents/GenericNotification/GenericNotification.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060757/Global+Notification Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-notifications-global-notification--docs Storybook}
+ */
+var GlobalNotification = function (_a) {
+  var _b = _a.persistent,
+    persistent = _b === void 0 ? false : _b,
+    props = tslib.__rest(_a, ["persistent"]);
+  return React__default.default.createElement(GenericNotification.GenericNotification, tslib.__assign({
+    persistent: persistent,
+    style: "global"
+  }, props));
+};
+GlobalNotification.displayName = "GlobalNotification";
+exports.GlobalNotification = GlobalNotification;

package/dist/cjs/Notification/InlineNotification/InlineNotification.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var GenericNotification = require('../subcomponents/GenericNotification/GenericNotification.cjs');
+var GenericNotification_module = require('../subcomponents/GenericNotification/GenericNotification.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-notifications-inline-notification--docs Storybook}
+ */
+var InlineNotification = function (_a) {
+  var isSubtle = _a.isSubtle,
+    _b = _a.hideCloseIcon,
+    hideCloseIcon = _b === void 0 ? false : _b,
+    _c = _a.persistent,
+    persistent = _c === void 0 ? false : _c,
+    classNameOverride = _a.classNameOverride,
+    otherProps = tslib.__rest(_a, ["isSubtle", "hideCloseIcon", "persistent", "classNameOverride"]);
+  return React__default.default.createElement(GenericNotification.GenericNotification, tslib.__assign({
+    style: "inline",
+    persistent: persistent || hideCloseIcon,
+    classNameOverride: classnames__default.default(classNameOverride, [isSubtle && GenericNotification_module.subtle])
+  }, otherProps));
+};
+InlineNotification.displayName = "InlineNotification";
+exports.InlineNotification = InlineNotification;

package/dist/cjs/Notification/ToastNotification/ToastNotification/ToastNotification.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
+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 = tslib.__rest(_a, ["id", "hideCloseIcon", "type", "title", "onHide", "children"]);
+  var reactId = React.useId();
+  var id = propsId || reactId;
+  var addToastNotification = ToastNotificationContext.useToastNotificationContext().addToastNotification;
+  var persistent = hideCloseIcon;
+  React.useEffect(function () {
+    addToastNotification(tslib.__assign({
+      id: id,
+      type: type,
+      title: title,
+      message: children,
+      persistent: persistent,
+      onHide: onHide
+    }, restProps));
+  }, []);
+  return null;
+};
+ToastNotification.displayName = "ToastNotification";
+exports.ToastNotification = ToastNotification;

package/dist/cjs/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
+var ToastNotificationsMap = require('./subcomponents/ToastNotificationsMap/ToastNotificationsMap.cjs');
+var ToastNotificationsList_module = require('./ToastNotificationsList.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ToastNotificationsList = function () {
+  var _a = ToastNotificationContext.useToastNotificationContext(),
+    notifications = _a.notifications,
+    removeToastNotification = _a.removeToastNotification;
+  var containers = document.querySelectorAll('[data-testid="toast-notifications-list"');
+  if (containers) {
+    // Remove any duplicate instances
+    // (eg. Storybook docs page has multiple stories each with their own context)
+    containers.forEach(function (c, i) {
+      if (i === 0) return;
+      c.remove();
+    });
+  }
+  return ReactDOM.createPortal(React__default.default.createElement("div", {
+    "data-testid": "toast-notifications-list",
+    role: "status",
+    className: ToastNotificationsList_module.toastNotificationsList
+  }, React__default.default.createElement(ToastNotificationsMap.ToastNotificationsMap, {
+    notifications: notifications,
+    onHide: removeToastNotification,
+    container: containers[0]
+  })), document.body);
+};
+ToastNotificationsList.displayName = "ToastNotificationsList";
+exports.ToastNotificationsList = ToastNotificationsList;

package/dist/cjs/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject = require('../../../__build-tools/styleInject.cjs');
+var css_248z = ".ToastNotificationsList-module_toastNotificationsList__APiSP{align-items:flex-end;bottom:0;display:flex;flex-direction:column;max-width:100%;overflow:hidden;padding-bottom:0;padding-top:172px;pointer-events:none;position:fixed;right:var(--spacing-md,1.5rem);top:0;z-index:1030}@media (max-width:1079px){.ToastNotificationsList-module_toastNotificationsList__APiSP{padding-top:108px}}@media (max-width:767px){.ToastNotificationsList-module_toastNotificationsList__APiSP{left:var(--spacing-md,1.5rem)}}";
+var styles = {
+  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__APiSP"
+};
+styleInject.styleInject(css_248z);
+module.exports = styles;

package/dist/cjs/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var GenericNotification = require('../../../../subcomponents/GenericNotification/GenericNotification.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ToastNotificationsMap = function (_a) {
+  var notifications = _a.notifications,
+    defaultOnHide = _a.onHide,
+    container = _a.container;
+  if (!container) return null;
+  // To consolidate all notifications into a single list when there are multiple contexts,
+  // this list cannot render with a container (must be portalled into one).
+  return ReactDOM.createPortal(React__default.default.createElement(React__default.default.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 = tslib.__rest(_a, ["id", "type", "title", "persistent", "onHide", "message"]);
+    return React__default.default.createElement(GenericNotification.GenericNotification, tslib.__assign({
+      key: id,
+      style: "toast",
+      type: type,
+      title: title,
+      persistent: persistent,
+      onHide: function () {
+        if (typeof onHide !== "undefined") {
+          onHide();
+        }
+        defaultOnHide(id);
+      }
+    }, restProps), message);
+  })), container);
+};
+ToastNotificationsMap.displayName = "ToastNotificationsMap";
+exports.ToastNotificationsMap = ToastNotificationsMap;

package/dist/cjs/Notification/ToastNotification/context/ToastNotificationContext.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var uuid = require('uuid');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ToastNotificationContext = React__default.default.createContext(null);
+var useToastNotificationContext = function () {
+  var context = React.useContext(ToastNotificationContext);
+  if (!context) {
+    throw new Error("useToastNotificationContext must be used within the ToastNotificationContext.Provider");
+  }
+  return context;
+};
+var ToastNotificationProvider = function (_a) {
+  var children = _a.children;
+  var _b = React.useState([]),
+    notifications = _b[0],
+    setNotifications = _b[1];
+  var addToastNotification = function (notification) {
+    var uuid$1 = uuid.v4();
+    var notificationWithId = tslib.__assign({
+      id: uuid$1
+    }, notification);
+    var notificationExists = notifications.find(function (_a) {
+      var id = _a.id;
+      return id === notification.id;
+    });
+    if (!notificationExists) {
+      setNotifications(function (existing) {
+        return tslib.__spreadArray(tslib.__spreadArray([], existing, true), [notificationWithId], false);
+      });
+    }
+  };
+  var updateToastNotification = function (notification) {
+    var notificationIndex = notifications.findIndex(function (_a) {
+      var id = _a.id;
+      return id === notification.id;
+    });
+    var copy = notifications.slice();
+    copy.splice(notificationIndex, 1, notification); // Mutation to insert notification over itself
+    setNotifications(copy);
+  };
+  var removeToastNotification = function (notificationID) {
+    var notificationIndex = notifications.findIndex(function (_a) {
+      var id = _a.id;
+      return id === notificationID;
+    });
+    var copy = notifications.slice();
+    copy.splice(notificationIndex, 1); // Mutation
+    setNotifications(copy);
+  };
+  var clearToastNotifications = function () {
+    setNotifications([]);
+  };
+  var value = {
+    notifications: notifications,
+    addToastNotification: addToastNotification,
+    updateToastNotification: updateToastNotification,
+    removeToastNotification: removeToastNotification,
+    clearToastNotifications: clearToastNotifications
+  };
+  return React__default.default.createElement(ToastNotificationContext.Provider, {
+    value: value
+  }, children);
+};
+ToastNotificationProvider.displayName = "ToastNotificationProvider";
+exports.ToastNotificationProvider = ToastNotificationProvider;
+exports.useToastNotificationContext = useToastNotificationContext;

package/dist/cjs/Notification/ToastNotification/hooks/useToastNotification.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
+var useToastNotification = function () {
+  var context = ToastNotificationContext.useToastNotificationContext();
+  return context;
+};
+exports.useToastNotification = useToastNotification;

package/dist/cjs/Notification/subcomponents/CancelButton/CancelButton.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var CloseIcon = require('../../../Icon/CloseIcon.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var CancelButton = function (_a) {
+  var onClick = _a.onClick;
+  return React__default.default.createElement("button", {
+    className: GenericNotification_module.cancel,
+    type: "button",
+    onClick: onClick,
+    "data-testid": "close-button",
+    "aria-label": "Close notification"
+  }, React__default.default.createElement(CloseIcon.CloseIcon, {
+    role: "presentation"
+  }));
+};
+CancelButton.displayName = "CancelButton";
+exports.CancelButton = CancelButton;

package/dist/cjs/Notification/subcomponents/GenericNotification/GenericNotification.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var CancelButton = require('../CancelButton/CancelButton.cjs');
+var NotificationHeading = require('../NotificationHeading/NotificationHeading.cjs');
+var NotificationIcon = require('../NotificationIcon/NotificationIcon.cjs');
+var GenericNotification_module = require('./GenericNotification.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var GenericNotification = function (_a) {
+  var type = _a.type,
+    style = _a.style,
+    children = _a.children,
+    title = _a.title,
+    _b = _a.persistent,
+    persistent = _b === void 0 ? false : _b,
+    onHide = _a.onHide,
+    noBottomMargin = _a.noBottomMargin,
+    forceMultiline = _a.forceMultiline,
+    headingProps = _a.headingProps,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["type", "style", "children", "title", "persistent", "onHide", "noBottomMargin", "forceMultiline", "headingProps", "classNameOverride"]);
+  var _c = React.useState(true),
+    isHidden = _c[0],
+    setIsHidden = _c[1];
+  var _d = React.useState(false),
+    isRemoved = _d[0],
+    setIsRemoved = _d[1];
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    requestAnimationFrame(function () {
+      if (containerRef.current) {
+        setIsHidden(false);
+      }
+    });
+  }, []);
+  var getMarginTop = function () {
+    if (isHidden && containerRef.current) {
+      return -containerRef.current.clientHeight + "px";
+    }
+    return "0";
+  };
+  var onTransitionEnd = function (e) {
+    // Be careful: this assumes the final CSS property to be animated is "margin-top".
+    if (isHidden && e.propertyName === "margin-top") {
+      setIsRemoved(true);
+      onHide === null || onHide === void 0 ? void 0 : onHide();
+    }
+  };
+  if (isRemoved) {
+    return null;
+  }
+  return React__default.default.createElement("div", tslib.__assign({
+    ref: containerRef,
+    className: classnames__default.default(GenericNotification_module.notification, GenericNotification_module[type], GenericNotification_module[style], isHidden && GenericNotification_module.hidden, noBottomMargin && GenericNotification_module.noBottomMargin, classNameOverride, persistent && GenericNotification_module.persistent),
+    style: {
+      marginTop: getMarginTop()
+    },
+    onTransitionEnd: onTransitionEnd
+  }, restProps), React__default.default.createElement("div", {
+    className: GenericNotification_module.icon
+  }, React__default.default.createElement(NotificationIcon.NotificationIcon, {
+    type: type
+  })), React__default.default.createElement("div", {
+    className: classnames__default.default(GenericNotification_module.textContainer, forceMultiline && GenericNotification_module.forceMultiline)
+  }, style !== "global" && React__default.default.createElement(NotificationHeading.NotificationHeading, {
+    titleProp: title,
+    headingProps: headingProps
+  }), children && React__default.default.createElement("div", {
+    className: GenericNotification_module.text
+  }, children)), !persistent && React__default.default.createElement(CancelButton.CancelButton, {
+    onClick: function () {
+      return setIsHidden(true);
+    }
+  }));
+};
+GenericNotification.displayName = "GenericNotification";
+exports.GenericNotification = GenericNotification;

package/dist/cjs/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var styleInject = require('../../../__build-tools/styleInject.cjs');
+var css_248z = ".GenericNotification-module_notification__-JP1M{box-sizing:border-box;display:flex;pointer-events:all}.GenericNotification-module_notification__-JP1M.GenericNotification-module_inline__OciO5,.GenericNotification-module_notification__-JP1M.GenericNotification-module_toast__GOVfC{border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid);border-radius:var(--border-solid-border-radius,7px);margin-bottom:var(--spacing-24,1.5rem)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_inline__OciO5{min-height:46px;padding:calc(var(--spacing-6, .375rem) - var(--border-solid-border-width, 2px)) var(--spacing-12,.75rem);transition:opacity .2s ease,transform .2s ease-out,margin-top .2s ease,margin-bottom .2s ease;width:auto}.GenericNotification-module_notification__-JP1M.GenericNotification-module_toast__GOVfC{box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));container-type:inline-size;max-width:100%;padding:calc(var(--spacing-6, .375rem) - var(--border-solid-border-width, 2px)) 10px;transition:opacity .2s ease,transform .3s ease-out,margin-top .2s ease .2s,margin-bottom .2s ease;width:25rem;will-change:transform}.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-{align-items:center;border-radius:0;border-width:0;display:flex;margin-bottom:0;position:relative;transition:margin-top .2s ease,margin-bottom .2s ease;width:100%;z-index:1030}.GenericNotification-module_notification__-JP1M.GenericNotification-module_positive__U-3HK{background:var(--color-green-100,#e8f8f4);border-color:var(--color-green-300,#8fdbc7);color:var(--color-purple-800,#2f2438)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-.GenericNotification-module_positive__U-3HK{background-color:var(--color-green-200,#c4ede2)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_informative__WLimi{background:var(--color-blue-100,#e6f6ff);border-color:var(--color-blue-300,#73c0e8);color:var(--color-purple-800,#2f2438)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-.GenericNotification-module_informative__WLimi{background-color:var(--color-blue-200,#bde2f5)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_cautionary__lneFu,.GenericNotification-module_notification__-JP1M.GenericNotification-module_security__QTALa{background:var(--color-yellow-100,#fff9e4);border-color:var(--color-yellow-400,#ffca4d);color:var(--color-purple-800,#2f2438)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-.GenericNotification-module_cautionary__lneFu,.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-.GenericNotification-module_security__QTALa{background-color:var(--color-yellow-200,#ffeeb3)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_negative__lUWhD{background:var(--color-red-100,#fdeaee);border-color:var(--color-red-300,#f597a8);color:var(--color-purple-800,#2f2438)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka-.GenericNotification-module_negative__lUWhD{background-color:var(--color-red-200,#f9c2cb)}.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct{opacity:0}.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_global__Weka-,.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_inline__OciO5{margin-bottom:0}.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_inline__OciO5{transform:translateY(-50%);transition-timing-function:ease-in}.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_toast__GOVfC{transform:translateX(50%);transition-timing-function:ease-in}.GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_global__Weka-{opacity:100%;z-index:1029}.GenericNotification-module_notification__-JP1M.GenericNotification-module_noBottomMargin__28nF8{margin-bottom:0}.GenericNotification-module_notification__-JP1M.GenericNotification-module_persistent__O7bgI{transition:none}.GenericNotification-module_notification__-JP1M.GenericNotification-module_subtle__kPns9{background:none;border:none;padding:0}.GenericNotification-module_icon__SDb8v{align-items:flex-start;box-sizing:content-box}.GenericNotification-module_positive__U-3HK .GenericNotification-module_icon__SDb8v{color:var(--color-green-500,#44a289)}.GenericNotification-module_informative__WLimi .GenericNotification-module_icon__SDb8v{color:var(--color-blue-500,#0168b3)}.GenericNotification-module_cautionary__lneFu .GenericNotification-module_icon__SDb8v,.GenericNotification-module_security__QTALa .GenericNotification-module_icon__SDb8v{color:var(--color-yellow-500,#ffb600)}.GenericNotification-module_negative__lUWhD .GenericNotification-module_icon__SDb8v{color:var(--color-red-500,#c93b55)}.GenericNotification-module_inline__OciO5 .GenericNotification-module_icon__SDb8v,.GenericNotification-module_toast__GOVfC .GenericNotification-module_icon__SDb8v{height:22px;margin-top:var(--spacing-6,.375rem);width:22px}.GenericNotification-module_global__Weka- .GenericNotification-module_icon__SDb8v{border-radius:var(--border-solid-border-radius,7px);color:var(--color-white,#fff);height:calc(var(--spacing-24, 1.5rem)*1.25);margin:calc(var(--spacing-24, 1.5rem)/4);padding:calc(var(--spacing-24, 1.5rem)*2/2 - var(--spacing-24, 1.5rem)*1.25/2);width:calc(var(--spacing-24, 1.5rem)*1.25)}.GenericNotification-module_global__Weka-.GenericNotification-module_positive__U-3HK .GenericNotification-module_icon__SDb8v{background-color:var(--color-green-500,#44a289)}.GenericNotification-module_global__Weka-.GenericNotification-module_informative__WLimi .GenericNotification-module_icon__SDb8v{background-color:var(--color-blue-500,#0168b3)}.GenericNotification-module_global__Weka-.GenericNotification-module_cautionary__lneFu .GenericNotification-module_icon__SDb8v,.GenericNotification-module_global__Weka-.GenericNotification-module_security__QTALa .GenericNotification-module_icon__SDb8v{background-color:var(--color-yellow-500,#ffb600)}.GenericNotification-module_global__Weka-.GenericNotification-module_negative__lUWhD .GenericNotification-module_icon__SDb8v{background-color:var(--color-red-500,#c93b55)}.GenericNotification-module_textContainer__Avpbk{box-sizing:content-box;display:flex;flex:1 0 0;flex-flow:row wrap}.GenericNotification-module_inline__OciO5 .GenericNotification-module_textContainer__Avpbk,.GenericNotification-module_toast__GOVfC .GenericNotification-module_textContainer__Avpbk{margin-inline-start:var(--spacing-6,.375rem)}.GenericNotification-module_toast__GOVfC .GenericNotification-module_textContainer__Avpbk{hyphens:auto;margin-inline-start:var(--spacing-6,.375rem);max-width:calc(100% - var(--spacing-48, 3rem));overflow-wrap:break-word}.GenericNotification-module_global__Weka- .GenericNotification-module_textContainer__Avpbk{margin-inline-start:var(--spacing-12,.75rem);padding:calc(var(--spacing-24, 1.5rem)*.25) 0}.GenericNotification-module_inline__OciO5 .GenericNotification-module_textContainer__Avpbk{transition:opacity .2s ease}.GenericNotification-module_textContainer__Avpbk.GenericNotification-module_forceMultiline__JcVA4{flex-direction:column}.GenericNotification-module_title__dvQOr{color:inherit;font-family:var(--typography-heading-6-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-6-font-size,.875rem);font-weight:var(--typography-heading-6-font-weight,700);letter-spacing:var(--typography-heading-6-letter-spacing,normal);line-height:var(--typography-heading-6-line-height,1.5rem);margin:0;padding-right:6px;position:relative;text-transform:none;top:.37em}.GenericNotification-module_text__X-5ld{color:inherit;margin:0}.GenericNotification-module_inline__OciO5 .GenericNotification-module_text__X-5ld,.GenericNotification-module_text__X-5ld,.GenericNotification-module_toast__GOVfC .GenericNotification-module_text__X-5ld{font-family:var(--typography-paragraph-small-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-small-font-size,.875rem);font-weight:var(--typography-paragraph-small-font-weight,400);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem);position:relative}.GenericNotification-module_inline__OciO5 .GenericNotification-module_text__X-5ld,.GenericNotification-module_toast__GOVfC .GenericNotification-module_text__X-5ld{flex:0 1 auto;margin-top:var(--spacing-6,.375rem);padding-bottom:var(--spacing-12,.75rem);top:.21em}.GenericNotification-module_toast__GOVfC .GenericNotification-module_text__X-5ld{width:100%}.GenericNotification-module_global__Weka- .GenericNotification-module_text__X-5ld{font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);position:static}.GenericNotification-module_text__X-5ld a[href]{color:var(--color-blue-500,#0168b3);text-decoration:underline}.GenericNotification-module_text__X-5ld a[href]:hover{color:var(--color-blue-500,#0168b3);text-decoration:none}.GenericNotification-module_global__Weka- .GenericNotification-module_text__X-5ld a[href]{color:var(--color-purple-800,#2f2438)}.GenericNotification-module_text__X-5ld strong{font-weight:var(--typography-button-secondary-font-weight,500)}.GenericNotification-module_text__X-5ld p{font-weight:inherit}.GenericNotification-module_cancel__c6wky{appearance:none;background:transparent;border:none;color:var(--color-purple-800,#2f2438);cursor:pointer;font:inherit;margin:0;padding:0;transform:none;transition:none}.GenericNotification-module_cancel__c6wky .GenericNotification-module_icon__SDb8v{opacity:70%;transition:var(--animation-duration-fast,.3s) opacity}.GenericNotification-module_cancel__c6wky:disabled .GenericNotification-module_icon__SDb8v,.GenericNotification-module_disabled__WGBhD.GenericNotification-module_cancel__c6wky .GenericNotification-module_icon__SDb8v{opacity:30%}.GenericNotification-module_cancel__c6wky:not(:disabled,.GenericNotification-module_disabled__WGBhD).GenericNotification-module_hover__hUURd .GenericNotification-module_icon__SDb8v,.GenericNotification-module_cancel__c6wky:not(:disabled,.GenericNotification-module_disabled__WGBhD):focus .GenericNotification-module_icon__SDb8v,.GenericNotification-module_cancel__c6wky:not(:disabled,.GenericNotification-module_disabled__WGBhD):hover .GenericNotification-module_icon__SDb8v{opacity:100%}.GenericNotification-module_cancel__c6wky:not(:disabled,.GenericNotification-module_disabled__WGBhD).GenericNotification-module_active__-6ahb .GenericNotification-module_icon__SDb8v,.GenericNotification-module_cancel__c6wky:not(:disabled,.GenericNotification-module_disabled__WGBhD):active .GenericNotification-module_icon__SDb8v{opacity:100%}.GenericNotification-module_cancel__c6wky:active{transform:translateY(1px)}.GenericNotification-module_inline__OciO5 .GenericNotification-module_cancel__c6wky,.GenericNotification-module_toast__GOVfC .GenericNotification-module_cancel__c6wky{height:var(--spacing-48,3rem);margin-bottom:calc(var(--spacing-6, .375rem)*-1);margin-top:calc(var(--spacing-6, .375rem)*-1);width:var(--spacing-48,3rem)}.GenericNotification-module_inline__OciO5 .GenericNotification-module_cancel__c6wky{margin-right:calc(var(--spacing-12, .75rem)*-1)}.GenericNotification-module_toast__GOVfC .GenericNotification-module_cancel__c6wky{margin-right:-10px}.GenericNotification-module_global__Weka- .GenericNotification-module_cancel__c6wky{height:3.75rem;margin-bottom:calc(var(--spacing-12, .75rem)*-1);margin-right:-15px;margin-top:calc(var(--spacing-12, .75rem)*-1);padding-right:calc(var(--spacing-24, 1.5rem)*.625);width:3.75rem}.GenericNotification-module_cancelLabel__HJzsk{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.GenericNotification-module_cancel__c6wky{align-items:center;display:flex;justify-content:center;position:relative}.GenericNotification-module_cancel__c6wky:focus{outline:none}.GenericNotification-module_cancel__c6wky:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:6px;pointer-events:none;position:absolute}.GenericNotification-module_notificationTitle__Oaqb8{line-height:var(--typography-heading-6-line-height,1.5rem);margin-inline-end:var(--spacing-6,.375rem);position:relative;top:.42em}@container (max-width: 25rem){.GenericNotification-module_notificationTitle__Oaqb8{width:100%}}";
+var styles = {
+  "notification": "GenericNotification-module_notification__-JP1M",
+  "inline": "GenericNotification-module_inline__OciO5",
+  "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",
+  "noBottomMargin": "GenericNotification-module_noBottomMargin__28nF8",
+  "persistent": "GenericNotification-module_persistent__O7bgI",
+  "subtle": "GenericNotification-module_subtle__kPns9",
+  "icon": "GenericNotification-module_icon__SDb8v",
+  "textContainer": "GenericNotification-module_textContainer__Avpbk",
+  "forceMultiline": "GenericNotification-module_forceMultiline__JcVA4",
+  "title": "GenericNotification-module_title__dvQOr",
+  "text": "GenericNotification-module_text__X-5ld",
+  "cancel": "GenericNotification-module_cancel__c6wky",
+  "disabled": "GenericNotification-module_disabled__WGBhD",
+  "hover": "GenericNotification-module_hover__hUURd",
+  "active": "GenericNotification-module_active__-6ahb",
+  "cancelLabel": "GenericNotification-module_cancelLabel__HJzsk",
+  "notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8"
+};
+styleInject.styleInject(css_248z);
+module.exports = styles;

package/dist/cjs/Notification/subcomponents/NotificationHeading/NotificationHeading.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var Heading = require('../../../Heading/Heading.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var NotificationHeading = function (_a) {
+  var titleProp = _a.titleProp,
+    headingProps = _a.headingProps;
+  if (headingProps) {
+    return React__default.default.createElement(Heading.Heading, {
+      variant: headingProps.variant || "heading-6",
+      tag: headingProps.tag || "div",
+      color: headingProps.color || "dark",
+      classNameOverride: GenericNotification_module.notificationTitle
+    }, headingProps.children);
+  }
+  if (titleProp) {
+    return React__default.default.createElement(Heading.Heading, {
+      variant: "heading-6",
+      tag: "div",
+      color: "dark",
+      classNameOverride: GenericNotification_module.notificationTitle
+    }, titleProp);
+  }
+  return null;
+};
+NotificationHeading.displayName = "NotificationHeading";
+exports.NotificationHeading = NotificationHeading;

package/dist/cjs/Notification/subcomponents/NotificationIcon/NotificationIcon.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var CautionIcon = require('../../../Icon/CautionIcon.cjs');
+var ExclamationIcon = require('../../../Icon/ExclamationIcon.cjs');
+var InformationIcon = require('../../../Icon/InformationIcon.cjs');
+var SecurityTipIcon = require('../../../Icon/SecurityTipIcon.cjs');
+var SuccessIcon = require('../../../Icon/SuccessIcon.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var NotificationIcon = function (_a) {
+  var type = _a.type;
+  switch (type) {
+    case "positive":
+      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+    case "negative":
+      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+    case "cautionary":
+      return React__default.default.createElement(CautionIcon.CautionIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+    case "informative":
+      return React__default.default.createElement(InformationIcon.InformationIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+    case "security":
+      return React__default.default.createElement(SecurityTipIcon.SecurityTipIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+    default:
+      return React__default.default.createElement(InformationIcon.InformationIcon, {
+        role: "presentation",
+        inheritSize: true
+      });
+  }
+};
+NotificationIcon.displayName = "NotificationIcon";
+exports.NotificationIcon = NotificationIcon;