@onewelcome/react-lib-components 0.1.0-alpha → 0.1.1-alpha

package/dist/react-lib-components.esm.js

@@ -182,7 +182,7 @@ var useSpacing = function useSpacing(spacingProps, style) {
   return style;
 };
 
-var _excluded$E = ["children", "variant", "tag", "style", "spacing", "className"];
+var _excluded$G = ["children", "variant", "tag", "style", "spacing", "className"];
 var validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'];
 var Typography = function Typography(_ref) {
   var children = _ref.children,
@@ -192,7 +192,7 @@ var Typography = function Typography(_ref) {
       spacing = _ref.spacing,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
 
   if (!validVariants.includes(variant)) {
     throw new Error("You entered an invalid variant. You can choose from: " + validVariants + ", you entered: " + variant);
@@ -239,13 +239,13 @@ var css$E = ".BaseButton_module_button__82869a4f {\n  border-width: var(--button
 var modules_3484519b = {"button":"BaseButton_module_button__82869a4f"};
 n(css$E,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$D = ["children", "type", "className"];
+var _excluded$F = ["children", "type", "className"];
 var BaseButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'button' : _ref$type,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$F);
 
   var validTypes = ['submit', 'button', 'reset'];
   if (!validTypes.includes(type)) throw new Error("You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got " + type);
@@ -260,7 +260,7 @@ var css$D = ".Button_module_srOnly__896f6f94 {\n  position: absolute;\n  width:
 var modules_79b43374 = {"sr-only":"Button_module_srOnly__896f6f94","hidden":"Button_module_hidden__896f6f94","slide-in":"Button_module_slideIn__896f6f94","slide-out":"Button_module_slideOut__896f6f94","fill":"Button_module_fill__896f6f94","primary":"Button_module_primary__896f6f94","secondary":"Button_module_secondary__896f6f94","tertiary":"Button_module_tertiary__896f6f94","default":"Button_module_default__896f6f94","outline":"Button_module_outline__896f6f94","text":"Button_module_text__896f6f94","has-icon":"Button_module_hasIcon__896f6f94","start-icon":"Button_module_startIcon__896f6f94","end-icon":"Button_module_endIcon__896f6f94"};
 n(css$D,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$C = ["children", "variant", "color", "startIcon", "endIcon"];
+var _excluded$E = ["children", "variant", "color", "startIcon", "endIcon"];
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$variant = _ref.variant,
@@ -271,7 +271,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       startIcon = _ref$startIcon === void 0 ? false : _ref$startIcon,
       _ref$endIcon = _ref.endIcon,
       endIcon = _ref$endIcon === void 0 ? false : _ref$endIcon,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
 
   var additionalClasses = [];
 
@@ -297,7 +297,7 @@ var css$C = ".Link_module_link__886f6e1b {\n  font-family: var(--font-family);\n
 var modules_e20967e9 = {"link":"Link_module_link__886f6e1b","disabled":"Link_module_disabled__886f6e1b","primary":"Link_module_primary__886f6e1b","secondary":"Link_module_secondary__886f6e1b","tertiary":"Link_module_tertiary__886f6e1b"};
 n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$B = ["children", "className", "disabled", "to", "color", "type", "component"];
+var _excluded$D = ["children", "className", "disabled", "to", "color", "type", "component"];
 var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -309,7 +309,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'internal' : _ref$type,
       component = _ref.component,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
 
   var determineTarget = function determineTarget() {
     if (rest.target) {
@@ -358,7 +358,7 @@ var css$A = ".readyclasses_module_srOnly__d8b3c82a {\n  position: absolute;\n  w
 var modules_35a251a6 = {"sr-only":"readyclasses_module_srOnly__d8b3c82a","hidden":"readyclasses_module_hidden__d8b3c82a","slide-in":"readyclasses_module_slideIn__d8b3c82a","slide-out":"readyclasses_module_slideOut__d8b3c82a"};
 n(css$A,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$A = ["children", "color", "iconSize", "title"];
+var _excluded$C = ["children", "color", "iconSize", "title"];
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
@@ -366,12 +366,16 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$iconSize = _ref.iconSize,
       iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
       title = _ref.title,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+
+  if (!title) {
+    console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+  }
 
   return React.createElement(BaseButton, _extends({}, rest, {
     ref: ref,
     className: modules_f7edfa2f['icon-button'] + " " + modules_f7edfa2f[color] + " " + modules_f7edfa2f['button-' + iconSize]
-  }), React.createElement(React.Fragment, null, children, React.createElement("span", {
+  }), React.createElement(Fragment, null, children, React.createElement("span", {
     className: modules_35a251a6['sr-only']
   }, title)));
 });
@@ -380,7 +384,7 @@ var css$z = "@font-face {\n  font-family: \"icomoon\";\n  src: url(\"data:applic
 var modules_c4937a59 = {"icon":"Icon_module_icon__58a0eca5","icon-image":"Icon_module_iconImage__58a0eca5","icon-bookmark":"Icon_module_iconBookmark__58a0eca5","icon-bookmark-alt":"Icon_module_iconBookmarkAlt__58a0eca5","icon-equal":"Icon_module_iconEqual__58a0eca5","icon-build":"Icon_module_iconBuild__58a0eca5","icon-refresh":"Icon_module_iconRefresh__58a0eca5","icon-calendar":"Icon_module_iconCalendar__58a0eca5","icon-checkmark-circle":"Icon_module_iconCheckmarkCircle__58a0eca5","icon-checkmark-circle-alt":"Icon_module_iconCheckmarkCircleAlt__58a0eca5","icon-clock":"Icon_module_iconClock__58a0eca5","icon-trash":"Icon_module_iconTrash__58a0eca5","icon-heart":"Icon_module_iconHeart__58a0eca5","icon-search":"Icon_module_iconSearch__58a0eca5","icon-gearwheel":"Icon_module_iconGearwheel__58a0eca5","icon-star":"Icon_module_iconStar__58a0eca5","icon-star-alt":"Icon_module_iconStarAlt__58a0eca5","icon-undo":"Icon_module_iconUndo__58a0eca5","icon-eye":"Icon_module_iconEye__58a0eca5","icon-times-circle-alt":"Icon_module_iconTimesCircleAlt__58a0eca5","icon-info-circle":"Icon_module_iconInfoCircle__58a0eca5","icon-info-bell":"Icon_module_iconInfoBell__58a0eca5","icon-checkmark-circle-breakout":"Icon_module_iconCheckmarkCircleBreakout__58a0eca5","icon-warning":"Icon_module_iconWarning__58a0eca5","icon-plus":"Icon_module_iconPlus__58a0eca5","icon-copy":"Icon_module_iconCopy__58a0eca5","icon-edit":"Icon_module_iconEdit__58a0eca5","icon-filter":"Icon_module_iconFilter__58a0eca5","icon-link":"Icon_module_iconLink__58a0eca5","icon-change":"Icon_module_iconChange__58a0eca5","icon-filter-alt-arrow":"Icon_module_iconFilterAltArrow__58a0eca5","icon-filter-alt":"Icon_module_iconFilterAlt__58a0eca5","icon-filter-alt-times":"Icon_module_iconFilterAltTimes__58a0eca5","icon-grid":"Icon_module_iconGrid__58a0eca5","icon-triangle-down":"Icon_module_iconTriangleDown__58a0eca5","icon-triangle-down-circle":"Icon_module_iconTriangleDownCircle__58a0eca5","icon-triangle-up":"Icon_module_iconTriangleUp__58a0eca5","icon-triangle-right":"Icon_module_iconTriangleRight__58a0eca5","icon-chevron-left":"Icon_module_iconChevronLeft__58a0eca5","icon-chevron-right":"Icon_module_iconChevronRight__58a0eca5","icon-times":"Icon_module_iconTimes__58a0eca5","icon-times-circle":"Icon_module_iconTimesCircle__58a0eca5","icon-times-thin":"Icon_module_iconTimesThin__58a0eca5","icon-chevron-up":"Icon_module_iconChevronUp__58a0eca5","icon-chevron-down":"Icon_module_iconChevronDown__58a0eca5","icon-navigation-first":"Icon_module_iconNavigationFirst__58a0eca5","icon-fullscreen":"Icon_module_iconFullscreen__58a0eca5","icon-fullscreen-exit":"Icon_module_iconFullscreenExit__58a0eca5","icon-navigation-last":"Icon_module_iconNavigationLast__58a0eca5","icon-hamburger":"Icon_module_iconHamburger__58a0eca5","icon-ellipsis":"Icon_module_iconEllipsis__58a0eca5","icon-triangle-left":"Icon_module_iconTriangleLeft__58a0eca5","icon-ellipsis-alt":"Icon_module_iconEllipsisAlt__58a0eca5","icon-bell":"Icon_module_iconBell__58a0eca5","icon-bell-alt":"Icon_module_iconBellAlt__58a0eca5","icon-share":"Icon_module_iconShare__58a0eca5","icon-forbidden":"Icon_module_iconForbidden__58a0eca5","icon-checkmark":"Icon_module_iconCheckmark__58a0eca5","icon-checkmark-square":"Icon_module_iconCheckmarkSquare__58a0eca5","icon-square":"Icon_module_iconSquare__58a0eca5","icon-minus-square":"Icon_module_iconMinusSquare__58a0eca5","icon-radio":"Icon_module_iconRadio__58a0eca5","icon-circle":"Icon_module_iconCircle__58a0eca5"};
 n(css$z,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$z = ["icon", "color", "className", "style", "size", "tag"];
+var _excluded$B = ["icon", "color", "className", "style", "size", "tag"];
 var Icons;
 
 (function (Icons) {
@@ -456,7 +460,7 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       size = _ref.size,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'span' : _ref$tag,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
 
   var Component = tag;
   return React.createElement(Component, _extends({}, rest, {
@@ -483,32 +487,9 @@ var descriptionId = function descriptionId(id) {
   return id + "-description";
 };
 
-var _excluded$y = ["id", "children", "open", "onClose", "className", "containerClassName", "labelledby", "describedby", "disableEscapeKeyDown", "disableBackdrop", "zIndex"];
+var _excluded$A = ["id", "children", "open", "onClose", "className", "containerClassName", "labelledby", "describedby", "disableEscapeKeyDown", "disableBackdrop", "zIndex", "domRoot"];
 var SCROLL_PROPERTY_NAME = 'overflow';
 var SCROLL_PROPERTY_VALUE = 'hidden';
-
-var useBackdropOnCloseClick = function useBackdropOnCloseClick(disableBackdrop, onClose) {
-  var backdropRef = useRef(null);
-
-  var onBackdropClick = function onBackdropClick() {
-    return onClose && onClose();
-  };
-
-  useEffect(function () {
-    var _backdropRef$current;
-
-    !disableBackdrop && ((_backdropRef$current = backdropRef.current) == null ? void 0 : _backdropRef$current.addEventListener('click', onBackdropClick));
-    return function () {
-      var _backdropRef$current2;
-
-      !disableBackdrop && ((_backdropRef$current2 = backdropRef.current) == null ? void 0 : _backdropRef$current2.removeEventListener('click', onBackdropClick));
-    };
-  }, []);
-  return {
-    backdropRef: backdropRef
-  };
-};
-
 var useSetBodyScroll = function useSetBodyScroll(open) {
   var hideBodyScroll = function hideBodyScroll() {
     document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
@@ -546,10 +527,9 @@ var BaseModal = function BaseModal(_ref) {
       _ref$disableBackdrop = _ref.disableBackdrop,
       disableBackdrop = _ref$disableBackdrop === void 0 ? false : _ref$disableBackdrop,
       zIndex = _ref.zIndex,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
-
-  var _useBackdropOnCloseCl = useBackdropOnCloseClick(disableBackdrop, onClose),
-      backdropRef = _useBackdropOnCloseCl.backdropRef;
+      _ref$domRoot = _ref.domRoot,
+      domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
 
   useSetBodyScroll(open);
 
@@ -560,7 +540,11 @@ var BaseModal = function BaseModal(_ref) {
     }
   };
 
-  return React.createElement("div", _extends({}, restProps, {
+  var handleBackdropClick = function handleBackdropClick() {
+    return !disableBackdrop && onClose && onClose();
+  };
+
+  return createPortal(React.createElement("div", _extends({}, restProps, {
     id: id,
     className: modules_cf1b230e['modal'] + " " + (open && modules_cf1b230e['visible']) + " " + className,
     role: "dialog",
@@ -575,21 +559,21 @@ var BaseModal = function BaseModal(_ref) {
       zIndex: zIndex
     }
   }), React.createElement("div", {
-    ref: backdropRef,
-    className: modules_cf1b230e['backdrop']
+    className: modules_cf1b230e['backdrop'],
+    onClick: handleBackdropClick
   }), open && React.createElement("div", {
     style: {
       zIndex: zIndex && zIndex + 1
     },
     className: modules_cf1b230e['container'] + " " + containerClassName
-  }, children));
+  }, children)), domRoot);
 };
 
 var css$x = ".BaseModalContent_module_content__544cad31 {\n  padding: 1.5rem 1.25rem 0;\n  overflow-y: auto;\n  flex: 1;\n  outline: none;\n}";
 var modules_cf7b8d60 = {"content":"BaseModalContent_module_content__544cad31"};
 n(css$x,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$x = ["id", "children", "className", "disableAutoFocus"];
+var _excluded$z = ["id", "children", "className", "disableAutoFocus"];
 var BaseModalContent = function BaseModalContent(_ref) {
   var id = _ref.id,
       children = _ref.children,
@@ -597,7 +581,7 @@ var BaseModalContent = function BaseModalContent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$disableAutoFocus = _ref.disableAutoFocus,
       disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   var contentRef = useRef(null);
   useEffect(function () {
@@ -619,12 +603,12 @@ var css$w = ".BaseModalActions_module_actions__382b7c32 {\n  margin: 1.875rem 1.
 var modules_6b4a9db0 = {"actions":"BaseModalActions_module_actions__382b7c32"};
 n(css$w,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$w = ["children", "className"];
+var _excluded$y = ["children", "className"];
 var BaseModalActions = function BaseModalActions(_ref) {
   var children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return React.createElement("footer", _extends({}, restProps, {
     className: modules_6b4a9db0['actions'] + " " + className
@@ -635,11 +619,11 @@ var css$v = ".DialogActions_module_actions__63872f8a {\n  margin: 1.5rem 1.25rem
 var modules_d87e2731 = {"actions":"DialogActions_module_actions__63872f8a","left":"DialogActions_module_left__63872f8a"};
 n(css$v,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$v = ["children", "align"];
+var _excluded$x = ["children", "align"];
 var DialogActions = function DialogActions(_ref) {
   var children = _ref.children,
       align = _ref.align,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   return React.createElement(BaseModalActions, _extends({}, restProps, {
     className: "" + modules_d87e2731['actions'] + (align === 'left' ? ' ' + modules_d87e2731['left'] : '')
@@ -657,7 +641,7 @@ n(css$t,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 var DialogTitle = function DialogTitle(_ref) {
   var id = _ref.id,
       title = _ref.title;
-  return React.createElement("header", {
+  return React.createElement("div", {
     className: modules_ff1bcd77['header']
   }, React.createElement(Typography, {
     id: id,
@@ -667,7 +651,25 @@ var DialogTitle = function DialogTitle(_ref) {
   }, title));
 };
 
-var _excluded$u = ["id", "open", "children", "alignActions", "onClose", "title", "primaryAction", "secondaryAction", "zIndex"],
+var generateID = function generateID(length, stringToWeaveIn) {
+  if (length === void 0) {
+    length = 15;
+  }
+
+  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
+  var hashCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+  var id = '';
+  /** Generate an id of x characters in length */
+
+  for (var i = 0; i < length && id.length < length; i++) {
+    var stringCharacter = stringToWeaveIn && stringToWeaveIn[i] !== undefined && !/\s/.test(stringToWeaveIn[i]) ? stringToWeaveIn[i] : '';
+    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
+  }
+
+  return id.slice(0, length);
+};
+
+var _excluded$w = ["id", "open", "children", "alignActions", "onClose", "title", "primaryAction", "secondaryAction", "zIndex", "disableEscapeKeyDown"],
     _excluded2 = ["label"],
     _excluded3 = ["label"];
 var Dialog = function Dialog(_ref) {
@@ -680,7 +682,12 @@ var Dialog = function Dialog(_ref) {
       primaryAction = _ref.primaryAction,
       secondaryAction = _ref.secondaryAction,
       zIndex = _ref.zIndex,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      _ref$disableEscapeKey = _ref.disableEscapeKeyDown,
+      disableEscapeKeyDown = _ref$disableEscapeKey === void 0 ? true : _ref$disableEscapeKey,
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+
+  var _useState = useState(id != null ? id : generateID(20)),
+      dialogId = _useState[0];
 
   var primaryLabel = primaryAction.label,
       restOfPrimaryAction = _objectWithoutPropertiesLoose(primaryAction, _excluded2);
@@ -707,30 +714,33 @@ var Dialog = function Dialog(_ref) {
   };
 
   return React.createElement(BaseModal, _extends({}, restProps, {
-    id: id,
+    id: dialogId,
     className: modules_c8de1793['dialog'],
     containerClassName: modules_c8de1793['container'],
     open: open,
     disableBackdrop: true,
     onClose: onClose,
-    zIndex: zIndex
+    zIndex: zIndex,
+    disableEscapeKeyDown: disableEscapeKeyDown
   }), React.createElement(DialogTitle, {
-    id: labelId(id),
+    id: labelId(dialogId),
     title: title
   }), React.createElement(BaseModalContent, {
-    id: descriptionId(id),
+    id: descriptionId(dialogId),
     className: modules_c8de1793['content'],
     disableAutoFocus: true
   }, children), React.createElement(DialogActions, {
     align: alignActions
   }, alignActions === 'left' ? [PrimaryButton, TertiaryButton] : [TertiaryButton, PrimaryButton]), React.createElement("input", {
     autoFocus: true,
+    "aria-hidden": true,
     style: {
       position: 'absolute',
       width: 0,
       height: 0,
       opacity: 0
     },
+    maxLength: 0,
     tabIndex: -1,
     onKeyPress: onHiddenInputKeyPress
   }));
@@ -740,15 +750,15 @@ var css$s = ".BaseModalHeader_module_header__045bdada {\n  min-width: 80px;\n  p
 var modules_74d5dc9f = {"header":"BaseModalHeader_module_header__045bdada","headline":"BaseModalHeader_module_headline__045bdada","title":"BaseModalHeader_module_title__045bdada"};
 n(css$s,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$t = ["id", "title", "children", "onClose"];
+var _excluded$v = ["id", "title", "children", "onClose"];
 var BaseModalHeader = function BaseModalHeader(_ref) {
   var id = _ref.id,
       title = _ref.title,
       children = _ref.children,
       onClose = _ref.onClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
-  return React.createElement("header", _extends({}, restProps, {
+  return React.createElement("div", _extends({}, restProps, {
     className: modules_74d5dc9f['header']
   }), React.createElement("div", {
     className: modules_74d5dc9f['headline']
@@ -766,28 +776,83 @@ var BaseModalHeader = function BaseModalHeader(_ref) {
   }))), children);
 };
 
-var css$r = ".Tooltip_module_wrapper__2acdb93b {\n  display: flex;\n  align-items: center;\n}\n\n.Tooltip_module_tooltipWrapper__2acdb93b .Tooltip_module_icon__2acdb93b {\n  margin-left: 0.5rem;\n  transition: all 0.2s ease-in-out;\n  color: var(--greyed-out);\n}\n.Tooltip_module_tooltipWrapper__2acdb93b .Tooltip_module_icon__2acdb93b:hover {\n  color: var(--default);\n}\n\n.Tooltip_module_tooltip__2acdb93b {\n  position: fixed;\n  background-color: var(--default);\n  padding: 0.1875rem 0.5rem;\n  color: #fff;\n  max-width: 330px;\n  opacity: 0;\n  transform: scale(0);\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, transform;\n  transform-origin: center left;\n  pointer-events: none;\n}\n.Tooltip_module_tooltip__2acdb93b.Tooltip_module_visible__2acdb93b {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.Tooltip_module_label__2acdb93b:focus-visible {\n  outline: 0.5px dashed var(--color-primary);\n}";
-var modules_16974fb0 = {"wrapper":"Tooltip_module_wrapper__2acdb93b","tooltip-wrapper":"Tooltip_module_tooltipWrapper__2acdb93b","icon":"Tooltip_module_icon__2acdb93b","tooltip":"Tooltip_module_tooltip__2acdb93b","visible":"Tooltip_module_visible__2acdb93b","label":"Tooltip_module_label__2acdb93b"};
-n(css$r,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
+var _excluded$u = ["open", "onKeepEditing", "onDiscardChanges", "discardChangesButtonLabel", "keepEditingButtonLabel", "contentLabel", "titleLabel"];
+var DiscardChangesDialog = function DiscardChangesDialog(_ref) {
+  var open = _ref.open,
+      onKeepEditing = _ref.onKeepEditing,
+      onDiscardChanges = _ref.onDiscardChanges,
+      discardChangesButtonLabel = _ref.discardChangesButtonLabel,
+      keepEditingButtonLabel = _ref.keepEditingButtonLabel,
+      contentLabel = _ref.contentLabel,
+      titleLabel = _ref.titleLabel,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
-var generateID = function generateID(length, stringToWeaveIn) {
-  if (length === void 0) {
-    length = 15;
-  }
+  return React.createElement(Dialog, _extends({}, rest, {
+    open: open,
+    alignActions: "left",
+    title: titleLabel,
+    onClose: onKeepEditing,
+    primaryAction: {
+      label: discardChangesButtonLabel,
+      onClick: onDiscardChanges
+    },
+    secondaryAction: {
+      label: keepEditingButtonLabel,
+      onClick: onKeepEditing
+    },
+    disableEscapeKeyDown: false
+  }), React.createElement(Typography, {
+    variant: "body",
+    spacing: {
+      margin: 0
+    }
+  }, contentLabel));
+};
 
-  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
-  var hashCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
-  var id = '';
-  /** Generate an id of x characters in length */
+var _excluded$t = ["id", "onClose", "children", "hasUnsavedChanges", "headerProps", "discardChangedDialogProps"];
+var DiscardChangesModal = function DiscardChangesModal(_ref) {
+  var id = _ref.id,
+      onClose = _ref.onClose,
+      children = _ref.children,
+      hasUnsavedChanges = _ref.hasUnsavedChanges,
+      headerProps = _ref.headerProps,
+      discardChangedDialogProps = _ref.discardChangedDialogProps,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
-  for (var i = 0; i < length && id.length < length; i++) {
-    var stringCharacter = stringToWeaveIn && stringToWeaveIn[i] !== undefined && !/\s/.test(stringToWeaveIn[i]) ? stringToWeaveIn[i] : '';
-    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
-  }
+  var _useState = useState(false),
+      openDiscardChangesDialog = _useState[0],
+      setOpenDiscardChangesDialog = _useState[1];
 
-  return id.slice(0, length);
+  var onCloseWrapper = function onCloseWrapper() {
+    return hasUnsavedChanges() ? setOpenDiscardChangesDialog(true) : onClose();
+  };
+
+  var onDialogKeepEditing = function onDialogKeepEditing() {
+    setOpenDiscardChangesDialog(false);
+  };
+
+  var onDialogDiscardChanges = function onDialogDiscardChanges() {
+    setOpenDiscardChangesDialog(false);
+    onClose();
+  };
+
+  return React.createElement(Fragment, null, React.createElement(BaseModal, _extends({
+    id: id,
+    onClose: onCloseWrapper
+  }, rest), React.createElement(BaseModalHeader, _extends({}, headerProps, {
+    id: id + "-label",
+    onClose: onCloseWrapper
+  })), children), React.createElement(DiscardChangesDialog, _extends({}, discardChangedDialogProps, {
+    open: openDiscardChangesDialog,
+    onKeepEditing: onDialogKeepEditing,
+    onDiscardChanges: onDialogDiscardChanges
+  })));
 };
 
+var css$r = ".Tooltip_module_wrapper__2acdb93b {\n  display: flex;\n  align-items: center;\n}\n\n.Tooltip_module_tooltipWrapper__2acdb93b .Tooltip_module_icon__2acdb93b {\n  margin-left: 0.5rem;\n  transition: all 0.2s ease-in-out;\n  color: var(--greyed-out);\n}\n.Tooltip_module_tooltipWrapper__2acdb93b .Tooltip_module_icon__2acdb93b:hover {\n  color: var(--default);\n}\n\n.Tooltip_module_tooltip__2acdb93b {\n  position: fixed;\n  background-color: var(--default);\n  padding: 0.1875rem 0.5rem;\n  color: #fff;\n  max-width: 330px;\n  opacity: 0;\n  transform: scale(0);\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, transform;\n  transform-origin: center left;\n  pointer-events: none;\n}\n.Tooltip_module_tooltip__2acdb93b.Tooltip_module_visible__2acdb93b {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.Tooltip_module_label__2acdb93b:focus-visible {\n  outline: 0.5px dashed var(--color-primary);\n}";
+var modules_16974fb0 = {"wrapper":"Tooltip_module_wrapper__2acdb93b","tooltip-wrapper":"Tooltip_module_tooltipWrapper__2acdb93b","icon":"Tooltip_module_icon__2acdb93b","tooltip":"Tooltip_module_tooltip__2acdb93b","visible":"Tooltip_module_visible__2acdb93b","label":"Tooltip_module_label__2acdb93b"};
+n(css$r,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
+
 var defaultConfigObject = {
   relativeElement: undefined,
   elementToBePositioned: undefined,
@@ -1145,33 +1210,62 @@ var css$q = ".Tiles_module_tiles__08ec2eda {\n  display: grid;\n  grid-gap: 1rem
 var modules_7b7db5f7 = {"tiles":"Tiles_module_tiles__08ec2eda"};
 n(css$q,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var css$p = ".Tile_module_srOnly__a2cd3c4b {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.Tile_module_hidden__a2cd3c4b {\n  display: none;\n}\n\n.Tile_module_slideIn__a2cd3c4b {\n  animation: Tile_module_slideIn__a2cd3c4b 0.5s forwards;\n}\n\n.Tile_module_slideOut__a2cd3c4b {\n  animation: Tile_module_slideOut__a2cd3c4b 0.5s forwards;\n}\n\n@keyframes Tile_module_slideIn__a2cd3c4b {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Tile_module_slideOut__a2cd3c4b {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Tile_module_tile__a2cd3c4b {\n  border: 1px solid #e9e9eb;\n  border-radius: 8px;\n  box-sizing: border-box;\n  padding: 0 0 2rem;\n  background-color: #fff;\n  transition: box-shadow 0.2s ease-in-out;\n}\n.Tile_module_tile__a2cd3c4b:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);\n}\n.Tile_module_tile__a2cd3c4b header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.Tile_module_tile__a2cd3c4b header .Tile_module_icon__a2cd3c4b {\n  padding: 0 1rem;\n}\n.Tile_module_tile__a2cd3c4b figure {\n  margin: 0 0 1rem;\n  height: 3rem;\n}\n.Tile_module_tile__a2cd3c4b figure img {\n  vertical-align: top;\n  height: 3rem;\n  width: auto;\n}\n.Tile_module_tile__a2cd3c4b .Tile_module_placeholder__a2cd3c4b {\n  font-size: 3rem;\n  margin: 0 0 1rem;\n  color: var(--greyed-out);\n}\n.Tile_module_tile__a2cd3c4b .Tile_module_content__a2cd3c4b {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  padding: 0 1rem;\n}\n.Tile_module_tile__a2cd3c4b.Tile_module_loading__a2cd3c4b header {\n  display: none;\n}\n.Tile_module_tile__a2cd3c4b.Tile_module_loading__a2cd3c4b .Tile_module_image__a2cd3c4b {\n  margin-top: 2.5rem;\n  position: relative;\n  overflow: hidden;\n  background-color: var(--disabled);\n  border-radius: 0.5rem;\n  width: 3rem;\n  height: 3rem;\n}\n.Tile_module_tile__a2cd3c4b.Tile_module_loading__a2cd3c4b .Tile_module_image__a2cd3c4b::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: Tile_module_shimmer__a2cd3c4b 2s infinite;\n  content: \"\";\n}\n@keyframes Tile_module_shimmer__a2cd3c4b {\n  100% {\n    transform: translateX(100%);\n  }\n}\n.Tile_module_tile__a2cd3c4b.Tile_module_loading__a2cd3c4b .Tile_module_title__a2cd3c4b {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--disabled);\n  color: transparent;\n  display: inline-block;\n  width: 70%;\n  border-radius: 0.5rem;\n}\n.Tile_module_tile__a2cd3c4b.Tile_module_loading__a2cd3c4b .Tile_module_title__a2cd3c4b::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: Tile_module_shimmer__a2cd3c4b 2s infinite;\n  content: \"\";\n}\n@keyframes Tile_module_shimmer__a2cd3c4b {\n  100% {\n    transform: translateX(100%);\n  }\n}";
-var modules_5f01ab30 = {"sr-only":"Tile_module_srOnly__a2cd3c4b","hidden":"Tile_module_hidden__a2cd3c4b","slide-in":"Tile_module_slideIn__a2cd3c4b","slide-out":"Tile_module_slideOut__a2cd3c4b","tile":"Tile_module_tile__a2cd3c4b","icon":"Tile_module_icon__a2cd3c4b","placeholder":"Tile_module_placeholder__a2cd3c4b","content":"Tile_module_content__a2cd3c4b","loading":"Tile_module_loading__a2cd3c4b","image":"Tile_module_image__a2cd3c4b","shimmer":"Tile_module_shimmer__a2cd3c4b","title":"Tile_module_title__a2cd3c4b"};
+var css$p = ".Tile_module_srOnly__f07fe9a3 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.Tile_module_hidden__f07fe9a3 {\n  display: none;\n}\n\n.Tile_module_slideIn__f07fe9a3 {\n  animation: Tile_module_slideIn__f07fe9a3 0.5s forwards;\n}\n\n.Tile_module_slideOut__f07fe9a3 {\n  animation: Tile_module_slideOut__f07fe9a3 0.5s forwards;\n}\n\n@keyframes Tile_module_slideIn__f07fe9a3 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Tile_module_slideOut__f07fe9a3 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Tile_module_tile__f07fe9a3 {\n  border: 1px solid #e9e9eb;\n  border-radius: 8px;\n  box-sizing: border-box;\n  padding: 0 0 2rem;\n  background-color: #fff;\n  transition: box-shadow 0.2s ease-in-out;\n  font-family: var(--font-family);\n}\n.Tile_module_tile__f07fe9a3:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);\n}\n.Tile_module_tile__f07fe9a3 header {\n  display: flex;\n  align-items: center;\n}\n.Tile_module_tile__f07fe9a3 header .Tile_module_icon__f07fe9a3 {\n  padding: 0 1rem;\n}\n.Tile_module_tile__f07fe9a3 figure {\n  margin: 0 0 1rem;\n  height: 3rem;\n}\n.Tile_module_tile__f07fe9a3 figure img {\n  vertical-align: top;\n  height: 3rem;\n  width: auto;\n}\n.Tile_module_tile__f07fe9a3 .Tile_module_placeholder__f07fe9a3 {\n  font-size: 3rem;\n  margin: 0 0 1rem;\n  color: var(--greyed-out);\n}\n.Tile_module_tile__f07fe9a3 .Tile_module_content__f07fe9a3 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  padding: 0 1rem;\n}\n.Tile_module_tile__f07fe9a3.Tile_module_loading__f07fe9a3 header {\n  display: none;\n}\n.Tile_module_tile__f07fe9a3.Tile_module_loading__f07fe9a3 .Tile_module_image__f07fe9a3 {\n  margin-top: 2.5rem;\n  position: relative;\n  overflow: hidden;\n  background-color: var(--disabled);\n  border-radius: 0.5rem;\n  width: 3rem;\n  height: 3rem;\n}\n.Tile_module_tile__f07fe9a3.Tile_module_loading__f07fe9a3 .Tile_module_image__f07fe9a3::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: Tile_module_shimmer__f07fe9a3 2s infinite;\n  content: \"\";\n}\n@keyframes Tile_module_shimmer__f07fe9a3 {\n  100% {\n    transform: translateX(100%);\n  }\n}\n.Tile_module_tile__f07fe9a3.Tile_module_loading__f07fe9a3 .Tile_module_title__f07fe9a3 {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--disabled);\n  color: transparent;\n  display: inline-block;\n  width: 70%;\n  border-radius: 0.5rem;\n}\n.Tile_module_tile__f07fe9a3.Tile_module_loading__f07fe9a3 .Tile_module_title__f07fe9a3::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: Tile_module_shimmer__f07fe9a3 2s infinite;\n  content: \"\";\n}\n@keyframes Tile_module_shimmer__f07fe9a3 {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+var modules_5f01ab30 = {"sr-only":"Tile_module_srOnly__f07fe9a3","hidden":"Tile_module_hidden__f07fe9a3","slide-in":"Tile_module_slideIn__f07fe9a3","slide-out":"Tile_module_slideOut__f07fe9a3","tile":"Tile_module_tile__f07fe9a3","icon":"Tile_module_icon__f07fe9a3","placeholder":"Tile_module_placeholder__f07fe9a3","content":"Tile_module_content__f07fe9a3","loading":"Tile_module_loading__f07fe9a3","image":"Tile_module_image__f07fe9a3","shimmer":"Tile_module_shimmer__f07fe9a3","title":"Tile_module_title__f07fe9a3"};
 n(css$p,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$r = ["title", "imageProps", "iconProps", "className", "loading", "menu"];
+var _excluded$r = ["title", "imageProps", "enabled", "className", "loading", "tileAction"];
 var Tile = function Tile(_ref) {
   var title = _ref.title,
       imageProps = _ref.imageProps,
-      iconProps = _ref.iconProps,
+      enabled = _ref.enabled,
       className = _ref.className,
       loading = _ref.loading,
-      menu = _ref.menu,
+      tileAction = _ref.tileAction,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
+  var _useState = useState(generateID(20)),
+      tileDescriptionID = _useState[0];
+
   if (!title) {
     throw new Error('Please make sure to pass a title prop to your Tile component.');
   }
 
-  return React.createElement("div", _extends({}, rest, {
+  var statusMessage = function statusMessage() {
+    if (enabled) {
+      return 'Status: enabled';
+    }
+
+    return 'Status: disabled';
+  };
+
+  return React.createElement("article", _extends({
+    tabIndex: 0,
+    "aria-labelledby": tileDescriptionID
+  }, rest, {
     className: modules_5f01ab30['tile'] + " " + (loading ? modules_5f01ab30['loading'] : '')
-  }), React.createElement("header", null, iconProps && React.createElement(Icon, _extends({}, iconProps, {
+  }), React.createElement("header", {
+    style: {
+      justifyContent: enabled === undefined ? 'flex-end' : 'space-between'
+    }
+  }, enabled === true && React.createElement(Icon, {
+    color: "var(--success)",
+    icon: Icons.Checkmark,
     className: modules_5f01ab30['icon'] + " " + (className != null ? className : '')
-  })), menu != null ? menu : null), React.createElement("div", {
+  }), enabled === false && React.createElement(Icon, {
+    color: "var(--greyed-out)",
+    icon: Icons.Forbidden,
+    className: modules_5f01ab30['icon'] + " " + (className != null ? className : '')
+  }), enabled !== undefined && React.createElement("span", {
+    id: tileDescriptionID,
+    className: modules_35a251a6['sr-only']
+  }, title + ". " + statusMessage()), tileAction != null ? tileAction : null), React.createElement("div", {
     className: modules_5f01ab30['content']
-  }, imageProps && imageProps.src && imageProps.alt && React.createElement("figure", {
+  }, imageProps && imageProps.src.length > 0 && React.createElement("figure", {
     className: modules_5f01ab30['image']
-  }, !loading && React.createElement("img", _extends({}, imageProps))), !imageProps && React.createElement(Icon, {
+  }, !loading && React.createElement("img", _extends({}, imageProps, {
+    alt: ""
+  }))), (!imageProps || imageProps.src.length === 0) && React.createElement(Icon, {
     className: modules_5f01ab30['placeholder'],
     icon: Icons.Image
   }), React.createElement("span", {
@@ -1193,24 +1287,21 @@ var Tiles = function Tiles(_ref) {
         key: "placeholder1",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder',
-          alt: 'placeholder'
+          src: 'placeholder'
         },
         loading: true
       }), React.createElement(Tile, {
         key: "placeholder2",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder',
-          alt: 'placeholder'
+          src: 'placeholder'
         },
         loading: true
       }), React.createElement(Tile, {
         key: "placeholder3",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder',
-          alt: 'placeholder'
+          src: 'placeholder'
         },
         loading: true
       })];
@@ -1726,19 +1817,19 @@ var Form = function Form(_ref) {
   }, rest), children);
 };
 
-var css$h = ".Fieldset_module_fieldset__33c1d1d9 {\n  border: 0;\n  padding: 1rem 1.25rem;\n  border-radius: 0.5rem;\n  margin: 0;\n}\n.Fieldset_module_fieldset__33c1d1d9.Fieldset_module_noPadding__33c1d1d9 {\n  padding: 0;\n}\n.Fieldset_module_fieldset__33c1d1d9 + .Fieldset_module_wrapper__33c1d1d9,\n.Fieldset_module_fieldset__33c1d1d9 + .Fieldset_module_fieldset__33c1d1d9 {\n  margin-top: 1rem;\n}\n.Fieldset_module_fieldset__33c1d1d9 .Fieldset_module_title__33c1d1d9 {\n  display: block;\n}";
-var modules_76ea8ff8 = {"fieldset":"Fieldset_module_fieldset__33c1d1d9","no-padding":"Fieldset_module_noPadding__33c1d1d9","wrapper":"Fieldset_module_wrapper__33c1d1d9","title":"Fieldset_module_title__33c1d1d9"};
+var css$h = ".Fieldset_module_fieldset__eb41ac07 {\n  border: 0;\n  padding: 1rem 1.25rem;\n  border-radius: 0.5rem;\n  margin: 0;\n}\n.Fieldset_module_fieldset__eb41ac07.Fieldset_module_noPadding__eb41ac07 {\n  padding: 0;\n}\n.Fieldset_module_fieldset__eb41ac07 + .Fieldset_module_wrapper__eb41ac07,\n.Fieldset_module_fieldset__eb41ac07 + .Fieldset_module_fieldset__eb41ac07 {\n  margin-top: 1rem;\n}\n.Fieldset_module_fieldset__eb41ac07 .Fieldset_module_legend__eb41ac07 {\n  display: block;\n}\n.Fieldset_module_fieldset__eb41ac07 .Fieldset_module_legend__eb41ac07.Fieldset_module_required__eb41ac07:after {\n  content: \" *\";\n}\n.Fieldset_module_fieldset__eb41ac07 .Fieldset_module_legend__eb41ac07.Fieldset_module_error__eb41ac07 {\n  color: var(--error);\n}";
+var modules_76ea8ff8 = {"fieldset":"Fieldset_module_fieldset__eb41ac07","no-padding":"Fieldset_module_noPadding__eb41ac07","wrapper":"Fieldset_module_wrapper__eb41ac07","legend":"Fieldset_module_legend__eb41ac07","required":"Fieldset_module_required__eb41ac07","error":"Fieldset_module_error__eb41ac07"};
 n(css$h,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$j = ["children", "className", "title", "titleVariant", "hideTitle", "noBackground", "background", "noPadding", "disabled"];
+var _excluded$j = ["children", "className", "legend", "legendStyle", "hideLegend", "noBackground", "background", "noPadding", "disabled", "required", "error"];
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
       className = _ref.className,
-      title = _ref.title,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'body' : _ref$titleVariant,
-      _ref$hideTitle = _ref.hideTitle,
-      hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
+      legend = _ref.legend,
+      _ref$legendStyle = _ref.legendStyle,
+      legendStyle = _ref$legendStyle === void 0 ? 'body' : _ref$legendStyle,
+      _ref$hideLegend = _ref.hideLegend,
+      hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
       noBackground = _ref.noBackground,
       _ref$background = _ref.background,
       background = _ref$background === void 0 ? noBackground ? '' : '#FFF' : _ref$background,
@@ -1746,13 +1837,18 @@ var Fieldset = function Fieldset(_ref) {
       noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? false : _ref$error,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   var renderChildren = function renderChildren() {
     if (!children) return;
     return React.Children.map(children, function (child) {
       return React.cloneElement(child, {
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+        error: child.props.error !== undefined ? child.props.error : error
       });
     });
   };
@@ -1763,24 +1859,25 @@ var Fieldset = function Fieldset(_ref) {
       backgroundColor: background
     }, rest.style),
     className: modules_76ea8ff8.fieldset + " " + (noPadding ? modules_76ea8ff8['no-padding'] : '') + " " + (className != null ? className : '')
-  }), title && React.createElement("legend", {
+  }), legend && React.createElement("legend", {
     className: modules_35a251a6['sr-only']
-  }, title), title && !hideTitle && React.createElement(Typography, {
-    variant: titleVariant,
+  }, legend), legend && !hideLegend && React.createElement(Typography, {
+    variant: legendStyle,
     tag: "span",
     "aria-hidden": "true",
-    className: modules_76ea8ff8.title
-  }, title), renderChildren());
+    className: modules_76ea8ff8['legend'] + " " + (required ? modules_76ea8ff8['required'] : '') + " " + (error ? modules_76ea8ff8['error'] : '')
+  }, legend), renderChildren());
 };
 
 var css$g = ".FormControl_module_formControl__f69240d3 + .FormControl_module_formControl__f69240d3 {\n  margin-top: 1rem;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3 {\n  display: flex;\n  flex-wrap: wrap;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_center__f69240d3, .FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_middle__f69240d3 {\n  align-items: center;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_start__f69240d3, .FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_top__f69240d3 {\n  align-items: flex-start;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_end__f69240d3, .FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_bottom__f69240d3 {\n  align-items: flex-end;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_stretch__f69240d3 {\n  align-items: stretch;\n}\n.FormControl_module_formControl__f69240d3.FormControl_module_grid__f69240d3.FormControl_module_stretch__f69240d3 > * > * {\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.FormControl_module_column__f69240d3 {\n  flex-grow: 1;\n  flex-shrink: 0;\n}\n\n.FormControl_module_grid2__f69240d3 .FormControl_module_column__f69240d3:nth-child(even) {\n  margin-left: 1rem;\n}\n.FormControl_module_grid2__f69240d3 .FormControl_module_column__f69240d3:nth-child(n+3) {\n  margin-top: 1rem;\n}\n\n.FormControl_module_grid3__f69240d3 .FormControl_module_column__f69240d3:not(:nth-child(3n+1)) {\n  margin-left: 1rem;\n}\n.FormControl_module_grid3__f69240d3 .FormControl_module_column__f69240d3:nth-child(n+4) {\n  margin-top: 1rem;\n}\n\n.FormControl_module_col2__f69240d3 {\n  flex-basis: calc((100% - 1rem) / 2);\n}\n\n.FormControl_module_col3__f69240d3 {\n  flex-basis: calc((100% - 2rem) / 3);\n}";
 var modules_1d54e29e = {"form-control":"FormControl_module_formControl__f69240d3","grid":"FormControl_module_grid__f69240d3","center":"FormControl_module_center__f69240d3","middle":"FormControl_module_middle__f69240d3","start":"FormControl_module_start__f69240d3","top":"FormControl_module_top__f69240d3","end":"FormControl_module_end__f69240d3","bottom":"FormControl_module_bottom__f69240d3","stretch":"FormControl_module_stretch__f69240d3","column":"FormControl_module_column__f69240d3","grid-2":"FormControl_module_grid2__f69240d3","grid-3":"FormControl_module_grid3__f69240d3","col-2":"FormControl_module_col2__f69240d3","col-3":"FormControl_module_col3__f69240d3"};
 n(css$g,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$i = ["children", "disabled", "className", "grid", "align"];
+var _excluded$i = ["children", "disabled", "error", "className", "grid", "align"];
 var FormControl = function FormControl(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
+      error = _ref.error,
       className = _ref.className,
       grid = _ref.grid,
       _ref$align = _ref.align,
@@ -1794,7 +1891,8 @@ var FormControl = function FormControl(_ref) {
       }
 
       var childElement = React.cloneElement(child, {
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+        error: child.props.error !== undefined ? child.props.error : error
       });
 
       if (grid && grid > 1) {
@@ -2358,7 +2456,7 @@ var CheckboxWrapper = function CheckboxWrapper(_ref) {
       helperId = _useWrapper.helperId;
 
   useEffect(function () {
-    if (fieldsetProps.title === undefined) {
+    if (fieldsetProps.legend === undefined) {
       console.error("You should give your Fieldset component a title prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this title prop through the fieldsetProps prop by passing an object (fieldsetProps={{ title: \"title here\" }})");
     }
   }, []);
@@ -2481,7 +2579,7 @@ var RadioWrapper = function RadioWrapper(_ref) {
       helperId = _useWrapper.helperId;
 
   useEffect(function () {
-    if (fieldsetProps.title === undefined) {
+    if (fieldsetProps.legend === undefined) {
       console.error("You should give your Fieldset component a title prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this title prop through the fieldsetProps prop by passing an object (fieldsetProps={{ title: \"title here\" }})");
     }
   }, []);
@@ -2652,8 +2750,8 @@ var TextareaWrapper = function TextareaWrapper(_ref) {
   })));
 };
 
-var css$3 = ".Radio_module_radioWrapper__e7e70d79 {\n  position: relative;\n}\n.Radio_module_radioWrapper__e7e70d79 + .Radio_module_radioWrapper__e7e70d79 {\n  margin-top: 1.25rem;\n}\n\n.Radio_module_error__e7e70d79 {\n  color: var(--error);\n}\n\n.Radio_module_helperText__e7e70d79 {\n  margin-top: 0.25rem;\n  margin-left: 1.75rem;\n}\n\n.Radio_module_errorMessage__e7e70d79 {\n  margin-top: 1.25rem;\n  display: flex;\n  align-items: bottom;\n}\n\n.Radio_module_errorIcon__e7e70d79 {\n  margin-right: 0.5rem;\n  font-size: 1.25rem;\n}\n\n.Radio_module_radioContainer__e7e70d79 {\n  display: flex;\n  align-items: center;\n}\n.Radio_module_radioContainer__e7e70d79 label {\n  display: inline-block;\n  margin-left: 0.5rem;\n  user-select: none;\n  font-size: var(--font-size);\n}\n.Radio_module_disabled__e7e70d79 .Radio_module_radioContainer__e7e70d79 label {\n  cursor: not-allowed;\n}\n\n.Radio_module_radioList__e7e70d79 {\n  padding: 0;\n  margin: 1.25rem 0 0 1.75rem;\n  list-style: none;\n}\n.Radio_module_radioList__e7e70d79 li + li {\n  margin-top: 1.75rem;\n}\n\n.Radio_module_nativeInput__e7e70d79 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  margin: 0;\n  width: 1.75rem;\n  height: 1.75rem;\n}\n.Radio_module_nativeInput__e7e70d79:not(.Radio_module_error__e7e70d79):not(:disabled):focus + *, .Radio_module_nativeInput__e7e70d79:not(.Radio_module_error__e7e70d79):not(:disabled):active + * {\n  color: var(--color-primary);\n}\n.Radio_module_nativeInput__e7e70d79:disabled {\n  cursor: not-allowed;\n}\n.Radio_module_nativeInput__e7e70d79:focus-visible + * {\n  border-radius: 2px;\n  outline: 1px solid var(--color-primary);\n  outline-offset: 1px;\n}\n.Radio_module_nativeInput__e7e70d79.Radio_module_error__e7e70d79:focus-visible + * {\n  outline-color: var(--color-error);\n}\n\n.Radio_module_input__e7e70d79 {\n  font-size: 1.25rem;\n  pointer-events: none;\n  width: 1.25rem;\n  height: 1.25rem;\n  /** The & behind disabled means parent selector (so in reality this means .disabled .input) */\n}\n.Radio_module_disabled__e7e70d79 .Radio_module_input__e7e70d79 {\n  color: var(--disabled);\n}";
-var modules_8fc278f9 = {"radio-wrapper":"Radio_module_radioWrapper__e7e70d79","error":"Radio_module_error__e7e70d79","helper-text":"Radio_module_helperText__e7e70d79","error-message":"Radio_module_errorMessage__e7e70d79","error-icon":"Radio_module_errorIcon__e7e70d79","radio-container":"Radio_module_radioContainer__e7e70d79","disabled":"Radio_module_disabled__e7e70d79","radio-list":"Radio_module_radioList__e7e70d79","native-input":"Radio_module_nativeInput__e7e70d79","input":"Radio_module_input__e7e70d79"};
+var css$3 = ".Radio_module_radioWrapper__0c70e5a2 {\n  position: relative;\n}\n.Radio_module_radioWrapper__0c70e5a2 + .Radio_module_radioWrapper__0c70e5a2 {\n  margin-top: 1.25rem;\n}\n\n.Radio_module_error__0c70e5a2 {\n  color: var(--error);\n}\n\n.Radio_module_helperText__0c70e5a2 {\n  margin-top: 0.25rem;\n  margin-left: 1.75rem;\n}\n\n.Radio_module_errorMessage__0c70e5a2 {\n  margin-top: 1.25rem;\n  display: flex;\n  align-items: bottom;\n}\n\n.Radio_module_errorIcon__0c70e5a2 {\n  margin-right: 0.5rem;\n  font-size: 1.25rem;\n}\n\n.Radio_module_radioContainer__0c70e5a2 {\n  display: flex;\n  align-items: center;\n}\n.Radio_module_radioContainer__0c70e5a2 label {\n  display: inline-block;\n  margin-left: 0.5rem;\n  user-select: none;\n  font-size: var(--font-size);\n}\n.Radio_module_disabled__0c70e5a2 .Radio_module_radioContainer__0c70e5a2 label {\n  cursor: not-allowed;\n}\n\n.Radio_module_radioList__0c70e5a2 {\n  padding: 0;\n  margin: 1.25rem 0 0 1.75rem;\n  list-style: none;\n}\n.Radio_module_radioList__0c70e5a2 li + li {\n  margin-top: 1.75rem;\n}\n\n.Radio_module_nativeInput__0c70e5a2 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  margin: 0;\n  width: 1.75rem;\n  height: 1.75rem;\n}\n.Radio_module_nativeInput__0c70e5a2:not(.Radio_module_error__0c70e5a2):not(:disabled):focus + *, .Radio_module_nativeInput__0c70e5a2:not(.Radio_module_error__0c70e5a2):not(:disabled):active + * {\n  color: var(--color-primary);\n}\n.Radio_module_nativeInput__0c70e5a2:disabled {\n  cursor: not-allowed;\n}\n.Radio_module_nativeInput__0c70e5a2:focus-visible + * {\n  border-radius: 2px;\n  outline: 1px solid var(--color-primary);\n  outline-offset: 1px;\n}\n.Radio_module_nativeInput__0c70e5a2.Radio_module_error__0c70e5a2:focus-visible + * {\n  outline-color: var(--color-error);\n}\n\n.Radio_module_input__0c70e5a2 {\n  font-size: 1.25rem;\n  pointer-events: none;\n  width: 1.25rem;\n  height: 1.25rem;\n  /** The & behind disabled means parent selector (so in reality this means .disabled .input) */\n}\n.Radio_module_disabled__0c70e5a2 .Radio_module_input__0c70e5a2 {\n  color: var(--disabled);\n}\n\n.Radio_module_disabled__0c70e5a2 {\n  color: var(--disabled);\n}";
+var modules_8fc278f9 = {"radio-wrapper":"Radio_module_radioWrapper__0c70e5a2","error":"Radio_module_error__0c70e5a2","helper-text":"Radio_module_helperText__0c70e5a2","error-message":"Radio_module_errorMessage__0c70e5a2","error-icon":"Radio_module_errorIcon__0c70e5a2","radio-container":"Radio_module_radioContainer__0c70e5a2","disabled":"Radio_module_disabled__0c70e5a2","radio-list":"Radio_module_radioList__0c70e5a2","native-input":"Radio_module_nativeInput__0c70e5a2","input":"Radio_module_input__0c70e5a2"};
 n(css$3,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var useFormSelector = function useFormSelector(configObject) {
@@ -2806,10 +2904,10 @@ var Radio = function Radio(_ref) {
     id: identifier + "-radio",
     type: "radio"
   })), checked && React.createElement(Icon, {
-    className: modules_8fc278f9.input,
+    className: modules_8fc278f9['input'] + " " + (disabled ? modules_8fc278f9['disabled'] : ''),
     icon: Icons.Radio
   }), !checked && React.createElement(Icon, {
-    className: modules_8fc278f9.input,
+    className: modules_8fc278f9['input'] + " " + (disabled ? modules_8fc278f9['disabled'] : ''),
     icon: Icons.Circle
   }), React.createElement("label", {
     onClick: onChangeHandler,
@@ -2817,8 +2915,8 @@ var Radio = function Radio(_ref) {
   }, children));
 };
 
-var css$1 = ".Checkbox_module_checkboxWrapper__26cf08c1 {\n  position: relative;\n}\n.Checkbox_module_checkboxWrapper__26cf08c1 + .Checkbox_module_checkboxWrapper__26cf08c1 {\n  margin-top: 1.25rem;\n}\n\n.Checkbox_module_checkboxContainer__26cf08c1 {\n  display: flex;\n  align-items: center;\n}\n.Checkbox_module_checkboxContainer__26cf08c1 label {\n  display: inline-block;\n  margin-left: 0.5rem;\n  user-select: none;\n  font-size: var(--font-size);\n}\n\n.Checkbox_module_checkboxList__26cf08c1 {\n  padding: 0;\n  margin: 1.25rem 0 0 1.75rem;\n  list-style: none;\n}\n.Checkbox_module_checkboxList__26cf08c1 li + li {\n  margin-top: 1.25rem;\n}\n\n.Checkbox_module_nativeInput__26cf08c1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  margin: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Checkbox_module_nativeInput__26cf08c1:not(.Checkbox_module_error__26cf08c1):not(:disabled):focus + *, .Checkbox_module_nativeInput__26cf08c1:not(.Checkbox_module_error__26cf08c1):not(:disabled):active + * {\n  color: var(--color-primary);\n}\n.Checkbox_module_nativeInput__26cf08c1:focus-visible + * {\n  border-radius: 2px;\n  outline: 1px solid var(--color-primary);\n  outline-offset: 1px;\n}\n.Checkbox_module_nativeInput__26cf08c1.Checkbox_module_error__26cf08c1:focus-visible + * {\n  outline-color: var(--color-error);\n}\n\n.Checkbox_module_input__26cf08c1 {\n  font-size: 1.25rem;\n  pointer-events: none;\n}";
-var modules_6238daf1 = {"checkbox-wrapper":"Checkbox_module_checkboxWrapper__26cf08c1","checkbox-container":"Checkbox_module_checkboxContainer__26cf08c1","checkbox-list":"Checkbox_module_checkboxList__26cf08c1","native-input":"Checkbox_module_nativeInput__26cf08c1","error":"Checkbox_module_error__26cf08c1","input":"Checkbox_module_input__26cf08c1"};
+var css$1 = ".Checkbox_module_checkboxWrapper__cb754ef1 {\n  position: relative;\n}\n.Checkbox_module_checkboxWrapper__cb754ef1 + .Checkbox_module_checkboxWrapper__cb754ef1 {\n  margin-top: 1.25rem;\n}\n\n.Checkbox_module_checkboxContainer__cb754ef1 {\n  display: flex;\n  align-items: center;\n}\n.Checkbox_module_checkboxContainer__cb754ef1 label {\n  display: inline-block;\n  margin-left: 0.5rem;\n  user-select: none;\n  font-size: var(--font-size);\n}\n\n.Checkbox_module_checkboxList__cb754ef1 {\n  padding: 0;\n  margin: 1.25rem 0 0 1.75rem;\n  list-style: none;\n}\n.Checkbox_module_checkboxList__cb754ef1 li + li {\n  margin-top: 1.25rem;\n}\n\n.Checkbox_module_nativeInput__cb754ef1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  margin: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Checkbox_module_nativeInput__cb754ef1:not(.Checkbox_module_error__cb754ef1):not(:disabled):focus + *, .Checkbox_module_nativeInput__cb754ef1:not(.Checkbox_module_error__cb754ef1):not(:disabled):active + * {\n  color: var(--color-primary);\n}\n.Checkbox_module_nativeInput__cb754ef1:focus-visible + * {\n  border-radius: 2px;\n  outline: 1px solid var(--color-primary);\n  outline-offset: 1px;\n}\n.Checkbox_module_nativeInput__cb754ef1.Checkbox_module_error__cb754ef1:focus-visible + * {\n  outline-color: var(--color-error);\n}\n\n.Checkbox_module_input__cb754ef1 {\n  font-size: 1.25rem;\n  pointer-events: none;\n}\n\n.Checkbox_module_disabled__cb754ef1 {\n  color: var(--disabled);\n}";
+var modules_6238daf1 = {"checkbox-wrapper":"Checkbox_module_checkboxWrapper__cb754ef1","checkbox-container":"Checkbox_module_checkboxContainer__cb754ef1","checkbox-list":"Checkbox_module_checkboxList__cb754ef1","native-input":"Checkbox_module_nativeInput__cb754ef1","error":"Checkbox_module_error__cb754ef1","input":"Checkbox_module_input__cb754ef1","disabled":"Checkbox_module_disabled__cb754ef1"};
 n(css$1,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$2 = ["children", "name", "helperText", "helperProps", "indeterminate", "parentErrorId", "errorMessage", "disabled", "label", "parentHelperId", "className", "error", "checked", "wrapperProps", "onChange"];
@@ -2891,7 +2989,8 @@ var Checkbox = function Checkbox(_ref) {
       return React.createElement("li", null, React.createElement(Checkbox, _extends({}, child.props, {
         parentHelperId: parentHelperId,
         parentErrorId: parentErrorId,
-        error: error
+        error: error,
+        disabled: disabled ? disabled : child.disabled
       }), child.props.children));
     }));
   };
@@ -2907,8 +3006,9 @@ var Checkbox = function Checkbox(_ref) {
   var renderToggle = function renderToggle() {
     return React.Children.toArray(children).filter(isToggle);
   };
-  /** Default return value is the default checkbox */
 
+  var iconClasses = [modules_6238daf1['input'], disabled ? modules_6238daf1['disabled'] : ''];
+  /** Default return value is the default checkbox */
 
   return React.createElement(FormSelectorWrapper, _extends({}, wrapperProps, {
     className: modules_6238daf1['checkbox-wrapper'] + " " + (className ? className : ''),
@@ -2936,13 +3036,13 @@ var Checkbox = function Checkbox(_ref) {
     name: name,
     type: "checkbox"
   })), renderToggle(), indeterminate && React.createElement(Icon, {
-    className: modules_6238daf1.input,
+    className: iconClasses.join(' '),
     icon: Icons.MinusSquare
   }), checked && !indeterminate && React.createElement(Icon, {
-    className: modules_6238daf1.input,
+    className: iconClasses.join(' '),
     icon: Icons.CheckmarkSquare
   }), !checked && !indeterminate && React.createElement(Icon, {
-    className: modules_6238daf1.input,
+    className: iconClasses.join(' '),
     icon: Icons.Square
   }), React.createElement("label", {
     htmlFor: identifier + "-checkbox"
@@ -2982,7 +3082,7 @@ var BaseWizardSteps = function BaseWizardSteps(_ref) {
         icon: Icons.Checkmark
       });
     } else {
-      return React.createElement(React.Fragment, null, React.createElement("span", {
+      return React.createElement(Fragment, null, React.createElement("span", {
         className: modules_35a251a6['sr-only']
       }, stepScreenReaderLabel, " "), stepNumberString);
     }
@@ -3146,7 +3246,7 @@ var WizardActions = function WizardActions(_ref) {
     onSaveAndClose(currentStepNo);
   };
 
-  return React.createElement(React.Fragment, null, React.createElement(Button, {
+  return React.createElement(Fragment, null, React.createElement(Button, {
     variant: "text",
     onClick: onCancel
   }, cancelButtonLabel), hasPreviousStep && React.createElement(Button, {
@@ -3212,7 +3312,7 @@ var WizardContent = function WizardContent(_ref) {
       children = _ref.children;
   useSetWizardState(steps, mode, stepScreenReaderLabel);
   useStepChanging(onStepChange);
-  return React.createElement(React.Fragment, null, children);
+  return React.createElement(Fragment, null, children);
 };
 
 var Wizard = function Wizard(props) {
@@ -3231,5 +3331,5 @@ var Wizard = function Wizard(props) {
   }, React.createElement(WizardContent, _extends({}, props)));
 };
 
-export { BaseStyling, BaseWizardSteps, Breadcrumbs, Button, Checkbox, CheckboxWrapper, ContextMenu, ContextMenuItem, Dialog, Fieldset, Form, FormControl, FormGroup, FormHelperText, Icon, IconButton, Icons, Input, InputWrapper, Label, Link, BaseModal as Modal, BaseModalActions as ModalActions, BaseModalContent as ModalContent, BaseModalHeader as ModalHeader, Option, Radio, RadioWrapper, Select, SelectWrapper, SnackbarProvider, Textarea, TextareaWrapper, Tile, Tiles, Tooltip, Typography, Wizard, WizardActions, WizardSteps, useSnackbar };
+export { BaseStyling, BaseWizardSteps, Breadcrumbs, Button, Checkbox, CheckboxWrapper, ContextMenu, ContextMenuItem, Dialog, DiscardChangesModal, Fieldset, Form, FormControl, FormGroup, FormHelperText, Icon, IconButton, Icons, Input, InputWrapper, Label, Link, BaseModal as Modal, BaseModalActions as ModalActions, BaseModalContent as ModalContent, BaseModalHeader as ModalHeader, Option, Radio, RadioWrapper, Select, SelectWrapper, SnackbarProvider, Textarea, TextareaWrapper, Tile, Tiles, Tooltip, Typography, Wizard, WizardActions, WizardSteps, useSnackbar };
 //# sourceMappingURL=react-lib-components.esm.js.map