@onewelcome/react-lib-components 0.1.12-alpha → 0.2.2

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

@@ -38,55 +38,56 @@ var BaseStyling = function BaseStyling(_ref) {
       _ref$properties = _ref.properties,
       properties = _ref$properties === void 0 ? {} : _ref$properties;
   var defaultProperties = {
-    colorFocus: '#0085f2',
-    colorPrimary: '#9e006b',
-    colorSecondary: '#003b5e',
-    colorTertiary: '#ff1e4e',
-    defaultLineHeight: '26px',
-    buttonBorderRadius: '20px',
-    buttonBorderWidth: '2px',
-    buttonFontSize: '1rem',
-    buttonBorderStyle: 'solid',
-    buttonFillTextColor: '#fff',
-    buttonFillBackgroundColor: '#fff',
-    buttonOutlineHoverTextColor: '#fff',
-    inputBorderColor: '#e9e9eb',
-    inputBorderRadius: '8px',
-    inputBorderWidth: '1px',
-    inputBorderStyle: 'solid',
-    inputBackgroundColor: '#fff',
-    modalShadowColor: 'rgba(0, 0, 0, 0.16)',
-    modalBackgroundColor: '#f5f8f8',
-    modalHeaderBackgroundColor: '#fff',
-    snackbarTextColor: '#fff',
-    snackbarInfoBackgroundColor: '#003b5e',
-    snackbarSuccessBackgroundColor: '#008a28',
-    snackbarErrorBackgroundColor: '#e22a1d',
-    snackbarBorderRadius: '8px',
-    dataGridRowBackgroundColor: 'transparent',
-    dataGridRowHoverBackgroundColor: '#f5e6f0',
-    tabsBackgroundColor: '#FFF',
-    tabBorderWidth: '2px',
-    tabBorderStyle: 'solid',
-    tablistBorderWidth: '1px',
-    tablistBorderStyle: 'solid',
-    tablistBorderColor: '#C3C3C7',
-    tabTextColor: '#0f0f1e',
-    "default": '#0f0f1e',
-    success: '#008a28',
-    error: '#e22a1d',
-    disabled: '#e9e9eb',
-    greyedOut: '#6f6f76',
-    warning: '#ff6105',
+    colorFocus: "#0085f2",
+    colorPrimary: "#9e006b",
+    colorSecondary: "#003b5e",
+    colorTertiary: "#ff1e4e",
+    defaultLineHeight: "26px",
+    buttonBorderRadius: "20px",
+    buttonBorderWidth: "2px",
+    buttonFontSize: "1rem",
+    buttonBorderStyle: "solid",
+    buttonFillTextColor: "#fff",
+    buttonFillBackgroundColor: "#fff",
+    buttonOutlineHoverTextColor: "#fff",
+    inputBorderColor: "#e9e9eb",
+    inputBorderRadius: "8px",
+    inputBorderWidth: "1px",
+    inputBorderWidthFocus: "2px",
+    inputBorderStyle: "solid",
+    inputBackgroundColor: "#fff",
+    modalShadowColor: "rgba(0, 0, 0, 0.16)",
+    modalBackgroundColor: "#f5f8f8",
+    modalHeaderBackgroundColor: "#fff",
+    snackbarTextColor: "#fff",
+    snackbarInfoBackgroundColor: "#003b5e",
+    snackbarSuccessBackgroundColor: "#008a28",
+    snackbarErrorBackgroundColor: "#d9291c",
+    snackbarBorderRadius: "8px",
+    dataGridRowBackgroundColor: "transparent",
+    dataGridRowHoverBackgroundColor: "#f5e6f0",
+    tabsBackgroundColor: "#FFF",
+    tabBorderWidth: "2px",
+    tabBorderStyle: "solid",
+    tablistBorderWidth: "1px",
+    tablistBorderStyle: "solid",
+    tablistBorderColor: "#C3C3C7",
+    tabTextColor: "#0f0f1e",
+    "default": "#0f0f1e",
+    success: "#008a28",
+    error: "#d9291c",
+    disabled: "#e9e9eb",
+    greyedOut: "#6f6f76",
+    warning: "#ff6105",
     fontFamily: "'Red Hat Display', sans-serif",
     fontFamilyCode: "'Red Hat Mono', sans-serif",
-    fontSize: '1rem',
-    fontSizeH1: '2.5rem',
-    fontSizeH2: '1.625rem',
-    fontSizeH3: '1.5rem',
-    fontSizeH4: '1.25rem',
-    fontSizeSub: '.75rem',
-    fontSizeCode: '1rem'
+    fontSize: "1rem",
+    fontSizeH1: "2.5rem",
+    fontSizeH2: "1.625rem",
+    fontSizeH3: "1.5rem",
+    fontSizeH4: "1.25rem",
+    fontSizeSub: ".75rem",
+    fontSizeCode: "1rem"
   };
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
 
@@ -136,16 +137,16 @@ var _excluded$Y = ["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,
+      type = _ref$type === void 0 ? "button" : _ref$type,
       className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
 
-  var validTypes = ['submit', 'button', 'reset'];
+  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);
   return React.createElement("button", _extends({}, rest, {
     ref: ref,
     type: type,
-    className: modules_3484519b.button + " " + (className ? className : '')
+    className: modules_3484519b.button + " " + (className ? className : "")
   }), children);
 });
 
@@ -157,9 +158,9 @@ var _excluded$X = ["children", "variant", "color", "startIcon", "endIcon", "clas
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
+      variant = _ref$variant === void 0 ? "fill" : _ref$variant,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      color = _ref$color === void 0 ? "primary" : _ref$color,
       _ref$startIcon = _ref.startIcon,
       startIcon = _ref$startIcon === void 0 ? false : _ref$startIcon,
       _ref$endIcon = _ref.endIcon,
@@ -170,15 +171,15 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var additionalClasses = [];
 
   if (startIcon || endIcon) {
-    additionalClasses.push(modules_79b43374['has-icon']);
+    additionalClasses.push(modules_79b43374["has-icon"]);
   }
 
   if (startIcon) {
-    additionalClasses.push(modules_79b43374['start-icon']);
+    additionalClasses.push(modules_79b43374["start-icon"]);
   }
 
   if (endIcon) {
-    additionalClasses.push(modules_79b43374['end-icon']);
+    additionalClasses.push(modules_79b43374["end-icon"]);
   }
 
   if (className) {
@@ -187,7 +188,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement(BaseButton, _extends({}, rest, {
     ref: ref,
-    className: modules_79b43374[color] + " " + modules_79b43374[variant] + " " + additionalClasses.join(' ')
+    className: modules_79b43374[color] + " " + modules_79b43374[variant] + " " + additionalClasses.join(" ")
   }), startIcon && React.createElement("i", null, startIcon, "\xA0"), React.createElement("span", null, children), endIcon && React.createElement("i", null, "\xA0", endIcon));
 });
 
@@ -272,7 +273,7 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       style = _ref.style,
       size = _ref.size,
       _ref$tag = _ref.tag,
-      tag = _ref$tag === void 0 ? 'span' : _ref$tag,
+      tag = _ref$tag === void 0 ? "span" : _ref$tag,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$W);
 
   var Component = tag;
@@ -285,16 +286,16 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     "data-icon": true,
     "aria-hidden": "true",
-    className: modules_c4937a59['icon'] + " " + modules_c4937a59['icon-' + icon] + " " + (className ? className : '')
+    className: modules_c4937a59["icon"] + " " + modules_c4937a59["icon-" + icon] + " " + (className ? className : "")
   }));
 });
 
-var css$T = ".Typography_module_typography_style_h1__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h1);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h2__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h2);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.42857;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h3__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h3);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.16666;\n  font-weight: 500;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h4__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h4);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_body__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_bodyBold__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_subText__2d08b301 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-sub);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.333;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_code__2d08b301 {\n  font-family: var(--font-family-code);\n  font-size: var(--font-size-code);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}";
-var modules_e6a5a2d0 = {"typography_style_h1":"Typography_module_typography_style_h1__2d08b301","typography_style_h2":"Typography_module_typography_style_h2__2d08b301","typography_style_h3":"Typography_module_typography_style_h3__2d08b301","typography_style_h4":"Typography_module_typography_style_h4__2d08b301","typography_style_body":"Typography_module_typography_style_body__2d08b301","typography_style_body-bold":"Typography_module_typography_style_bodyBold__2d08b301","typography_style_sub-text":"Typography_module_typography_style_subText__2d08b301","typography_style_code":"Typography_module_typography_style_code__2d08b301"};
+var css$T = ".Typography_module_typography_style_h1__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h1);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h2__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h2);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.42857;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h3__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h3);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.16666;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_h4__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-h4);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_body__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_bodyBold__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 700;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_subText__c956bd00 {\n  font-family: var(--font-family);\n  font-size: var(--font-size-sub);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.333;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}\n.Typography_module_typography_style_code__c956bd00 {\n  font-family: var(--font-family-code);\n  font-size: var(--font-size-code);\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--default);\n  margin: 0 0 1rem 0;\n}";
+var modules_e6a5a2d0 = {"typography_style_h1":"Typography_module_typography_style_h1__c956bd00","typography_style_h2":"Typography_module_typography_style_h2__c956bd00","typography_style_h3":"Typography_module_typography_style_h3__c956bd00","typography_style_h4":"Typography_module_typography_style_h4__c956bd00","typography_style_body":"Typography_module_typography_style_body__c956bd00","typography_style_body-bold":"Typography_module_typography_style_bodyBold__c956bd00","typography_style_sub-text":"Typography_module_typography_style_subText__c956bd00","typography_style_code":"Typography_module_typography_style_code__c956bd00"};
 n(css$T,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var defaultFactor = 0.25;
-var defaultUnit = 'rem';
+var defaultUnit = "rem";
 var spacingNumberRegex = /(\d+\.?\d*)+/g;
 var useSpacing = function useSpacing(spacingProps, style) {
   if (spacingProps) {
@@ -307,7 +308,7 @@ var useSpacing = function useSpacing(spacingProps, style) {
       var cssSpacingValue = Array.from(matches).map(function (_ref2) {
         var multiplierValue = _ref2[0];
         return "" + Number(multiplierValue) * defaultFactor + defaultUnit;
-      }).join(' ');
+      }).join(" ");
       return _extends({}, prev, (_extends2 = {}, _extends2[spacing] = cssSpacingValue, _extends2));
     }, style != null ? style : {});
   }
@@ -316,7 +317,7 @@ var useSpacing = function useSpacing(spacingProps, style) {
 };
 
 var _excluded$V = ["children", "variant", "tag", "style", "spacing", "className"];
-var validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'];
+var validVariants = ["h1", "h2", "h3", "h4", "body", "body-bold", "sub-text", "code"];
 var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       variant = _ref.variant,
@@ -324,7 +325,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       style = _ref.style,
       spacing = _ref.spacing,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? "" : _ref$className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
 
   if (!validVariants.includes(variant)) {
@@ -335,28 +336,28 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   if (!tag) {
     switch (variant) {
-      case 'h1':
-      case 'h2':
-      case 'h3':
-      case 'h4':
-      case 'code':
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "code":
         tag = variant;
         break;
 
-      case 'body':
-        tag = 'p';
+      case "body":
+        tag = "p";
         break;
 
-      case 'body-bold':
-        tag = 'p';
+      case "body-bold":
+        tag = "p";
         break;
 
-      case 'sub-text':
-        tag = 'span';
+      case "sub-text":
+        tag = "span";
         break;
 
       default:
-        tag = 'div';
+        tag = "div";
         break;
     }
   }
@@ -365,7 +366,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement(TagName, _extends({}, rest, {
     ref: ref,
     style: styleWithSpacing,
-    className: modules_e6a5a2d0['typography_style_' + variant] + " " + className
+    className: modules_e6a5a2d0["typography_style_" + variant] + " " + className
   }), children);
 });
 
@@ -376,9 +377,9 @@ n(css$S,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 var _excluded$U = ["children", "aria-label", "className"];
 var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      ariaLabel = _ref['aria-label'],
+      ariaLabel = _ref["aria-label"],
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? "" : _ref$className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
 
   var items = React.Children.map(children, function (child, index) {
@@ -389,7 +390,7 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         key: child.key,
         variant: "body",
         tag: "span",
-        className: modules_a04642f2['last'],
+        className: modules_a04642f2["last"],
         "aria-current": "page"
       }, child.props.children);
     } else {
@@ -397,14 +398,14 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         key: child.key
       }, React.cloneElement(child), React.createElement(Icon, {
         icon: Icons.ChevronRight,
-        className: modules_a04642f2['icon']
+        className: modules_a04642f2["icon"]
       }));
     }
   });
   return React.createElement("nav", _extends({}, rest, {
     ref: ref,
     "aria-label": ariaLabel,
-    className: modules_a04642f2['breadcrumbs'] + " " + className
+    className: modules_a04642f2["breadcrumbs"] + " " + className
   }), items);
 });
 
@@ -412,12 +413,12 @@ var defaultConfigObject = {
   relativeElement: undefined,
   elementToBePositioned: undefined,
   transformOrigin: {
-    horizontal: 'left',
-    vertical: 'top'
+    horizontal: "left",
+    vertical: "top"
   },
   placement: {
-    horizontal: 'left',
-    vertical: 'top'
+    horizontal: "left",
+    vertical: "top"
   },
   offset: {
     top: 0,
@@ -448,8 +449,8 @@ var usePosition = function usePosition(providedConfigObject) {
   var _useState = useState({
     left: 0,
     top: 0,
-    right: 'initial',
-    bottom: 'initial'
+    right: "initial",
+    bottom: "initial"
   }),
       position = _useState[0],
       setPosition = _useState[1];
@@ -457,23 +458,23 @@ var usePosition = function usePosition(providedConfigObject) {
   var _fixPossibleViewportOverflow = function _fixPossibleViewportOverflow(value, transformOrigin, requestedReturnValue, elDimensions) {
     var returnValue = value;
 
-    if (transformOrigin[requestedReturnValue] === 'left' && returnValue < 0 || transformOrigin[requestedReturnValue] === 'top' && returnValue < 0 || transformOrigin[requestedReturnValue] === 'center' && returnValue < 0 || transformOrigin[requestedReturnValue] === 'bottom' && returnValue < 0) {
+    if (transformOrigin[requestedReturnValue] === "left" && returnValue < 0 || transformOrigin[requestedReturnValue] === "top" && returnValue < 0 || transformOrigin[requestedReturnValue] === "center" && returnValue < 0 || transformOrigin[requestedReturnValue] === "bottom" && returnValue < 0) {
       returnValue = 0;
     }
 
-    if (transformOrigin[requestedReturnValue] === 'left' && returnValue > window.innerWidth - elDimensions.width || transformOrigin[requestedReturnValue] === 'center' && requestedReturnValue === 'horizontal' && returnValue > window.innerWidth - elDimensions.width) {
+    if (transformOrigin[requestedReturnValue] === "left" && returnValue > window.innerWidth - elDimensions.width || transformOrigin[requestedReturnValue] === "center" && requestedReturnValue === "horizontal" && returnValue > window.innerWidth - elDimensions.width) {
       returnValue = window.innerWidth - elDimensions.width;
     }
 
-    if (transformOrigin[requestedReturnValue] === 'top' && returnValue > window.innerHeight - elDimensions.height || transformOrigin[requestedReturnValue] === 'center' && requestedReturnValue === 'vertical' && returnValue > window.innerHeight - elDimensions.height) {
+    if (transformOrigin[requestedReturnValue] === "top" && returnValue > window.innerHeight - elDimensions.height || transformOrigin[requestedReturnValue] === "center" && requestedReturnValue === "vertical" && returnValue > window.innerHeight - elDimensions.height) {
       returnValue = window.innerHeight - elDimensions.height;
     }
 
-    if (transformOrigin[requestedReturnValue] === 'right' && returnValue > window.innerWidth - elDimensions.width) {
+    if (transformOrigin[requestedReturnValue] === "right" && returnValue > window.innerWidth - elDimensions.width) {
       returnValue = window.innerWidth - elDimensions.width;
     }
 
-    if (transformOrigin[requestedReturnValue] === 'bottom' && returnValue > window.innerHeight - elDimensions.height) {
+    if (transformOrigin[requestedReturnValue] === "bottom" && returnValue > window.innerHeight - elDimensions.height) {
       returnValue = window.innerHeight - elDimensions.height;
     }
 
@@ -485,15 +486,15 @@ var usePosition = function usePosition(providedConfigObject) {
 
     var returnValue = value;
 
-    if (requestedReturnValue === 'horizontal' && ((_configObject$offset = configObject.offset) == null ? void 0 : _configObject$offset.left) !== 0 || requestedReturnValue === 'horizontal' && ((_configObject$offset2 = configObject.offset) == null ? void 0 : _configObject$offset2.right) !== 0) {
-      if (transformOrigin[requestedReturnValue] === 'left' || transformOrigin[requestedReturnValue] === 'center') {
+    if (requestedReturnValue === "horizontal" && ((_configObject$offset = configObject.offset) == null ? void 0 : _configObject$offset.left) !== 0 || requestedReturnValue === "horizontal" && ((_configObject$offset2 = configObject.offset) == null ? void 0 : _configObject$offset2.right) !== 0) {
+      if (transformOrigin[requestedReturnValue] === "left" || transformOrigin[requestedReturnValue] === "center") {
         var _configObject$offset3, _configObject$offset4;
 
         returnValue += (_configObject$offset3 = configObject.offset) == null ? void 0 : _configObject$offset3.left;
         returnValue -= (_configObject$offset4 = configObject.offset) == null ? void 0 : _configObject$offset4.right;
       }
 
-      if (transformOrigin[requestedReturnValue] === 'right') {
+      if (transformOrigin[requestedReturnValue] === "right") {
         var _configObject$offset5, _configObject$offset6;
 
         returnValue -= (_configObject$offset5 = configObject.offset) == null ? void 0 : _configObject$offset5.left;
@@ -501,15 +502,15 @@ var usePosition = function usePosition(providedConfigObject) {
       }
     }
 
-    if (requestedReturnValue === 'vertical' && ((_configObject$offset7 = configObject.offset) == null ? void 0 : _configObject$offset7.top) !== 0 || requestedReturnValue === 'vertical' && ((_configObject$offset8 = configObject.offset) == null ? void 0 : _configObject$offset8.bottom) !== 0) {
-      if (transformOrigin[requestedReturnValue] === 'top' || transformOrigin[requestedReturnValue] === 'center') {
+    if (requestedReturnValue === "vertical" && ((_configObject$offset7 = configObject.offset) == null ? void 0 : _configObject$offset7.top) !== 0 || requestedReturnValue === "vertical" && ((_configObject$offset8 = configObject.offset) == null ? void 0 : _configObject$offset8.bottom) !== 0) {
+      if (transformOrigin[requestedReturnValue] === "top" || transformOrigin[requestedReturnValue] === "center") {
         var _configObject$offset9, _configObject$offset10;
 
         returnValue += (_configObject$offset9 = configObject.offset) == null ? void 0 : _configObject$offset9.top;
         returnValue -= (_configObject$offset10 = configObject.offset) == null ? void 0 : _configObject$offset10.bottom;
       }
 
-      if (transformOrigin[requestedReturnValue] === 'bottom') {
+      if (transformOrigin[requestedReturnValue] === "bottom") {
         var _configObject$offset11, _configObject$offset12;
 
         returnValue -= (_configObject$offset11 = configObject.offset) == null ? void 0 : _configObject$offset11.top;
@@ -523,12 +524,12 @@ var usePosition = function usePosition(providedConfigObject) {
   var _calculateInitialPlacementValue = function _calculateInitialPlacementValue(transformOrigin, requestedReturnValue, relEl, placementOriginDefinition, elDimensions) {
     var value = 0;
 
-    if (transformOrigin[requestedReturnValue] === 'left' || transformOrigin[requestedReturnValue] === 'top') {
+    if (transformOrigin[requestedReturnValue] === "left" || transformOrigin[requestedReturnValue] === "top") {
       value = relEl[placementOriginDefinition];
-    } else if (transformOrigin[requestedReturnValue] === 'center') {
-      value = relEl[placementOriginDefinition] - elDimensions[requestedReturnValue === 'horizontal' ? 'width' : 'height'] / 2;
-    } else if (transformOrigin[requestedReturnValue] === 'right' || transformOrigin[requestedReturnValue] === 'bottom') {
-      value = window[requestedReturnValue === 'horizontal' ? 'innerWidth' : 'innerHeight'] - relEl[placementOriginDefinition];
+    } else if (transformOrigin[requestedReturnValue] === "center") {
+      value = relEl[placementOriginDefinition] - elDimensions[requestedReturnValue === "horizontal" ? "width" : "height"] / 2;
+    } else if (transformOrigin[requestedReturnValue] === "right" || transformOrigin[requestedReturnValue] === "bottom") {
+      value = window[requestedReturnValue === "horizontal" ? "innerWidth" : "innerHeight"] - relEl[placementOriginDefinition];
     }
 
     return value;
@@ -541,17 +542,17 @@ var usePosition = function usePosition(providedConfigObject) {
 
 
   var _determineCenteredPlacementOrigin = function _determineCenteredPlacementOrigin(requestedReturnValue) {
-    if (requestedReturnValue === 'horizontal') {
-      return 'centerh';
-    } else if (requestedReturnValue === 'vertical') {
-      return 'centerv';
+    if (requestedReturnValue === "horizontal") {
+      return "centerh";
+    } else if (requestedReturnValue === "vertical") {
+      return "centerv";
     }
 
     throw new Error("the requested return value isn't \"vertical\" or \"horizontal\" " + requestedReturnValue + " was given.");
   };
 
   var _calculatePlacementValue = function _calculatePlacementValue(transformOrigin, placement, requestedReturnValue, relEl, elDimensions) {
-    var placementOriginDefinition = placement === 'center' ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
+    var placementOriginDefinition = placement === "center" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
 
     var value = _calculateInitialPlacementValue(transformOrigin, requestedReturnValue, relEl, placementOriginDefinition, elDimensions);
 
@@ -567,29 +568,29 @@ var usePosition = function usePosition(providedConfigObject) {
 
     var placementValue = _calculatePlacementValue(configObject.transformOrigin, configObject.placement[axis], axis, relEl, elDimensions);
 
-    var direction = 'left';
-    var oppositeDirection = 'right';
+    var direction = "left";
+    var oppositeDirection = "right";
 
-    if (axis === 'horizontal' && ((_configObject$transfo = configObject.transformOrigin) == null ? void 0 : _configObject$transfo.horizontal) === 'right') {
-      direction = 'right';
-      oppositeDirection = 'left';
-    } else if (axis === 'horizontal') {
-      direction = 'left';
-      oppositeDirection = 'right';
+    if (axis === "horizontal" && ((_configObject$transfo = configObject.transformOrigin) == null ? void 0 : _configObject$transfo.horizontal) === "right") {
+      direction = "right";
+      oppositeDirection = "left";
+    } else if (axis === "horizontal") {
+      direction = "left";
+      oppositeDirection = "right";
     }
 
-    if (axis === 'vertical' && ((_configObject$transfo2 = configObject.transformOrigin) == null ? void 0 : _configObject$transfo2.vertical) === 'bottom') {
-      direction = 'bottom';
-      oppositeDirection = 'top';
-    } else if (axis === 'vertical') {
-      direction = 'top';
-      oppositeDirection = 'bottom';
+    if (axis === "vertical" && ((_configObject$transfo2 = configObject.transformOrigin) == null ? void 0 : _configObject$transfo2.vertical) === "bottom") {
+      direction = "bottom";
+      oppositeDirection = "top";
+    } else if (axis === "vertical") {
+      direction = "top";
+      oppositeDirection = "bottom";
     }
 
     setPosition(function (prevState) {
       var _extends2;
 
-      return _extends({}, prevState, (_extends2 = {}, _extends2[direction] = placementValue, _extends2[oppositeDirection] = 'initial', _extends2));
+      return _extends({}, prevState, (_extends2 = {}, _extends2[direction] = placementValue, _extends2[oppositeDirection] = "initial", _extends2));
     });
   };
 
@@ -618,9 +619,9 @@ var usePosition = function usePosition(providedConfigObject) {
       y: relativeElRect.y
     };
 
-    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'horizontal');
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "horizontal");
 
-    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'vertical');
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "vertical");
   };
 
   return {
@@ -673,7 +674,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, rest), React.createElement("div", {
     ref: elToBePositioned,
-    className: modules_ef8f756f.popover + " " + (className != null ? className : '') + " " + (show ? modules_ef8f756f.show : ''),
+    className: modules_ef8f756f.popover + " " + (className != null ? className : "") + " " + (show ? modules_ef8f756f.show : ""),
     style: {
       top: top,
       left: left,
@@ -695,9 +696,9 @@ var useBodyClick = function useBodyClick(checkFunction, callbackFunction, depend
   }
 
   useEffect(function () {
-    window.addEventListener('click', bodyClickListener);
+    window.addEventListener("click", bodyClickListener);
     return function () {
-      window.removeEventListener('click', bodyClickListener);
+      window.removeEventListener("click", bodyClickListener);
     };
   }, [dependingStateVariable]);
 };
@@ -713,8 +714,8 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClose = _ref.onClose,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? {
-    horizontal: 'right',
-    vertical: 'top'
+    horizontal: "right",
+    vertical: "top"
   } : _ref$placement,
       _ref$offset = _ref.offset,
       offset = _ref$offset === void 0 ? {
@@ -725,8 +726,8 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   } : _ref$offset,
       _ref$transformOrigin = _ref.transformOrigin,
       transformOrigin = _ref$transformOrigin === void 0 ? {
-    horizontal: 'left',
-    vertical: 'top'
+    horizontal: "left",
+    vertical: "top"
   } : _ref$transformOrigin,
       _ref$domRoot = _ref.domRoot,
       domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
@@ -738,25 +739,29 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       showContextMenu = _useState[0],
       setShowContextMenu = _useState[1];
 
-  var _useState2 = useState(-1),
-      selectedContextMenuItem = _useState2[0],
-      setSelectedContextMenuItem = _useState2[1];
+  var _useState2 = useState(false),
+      hasBeenClosed = _useState2[0],
+      setHasBeenClosed = _useState2[1];
 
   var _useState3 = useState(-1),
-      focusedContextMenuItem = _useState3[0],
-      setFocusedContextMenuItem = _useState3[1];
+      selectedContextMenuItem = _useState3[0],
+      setSelectedContextMenuItem = _useState3[1];
 
-  var _useState4 = useState(false),
-      shouldClick = _useState4[0],
-      setShouldClick = _useState4[1];
+  var _useState4 = useState(-1),
+      focusedContextMenuItem = _useState4[0],
+      setFocusedContextMenuItem = _useState4[1];
+
+  var _useState5 = useState(false),
+      shouldClick = _useState5[0],
+      setShouldClick = _useState5[1];
   /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the "click" listener in ContextMenuItem component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
 
 
-  var _useState5 = useState(React.Children.count(children)),
-      childrenCount = _useState5[0];
+  var _useState6 = useState(React.Children.count(children)),
+      childrenCount = _useState6[0];
 
   if (!id) {
-    throw new Error('You need to provide an ID to the context menu');
+    throw new Error("You need to provide an ID to the context menu");
   }
 
   var onArrowNavigation = function onArrowNavigation(event) {
@@ -764,14 +769,14 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setFocusedContextMenuItem(selectedContextMenuItem);
     }
 
-    var codesToPrevenDefault = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Space', 'Escape', 'End', 'Home'];
+    var codesToPrevenDefault = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Enter", "Space", "Escape", "End", "Home"];
 
     if (codesToPrevenDefault.includes(event.code)) {
       event.preventDefault();
     }
 
     switch (event.code) {
-      case 'ArrowDown':
+      case "ArrowDown":
         if (!showContextMenu) {
           setShowContextMenu(true);
           return;
@@ -782,14 +787,14 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
         return;
 
-      case 'ArrowUp':
+      case "ArrowUp":
         setFocusedContextMenuItem(function (prevState) {
           return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
         });
         return;
 
-      case 'Enter':
-      case 'Space':
+      case "Enter":
+      case "Space":
         if (!showContextMenu) {
           setShowContextMenu(true);
           return;
@@ -800,16 +805,16 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         setShowContextMenu(false);
         return;
 
-      case 'Tab':
-      case 'Escape':
+      case "Tab":
+      case "Escape":
         setShowContextMenu(false);
         return;
 
-      case 'End':
+      case "End":
         setFocusedContextMenuItem(childrenCount - 1);
         return;
 
-      case 'Home':
+      case "Home":
         setFocusedContextMenuItem(0);
         return;
     }
@@ -825,17 +830,18 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onShow && onShow();
     } else {
       onClose && onClose();
+      !hasBeenClosed && setHasBeenClosed(true);
       setFocusedContextMenuItem(-1);
-      anchorEl.current && anchorEl.current.focus();
+      hasBeenClosed && anchorEl.current && anchorEl.current.focus();
     }
   }, [showContextMenu]);
 
   var renderTrigger = function renderTrigger() {
     return React.cloneElement(trigger, {
       id: id,
-      'aria-haspopup': 'true',
-      'aria-controls': id + "-menu",
-      'aria-expanded': showContextMenu,
+      "aria-haspopup": "true",
+      "aria-controls": id + "-menu",
+      "aria-expanded": showContextMenu,
       onClick: function onClick() {
         return setShowContextMenu(!showContextMenu);
       },
@@ -866,7 +872,7 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
     onKeyDown: onArrowNavigation,
-    className: modules_846e6042['context-menu']
+    className: modules_846e6042["context-menu"]
   }), renderTrigger(), createPortal(React.createElement(Popover, {
     placement: placement,
     transformOrigin: transformOrigin,
@@ -874,7 +880,7 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     anchorEl: anchorEl,
     show: showContextMenu
   }, React.createElement("ul", {
-    className: modules_846e6042['menu'],
+    className: modules_846e6042["menu"],
     id: id + "-menu",
     "aria-describedby": id,
     role: "menu"
@@ -912,7 +918,7 @@ var ContextMenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [hasFocus, innerButtonRef, contextMenuOpened]);
   return React.createElement("li", {
     role: "menuitem",
-    className: modules_3e93850e['context-menu-item']
+    className: modules_3e93850e["context-menu-item"]
   }, React.createElement("button", _extends({}, rest, {
     ref: innerButtonRef,
     "data-focus": hasFocus,
@@ -935,13 +941,13 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       to = _ref.to,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      color = _ref$color === void 0 ? "primary" : _ref$color,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'internal' : _ref$type,
+      type = _ref$type === void 0 ? "internal" : _ref$type,
       _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'link' : _ref$display,
+      display = _ref$display === void 0 ? "link" : _ref$display,
       _ref$buttonVariant = _ref.buttonVariant,
-      buttonVariant = _ref$buttonVariant === void 0 ? 'fill' : _ref$buttonVariant,
+      buttonVariant = _ref$buttonVariant === void 0 ? "fill" : _ref$buttonVariant,
       component = _ref.component,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
 
@@ -950,25 +956,25 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return rest.target;
     }
 
-    if (type === 'external') {
-      return '_blank';
+    if (type === "external") {
+      return "_blank";
     }
 
-    return '';
+    return "";
   };
 
   var classNames = [modules_e20967e9[color]];
-  display === 'link' && classNames.push(modules_e20967e9['link']);
-  display === 'button' && classNames.push(modules_e20967e9['button'], modules_e20967e9[buttonVariant]);
-  disabled && classNames.push(modules_e20967e9['disabled']);
+  display === "link" && classNames.push(modules_e20967e9["link"]);
+  display === "button" && classNames.push(modules_e20967e9["button"], modules_e20967e9[buttonVariant]);
+  disabled && classNames.push(modules_e20967e9["disabled"]);
   className && classNames.push(className);
 
   if (component) {
     return React.createElement(component, _extends({}, rest, {
       ref: ref,
       to: to,
-      className: classNames.join(' '),
-      'aria-disabled': disabled,
+      className: classNames.join(" "),
+      "aria-disabled": disabled,
       style: _extends({}, rest.style),
       children: children
     }));
@@ -976,10 +982,10 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("a", _extends({}, rest, {
     ref: ref,
-    download: type === 'download',
-    rel: type === 'external' ? 'noopener noreferer' : undefined,
+    download: type === "download",
+    rel: type === "external" ? "noopener noreferer" : undefined,
     href: !disabled ? to : undefined,
-    className: classNames.join(' '),
+    className: classNames.join(" "),
     "aria-disabled": disabled,
     target: determineTarget(),
     style: _extends({}, rest.style)
@@ -998,11 +1004,11 @@ var _excluded$P = ["children", "color", "variant", "iconSize", "title", "classNa
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      color = _ref$color === void 0 ? "primary" : _ref$color,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+      variant = _ref$variant === void 0 ? "text" : _ref$variant,
       _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
+      iconSize = _ref$iconSize === void 0 ? "m" : _ref$iconSize,
       title = _ref.title,
       className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$P);
@@ -1011,7 +1017,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
   }
 
-  var iconButtonClasses = [modules_f7edfa2f['icon-button'], modules_f7edfa2f[variant], modules_f7edfa2f[color], modules_f7edfa2f['button-' + iconSize]];
+  var iconButtonClasses = [modules_f7edfa2f["icon-button"], modules_f7edfa2f[variant], modules_f7edfa2f[color], modules_f7edfa2f["button-" + iconSize]];
 
   if (className) {
     iconButtonClasses.push(className);
@@ -1019,9 +1025,9 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement(BaseButton, _extends({}, rest, {
     ref: ref,
-    className: iconButtonClasses.join(' ')
+    className: iconButtonClasses.join(" ")
   }), React.createElement(Fragment, null, children, React.createElement("span", {
-    className: modules_35a251a6['sr-only']
+    className: modules_35a251a6["sr-only"]
   }, title)));
 });
 
@@ -1035,12 +1041,12 @@ var generateID = function generateID(length, stringToWeaveIn) {
   }
 
   /** 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 = '';
+  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] : '';
+    var stringCharacter = stringToWeaveIn && stringToWeaveIn[i] !== undefined && !/\s/.test(stringToWeaveIn[i]) ? stringToWeaveIn[i] : "";
     id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
   }
 
@@ -1093,14 +1099,14 @@ var TabButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref.current.focus();
     }
   }, [focussed]);
-  var classNames = [modules_1ddb33b5['tabbutton']];
-  selected && classNames.push(modules_1ddb33b5['selected']);
-  focussed && !selected && classNames.push(modules_1ddb33b5['focussed']);
+  var classNames = [modules_1ddb33b5["tabbutton"]];
+  selected && classNames.push(modules_1ddb33b5["selected"]);
+  focussed && !selected && classNames.push(modules_1ddb33b5["focussed"]);
   className && classNames.push(className);
   return React.createElement("button", _extends({}, rest, {
     "aria-selected": selected,
     key: tabId,
-    className: classNames.join(' '),
+    className: classNames.join(" "),
     ref: ref,
     role: "tab",
     tabIndex: selected ? 0 : -1,
@@ -1130,7 +1136,7 @@ var TabPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
     "aria-labelledby": tabId,
-    className: modules_06ac598d['tabpanel'] + " " + (selected ? modules_06ac598d['selected'] : '') + " " + (className != null ? className : ''),
+    className: modules_06ac598d["tabpanel"] + " " + (selected ? modules_06ac598d["selected"] : "") + " " + (className != null ? className : ""),
     id: tabPanelId,
     role: "tabpanel",
     tabIndex: 0,
@@ -1148,7 +1154,7 @@ var Tabs = function Tabs(_ref) {
   var children = _ref.children,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? 0 : _ref$selected,
-      ariaLabel = _ref['aria-label'],
+      ariaLabel = _ref["aria-label"],
       onTabChange = _ref.onTabChange,
       className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$M);
@@ -1211,24 +1217,24 @@ var Tabs = function Tabs(_ref) {
     var currentFocussedTab = focussedTab === -1 ? selectedTab : focussedTab;
 
     switch (e.code) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         setFocussedTab(currentFocussedTab === min ? max : currentFocussedTab - 1);
         break;
 
-      case 'ArrowRight':
+      case "ArrowRight":
         setFocussedTab(currentFocussedTab === max ? min : currentFocussedTab + 1);
         break;
 
-      case 'Home':
+      case "Home":
         setFocussedTab(min);
         break;
 
-      case 'End':
+      case "End":
         setFocussedTab(max);
         break;
 
-      case 'Space':
-      case 'Enter':
+      case "Space":
+      case "Enter":
         activateTab(currentFocussedTab);
         break;
     }
@@ -1269,17 +1275,17 @@ var Tabs = function Tabs(_ref) {
     });
   });
   return React.createElement("div", _extends({}, rest, {
-    className: modules_d0cc66ee['tabs'] + " " + (className != null ? className : '')
+    className: modules_d0cc66ee["tabs"] + " " + (className != null ? className : "")
   }), React.createElement("div", {
     role: "tablist",
     onKeyDown: handleKeyDown,
     onBlur: handleBlur,
     "aria-label": ariaLabel,
-    className: modules_d0cc66ee['tablist']
+    className: modules_d0cc66ee["tablist"]
   }, React.createElement("div", {
-    className: modules_d0cc66ee['tabdivider']
+    className: modules_d0cc66ee["tabdivider"]
   }), tabButtons, React.createElement("div", {
-    className: modules_d0cc66ee['indicator'],
+    className: modules_d0cc66ee["indicator"],
     ref: indicatorRef,
     "aria-hidden": "true",
     tabIndex: -1,
@@ -1287,7 +1293,7 @@ var Tabs = function Tabs(_ref) {
       width: indicatorWidth
     }, indicatorPosition)
   })), React.createElement("div", {
-    className: modules_d0cc66ee['tabpanels']
+    className: modules_d0cc66ee["tabpanels"]
   }, tabPanels));
 };
 
@@ -1327,7 +1333,7 @@ var TextEllipsis = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("div", _extends({}, rest, {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: modules_46535846['text-ellipsis'] + " " + (className != null ? className : ''),
+    className: modules_46535846["text-ellipsis"] + " " + (className != null ? className : ""),
     ref: ref || textContainer
   }), children, React.createElement(Popover, {
     "aria-hidden": true,
@@ -1335,7 +1341,7 @@ var TextEllipsis = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     show: showPopover,
     role: "tooltip",
     anchorEl: textContainer,
-    className: modules_46535846.popover + " " + (popoverClassName != null ? popoverClassName : '')
+    className: modules_46535846.popover + " " + (popoverClassName != null ? popoverClassName : "")
   }, children));
 });
 
@@ -1357,48 +1363,48 @@ var Tile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tileDescriptionID = _useState[0];
 
   if (!title) {
-    throw new Error('Please make sure to pass a title prop to your Tile component.');
+    throw new Error("Please make sure to pass a title prop to your Tile component.");
   }
 
   var statusMessage = function statusMessage() {
     if (enabled) {
-      return 'Status: enabled';
+      return "Status: enabled";
     }
 
-    return 'Status: disabled';
+    return "Status: disabled";
   };
 
   return React.createElement("article", _extends({}, rest, {
     tabIndex: 0,
     "aria-labelledby": tileDescriptionID,
     ref: ref,
-    className: modules_5f01ab30['tile'] + " " + (loading ? modules_5f01ab30['loading'] : '')
+    className: modules_5f01ab30["tile"] + " " + (loading ? modules_5f01ab30["loading"] : "")
   }), React.createElement("header", {
     style: {
-      justifyContent: enabled === undefined ? 'flex-end' : 'space-between'
+      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 : '')
+    className: modules_5f01ab30["icon"] + " " + (className != null ? className : "")
   }), enabled === false && React.createElement(Icon, {
     color: "var(--greyed-out)",
     icon: Icons.Forbidden,
-    className: modules_5f01ab30['icon'] + " " + (className != null ? className : '')
+    className: modules_5f01ab30["icon"] + " " + (className != null ? className : "")
   }), enabled !== undefined && React.createElement("span", {
     id: tileDescriptionID,
-    className: modules_35a251a6['sr-only']
+    className: modules_35a251a6["sr-only"]
   }, title + ". " + statusMessage()), tileAction != null ? tileAction : null), React.createElement("div", {
-    className: modules_5f01ab30['content']
+    className: modules_5f01ab30["content"]
   }, imageProps && imageProps.src.length > 0 && React.createElement("figure", {
-    className: modules_5f01ab30['image']
+    className: modules_5f01ab30["image"]
   }, !loading && React.createElement("img", _extends({}, imageProps, {
     alt: ""
   }))), (!imageProps || imageProps.src.length === 0) && React.createElement(Icon, {
-    className: modules_5f01ab30['placeholder'],
+    className: modules_5f01ab30["placeholder"],
     icon: Icons.Image
   }), React.createElement("span", {
-    className: modules_5f01ab30['title']
+    className: modules_5f01ab30["title"]
   }, title)));
 });
 
@@ -1420,21 +1426,21 @@ var Tiles = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         key: "placeholder1",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder'
+          src: "placeholder"
         },
         loading: true
       }), React.createElement(Tile, {
         key: "placeholder2",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder'
+          src: "placeholder"
         },
         loading: true
       }), React.createElement(Tile, {
         key: "placeholder3",
         title: "placeholder",
         imageProps: {
-          src: 'placeholder'
+          src: "placeholder"
         },
         loading: true
       })];
@@ -1445,7 +1451,7 @@ var Tiles = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_7b7db5f7['tiles'] + " " + (className != null ? className : ''),
+    className: modules_7b7db5f7["tiles"] + " " + (className != null ? className : ""),
     "aria-live": "polite",
     "aria-busy": loading
   }), renderChildren());
@@ -1458,8 +1464,8 @@ n(css$F,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 var _excluded$I = ["children", "className", "placement", "offset", "transformOrigin", "domRoot", "label"];
 var defaultPosition = {
   placement: {
-    horizontal: 'right',
-    vertical: 'center'
+    horizontal: "right",
+    vertical: "center"
   },
   offset: {
     left: 16,
@@ -1468,8 +1474,8 @@ var defaultPosition = {
     bottom: 0
   },
   transformOrigin: {
-    horizontal: 'left',
-    vertical: 'center'
+    horizontal: "left",
+    vertical: "center"
   }
 };
 var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -1513,14 +1519,14 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (!visible) return;
 
     function escapePressHandler(event) {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         setVisible(false);
       }
     }
 
-    document.addEventListener('keyup', escapePressHandler);
+    document.addEventListener("keyup", escapePressHandler);
     return function () {
-      document.removeEventListener('keyup', escapePressHandler);
+      document.removeEventListener("keyup", escapePressHandler);
     };
   }, [visible]);
   useLayoutEffect(function () {
@@ -1536,14 +1542,14 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onBlur: function onBlur() {
           return setVisible(false);
         },
-        'aria-describedby': identifier,
+        "aria-describedby": identifier,
         tabIndex: 0,
-        className: modules_16974fb0['label']
+        className: modules_16974fb0["label"]
       });
     }
 
     return React.createElement("span", {
-      className: modules_16974fb0['label'],
+      className: modules_16974fb0["label"],
       tabIndex: 0,
       onFocus: function onFocus() {
         return setVisible(true);
@@ -1557,9 +1563,9 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_16974fb0.wrapper + " " + (className != null ? className : '')
+    className: modules_16974fb0.wrapper + " " + (className != null ? className : "")
   }), renderChildren(), React.createElement("div", {
-    className: "" + modules_16974fb0['tooltip-wrapper']
+    className: "" + modules_16974fb0["tooltip-wrapper"]
   }, React.createElement(Icon, {
     ref: relativeElement,
     tag: "div",
@@ -1581,7 +1587,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     "aria-hidden": !visible,
     id: identifier,
-    className: modules_16974fb0.tooltip + " " + (visible ? modules_16974fb0.visible : '')
+    className: modules_16974fb0.tooltip + " " + (visible ? modules_16974fb0.visible : "")
   }, children), domRoot)));
 });
 
@@ -1592,17 +1598,17 @@ n(css$E,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 var _excluded$H = ["variant", "height", "width", "className", "style"];
 var Skeleton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+      variant = _ref$variant === void 0 ? "text" : _ref$variant,
       height = _ref.height,
       width = _ref.width,
       className = _ref.className,
       style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$H);
 
-  var classNames = [modules_1fe82d8f['skeleton']];
-  !height && classNames.push(modules_1fe82d8f['no-height']);
-  variant === 'text' && classNames.push(modules_1fe82d8f['text']);
-  variant === 'circular' && classNames.push(modules_1fe82d8f['circular']);
+  var classNames = [modules_1fe82d8f["skeleton"]];
+  !height && classNames.push(modules_1fe82d8f["no-height"]);
+  variant === "text" && classNames.push(modules_1fe82d8f["text"]);
+  variant === "circular" && classNames.push(modules_1fe82d8f["circular"]);
   className && classNames.push(className);
   return React.createElement("span", _extends({}, rest, {
     "aria-busy": "true",
@@ -1612,7 +1618,7 @@ var Skeleton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       width: width,
       height: height
     }),
-    className: classNames.join(' ')
+    className: classNames.join(" ")
   }));
 });
 
@@ -1631,29 +1637,78 @@ var StatusIndicator = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
 
   return React.createElement("div", _extends({}, rest, {
-    className: modules_372cb0bf['status-indicator'],
+    className: modules_372cb0bf["status-indicator"],
     ref: ref
   }), React.createElement("div", {
-    className: modules_372cb0bf['status-badge'] + " " + modules_372cb0bf[status] + " " + ((_badgeProps$className = badgeProps == null ? void 0 : badgeProps.className) != null ? _badgeProps$className : '')
+    className: modules_372cb0bf["status-badge"] + " " + modules_372cb0bf[status] + " " + ((_badgeProps$className = badgeProps == null ? void 0 : badgeProps.className) != null ? _badgeProps$className : "")
   }), React.createElement(Typography, _extends({}, typographyProps, {
     spacing: {
-      margin: '0'
+      margin: "0"
     },
     variant: "body",
     tag: "div"
   }), (typographyProps == null ? void 0 : typographyProps.children) || children));
 });
 
-var css$C = ".Pagination_module_paginationWrapper__f9057960 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__f9057960 label {\n  margin-bottom: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_formElement__f9057960 {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_formElement__f9057960 button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button span:before,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_perPage__f9057960 {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_page__f9057960 {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_currentValueInput__f9057960 {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_currentValueInput__f9057960 input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__f9057960 {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button {\n    margin: 0 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_perPage__f9057960 {\n    display: flex;\n  }\n}";
-var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__f9057960","form-element":"Pagination_module_formElement__f9057960","total":"Pagination_module_total__f9057960","pagination":"Pagination_module_pagination__f9057960","previous":"Pagination_module_previous__f9057960","next":"Pagination_module_next__f9057960","per-page":"Pagination_module_perPage__f9057960","page":"Pagination_module_page__f9057960","page-size-select":"Pagination_module_pageSizeSelect__f9057960","current-value-input":"Pagination_module_currentValueInput__f9057960"};
+var css$C = ".Pagination_module_paginationWrapper__fb0017ac {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__fb0017ac label {\n  margin-bottom: 0;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_formElement__fb0017ac {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_formElement__fb0017ac button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_total__fb0017ac {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_total__fb0017ac span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_previous__fb0017ac,\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_next__fb0017ac {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_previous__fb0017ac button,\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_next__fb0017ac button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_previous__fb0017ac button span:before,\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_next__fb0017ac button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_perPage__fb0017ac {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_page__fb0017ac {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pageSizeSelect__fb0017ac {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pageSizeSelect__fb0017ac button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pageSizeSelect__fb0017ac button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pageSizeSelect__fb0017ac button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_currentValueInput__fb0017ac {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n  height: auto;\n}\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_currentValueInput__fb0017ac input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__fb0017ac {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__fb0017ac .Pagination_module_total__fb0017ac {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_previous__fb0017ac button,\n.Pagination_module_paginationWrapper__fb0017ac .Pagination_module_pagination__fb0017ac .Pagination_module_next__fb0017ac button {\n    margin: 0 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__fb0017ac .Pagination_module_perPage__fb0017ac {\n    display: flex;\n    margin-right: 0.5rem;\n  }\n}";
+var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__fb0017ac","form-element":"Pagination_module_formElement__fb0017ac","total":"Pagination_module_total__fb0017ac","pagination":"Pagination_module_pagination__fb0017ac","previous":"Pagination_module_previous__fb0017ac","next":"Pagination_module_next__fb0017ac","per-page":"Pagination_module_perPage__fb0017ac","page":"Pagination_module_page__fb0017ac","page-size-select":"Pagination_module_pageSizeSelect__fb0017ac","current-value-input":"Pagination_module_currentValueInput__fb0017ac"};
 n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var css$B = ".Input_module_inputWrapper__ca7df3b0 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 1.25rem;\n  background-color: var(--input-background-color);\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__ca7df3b0:hover:not(:disabled) {\n  border-color: var(--default);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0, .Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0 input {\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_error__ca7df3b0 {\n  border-color: var(--error);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_focus__ca7df3b0 {\n  border-color: var(--color-primary);\n}\n\n.Input_module_input__ca7df3b0 {\n  height: 4rem;\n  border: 0;\n  color: var(--greyed-out);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0;\n}\n.Input_module_input__ca7df3b0:focus:not(:disabled) {\n  outline: none;\n  border-color: var(--color-primary);\n}\n\n.Input_module_error__ca7df3b0 input {\n  color: var(--error);\n  padding-right: 3.75rem;\n}\n.Input_module_error__ca7df3b0 input.Input_module_removeExtraIndent__ca7df3b0 {\n  padding-right: 1.25rem;\n}\n\n.Input_module_warning__ca7df3b0 {\n  color: var(--error);\n  position: absolute;\n  height: 100%;\n  width: 1.25rem;\n  right: 1.25rem;\n  top: 0px;\n  font-size: 1.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Input_module_warning__ca7df3b0:before {\n  height: 1.3125rem;\n}\n.Input_module_warning__ca7df3b0.Input_module_extraIndent__ca7df3b0 {\n  right: 3.75rem;\n}\n\n.Input_module_inputWrapper__ca7df3b0 [data-prefix],\n.Input_module_inputWrapper__ca7df3b0 [data-suffix] {\n  transition: all 0.2s ease-in-out;\n  display: block;\n  z-index: 1;\n}";
-var modules_23691de0 = {"input-wrapper":"Input_module_inputWrapper__ca7df3b0","disabled":"Input_module_disabled__ca7df3b0","error":"Input_module_error__ca7df3b0","focus":"Input_module_focus__ca7df3b0","input":"Input_module_input__ca7df3b0","remove-extra-indent":"Input_module_removeExtraIndent__ca7df3b0","warning":"Input_module_warning__ca7df3b0","extra-indent":"Input_module_extraIndent__ca7df3b0"};
+var css$B = ".Input_module_srOnly__765c4484 {\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.Input_module_hidden__765c4484 {\n  display: none;\n}\n\n.Input_module_slideIn__765c4484 {\n  animation: Input_module_slideIn__765c4484 0.5s forwards;\n}\n\n.Input_module_slideOut__765c4484 {\n  animation: Input_module_slideOut__765c4484 0.5s forwards;\n}\n\n@keyframes Input_module_slideIn__765c4484 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Input_module_slideOut__765c4484 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Input_module_inputWrapper__765c4484 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 4rem;\n  border: 0;\n  border-radius: var(--input-border-radius);\n  background-color: var(--input-background-color);\n  padding: 0 1.25rem;\n  transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__765c4484:hover .Input_module_outline__765c4484 {\n  border-color: var(--default);\n}\n.Input_module_inputWrapper__765c4484 .Input_module_outline__765c4484.Input_module_disabled__765c4484 {\n  border-color: #fff;\n}\n.Input_module_inputWrapper__765c4484 .Input_module_outline__765c4484.Input_module_error__765c4484 {\n  border-color: var(--error);\n}\n.Input_module_inputWrapper__765c4484 .Input_module_outline__765c4484.Input_module_focus__765c4484 {\n  border-width: var(--input-border-width-focus);\n}\n.Input_module_inputWrapper__765c4484 .Input_module_outline__765c4484.Input_module_focus__765c4484:not(.Input_module_error__765c4484) {\n  border-color: var(--color-primary);\n}\n\n.Input_module_input__765c4484 {\n  padding: 0;\n  height: 4rem;\n  color: var(--greyed-out);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  width: 100%;\n  box-sizing: border-box;\n  border: 0;\n  border-radius: var(--input-border-radius);\n}\n.Input_module_input__765c4484:disabled {\n  background-color: var(--disabled);\n  cursor: not-allowed;\n}\n.Input_module_input__765c4484:focus:not(:disabled) {\n  outline: none;\n}\n\n.Input_module_outline__765c4484 {\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  inset: 0;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n}\n\n.Input_module_error__765c4484 input {\n  color: var(--error);\n  padding-right: 3.5rem;\n}\n.Input_module_error__765c4484 input.Input_module_removeExtraIndent__765c4484 {\n  padding-right: 0rem;\n}\n\n.Input_module_warning__765c4484 {\n  color: var(--error);\n  position: absolute;\n  height: 100%;\n  width: 1.25rem;\n  right: 1.25rem;\n  top: 0px;\n  font-size: 1.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Input_module_warning__765c4484:before {\n  height: 1.3125rem;\n}\n.Input_module_warning__765c4484.Input_module_extraIndent__765c4484 {\n  right: 3.75rem;\n}\n\n.Input_module_inputWrapper__765c4484 [data-prefix],\n.Input_module_inputWrapper__765c4484 [data-suffix] {\n  transition: all 0.2s ease-in-out;\n  display: block;\n  z-index: 1;\n}";
+var modules_23691de0 = {"sr-only":"Input_module_srOnly__765c4484","hidden":"Input_module_hidden__765c4484","slide-in":"Input_module_slideIn__765c4484","slide-out":"Input_module_slideOut__765c4484","input-wrapper":"Input_module_inputWrapper__765c4484","outline":"Input_module_outline__765c4484","disabled":"Input_module_disabled__765c4484","error":"Input_module_error__765c4484","focus":"Input_module_focus__765c4484","input":"Input_module_input__765c4484","remove-extra-indent":"Input_module_removeExtraIndent__765c4484","warning":"Input_module_warning__765c4484","extra-indent":"Input_module_extraIndent__765c4484"};
 n(css$B,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$F = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
-var dateTypes = ['date', 'time', 'datetime-local'];
+var dateTypes = ["date", "time", "datetime-local"];
+
+var useErrorOffset = function useErrorOffset(suffix, errorIcon, inputWrapper, error, type, suffixContent) {
+  if (suffixContent === void 0) {
+    suffixContent = "";
+  }
+
+  var _useState = useState({}),
+      errorOffset = _useState[0],
+      setErrorOffset = _useState[1];
+
+  var _useState2 = useState(null),
+      defaultErrorOffset = _useState2[0],
+      setDefaultErrorOffset = _useState2[1];
+
+  var getErrorIconOffset = function getErrorIconOffset() {
+    return parseFloat(getComputedStyle(errorIcon.current).right);
+  };
+
+  var getInputPaddingRight = function getInputPaddingRight(input) {
+    return dateTypes.includes(type) ? 0 : parseFloat(getComputedStyle(input).paddingRight);
+  };
+
+  useEffect(function () {
+    if (errorIcon.current && inputWrapper.current) {
+      var defaultOffset = defaultErrorOffset;
+
+      if (!defaultOffset) {
+        defaultOffset = getErrorIconOffset();
+        setDefaultErrorOffset(defaultOffset);
+      }
+
+      if (suffix.current && suffixContent) {
+        var inputPaddingRight = getInputPaddingRight(inputWrapper.current);
+        var prefixDifference = suffix.current.offsetWidth + inputPaddingRight + defaultOffset;
+        setErrorOffset({
+          right: prefixDifference + "px"
+        });
+      } else {
+        setErrorOffset({
+          right: defaultOffset + "px"
+        });
+      }
+    }
+  }, [suffix.current, errorIcon.current, inputWrapper.current, error, type, suffixContent]);
+  return {
+    errorOffset: errorOffset
+  };
+};
+
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
@@ -1670,34 +1725,44 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onBlur = _ref.onBlur,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$F);
 
-  var _useState = useState(false),
-      focus = _useState[0],
-      setFocus = _useState[1];
+  var _useState3 = useState(false),
+      focus = _useState3[0],
+      setFocus = _useState3[1];
+
+  var inputWrapperRef = useRef(null);
+  var errorIconRef = useRef(null);
+  var suffixRef = useRef(null);
+
+  var _useErrorOffset = useErrorOffset(suffixRef, errorIconRef, inputWrapperRef, error, type, suffix),
+      errorOffset = _useErrorOffset.errorOffset;
 
   useEffect(function () {
     if (name === undefined) {
       throw new Error("Please give your <Input /> component a 'name' attribute");
     }
   }, []);
-  var inputClassNames = [modules_23691de0['input']];
-  dateTypes.includes(type) && inputClassNames.push(modules_23691de0['remove-extra-indent']);
+  var inputClassNames = [modules_23691de0["input"]];
+  dateTypes.includes(type) && inputClassNames.push(modules_23691de0["remove-extra-indent"]);
   className && inputClassNames.push(className);
-  var iconClassNames = [modules_23691de0['warning']];
-  dateTypes.includes(type) && iconClassNames.push(modules_23691de0['extra-indent']);
-  var wrapperClasses = [modules_23691de0['input-wrapper']];
+  var iconClassNames = [modules_23691de0["warning"]];
+  dateTypes.includes(type) && iconClassNames.push(modules_23691de0["extra-indent"]);
+  var wrapperClasses = [modules_23691de0["input-wrapper"]];
+  var outlineClasses = [modules_23691de0["outline"]];
   (wrapperProps == null ? void 0 : wrapperProps.className) && wrapperClasses.push(wrapperProps.className);
-  type === 'hidden' && wrapperClasses.push(modules_35a251a6['hidden']);
-  prefix && wrapperClasses.push(modules_23691de0['prefix']);
-  suffix && wrapperClasses.push(modules_23691de0['suffix']);
-  disabled && wrapperClasses.push(modules_23691de0['disabled']);
-  error && wrapperClasses.push(modules_23691de0['error']);
-  focus && wrapperClasses.push(modules_23691de0['focus']);
-  return React.createElement("div", _extends({}, wrapperProps, {
+  type === "hidden" && wrapperClasses.push(modules_35a251a6["hidden"]);
+  prefix && wrapperClasses.push(modules_23691de0["prefix"]);
+  suffix && wrapperClasses.push(modules_23691de0["suffix"]);
+  disabled && wrapperClasses.push(modules_23691de0["disabled"]) && outlineClasses.push(modules_23691de0["disabled"]);
+  error && wrapperClasses.push(modules_23691de0["error"]) && outlineClasses.push(modules_23691de0["error"]);
+  focus && wrapperClasses.push(modules_23691de0["focus"]) && outlineClasses.push(modules_23691de0["focus"]);
+  return React.createElement("div", _extends({
+    ref: inputWrapperRef
+  }, wrapperProps, {
     style: _extends({}, style),
-    className: modules_23691de0['input-wrapper'] + " " + wrapperClasses.join(' ')
+    className: modules_23691de0["input-wrapper"] + " " + wrapperClasses.join(" ")
   }), prefix && React.createElement("div", {
     "data-prefix": true,
-    className: modules_23691de0['prefix']
+    className: modules_23691de0["prefix"]
   }, React.createElement("span", null, prefix)), React.createElement("input", _extends({}, rest, {
     ref: ref,
     onFocus: function onFocus(event) {
@@ -1712,18 +1777,23 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: type,
     name: name,
     disabled: disabled,
-    className: inputClassNames.join(' ')
+    className: inputClassNames.join(" ")
   })), suffix && React.createElement("div", {
+    ref: suffixRef,
     "data-suffix": true,
-    className: modules_23691de0['suffix']
+    className: modules_23691de0["suffix"]
   }, React.createElement("span", null, suffix)), error && React.createElement(Icon, {
-    className: iconClassNames.join(' '),
+    style: errorOffset,
+    ref: errorIconRef,
+    className: iconClassNames.join(" "),
     icon: Icons.Error
+  }), React.createElement("span", {
+    className: outlineClasses.join(" ")
   }));
 });
 
-var css$A = ".Select_module_srOnly__5b4ea644 {\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.Select_module_hidden__5b4ea644 {\n  display: none;\n}\n\n.Select_module_slideIn__5b4ea644 {\n  animation: Select_module_slideIn__5b4ea644 0.5s forwards;\n}\n\n.Select_module_slideOut__5b4ea644 {\n  animation: Select_module_slideOut__5b4ea644 0.5s forwards;\n}\n\n@keyframes Select_module_slideIn__5b4ea644 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Select_module_slideOut__5b4ea644 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Select_module_select__5b4ea644 {\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  position: relative;\n  box-sizing: border-box;\n  transition: all 0.2s ease-in-out;\n  background-color: #fff;\n  font-size: var(--font-size);\n}\n.Select_module_select__5b4ea644 [data-display] {\n  color: var(--greyed-out);\n}\n.Select_module_select__5b4ea644.Select_module_expanded__5b4ea644 {\n  border: var(--input-border-width) solid transparent;\n}\n.Select_module_select__5b4ea644.Select_module_expanded__5b4ea644 .Select_module_listWrapper__5b4ea644 {\n  background: #fff;\n  opacity: 1;\n  pointer-events: auto;\n}\n.Select_module_select__5b4ea644:not(.Select_module_expanded__5b4ea644) button:focus-visible {\n  outline: 1px solid var(--color-primary);\n}\n.Select_module_select__5b4ea644:hover:not(.Select_module_disabled__5b4ea644):not(.Select_module_expanded__5b4ea644) {\n  border-color: var(--default);\n}\n.Select_module_select__5b4ea644 .Select_module_customSelect__5b4ea644 {\n  width: 100%;\n  min-height: 4rem;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  padding: 0 1.25rem;\n  position: relative;\n  font-size: var(--font-size);\n  border-radius: var(--input-border-radius);\n}\n.Select_module_select__5b4ea644 .Select_module_customSelect__5b4ea644:focus-visible {\n  outline: 0;\n}\n.Select_module_select__5b4ea644 .Select_module_listWrapper__5b4ea644 {\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  opacity: 0;\n  pointer-events: none;\n  overflow: auto;\n}\n.Select_module_select__5b4ea644 ul {\n  box-sizing: border-box;\n  padding: 0.25rem 0;\n  width: 100%;\n  margin: 0;\n  list-style: none;\n  background-color: #fff;\n  border-radius: var(--input-border-radius);\n  color: var(--default);\n  text-align: left;\n  max-height: 21.25rem;\n}\n.Select_module_select__5b4ea644 ul li {\n  padding: 0.5rem 1rem;\n  font-size: var(--font-size);\n  margin: 0;\n  position: relative;\n  line-height: 1;\n  cursor: pointer;\n}\n.Select_module_select__5b4ea644 ul li:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  opacity: 0.05;\n}\n.Select_module_select__5b4ea644 ul li:focus-visible {\n  outline: 1px solid var(--color-primary);\n  outline-offset: -1px;\n}\n.Select_module_select__5b4ea644 ul li:hover:after {\n  background-color: var(--color-primary);\n}\n.Select_module_select__5b4ea644 ul li.Select_module_disabled__5b4ea644 {\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n  pointer-events: none;\n}\n\n.Select_module_selectedOption__5b4ea644:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--color-primary);\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n}\n\n.Select_module_selected__5b4ea644 {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 1.25rem;\n  pointer-events: none;\n}\n\n.Select_module_status__5b4ea644 {\n  position: absolute;\n  top: 50%;\n  right: 1.625rem;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n.Select_module_status__5b4ea644 .Select_module_warning__5b4ea644 {\n  color: var(--error);\n  font-size: 1.25rem;\n}\n.Select_module_status__5b4ea644 .Select_module_triangleDown__5b4ea644 {\n  color: var(--default);\n  font-size: 0.625rem;\n}\n.Select_module_status__5b4ea644 * + * {\n  margin-left: 1.25rem;\n}\n\n.Select_module_placeholder__5b4ea644 {\n  color: var(--greyed-out);\n}\n\n.Select_module_error__5b4ea644 {\n  border-color: var(--error);\n  color: var(--error);\n}\n\n.Select_module_selectSearchWrapper__5b4ea644 + ul {\n  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);\n}\n\n.Select_module_selectSearch__5b4ea644 {\n  width: 100%;\n  box-sizing: border-box;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.Select_module_disabled__5b4ea644 {\n  cursor: not-allowed;\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n}\n.Select_module_disabled__5b4ea644 > * {\n  pointer-events: none;\n}";
-var modules_7db85bb8 = {"sr-only":"Select_module_srOnly__5b4ea644","hidden":"Select_module_hidden__5b4ea644","slide-in":"Select_module_slideIn__5b4ea644","slide-out":"Select_module_slideOut__5b4ea644","select":"Select_module_select__5b4ea644","expanded":"Select_module_expanded__5b4ea644","list-wrapper":"Select_module_listWrapper__5b4ea644","disabled":"Select_module_disabled__5b4ea644","custom-select":"Select_module_customSelect__5b4ea644","selected-option":"Select_module_selectedOption__5b4ea644","selected":"Select_module_selected__5b4ea644","status":"Select_module_status__5b4ea644","warning":"Select_module_warning__5b4ea644","triangle-down":"Select_module_triangleDown__5b4ea644","placeholder":"Select_module_placeholder__5b4ea644","error":"Select_module_error__5b4ea644","select-search-wrapper":"Select_module_selectSearchWrapper__5b4ea644","select-search":"Select_module_selectSearch__5b4ea644"};
+var css$A = ".Select_module_srOnly__cca1abf5 {\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.Select_module_hidden__cca1abf5 {\n  display: none;\n}\n\n.Select_module_slideIn__cca1abf5 {\n  animation: Select_module_slideIn__cca1abf5 0.5s forwards;\n}\n\n.Select_module_slideOut__cca1abf5 {\n  animation: Select_module_slideOut__cca1abf5 0.5s forwards;\n}\n\n@keyframes Select_module_slideIn__cca1abf5 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Select_module_slideOut__cca1abf5 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Select_module_select__cca1abf5 {\n  position: relative;\n  box-sizing: border-box;\n  transition: all 0.2s ease-in-out;\n  border: 0;\n  border-radius: var(--input-border-radius);\n  background-color: var(--input-background-color);\n  font-size: var(--font-size);\n}\n.Select_module_select__cca1abf5 [data-display] {\n  color: var(--greyed-out);\n}\n.Select_module_select__cca1abf5.Select_module_expanded__cca1abf5 {\n  border: var(--input-border-width) solid transparent;\n}\n.Select_module_select__cca1abf5.Select_module_expanded__cca1abf5 .Select_module_listWrapper__cca1abf5 {\n  background: #fff;\n}\n.Select_module_select__cca1abf5:not(.Select_module_expanded__cca1abf5) button:focus-visible:not(.Select_module_error__cca1abf5) {\n  border: var(--input-border-width-focus) solid var(--color-primary);\n  padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));\n}\n.Select_module_select__cca1abf5:hover:not(.Select_module_disabled__cca1abf5):not(.Select_module_expanded__cca1abf5):not(.Select_module_error__cca1abf5) button {\n  border-color: var(--default);\n  border-width: var(--input-border-width);\n}\n.Select_module_select__cca1abf5 .Select_module_customSelect__cca1abf5 {\n  position: relative;\n  width: 100%;\n  min-height: calc(4rem - 2 * var(--input-border-width));\n  border: 0;\n  padding: 0 1.25rem;\n  background-color: transparent;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  font-size: var(--font-size);\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n}\n.Select_module_select__cca1abf5 .Select_module_customSelect__cca1abf5:focus-visible {\n  outline: 0;\n}\n.Select_module_select__cca1abf5 .Select_module_customSelect__cca1abf5.Select_module_error__cca1abf5 {\n  border-color: var(--error);\n  color: var(--error);\n}\n.Select_module_select__cca1abf5 .Select_module_customSelect__cca1abf5.Select_module_error__cca1abf5:focus-visible {\n  border-width: var(--input-border-width-focus);\n}\n.Select_module_select__cca1abf5 .Select_module_listWrapper__cca1abf5 {\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  overflow: auto;\n}\n.Select_module_select__cca1abf5 ul {\n  box-sizing: border-box;\n  padding: 0.25rem 0;\n  width: 100%;\n  margin: 0;\n  list-style: none;\n  background-color: #fff;\n  border-radius: var(--input-border-radius);\n  color: var(--default);\n  text-align: left;\n  max-height: 21.25rem;\n}\n.Select_module_select__cca1abf5 ul li {\n  padding: 0.5rem 1rem;\n  font-size: var(--font-size);\n  margin: 0;\n  position: relative;\n  line-height: 1;\n  cursor: pointer;\n}\n.Select_module_select__cca1abf5 ul li:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  opacity: 0.05;\n}\n.Select_module_select__cca1abf5 ul li:focus-visible {\n  outline: 1px solid var(--color-primary);\n  outline-offset: -1px;\n}\n.Select_module_select__cca1abf5 ul li:hover:after {\n  background-color: var(--color-primary);\n}\n.Select_module_select__cca1abf5 ul li.Select_module_disabled__cca1abf5 {\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n  pointer-events: none;\n}\n\n.Select_module_selectedOption__cca1abf5:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--color-primary);\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n}\n\n.Select_module_selected__cca1abf5 {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.Select_module_status__cca1abf5 {\n  position: absolute;\n  top: 50%;\n  right: 1.625rem;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n.Select_module_status__cca1abf5 .Select_module_warning__cca1abf5 {\n  color: var(--error);\n  font-size: 1.25rem;\n}\n.Select_module_status__cca1abf5 .Select_module_triangleDown__cca1abf5 {\n  color: var(--default);\n  font-size: 0.625rem;\n}\n.Select_module_status__cca1abf5 * + * {\n  margin-left: 1.25rem;\n}\n\n.Select_module_placeholder__cca1abf5 {\n  color: var(--greyed-out);\n}\n\n.Select_module_selectSearchWrapper__cca1abf5 + ul {\n  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);\n}\n\n.Select_module_selectSearch__cca1abf5 {\n  width: 100%;\n  box-sizing: border-box;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.Select_module_disabled__cca1abf5 {\n  cursor: not-allowed;\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n}\n.Select_module_disabled__cca1abf5 > * {\n  pointer-events: none;\n}";
+var modules_7db85bb8 = {"sr-only":"Select_module_srOnly__cca1abf5","hidden":"Select_module_hidden__cca1abf5","slide-in":"Select_module_slideIn__cca1abf5","slide-out":"Select_module_slideOut__cca1abf5","select":"Select_module_select__cca1abf5","expanded":"Select_module_expanded__cca1abf5","list-wrapper":"Select_module_listWrapper__cca1abf5","error":"Select_module_error__cca1abf5","disabled":"Select_module_disabled__cca1abf5","custom-select":"Select_module_customSelect__cca1abf5","selected-option":"Select_module_selectedOption__cca1abf5","selected":"Select_module_selected__cca1abf5","status":"Select_module_status__cca1abf5","warning":"Select_module_warning__cca1abf5","triangle-down":"Select_module_triangleDown__cca1abf5","placeholder":"Select_module_placeholder__cca1abf5","select-search-wrapper":"Select_module_selectSearchWrapper__cca1abf5","select-search":"Select_module_selectSearch__cca1abf5"};
 n(css$A,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$E = ["children", "name", "disabled", "labeledBy", "placeholder", "describedBy", "searchPlaceholder", "searchInputProps", "selectButtonProps", "className", "error", "value", "clearLabel", "onChange", "onClear"];
@@ -1739,7 +1809,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       placeholder = _ref.placeholder,
       describedBy = _ref.describedBy,
       _ref$searchPlaceholde = _ref.searchPlaceholder,
-      searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Search item' : _ref$searchPlaceholde,
+      searchPlaceholder = _ref$searchPlaceholde === void 0 ? "Search item" : _ref$searchPlaceholde,
       searchInputProps = _ref.searchInputProps,
       selectButtonProps = _ref.selectButtonProps,
       className = _ref.className,
@@ -1747,7 +1817,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       error = _ref$error === void 0 ? false : _ref$error,
       value = _ref.value,
       _ref$clearLabel = _ref.clearLabel,
-      clearLabel = _ref$clearLabel === void 0 ? 'Clear selection' : _ref$clearLabel,
+      clearLabel = _ref$clearLabel === void 0 ? "Clear selection" : _ref$clearLabel,
       onChange = _ref.onChange,
       onClear = _ref.onClear,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
@@ -1761,11 +1831,11 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setOpacity = _useState2[1]; // We set opacity because other wise if we calculate the max height you see the list full height for a split second and then it shortens.
 
 
-  var _useState3 = useState(''),
+  var _useState3 = useState(""),
       filter = _useState3[0],
       setFilter = _useState3[1];
 
-  var _useState4 = useState(''),
+  var _useState4 = useState(""),
       display = _useState4[0],
       setDisplay = _useState4[1];
 
@@ -1773,7 +1843,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       listPosition = _useState5[0],
       setListPosition = _useState5[1];
 
-  var _useState6 = useState('none'),
+  var _useState6 = useState("none"),
       optionsListMaxHeight = _useState6[0],
       setOptionsListMaxHeight = _useState6[1];
 
@@ -1801,12 +1871,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var searchInputRef = useRef(null);
 
   var onArrowNavigation = function onArrowNavigation(event) {
-    var codesToPreventDefault = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Space', 'Escape', 'End', 'Home'];
-    var codesToPreventDefaultWhenSearching = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+    var codesToPreventDefault = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Space", "Escape", "End", "Home"];
+    var codesToPreventDefaultWhenSearching = ["ArrowDown", "ArrowUp", "Enter", "Escape"];
     /** If the select is expanded, we also want to control the Tab key */
 
     if (expanded) {
-      codesToPreventDefault.push('Tab');
+      codesToPreventDefault.push("Tab");
     }
     /** We will handle the way certain key strokes affect the Select, unless we're searching */
 
@@ -1821,26 +1891,26 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     if (isSearching) {
       switch (event.code) {
-        case 'ArrowDown':
-        case 'Enter':
+        case "ArrowDown":
+        case "Enter":
           setIsSearching(false);
           setFocusedSelectItem(0);
           return;
 
-        case 'ArrowUp':
+        case "ArrowUp":
           setIsSearching(false);
           setFocusedSelectItem(childrenCount - 1);
           return;
 
-        case 'Escape':
-        case 'Tab':
+        case "Escape":
+        case "Tab":
           setIsSearching(false);
           setExpanded(false);
-          containerReference.current && containerReference.current.querySelector('button').focus();
+          containerReference.current && containerReference.current.querySelector("button").focus();
       }
     } else {
       switch (event.code) {
-        case 'ArrowDown':
+        case "ArrowDown":
           if (!expanded) {
             setExpanded(true);
             return;
@@ -1851,13 +1921,13 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           });
           return;
 
-        case 'ArrowUp':
+        case "ArrowUp":
           setFocusedSelectItem(function (prevState) {
             return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
           });
           return;
 
-        case 'Space':
+        case "Space":
           if (!expanded) {
             setExpanded(true);
             return;
@@ -1865,10 +1935,10 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
           setShouldClick(true);
           setExpanded(false);
-          containerReference.current && containerReference.current.querySelector('button').focus();
+          containerReference.current && containerReference.current.querySelector("button").focus();
           return;
 
-        case 'Tab':
+        case "Tab":
           if (childrenCount >= renderSearchCondition && expanded) {
             setIsSearching(true);
             searchInputRef.current && searchInputRef.current.focus();
@@ -1878,19 +1948,19 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           setExpanded(false);
           return;
 
-        case 'Escape':
+        case "Escape":
           if (expanded) {
             setExpanded(false);
-            containerReference.current && containerReference.current.querySelector('button').focus();
+            containerReference.current && containerReference.current.querySelector("button").focus();
           }
 
           return;
 
-        case 'End':
+        case "End":
           setFocusedSelectItem(childrenCount - 1);
           return;
 
-        case 'Home':
+        case "Home":
           setFocusedSelectItem(0);
           return;
       }
@@ -1918,12 +1988,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     var position = {
       top: 0,
-      bottom: 'initial'
+      bottom: "initial"
     }; // Set the position of the select
 
     if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
       position = {
-        top: 'initial',
+        top: "initial",
         bottom: 0
       };
     }
@@ -1936,8 +2006,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var calculateOptionListMaxHeight = function calculateOptionListMaxHeight(position) {
     // Calculate max height if there's more space below the select
     var listHeight = optionListReference.current.getBoundingClientRect().height;
-    var transformOrigin = position.top !== 'initial' ? 'top' : 'bottom';
-    var availableSpace = transformOrigin === 'top' ? window.innerHeight - containerReference.current.getBoundingClientRect()[transformOrigin] - 16 : containerReference.current.getBoundingClientRect()[transformOrigin] - 16;
+    var transformOrigin = position.top !== "initial" ? "top" : "bottom";
+    var availableSpace = transformOrigin === "top" ? window.innerHeight - containerReference.current.getBoundingClientRect()[transformOrigin] - 16 : containerReference.current.getBoundingClientRect()[transformOrigin] - 16;
 
     if (availableSpace < listHeight) {
       setOptionsListMaxHeight(availableSpace + "px");
@@ -1945,20 +2015,20 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return;
     }
 
-    setOptionsListMaxHeight('none');
+    setOptionsListMaxHeight("none");
     setOpacity(100);
   };
 
   var onOptionChangeHandler = function onOptionChangeHandler(optionRef) {
     if (nativeSelect.current && optionRef.current) {
-      nativeSelect.current.value = optionRef.current.getAttribute('data-value');
-      nativeSelect.current.dispatchEvent(new Event('change', {
+      nativeSelect.current.value = optionRef.current.getAttribute("data-value");
+      nativeSelect.current.dispatchEvent(new Event("change", {
         bubbles: true
       }));
     }
 
     setExpanded(false);
-    containerReference.current && containerReference.current.querySelector('button').focus();
+    containerReference.current && containerReference.current.querySelector("button").focus();
   };
   /**
    * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.
@@ -1967,7 +2037,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   var renderOptions = function renderOptions() {
-    if (isSearching || filter !== '') {
+    if (isSearching || filter !== "") {
       var filteredChildren = React.Children.toArray(children).filter(function (child) {
         return child.props.children.toLowerCase().match(filter.toLowerCase()) !== null;
       });
@@ -2010,9 +2080,9 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return setIsSearching(false);
       },
       onChange: filterResults,
-      className: modules_7db85bb8['select-search'],
+      className: modules_7db85bb8["select-search"],
       wrapperProps: {
-        className: modules_7db85bb8['select-search-wrapper'] + " " + (searchInputProps == null ? void 0 : (_searchInputProps$wra = searchInputProps.wrapperProps) == null ? void 0 : _searchInputProps$wra.className)
+        className: modules_7db85bb8["select-search-wrapper"] + " " + (searchInputProps == null ? void 0 : (_searchInputProps$wra = searchInputProps.wrapperProps) == null ? void 0 : _searchInputProps$wra.className)
       },
       type: "text",
       name: "search-option",
@@ -2027,7 +2097,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var statusIcon = function statusIcon() {
     if (error) {
       return React.createElement(Icon, {
-        className: modules_7db85bb8['warning'],
+        className: modules_7db85bb8["warning"],
         icon: Icons.Warning
       });
     }
@@ -2044,15 +2114,15 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           onClear(e);
         },
         onKeyDown: function onKeyDown(e) {
-          if (e.code === 'Enter' || e.code === 'Space') {
+          if (e.code === "Enter" || e.code === "Space") {
             e.preventDefault();
             e.stopPropagation();
             onClear(e);
-            containerReference.current && containerReference.current.querySelector('button').focus();
+            containerReference.current && containerReference.current.querySelector("button").focus();
           }
         }
       }, React.createElement("span", {
-        className: modules_35a251a6['sr-only']
+        className: modules_35a251a6["sr-only"]
       }, clearLabel), React.createElement(Icon, {
         tag: "span",
         icon: Icons.TimesThin
@@ -2073,12 +2143,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rePositionList();
   }, [expanded]);
   useBodyClick(function (event) {
-    return !event.target.closest('.custom-select') && expanded;
+    return !event.target.closest(".custom-select") && expanded;
   }, function () {
-    setExpanded(!expanded);
+    setExpanded(false);
     setListPosition({
       top: 0,
-      bottom: 'initial'
+      bottom: "initial"
     });
     setOpacity(0);
   }, expanded);
@@ -2095,7 +2165,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: nativeSelect,
     name: name,
     onChange: nativeOnChangeHandler,
-    className: modules_35a251a6['sr-only']
+    className: modules_35a251a6["sr-only"]
   }), React.createElement("option", {
     value: ""
   }), React.Children.map(children, function (child) {
@@ -2105,40 +2175,41 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })), React.createElement("div", _extends({}, filterProps(rest, /^data-/), {
     ref: containerReference,
     onKeyDown: onArrowNavigation,
-    className: "custom-select " + modules_7db85bb8.select + " " + additionalClasses.join(' ') + " " + (className != null ? className : '')
+    className: "custom-select " + modules_7db85bb8.select + " " + additionalClasses.join(" ") + " " + (className != null ? className : "")
   }), React.createElement("button", _extends({}, selectButtonProps, {
     onClick: function onClick() {
       setExpanded(!expanded);
     },
     type: "button",
     name: name,
+    className: modules_7db85bb8["custom-select"] + " " + additionalClasses.join(" ") + " ",
     disabled: disabled,
     "aria-disabled": disabled,
     "aria-invalid": error,
     "aria-expanded": expanded,
     "aria-haspopup": "listbox",
     "aria-labelledby": labeledBy,
-    "aria-describedby": describedBy,
-    className: modules_7db85bb8['custom-select']
+    "aria-describedby": describedBy
   }), React.createElement("div", {
     "data-display": true,
-    className: modules_7db85bb8['selected']
+    className: modules_7db85bb8["selected"]
   }, !value && placeholder && React.createElement("span", {
-    className: modules_7db85bb8['placeholder']
+    className: modules_7db85bb8["placeholder"]
   }, placeholder), (value == null ? void 0 : value.length) > 0 && React.createElement("span", {
     "data-display-inner": true
   }, display)), React.createElement("div", {
-    className: modules_7db85bb8['status']
+    className: modules_7db85bb8["status"]
   }, statusIcon(), React.createElement(Icon, {
-    className: modules_7db85bb8['triangle-down'],
+    className: modules_7db85bb8["triangle-down"],
     icon: Icons.TriangleDown
   }))), React.createElement("div", {
     ref: optionListReference,
-    className: "list-wrapper " + modules_7db85bb8['list-wrapper'],
+    className: "list-wrapper " + modules_7db85bb8["list-wrapper"],
     style: _extends({
-      display: expanded ? 'block' : 'none',
+      display: expanded ? "block" : "none",
       opacity: opacity,
-      maxHeight: optionsListMaxHeight
+      maxHeight: optionsListMaxHeight,
+      pointerEvents: expanded ? "auto" : "none"
     }, listPosition)
   }, Array.isArray(children) && children.length > renderSearchCondition && renderSearch(), React.createElement("ul", {
     role: "listbox"
@@ -2182,10 +2253,10 @@ var Option = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("li", _extends({}, rest, {
     ref: innerOptionRef,
     "data-value": value,
-    className: (isSelected ? modules_7db85bb8['selected-option'] : '') + " " + (disabled ? modules_7db85bb8.disabled : '') + " " + (className != null ? className : ''),
+    className: (isSelected ? modules_7db85bb8["selected-option"] : "") + " " + (disabled ? modules_7db85bb8.disabled : "") + " " + (className != null ? className : ""),
     onClick: onSelectHandler,
     onKeyDownCapture: function onKeyDownCapture(event) {
-      if (event.code === 'Enter') {
+      if (event.code === "Enter") {
         event.stopPropagation();
         event.preventDefault();
         onSelectHandler();
@@ -2211,7 +2282,7 @@ var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("label", _extends({}, rest, {
     ref: ref,
-    className: (hidden ? modules_35a251a6['sr-only'] : '') + " " + modules_aa63a669['label'] + " " + (className != null ? className : '')
+    className: (hidden ? modules_35a251a6["sr-only"] : "") + " " + modules_aa63a669["label"] + " " + (className != null ? className : "")
   }), children);
 });
 
@@ -2239,7 +2310,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
 
   /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
-  var _useState = useState((currentPage == null ? void 0 : currentPage.toString()) || '1'),
+  var _useState = useState((currentPage == null ? void 0 : currentPage.toString()) || "1"),
       internalCurrentPage = _useState[0],
       setInternalCurrentPage = _useState[1];
 
@@ -2254,7 +2325,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var onEnterListener = function onEnterListener(event) {
-    if (event.code === 'Enter') {
+    if (event.code === "Enter") {
       onPageChange(Number(internalCurrentPage));
     }
   };
@@ -2263,15 +2334,15 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var amountOfPages = calculateAmountOfPages();
 
     if (amountOfPages) {
-      var splitCurrentPageTranslation = translate.currentPage.split(' ');
+      var splitCurrentPageTranslation = translate.currentPage.split(" ");
       return splitCurrentPageTranslation.map(function (string) {
-        if (string.includes('%1')) {
+        if (string.includes("%1")) {
           return React.createElement(Fragment, {
             key: string
           }, React.createElement(Label, {
             id: "current-value-input-label",
             htmlFor: "current-value-input",
-            className: modules_35a251a6['sr-only'] + " " + modules_e3c5bce1['current-value-input-label']
+            className: modules_35a251a6["sr-only"] + " " + modules_e3c5bce1["current-value-input-label"]
           }, translate.currentPageLabel), React.createElement(Input, {
             "aria-labelledby": "current-value-input-label",
             key: "input",
@@ -2280,7 +2351,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             size: currentPage == null ? void 0 : currentPage.toString().length,
             max: calculateAmountOfPages(),
             wrapperProps: {
-              className: modules_e3c5bce1['current-value-input']
+              className: modules_e3c5bce1["current-value-input"]
             },
             onKeyUp: onEnterListener,
             onBlur: function onBlur(event) {
@@ -2291,14 +2362,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             name: "current-value-input",
             value: internalCurrentPage,
-            className: modules_e3c5bce1['form-element'] + " " + modules_e3c5bce1['current-page-input']
+            className: modules_e3c5bce1["form-element"] + " " + modules_e3c5bce1["current-page-input"]
           }));
         }
 
-        if (string.includes('%2')) {
+        if (string.includes("%2")) {
           return React.createElement("div", {
             key: string
-          }, React.createElement("strong", null, string.replace('%2', amountOfPages.toString())), "\xA0");
+          }, React.createElement("strong", null, string.replace("%2", amountOfPages.toString())), "\xA0");
         }
 
         return React.createElement("div", {
@@ -2321,20 +2392,20 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_e3c5bce1['pagination-wrapper'] + " " + (className ? className : '')
+    className: modules_e3c5bce1["pagination-wrapper"] + " " + (className ? className : "")
   }), totalElements && React.createElement("div", {
-    className: modules_e3c5bce1['total']
+    className: modules_e3c5bce1["total"]
   }, React.createElement("span", {
     tabIndex: 0
   }, translate.totalItems, ": ", React.createElement("span", null, totalElements))), React.createElement("div", {
-    className: modules_e3c5bce1['pagination']
+    className: modules_e3c5bce1["pagination"]
   }, pageSize && React.createElement("div", {
-    className: modules_e3c5bce1['per-page']
+    className: modules_e3c5bce1["per-page"]
   }, React.createElement(Label, {
     id: "page-size-select-label"
   }, translate.itemsPerPage), React.createElement(Select, {
     labeledBy: "page-size-select-label",
-    className: modules_e3c5bce1['form-element'] + " " + modules_e3c5bce1['page-size-select'],
+    className: modules_e3c5bce1["form-element"] + " " + modules_e3c5bce1["page-size-select"],
     value: pageSize.toString(),
     onChange: onPageSizeChangeHandler
   }, React.createElement(Option, {
@@ -2344,7 +2415,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, "25"), React.createElement(Option, {
     value: "50"
   }, "50"))), React.createElement(Fragment, null, !!(currentPage && currentPage > 2 || currentPage && currentPage > 1) && React.createElement("div", {
-    className: modules_e3c5bce1['previous']
+    className: modules_e3c5bce1["previous"]
   }, currentPage > 2 && React.createElement(IconButton, {
     title: "first",
     onClick: function onClick() {
@@ -2361,10 +2432,10 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "data-paginate": "previous"
   }, React.createElement(Icon, {
     icon: Icons.ChevronLeft
-  }))), totalElements && calculateAmountOfPages() && React.createElement("div", {
-    className: modules_e3c5bce1['page']
+  }))), totalElements && !!calculateAmountOfPages() && React.createElement("div", {
+    className: modules_e3c5bce1["page"]
   }, renderCurrentPageTranslation()), React.createElement("div", {
-    className: modules_e3c5bce1['next']
+    className: modules_e3c5bce1["next"]
   }, !!(currentPage !== undefined && currentPage < calculateAmountOfPages() || currentPage !== undefined && !totalElements) && React.createElement(IconButton, {
     title: "next",
     onClick: function onClick() {
@@ -2430,15 +2501,15 @@ var descriptionId = function descriptionId(id) {
 };
 
 var _excluded$A = ["id", "children", "open", "onClose", "className", "containerProps", "backdropProps", "labelledby", "describedby", "disableEscapeKeyDown", "disableBackdrop", "forceContainerOpen", "zIndex", "domRoot"];
-var SCROLL_PROPERTY_NAME = 'overflow';
-var SCROLL_PROPERTY_VALUE = 'hidden';
+var SCROLL_PROPERTY_NAME = "overflow";
+var SCROLL_PROPERTY_VALUE = "hidden";
 var useSetBodyScroll = function useSetBodyScroll(open) {
   var hideBodyScroll = function hideBodyScroll() {
     document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
   };
 
   var showBodyScroll = function showBodyScroll() {
-    var allModalsClosed = document.querySelectorAll('[role=dialog][data-hidden=false]').length === 0;
+    var allModalsClosed = document.querySelectorAll("[role=dialog][data-hidden=false]").length === 0;
 
     if (allModalsClosed) {
       document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
@@ -2461,7 +2532,7 @@ var BaseModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       open = _ref.open,
       onClose = _ref.onClose,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? "" : _ref$className,
       containerProps = _ref.containerProps,
       backdropProps = _ref.backdropProps,
       labelledby = _ref.labelledby,
@@ -2480,7 +2551,7 @@ var BaseModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useSetBodyScroll(open);
 
   var handleEscKeyPress = function handleEscKeyPress(event) {
-    if (!disableEscapeKeyDown && event.key === 'Escape') {
+    if (!disableEscapeKeyDown && event.key === "Escape") {
       event.stopPropagation();
       onClose && onClose();
     }
@@ -2493,7 +2564,7 @@ var BaseModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return createPortal(React.createElement("div", _extends({}, rest, {
     ref: ref,
     id: id,
-    className: modules_cf1b230e['modal'] + " " + (open ? modules_cf1b230e['visible'] : '') + " " + className,
+    className: modules_cf1b230e["modal"] + " " + (open ? modules_cf1b230e["visible"] : "") + " " + className,
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": labelledby || labelId(id),
@@ -2506,7 +2577,7 @@ var BaseModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       zIndex: zIndex
     }
   }), React.createElement("div", _extends({}, backdropProps, {
-    className: modules_cf1b230e['backdrop'] + " " + ((_backdropProps$classN = backdropProps == null ? void 0 : backdropProps.className) != null ? _backdropProps$classN : ''),
+    className: modules_cf1b230e["backdrop"] + " " + ((_backdropProps$classN = backdropProps == null ? void 0 : backdropProps.className) != null ? _backdropProps$classN : ""),
     onClick: handleBackdropClick
   })), forceContainerOpen ? React.createElement("div", _extends({}, containerProps, {
     "aria-hidden": !open,
@@ -2514,12 +2585,12 @@ var BaseModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: {
       zIndex: zIndex && zIndex + 1
     },
-    className: modules_cf1b230e['container'] + " " + ((_containerProps$class = containerProps == null ? void 0 : containerProps.className) != null ? _containerProps$class : '')
+    className: modules_cf1b230e["container"] + " " + ((_containerProps$class = containerProps == null ? void 0 : containerProps.className) != null ? _containerProps$class : "")
   }), children) : open && React.createElement("div", _extends({}, containerProps, {
     style: {
       zIndex: zIndex && zIndex + 1
     },
-    className: modules_cf1b230e['container'] + " " + ((_containerProps$class2 = containerProps == null ? void 0 : containerProps.className) != null ? _containerProps$class2 : '')
+    className: modules_cf1b230e["container"] + " " + ((_containerProps$class2 = containerProps == null ? void 0 : containerProps.className) != null ? _containerProps$class2 : "")
   }), children)), domRoot);
 });
 
@@ -2556,7 +2627,7 @@ var BaseModalContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       children = _ref.children,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? "" : _ref$className,
       _ref$disableAutoFocus = _ref.disableAutoFocus,
       disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
@@ -2578,7 +2649,7 @@ var BaseModalContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("div", _extends({}, rest, {
     ref: ref || contentRef,
     id: id,
-    className: modules_cf7b8d60['content'] + " " + className,
+    className: modules_cf7b8d60["content"] + " " + className,
     tabIndex: -1
   }), children);
 });
@@ -2591,12 +2662,12 @@ var _excluded$y = ["children", "className"];
 var BaseModalActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? "" : _ref$className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return React.createElement("footer", _extends({}, rest, {
     ref: ref,
-    className: modules_6b4a9db0['actions'] + " " + className
+    className: modules_6b4a9db0["actions"] + " " + className
   }), children);
 });
 
@@ -2612,7 +2683,7 @@ var DialogActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement(BaseModalActions, _extends({}, rest, {
     ref: ref,
-    className: "" + modules_d87e2731['actions'] + (align === 'left' ? ' ' + modules_d87e2731['left'] : '')
+    className: "" + modules_d87e2731["actions"] + (align === "left" ? " " + modules_d87e2731["left"] : "")
   }), children);
 });
 
@@ -2632,10 +2703,10 @@ var DialogTitle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_ff1bcd77['header']
+    className: modules_ff1bcd77["header"]
   }), React.createElement(Typography, {
     id: id,
-    className: modules_ff1bcd77['title'],
+    className: modules_ff1bcd77["title"],
     tag: "h1",
     variant: "h4"
   }, title));
@@ -2680,7 +2751,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var onHiddenInputKeyPress = function onHiddenInputKeyPress(event) {
     /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       primaryAction.onClick();
     }
   };
@@ -2688,9 +2759,9 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement(BaseModal, _extends({}, rest, {
     ref: ref,
     id: dialogId,
-    className: modules_c8de1793['dialog'],
+    className: modules_c8de1793["dialog"],
     containerProps: {
-      className: modules_c8de1793['container']
+      className: modules_c8de1793["container"]
     },
     open: open,
     disableBackdrop: true,
@@ -2702,15 +2773,15 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title: title
   }), React.createElement(BaseModalContent, {
     id: descriptionId(dialogId),
-    className: modules_c8de1793['content'],
+    className: modules_c8de1793["content"],
     disableAutoFocus: true
   }, children), React.createElement(DialogActions, {
     align: alignActions
-  }, alignActions === 'left' ? [PrimaryButton, TertiaryButton] : [TertiaryButton, PrimaryButton]), React.createElement("input", {
+  }, alignActions === "left" ? [PrimaryButton, TertiaryButton] : [TertiaryButton, PrimaryButton]), React.createElement("input", {
     autoFocus: true,
     "aria-hidden": true,
     style: {
-      position: 'absolute',
+      position: "absolute",
       width: 0,
       height: 0,
       opacity: 0
@@ -2735,17 +2806,17 @@ var BaseModalHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_74d5dc9f['header']
+    className: modules_74d5dc9f["header"]
   }), React.createElement("div", {
-    className: modules_74d5dc9f['headline']
+    className: modules_74d5dc9f["headline"]
   }, React.createElement(Typography, {
     id: id,
-    className: modules_74d5dc9f['title'],
+    className: modules_74d5dc9f["title"],
     tag: "h1",
     variant: "h4"
   }, title), React.createElement(IconButton, {
     onClick: onClose,
-    className: modules_74d5dc9f['closeBtn'],
+    className: modules_74d5dc9f["closeBtn"],
     title: "close modal"
   }, React.createElement(Icon, {
     icon: Icons.Times
@@ -2841,29 +2912,33 @@ var SlideInModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       open = _ref.open,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
-  var _useState = useState('hidden'),
+  var _useState = useState("hidden"),
       classHideOnTransition = _useState[0],
       setClassHideOnTransition = _useState[1];
 
-  var onTransitionEnd = function onTransitionEnd() {
-    return setClassHideOnTransition(function (prev) {
-      return prev ? '' : 'hidden';
-    });
+  var containerRef = useRef(null);
+
+  var onTransitionEnd = function onTransitionEnd(e) {
+    if (e.target === containerRef.current) {
+      setClassHideOnTransition(function (prev) {
+        return prev ? "" : "hidden";
+      });
+    }
   };
 
   return React.createElement(BaseModal, _extends({}, rest, {
     id: id,
     open: open,
-    className: modules_0a5af5e0['slide-in-modal'] + " " + (open ? modules_0a5af5e0['visible'] : '') + " " + (!open ? modules_0a5af5e0[classHideOnTransition] : ''),
+    className: modules_0a5af5e0["slide-in-modal"] + " " + (open ? modules_0a5af5e0["visible"] : "") + " " + (!open ? modules_0a5af5e0[classHideOnTransition] : ""),
     containerProps: {
-      className: modules_0a5af5e0['container']
+      className: modules_0a5af5e0["container"]
     },
     backdropProps: {
-      className: modules_0a5af5e0['backdrop-slide']
+      className: modules_0a5af5e0["backdrop-slide"]
     },
     forceContainerOpen: true,
     onTransitionEnd: onTransitionEnd,
-    ref: ref
+    ref: ref || containerRef
   }), children);
 });
 
@@ -2883,12 +2958,12 @@ var SnackbarContainer = function SnackbarContainer(_ref) {
     style: {
       zIndex: zIndex
     },
-    className: modules_531ab449['snackbars'] + " " + modules_531ab449[placement.horizontal] + " " + modules_531ab449[placement.vertical] + " " + (className != null ? className : '')
+    className: modules_531ab449["snackbars"] + " " + modules_531ab449[placement.horizontal] + " " + modules_531ab449[placement.vertical] + " " + (className != null ? className : "")
   }), children);
 };
 
-var css$p = ".SnackbarItem_module_srOnly__196abcec {\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.SnackbarItem_module_hidden__196abcec {\n  display: none;\n}\n\n.SnackbarItem_module_slideIn__196abcec {\n  animation: SnackbarItem_module_slideIn__196abcec 0.5s forwards;\n}\n\n.SnackbarItem_module_slideOut__196abcec {\n  animation: SnackbarItem_module_slideOut__196abcec 0.5s forwards;\n}\n\n@keyframes SnackbarItem_module_slideIn__196abcec {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes SnackbarItem_module_slideOut__196abcec {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.SnackbarItem_module_snackbar__196abcec {\n  padding: 1rem 1.25rem;\n  border-radius: var(--snackbar-border-radius);\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n}\n.SnackbarItem_module_snackbar__196abcec.SnackbarItem_module_info__196abcec {\n  background-color: var(--snackbar-info-background-color);\n}\n.SnackbarItem_module_snackbar__196abcec.SnackbarItem_module_success__196abcec {\n  background-color: var(--snackbar-success-background-color);\n}\n.SnackbarItem_module_snackbar__196abcec.SnackbarItem_module_error__196abcec {\n  background-color: var(--snackbar-error-background-color);\n}\n.SnackbarItem_module_snackbar__196abcec + .SnackbarItem_module_snackbar__196abcec {\n  margin-top: 0.5rem;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_container__196abcec {\n  flex: 1;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec {\n  display: flex;\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec .SnackbarItem_module_closeBtn__196abcec {\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec .SnackbarItem_module_closeBtn__196abcec:hover, .SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec .SnackbarItem_module_closeBtn__196abcec:focus {\n  border-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec .SnackbarItem_module_closeBtn__196abcec:active {\n  border-color: transparent;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_headline__196abcec .SnackbarItem_module_closeBtn__196abcec:active:after {\n  top: 0;\n  height: 100%;\n  background-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_icon__196abcec {\n  color: var(--snackbar-text-color);\n  margin-top: 0.5rem;\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_title__196abcec {\n  color: var(--snackbar-text-color);\n  flex: 1;\n  margin: 0.375rem 1.25rem 0 0.75rem;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_content__196abcec {\n  margin: 0.25rem 0.75rem 0 0.75rem;\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actions__196abcec {\n  margin: 0.5rem 0.75rem 0 0.75rem;\n  text-align: right;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec {\n  border-width: var(--button-border-width);\n  border-style: var(--button-border-style);\n  border-radius: var(--button-border-radius);\n  font-size: var(--button-font-size);\n  line-height: var(--button-font-size);\n  font-weight: 700;\n  margin: 0;\n  padding: 0.625rem 1.25rem;\n  cursor: pointer;\n  transition: color, background-color, border-color 0.2s ease-in-out;\n  font-family: var(--font-family);\n  color: var(--snackbar-text-color);\n  background-color: transparent;\n  border-color: transparent;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:disabled {\n  color: var(--greyed-out);\n  cursor: not-allowed;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:focus-visible {\n  outline: 1px solid var(--snackbar-text-color);\n  outline-offset: 1px;\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:not(:disabled):hover, .SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:not(:disabled):focus {\n  border-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:active {\n  position: relative;\n  border-color: transparent;\n  border: 0;\n  padding: calc(0.625rem + var(--button-border-width)) calc(1.25rem + var(--button-border-width));\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec:active:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--snackbar-text-color);\n  border-radius: var(--button-border-radius);\n  filter: opacity(0.1);\n}\n.SnackbarItem_module_snackbar__196abcec .SnackbarItem_module_actionButton__196abcec + .SnackbarItem_module_actionButton__196abcec {\n  margin-left: 1rem;\n}\n\n@media only screen and (min-width: 37.5em) {\n  .SnackbarItem_module_snackbar__196abcec {\n    width: 37.5rem;\n  }\n}";
-var modules_d6335ff6 = {"sr-only":"SnackbarItem_module_srOnly__196abcec","hidden":"SnackbarItem_module_hidden__196abcec","slide-in":"SnackbarItem_module_slideIn__196abcec","slide-out":"SnackbarItem_module_slideOut__196abcec","snackbar":"SnackbarItem_module_snackbar__196abcec","info":"SnackbarItem_module_info__196abcec","success":"SnackbarItem_module_success__196abcec","error":"SnackbarItem_module_error__196abcec","container":"SnackbarItem_module_container__196abcec","headline":"SnackbarItem_module_headline__196abcec","close-btn":"SnackbarItem_module_closeBtn__196abcec","icon":"SnackbarItem_module_icon__196abcec","title":"SnackbarItem_module_title__196abcec","content":"SnackbarItem_module_content__196abcec","actions":"SnackbarItem_module_actions__196abcec","action-button":"SnackbarItem_module_actionButton__196abcec"};
+var css$p = ".SnackbarItem_module_srOnly__d3fbf6fa {\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.SnackbarItem_module_hidden__d3fbf6fa {\n  display: none;\n}\n\n.SnackbarItem_module_slideIn__d3fbf6fa {\n  animation: SnackbarItem_module_slideIn__d3fbf6fa 0.5s forwards;\n}\n\n.SnackbarItem_module_slideOut__d3fbf6fa {\n  animation: SnackbarItem_module_slideOut__d3fbf6fa 0.5s forwards;\n}\n\n@keyframes SnackbarItem_module_slideIn__d3fbf6fa {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes SnackbarItem_module_slideOut__d3fbf6fa {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.SnackbarItem_module_snackbar__d3fbf6fa {\n  padding: 1rem 1.25rem;\n  border-radius: var(--snackbar-border-radius);\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa.SnackbarItem_module_info__d3fbf6fa {\n  background-color: var(--snackbar-info-background-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa.SnackbarItem_module_success__d3fbf6fa {\n  background-color: var(--snackbar-success-background-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa.SnackbarItem_module_error__d3fbf6fa {\n  background-color: var(--snackbar-error-background-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa + .SnackbarItem_module_snackbar__d3fbf6fa {\n  margin-top: 0.5rem;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_container__d3fbf6fa {\n  flex: 1;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_headline__d3fbf6fa {\n  display: flex;\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa #SnackbarItem_module_closeBtn__d3fbf6fa {\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa #SnackbarItem_module_closeBtn__d3fbf6fa:hover, .SnackbarItem_module_snackbar__d3fbf6fa #SnackbarItem_module_closeBtn__d3fbf6fa:focus {\n  border-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa #SnackbarItem_module_closeBtn__d3fbf6fa:active {\n  border-color: transparent;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa #SnackbarItem_module_closeBtn__d3fbf6fa:active:after {\n  top: 0;\n  height: 100%;\n  background-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_icon__d3fbf6fa {\n  color: var(--snackbar-text-color);\n  margin-top: 0.5rem;\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_title__d3fbf6fa {\n  color: var(--snackbar-text-color);\n  flex: 1;\n  margin: 0.375rem 1.25rem 0 0.75rem;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_content__d3fbf6fa {\n  margin: 0.25rem 0.75rem 0 0.75rem;\n  color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actions__d3fbf6fa {\n  margin: 0.5rem 0.75rem 0 0.75rem;\n  text-align: right;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa {\n  border-width: var(--button-border-width);\n  border-style: var(--button-border-style);\n  border-radius: var(--button-border-radius);\n  font-size: var(--button-font-size);\n  line-height: var(--button-font-size);\n  font-weight: 700;\n  margin: 0;\n  padding: 0.625rem 1.25rem;\n  cursor: pointer;\n  transition: color, background-color, border-color 0.2s ease-in-out;\n  font-family: var(--font-family);\n  color: var(--snackbar-text-color);\n  background-color: transparent;\n  border-color: transparent;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:disabled {\n  color: var(--greyed-out);\n  cursor: not-allowed;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:focus-visible {\n  outline: 1px solid var(--snackbar-text-color);\n  outline-offset: 1px;\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:not(:disabled):hover, .SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:not(:disabled):focus {\n  border-color: var(--snackbar-text-color);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:active {\n  position: relative;\n  border-color: transparent;\n  border: 0;\n  padding: calc(0.625rem + var(--button-border-width)) calc(1.25rem + var(--button-border-width));\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa:active:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--snackbar-text-color);\n  border-radius: var(--button-border-radius);\n  filter: opacity(0.1);\n}\n.SnackbarItem_module_snackbar__d3fbf6fa .SnackbarItem_module_actionButton__d3fbf6fa + .SnackbarItem_module_actionButton__d3fbf6fa {\n  margin-left: 1rem;\n}\n\n@media only screen and (min-width: 37.5em) {\n  .SnackbarItem_module_snackbar__d3fbf6fa {\n    width: 37.5rem;\n  }\n}";
+var modules_d6335ff6 = {"sr-only":"SnackbarItem_module_srOnly__d3fbf6fa","hidden":"SnackbarItem_module_hidden__d3fbf6fa","slide-in":"SnackbarItem_module_slideIn__d3fbf6fa","slide-out":"SnackbarItem_module_slideOut__d3fbf6fa","snackbar":"SnackbarItem_module_snackbar__d3fbf6fa","info":"SnackbarItem_module_info__d3fbf6fa","success":"SnackbarItem_module_success__d3fbf6fa","error":"SnackbarItem_module_error__d3fbf6fa","container":"SnackbarItem_module_container__d3fbf6fa","headline":"SnackbarItem_module_headline__d3fbf6fa","close-btn":"SnackbarItem_module_closeBtn__d3fbf6fa","icon":"SnackbarItem_module_icon__d3fbf6fa","title":"SnackbarItem_module_title__d3fbf6fa","content":"SnackbarItem_module_content__d3fbf6fa","actions":"SnackbarItem_module_actions__d3fbf6fa","action-button":"SnackbarItem_module_actionButton__d3fbf6fa"};
 n(css$p,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var useAnimation = function useAnimation(callback) {
@@ -2906,11 +2981,11 @@ var useAnimation = function useAnimation(callback) {
   useEffect(function () {
     var _animatedObjectRef$cu;
 
-    (_animatedObjectRef$cu = animatedObjectRef.current) == null ? void 0 : _animatedObjectRef$cu.addEventListener('animationend', onAnimationEnd);
+    (_animatedObjectRef$cu = animatedObjectRef.current) == null ? void 0 : _animatedObjectRef$cu.addEventListener("animationend", onAnimationEnd);
     return function () {
       var _animatedObjectRef$cu2;
 
-      return (_animatedObjectRef$cu2 = animatedObjectRef.current) == null ? void 0 : _animatedObjectRef$cu2.removeEventListener('animationend', onAnimationEnd);
+      return (_animatedObjectRef$cu2 = animatedObjectRef.current) == null ? void 0 : _animatedObjectRef$cu2.removeEventListener("animationend", onAnimationEnd);
     };
   }, [animationStarted]);
   return {
@@ -2922,7 +2997,7 @@ var useAnimation = function useAnimation(callback) {
   };
 };
 
-var textColor = 'var(--snackbar-text-color)';
+var textColor = "var(--snackbar-text-color)";
 var SnackbarItem = function SnackbarItem(_ref) {
   var id = _ref.id,
       title = _ref.title,
@@ -2964,11 +3039,11 @@ var SnackbarItem = function SnackbarItem(_ref) {
   };
 
   var getVariantIcon = function getVariantIcon() {
-    if (variant === 'error') {
+    if (variant === "error") {
       return Icons.Error;
     }
 
-    return variant === 'success' ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+    return variant === "success" ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
   };
 
   var actionButtons = actions.map(function (actionProp, index) {
@@ -2980,51 +3055,51 @@ var SnackbarItem = function SnackbarItem(_ref) {
         actionProp.onClick && actionProp.onClick(e);
       },
       children: actionProp.label,
-      className: modules_d6335ff6['action-button']
+      className: modules_d6335ff6["action-button"]
     }));
   });
   return React.createElement("div", {
     ref: ref,
-    className: modules_d6335ff6['snackbar'] + " " + modules_d6335ff6[variant] + " " + (animationStarted ? modules_35a251a6['slide-out'] : modules_35a251a6['slide-in']),
+    className: modules_d6335ff6["snackbar"] + " " + modules_d6335ff6[variant] + " " + (animationStarted ? modules_35a251a6["slide-out"] : modules_35a251a6["slide-in"]),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, React.createElement(Icon, {
     icon: getVariantIcon(),
-    className: modules_d6335ff6['icon']
+    className: modules_d6335ff6["icon"]
   }), React.createElement("div", {
-    className: modules_d6335ff6['container']
+    className: modules_d6335ff6["container"]
   }, React.createElement("div", {
-    className: modules_d6335ff6['headline']
+    className: modules_d6335ff6["headline"]
   }, React.createElement(Typography, {
-    className: modules_d6335ff6['title'],
+    className: modules_d6335ff6["title"],
     variant: "h4",
     tag: "span"
   }, title), React.createElement(IconButton, {
+    id: modules_d6335ff6["close-btn"],
     onClick: function onClick() {
       return startAnimation();
     },
-    className: modules_d6335ff6['close-btn'],
     title: closeButtonTitle
   }, React.createElement(Icon, {
     icon: Icons.Times,
     color: textColor
   }))), !!content && React.createElement(Typography, {
-    className: modules_d6335ff6['content'],
+    className: modules_d6335ff6["content"],
     variant: "body"
   }, content), actionButtons.length > 0 && React.createElement("div", {
-    className: modules_d6335ff6['actions']
+    className: modules_d6335ff6["actions"]
   }, actionButtons)));
 };
 
 var SnackbarProvider = function SnackbarProvider(_temp) {
   var _ref = _temp === void 0 ? {
-    closeButtonTitle: ''
+    closeButtonTitle: ""
   } : _temp,
       closeButtonTitle = _ref.closeButtonTitle,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? {
-    vertical: 'bottom',
-    horizontal: 'center'
+    vertical: "bottom",
+    horizontal: "center"
   } : _ref$placement,
       _ref$autoHideDuration = _ref.autoHideDuration,
       autoHideDuration = _ref$autoHideDuration === void 0 ? {
@@ -3049,7 +3124,7 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
   };
 
   var getDuration = function getDuration(variant, actions, content) {
-    var hasError = variant === 'error';
+    var hasError = variant === "error";
     var hasContentOrActions = content || actions;
 
     if (hasError || hasContentOrActions) {
@@ -3066,7 +3141,7 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
 
     var _options = options,
         _options$variant = _options.variant,
-        variant = _options$variant === void 0 ? 'info' : _options$variant,
+        variant = _options$variant === void 0 ? "info" : _options$variant,
         actions = _options.actions,
         _options$duration = _options.duration,
         duration = _options$duration === void 0 ? getDuration(variant, actions, content) : _options$duration;
@@ -3083,13 +3158,13 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
 
   var enqueueSuccessSnackbar = function enqueueSuccessSnackbar(title, content, options) {
     enqueueSnackbar(title, content, _extends({}, options, {
-      variant: 'success'
+      variant: "success"
     }));
   };
 
   var enqueueErrorSnackbar = function enqueueErrorSnackbar(title, content, options) {
     enqueueSnackbar(title, content, _extends({}, options, {
-      variant: 'error'
+      variant: "error"
     }));
   };
 
@@ -3129,7 +3204,7 @@ var useFormSelector = function useFormSelector(configObject) {
   var _useState = useState(generateID(15, configObject.name)),
       identifier = _useState[0];
 
-  var _useState2 = useState(''),
+  var _useState2 = useState(""),
       describedBy = _useState2[0],
       setDescribedBy = _useState2[1];
 
@@ -3175,7 +3250,7 @@ var FormHelperText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     variant: "sub-text",
     tag: "div",
-    className: modules_aa38270e['form-helper-text'] + " " + (error ? modules_aa38270e.error : '') + " " + (className != null ? className : '')
+    className: modules_aa38270e["form-helper-text"] + " " + (error ? modules_aa38270e.error : "") + " " + (className != null ? className : "")
   }), children);
 });
 
@@ -3204,15 +3279,15 @@ var FormSelectorWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var helperRef = (helperProps == null ? void 0 : helperProps.ref) || createRef();
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: (error ? modules_b6c89faa['error'] : '') + " " + (disabled ? modules_b6c89faa['disabled'] : '') + " " + (className != null ? className : '')
+    className: (error ? modules_b6c89faa["error"] : "") + " " + (disabled ? modules_b6c89faa["disabled"] : "") + " " + (className != null ? className : "")
   }), React.createElement("div", _extends({}, containerProps), children), (helperText || helperProps && helperProps.children) && (!error || parentErrorId || !errorMessage) && React.createElement(FormHelperText, _extends({}, helperProps, {
     ref: helperRef,
     id: "" + identifier,
-    className: modules_b6c89faa['helper-text'] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '') + " " + (error ? modules_b6c89faa['error'] : '')
+    className: modules_b6c89faa["helper-text"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "") + " " + (error ? modules_b6c89faa["error"] : "")
   }), helperProps && helperProps.children || helperText), errorMessage && !parentErrorId && error && React.createElement("span", {
-    className: modules_b6c89faa['error-message']
+    className: modules_b6c89faa["error-message"]
   }, React.createElement(Icon, {
-    className: modules_b6c89faa['error-icon'],
+    className: modules_b6c89faa["error-icon"],
     icon: Icons.Error
   }), React.createElement("span", {
     id: errorId
@@ -3224,7 +3299,7 @@ var _excluded$n = ["children", "name", "helperText", "helperProps", "indetermina
 var isToggle = function isToggle(children) {
   var _children$props;
 
-  return children == null ? void 0 : (_children$props = children.props) == null ? void 0 : _children$props['data-toggle'];
+  return children == null ? void 0 : (_children$props = children.props) == null ? void 0 : _children$props["data-toggle"];
 };
 
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -3263,8 +3338,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
     }
 
-    if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
-      throw new Error('If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.');
+    if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
+      throw new Error("If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.");
     }
   }, []);
 
@@ -3272,19 +3347,19 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (label) {
       return label;
     } else if (children === undefined) {
-      throw new Error('Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.');
+      throw new Error("Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.");
     }
 
-    if (typeof children === 'string') {
+    if (typeof children === "string") {
       return children;
     }
 
-    throw new Error('If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.');
+    throw new Error("If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.");
   };
 
   var renderNestedCheckboxes = function renderNestedCheckboxes() {
     return React.createElement("ul", {
-      className: modules_6238daf1['checkbox-list']
+      className: modules_6238daf1["checkbox-list"]
     }, React.Children.map(children, function (child) {
       return React.createElement("li", null, React.createElement(Checkbox, _extends({}, child.props, {
         parentHelperId: parentHelperId,
@@ -3307,13 +3382,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return React.Children.toArray(children).filter(isToggle);
   };
 
-  var iconClasses = [modules_6238daf1['input'], disabled ? modules_6238daf1['disabled'] : ''];
+  var iconClasses = [modules_6238daf1["input"], disabled ? modules_6238daf1["disabled"] : ""];
   /** Default return value is the default checkbox */
 
   return React.createElement(FormSelectorWrapper, _extends({}, formSelectorWrapperProps, {
-    className: modules_6238daf1['checkbox-wrapper'] + " " + (className ? className : ''),
+    className: modules_6238daf1["checkbox-wrapper"] + " " + (className ? className : ""),
     containerProps: {
-      className: modules_6238daf1['checkbox-container']
+      className: modules_6238daf1["checkbox-container"]
     },
     helperText: helperText,
     helperProps: helperProps,
@@ -3323,27 +3398,27 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     error: error,
     disabled: disabled,
     identifier: identifier,
-    nestedChildren: typeof children === 'object' && !isToggle(children) && renderNestedCheckboxes()
+    nestedChildren: typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
   }), React.createElement("input", _extends({}, rest, {
     ref: ref,
     disabled: disabled,
-    className: modules_6238daf1['native-input'] + " " + (error ? modules_6238daf1['error'] : ''),
+    className: modules_6238daf1["native-input"] + " " + (error ? modules_6238daf1["error"] : ""),
     checked: checked,
     onChange: onChangeHandler,
     "aria-invalid": error,
-    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-checked": indeterminate ? "mixed" : checked,
     "aria-describedby": describedBy,
     id: identifier + "-checkbox",
     name: name,
     type: "checkbox"
   })), renderToggle(), indeterminate && React.createElement(Icon, {
-    className: iconClasses.join(' '),
+    className: iconClasses.join(" "),
     icon: Icons.MinusSquare
   }), checked && !indeterminate && React.createElement(Icon, {
-    className: iconClasses.join(' '),
+    className: iconClasses.join(" "),
     icon: Icons.CheckmarkSquare
   }), !checked && !indeterminate && React.createElement(Icon, {
-    className: iconClasses.join(' '),
+    className: iconClasses.join(" "),
     icon: Icons.Square
   }), React.createElement("label", {
     htmlFor: identifier + "-checkbox"
@@ -3398,7 +3473,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     var nativeEvent = event.nativeEvent || event;
     var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-    Object.defineProperty(clonedEvent, 'target', {
+    Object.defineProperty(clonedEvent, "target", {
       writable: true,
       value: {
         value: value
@@ -3410,9 +3485,9 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   return React.createElement(FormSelectorWrapper, _extends({}, formSelectorWrapperProps, {
-    className: modules_8fc278f9['radio-wrapper'] + " " + (className != null ? className : ''),
+    className: modules_8fc278f9["radio-wrapper"] + " " + (className != null ? className : ""),
     containerProps: {
-      className: modules_8fc278f9['radio-container']
+      className: modules_8fc278f9["radio-container"]
     },
     helperText: helperText,
     helperProps: helperProps,
@@ -3426,7 +3501,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     disabled: disabled,
     tabIndex: 0,
-    className: modules_8fc278f9['native-input'] + " " + (error ? modules_8fc278f9['error'] : ''),
+    className: modules_8fc278f9["native-input"] + " " + (error ? modules_8fc278f9["error"] : ""),
     onChange: onChangeHandler,
     checked: checked,
     "aria-invalid": error ? true : false,
@@ -3437,10 +3512,10 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: identifier + "-radio",
     type: "radio"
   })), checked && React.createElement(Icon, {
-    className: modules_8fc278f9['input'] + " " + (disabled ? modules_8fc278f9['disabled'] : ''),
+    className: modules_8fc278f9["input"] + " " + (disabled ? modules_8fc278f9["disabled"] : ""),
     icon: Icons.Radio
   }), !checked && React.createElement(Icon, {
-    className: modules_8fc278f9['input'] + " " + (disabled ? modules_8fc278f9['disabled'] : ''),
+    className: modules_8fc278f9["input"] + " " + (disabled ? modules_8fc278f9["disabled"] : ""),
     icon: Icons.Circle
   }), React.createElement("label", {
     onClick: onChangeHandler,
@@ -3448,13 +3523,13 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children));
 });
 
-var css$j = ".Textarea_module_textareaWrapper__9509055f {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.Textarea_module_textarea__9509055f {\n  padding: 0.75rem 3.75rem 0.75rem 1.25rem;\n  box-sizing: border-box;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  width: 100%;\n  vertical-align: top;\n  resize: vertical;\n}\n.Textarea_module_textarea__9509055f:disabled {\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n.Textarea_module_textarea__9509055f:active:not(:disabled) {\n  border-color: var(--color-primary);\n}\n.Textarea_module_textarea__9509055f:hover:not(:disabled) {\n  border-color: var(--default);\n}\n.Textarea_module_textarea__9509055f:focus:not(:disabled) {\n  border-color: var(--color-primary);\n  outline: none;\n}\n\n.Textarea_module_error__9509055f {\n  border-color: var(--error);\n  color: var(--error);\n}\n\n.Textarea_module_warning__9509055f {\n  color: var(--error);\n  position: absolute;\n  right: 1.25rem;\n  top: 0.75rem;\n  font-size: 1.25rem;\n}";
-var modules_5a9ee489 = {"textarea-wrapper":"Textarea_module_textareaWrapper__9509055f","textarea":"Textarea_module_textarea__9509055f","error":"Textarea_module_error__9509055f","warning":"Textarea_module_warning__9509055f"};
+var css$j = ".Textarea_module_srOnly__aa539557 {\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.Textarea_module_hidden__aa539557 {\n  display: none;\n}\n\n.Textarea_module_slideIn__aa539557 {\n  animation: Textarea_module_slideIn__aa539557 0.5s forwards;\n}\n\n.Textarea_module_slideOut__aa539557 {\n  animation: Textarea_module_slideOut__aa539557 0.5s forwards;\n}\n\n@keyframes Textarea_module_slideIn__aa539557 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes Textarea_module_slideOut__aa539557 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\n.Textarea_module_textareaWrapper__aa539557 {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n}\n.Textarea_module_textareaWrapper__aa539557:hover .Textarea_module_outline__aa539557 {\n  border-color: var(--default);\n}\n.Textarea_module_textareaWrapper__aa539557 .Textarea_module_outline__aa539557.Textarea_module_disabled__aa539557 {\n  border-color: #fff;\n}\n.Textarea_module_textareaWrapper__aa539557 .Textarea_module_outline__aa539557.Textarea_module_error__aa539557 {\n  border-color: var(--error);\n}\n.Textarea_module_textareaWrapper__aa539557 .Textarea_module_outline__aa539557.Textarea_module_focus__aa539557 {\n  border-width: var(--input-border-width-focus);\n}\n.Textarea_module_textareaWrapper__aa539557 .Textarea_module_outline__aa539557.Textarea_module_focus__aa539557:not(.Textarea_module_error__aa539557) {\n  border-color: var(--color-primary);\n}\n\n.Textarea_module_textarea__aa539557 {\n  padding: 0.75rem 3.75rem 0.75rem 1.25rem;\n  box-sizing: border-box;\n  border: 0;\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  width: 100%;\n  vertical-align: top;\n  resize: vertical;\n}\n.Textarea_module_textarea__aa539557:disabled {\n  background-color: var(--disabled);\n  cursor: not-allowed;\n}\n.Textarea_module_textarea__aa539557:focus:not(:disabled) {\n  outline: none;\n}\n\n.Textarea_module_outline__aa539557 {\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  inset: 0;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n}\n\n.Textarea_module_error__aa539557 {\n  border-color: var(--error);\n  color: var(--error);\n}\n\n.Textarea_module_warning__aa539557 {\n  color: var(--error);\n  position: absolute;\n  right: 1.25rem;\n  top: 0.75rem;\n  font-size: 1.25rem;\n}";
+var modules_5a9ee489 = {"sr-only":"Textarea_module_srOnly__aa539557","hidden":"Textarea_module_hidden__aa539557","slide-in":"Textarea_module_slideIn__aa539557","slide-out":"Textarea_module_slideOut__aa539557","textarea-wrapper":"Textarea_module_textareaWrapper__aa539557","outline":"Textarea_module_outline__aa539557","disabled":"Textarea_module_disabled__aa539557","error":"Textarea_module_error__aa539557","focus":"Textarea_module_focus__aa539557","textarea":"Textarea_module_textarea__aa539557","warning":"Textarea_module_warning__aa539557"};
 n(css$j,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$l = ["error", "disabled", "className", "rows", "wrapperProps", "errorProps"];
+var _excluded$l = ["error", "disabled", "className", "rows", "wrapperProps", "errorProps", "onFocus", "onBlur"];
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _wrapperProps$classNa, _errorProps$className;
+  var _errorProps$className;
 
   var _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
@@ -3465,19 +3540,41 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rows = _ref$rows === void 0 ? 4 : _ref$rows,
       wrapperProps = _ref.wrapperProps,
       errorProps = _ref.errorProps,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
+  var _useState = useState(false),
+      focus = _useState[0],
+      setFocus = _useState[1];
+
+  var wrapperClasses = [modules_5a9ee489["textarea-wrapper"]];
+  var outlineClasses = [modules_5a9ee489["outline"]];
+  (wrapperProps == null ? void 0 : wrapperProps.className) && wrapperClasses.push(wrapperProps.className);
+  disabled && wrapperClasses.push(modules_5a9ee489["disabled"]) && outlineClasses.push(modules_5a9ee489["disabled"]);
+  error && wrapperClasses.push(modules_5a9ee489["error"]) && outlineClasses.push(modules_5a9ee489["error"]);
+  focus && wrapperClasses.push(modules_5a9ee489["focus"]) && outlineClasses.push(modules_5a9ee489["focus"]);
   return React.createElement("div", _extends({}, wrapperProps, {
-    className: modules_5a9ee489['textarea-wrapper'] + " " + ((_wrapperProps$classNa = wrapperProps == null ? void 0 : wrapperProps.className) != null ? _wrapperProps$classNa : '')
+    className: wrapperClasses.join(" ")
   }), React.createElement("textarea", _extends({}, rest, {
     ref: ref,
     rows: rows,
-    className: (error ? modules_5a9ee489['error'] : '') + " " + modules_5a9ee489['textarea'] + " " + (className != null ? className : ''),
-    disabled: disabled
+    className: (error ? modules_5a9ee489["error"] : "") + " " + modules_5a9ee489["textarea"] + " " + (className != null ? className : ""),
+    disabled: disabled,
+    onFocus: function onFocus(event) {
+      setFocus(true);
+      _onFocus && _onFocus(event);
+    },
+    onBlur: function onBlur(event) {
+      setFocus(false);
+      _onBlur && _onBlur(event);
+    }
   })), error && React.createElement(Icon, _extends({}, errorProps, {
-    className: modules_5a9ee489['warning'] + " " + ((_errorProps$className = errorProps == null ? void 0 : errorProps.className) != null ? _errorProps$className : ''),
+    className: modules_5a9ee489["warning"] + " " + ((_errorProps$className = errorProps == null ? void 0 : errorProps.className) != null ? _errorProps$className : ""),
     icon: Icons.Error
-  })));
+  })), React.createElement("span", {
+    className: outlineClasses.join(" ")
+  }));
 });
 
 var css$i = ".Toggle_module_toggleWrapper__59f0ddfa {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.Toggle_module_toggle__59f0ddfa {\n  width: 2rem;\n  min-width: 2rem;\n  height: 1.25rem;\n  background-color: var(--default);\n  border-radius: 2.5rem;\n  position: relative;\n  transition: background-color 0.2s ease-in-out;\n  display: block;\n  pointer-events: none;\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_disabled__59f0ddfa {\n  opacity: 0.25;\n  cursor: not-allowed;\n}\n.Toggle_module_toggle__59f0ddfa:before {\n  content: \"\";\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  display: block;\n  background-color: #fff;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%) translateX(0);\n  left: 0.125rem;\n  transition: transform 0.2s ease-in-out;\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_checked__59f0ddfa {\n  background-color: var(--color-primary);\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_checked__59f0ddfa:before {\n  transform: translateY(-50%) translateX(calc(100% - 0.25rem));\n}\n\n.Toggle_module_toggleHelper__59f0ddfa {\n  margin-left: 2.5rem;\n}\n\n.Toggle_module_checkbox__59f0ddfa {\n  z-index: 10;\n  position: static;\n}\n.Toggle_module_checkbox__59f0ddfa input {\n  width: 2rem;\n}\n.Toggle_module_checkbox__59f0ddfa input ~ [data-icon][aria-hidden] {\n  display: none;\n}\n.Toggle_module_checkbox__59f0ddfa input:focus-visible + * {\n  border-radius: 2.5rem;\n}";
@@ -3493,20 +3590,20 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   return React.createElement("div", {
-    className: modules_b5ebad0d['toggle-wrapper']
+    className: modules_b5ebad0d["toggle-wrapper"]
   }, React.createElement(Checkbox, _extends({}, rest, {
     ref: ref,
     checked: checked,
-    className: modules_b5ebad0d['checkbox'],
+    className: modules_b5ebad0d["checkbox"],
     helperProps: _extends({
-      className: modules_b5ebad0d['toggle-helper']
+      className: modules_b5ebad0d["toggle-helper"]
     }, helperProps),
     disabled: disabled,
     label: children
   }), React.createElement("span", {
     "data-toggle": true,
     "aria-hidden": "true",
-    className: modules_b5ebad0d['toggle'] + " " + (checked ? modules_b5ebad0d['checked'] : '') + " " + (disabled ? modules_b5ebad0d['disabled'] : '') + " "
+    className: modules_b5ebad0d["toggle"] + " " + (checked ? modules_b5ebad0d["checked"] : "") + " " + (disabled ? modules_b5ebad0d["disabled"] : "") + " "
   })));
 });
 
@@ -3522,7 +3619,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       grid = _ref.grid,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align,
+      align = _ref$align === void 0 ? "center" : _ref$align,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   var renderChildren = function renderChildren() {
@@ -3538,7 +3635,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       if (grid && grid > 1) {
         return React.createElement("div", {
-          className: modules_1d54e29e['col-' + grid] + " " + modules_1d54e29e.column
+          className: modules_1d54e29e["col-" + grid] + " " + modules_1d54e29e.column
         }, childElement);
       }
 
@@ -3549,12 +3646,12 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
     "data-formcontrol": true,
-    className: modules_1d54e29e['form-control'] + " " + (className ? className : '') + " " + (grid && grid > 1 ? modules_1d54e29e.grid + " " + modules_1d54e29e['grid-' + grid] : '') + " " + modules_1d54e29e[align]
+    className: modules_1d54e29e["form-control"] + " " + (className ? className : "") + " " + (grid && grid > 1 ? modules_1d54e29e.grid + " " + modules_1d54e29e["grid-" + grid] : "") + " " + modules_1d54e29e[align]
   }), renderChildren());
 });
 
-var css$g = ".InputWrapper_module_inputLabel__eae3fa5c {\n  left: calc(1.25rem + 2px);\n}\n.InputWrapper_module_inputLabel__eae3fa5c.InputWrapper_module_focus__eae3fa5c {\n  color: var(--color-primary);\n}\n\ninput.InputWrapper_module_floatingLabel__eae3fa5c {\n  padding-top: 0.625rem;\n}\n\n.InputWrapper_module_inputWrapperHelper__eae3fa5c {\n  margin-top: 0.25rem;\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c [data-icon]:before {\n  transition: 0.2s ease-in-out;\n  transform: translateY(0px);\n  font-size: 1.125rem;\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c .InputWrapper_module_floatingLabelActive__eae3fa5c [data-icon]:before {\n  transform: translateY(5px);\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c [data-prefix],\n.InputWrapper_module_inputWrapper__eae3fa5c [data-suffix] {\n  transform: translateY(-0.125rem);\n}\n\n.InputWrapper_module_floatingLabelActive__eae3fa5c [data-prefix],\n.InputWrapper_module_floatingLabelActive__eae3fa5c [data-suffix] {\n  padding-top: 0.5rem;\n  transform: translateY(0);\n}";
-var modules_bc06a1ad = {"input-label":"InputWrapper_module_inputLabel__eae3fa5c","focus":"InputWrapper_module_focus__eae3fa5c","floating-label":"InputWrapper_module_floatingLabel__eae3fa5c","input-wrapper-helper":"InputWrapper_module_inputWrapperHelper__eae3fa5c","input-wrapper":"InputWrapper_module_inputWrapper__eae3fa5c","floating-label-active":"InputWrapper_module_floatingLabelActive__eae3fa5c"};
+var css$g = ".InputWrapper_module_srOnly__e331d9b4 {\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.InputWrapper_module_hidden__e331d9b4 {\n  display: none;\n}\n\n.InputWrapper_module_slideIn__e331d9b4 {\n  animation: InputWrapper_module_slideIn__e331d9b4 0.5s forwards;\n}\n\n.InputWrapper_module_slideOut__e331d9b4 {\n  animation: InputWrapper_module_slideOut__e331d9b4 0.5s forwards;\n}\n\n@keyframes InputWrapper_module_slideIn__e331d9b4 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes InputWrapper_module_slideOut__e331d9b4 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\nlabel.InputWrapper_module_inputLabel__e331d9b4.InputWrapper_module_focus__e331d9b4 {\n  color: var(--color-primary);\n}\n\ninput.InputWrapper_module_floatingLabel__e331d9b4 {\n  padding-top: 0.625rem;\n}\n\n.InputWrapper_module_inputWrapperHelper__e331d9b4 {\n  margin-top: 0.25rem;\n}\n\n.InputWrapper_module_inputWrapper__e331d9b4 [data-icon]:before {\n  transition: 0.2s ease-in-out;\n  transform: translateY(0px);\n  font-size: 1.125rem;\n}\n\n.InputWrapper_module_inputWrapper__e331d9b4 .InputWrapper_module_floatingLabelActive__e331d9b4 [data-icon]:before {\n  transform: translateY(5px);\n}\n\n.InputWrapper_module_inputWrapper__e331d9b4 [data-prefix],\n.InputWrapper_module_inputWrapper__e331d9b4 [data-suffix] {\n  transform: translateY(-0.125rem);\n}\n\n.InputWrapper_module_floatingLabelActive__e331d9b4 [data-prefix],\n.InputWrapper_module_floatingLabelActive__e331d9b4 [data-suffix] {\n  padding-top: 0.5rem;\n  transform: translateY(0);\n}";
+var modules_bc06a1ad = {"sr-only":"InputWrapper_module_srOnly__e331d9b4","hidden":"InputWrapper_module_hidden__e331d9b4","slide-in":"InputWrapper_module_slideIn__e331d9b4","slide-out":"InputWrapper_module_slideOut__e331d9b4","input-label":"InputWrapper_module_inputLabel__e331d9b4","focus":"InputWrapper_module_focus__e331d9b4","floating-label":"InputWrapper_module_floatingLabel__e331d9b4","input-wrapper-helper":"InputWrapper_module_inputWrapperHelper__e331d9b4","input-wrapper":"InputWrapper_module_inputWrapper__e331d9b4","floating-label-active":"InputWrapper_module_floatingLabelActive__e331d9b4"};
 n(css$g,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var css$f = ".FormGroup_module_formGroup__65001d8c {\n  position: relative;\n}\n\n.FormGroup_module_error__65001d8c {\n  color: var(--error);\n}\n\n.FormGroup_module_errorMessage__65001d8c {\n  display: flex;\n  align-items: flex-end;\n}\n\n.FormGroup_module_errorIcon__65001d8c {\n  margin-right: 0.5rem;\n  font-size: 1.25rem;\n}\n.FormGroup_module_errorIconBefore__65001d8c {\n  margin-right: 0.5rem;\n}\n.FormGroup_module_errorIconAfter__65001d8c {\n  margin-left: 0.5rem;\n}\n\n.FormGroup_module_defaultHelper__65001d8c {\n  font-size: 0.75rem;\n}";
@@ -3570,7 +3667,7 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       errorId = _ref.errorId,
       errorMessageIcon = _ref.errorMessageIcon,
       _ref$errorMessageIcon = _ref.errorMessageIconPosition,
-      errorMessageIconPosition = _ref$errorMessageIcon === void 0 ? 'before' : _ref$errorMessageIcon,
+      errorMessageIconPosition = _ref$errorMessageIcon === void 0 ? "before" : _ref$errorMessageIcon,
       helperText = _ref.helperText,
       helperId = _ref.helperId,
       helperProps = _ref.helperProps,
@@ -3579,31 +3676,31 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_8377bc0c['form-group'] + " " + (error ? modules_8377bc0c.error : '') + " " + (className != null ? className : '')
+    className: modules_8377bc0c["form-group"] + " " + (error ? modules_8377bc0c.error : "") + " " + (className != null ? className : "")
   }), children, (helperText || errorMessage && error) && React.createElement("div", {
     style: {
       marginLeft: helperIndent + "px"
     },
-    className: modules_8377bc0c['default-helper'] + " " + (helperProps != null && helperProps.className ? helperProps.className : '')
+    className: modules_8377bc0c["default-helper"] + " " + (helperProps != null && helperProps.className ? helperProps.className : "")
   }, helperText && !error && React.createElement(FormHelperText, _extends({}, helperProps, {
-    className: '',
+    className: "",
     id: helperId
   }), helperProps && helperProps.children || helperText), error && errorMessage && React.createElement("span", {
-    className: modules_8377bc0c['error-message']
+    className: modules_8377bc0c["error-message"]
   }, React.createElement("span", {
     className: modules_8377bc0c.message,
     id: errorId
-  }, errorMessageIcon && errorMessageIconPosition === 'before' && React.createElement(Icon, {
-    className: modules_8377bc0c['error-icon'] + " " + modules_8377bc0c['error-icon-before'],
+  }, errorMessageIcon && errorMessageIconPosition === "before" && React.createElement(Icon, {
+    className: modules_8377bc0c["error-icon"] + " " + modules_8377bc0c["error-icon-before"],
     icon: errorMessageIcon
-  }), errorMessage, errorMessageIcon && errorMessageIconPosition === 'after' && React.createElement(Icon, {
-    className: modules_8377bc0c['error-icon'] + " " + modules_8377bc0c['error-icon-after'],
+  }), errorMessage, errorMessageIcon && errorMessageIconPosition === "after" && React.createElement(Icon, {
+    className: modules_8377bc0c["error-icon"] + " " + modules_8377bc0c["error-icon-after"],
     icon: errorMessageIcon
   })))));
 });
 
-var css$e = ".Wrapper_module_floatingWrapper__24a1c678 {\n  position: relative;\n}\n\n.Wrapper_module_floatingLabel__24a1c678 {\n  font-family: var(--font-family);\n  font-size: 1rem;\n  position: absolute;\n  z-index: 1;\n  top: 1.3125rem;\n  left: 1.35rem;\n  transform-origin: left top;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n}\n.Wrapper_module_floatingLabel__24a1c678.Wrapper_module_floatingLabelActive__24a1c678 {\n  font-size: 0.75rem;\n  transform: translateY(-0.75rem);\n  color: var(--default);\n}\n.Wrapper_module_floatingLabel__24a1c678.Wrapper_module_error__24a1c678 {\n  color: var(--error);\n}\n\n.Wrapper_module_wrapper__24a1c678 + fieldset,\n.Wrapper_module_wrapper__24a1c678 + .Wrapper_module_wrapper__24a1c678 {\n  margin-top: 1rem;\n}\n\n.Wrapper_module_required__24a1c678:after {\n  content: \" *\";\n}";
-var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__24a1c678","floating-label":"Wrapper_module_floatingLabel__24a1c678","floating-label-active":"Wrapper_module_floatingLabelActive__24a1c678","error":"Wrapper_module_error__24a1c678","wrapper":"Wrapper_module_wrapper__24a1c678","required":"Wrapper_module_required__24a1c678"};
+var css$e = ".Wrapper_module_floatingWrapper__7d8bd865 {\n  position: relative;\n}\n\n.Wrapper_module_floatingLabel__7d8bd865 {\n  font-family: var(--font-family);\n  font-size: 1rem;\n  position: absolute;\n  z-index: 1;\n  top: 1.3125rem;\n  left: 1.25rem;\n  transform-origin: left top;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n}\n.Wrapper_module_floatingLabel__7d8bd865.Wrapper_module_floatingLabelActive__7d8bd865 {\n  font-size: 0.75rem;\n  transform: translateY(-0.75rem);\n  color: var(--default);\n}\n.Wrapper_module_floatingLabel__7d8bd865.Wrapper_module_error__7d8bd865 {\n  color: var(--error);\n}\n\n.Wrapper_module_wrapper__7d8bd865 + fieldset,\n.Wrapper_module_wrapper__7d8bd865 + .Wrapper_module_wrapper__7d8bd865 {\n  margin-top: 1rem;\n}\n\n.Wrapper_module_required__7d8bd865:after {\n  content: \" *\";\n}";
+var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__7d8bd865","floating-label":"Wrapper_module_floatingLabel__7d8bd865","floating-label-active":"Wrapper_module_floatingLabelActive__7d8bd865","error":"Wrapper_module_error__7d8bd865","wrapper":"Wrapper_module_wrapper__7d8bd865","required":"Wrapper_module_required__7d8bd865"};
 n(css$e,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$h = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
@@ -3639,14 +3736,14 @@ var Wrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var labelClasses = [];
-  floatingLabel && labelClasses.push(modules_e401a244['floating-label']);
-  floatingLabel && floatingLabelActive && labelClasses.push(modules_e401a244['floating-label-active']);
+  floatingLabel && labelClasses.push(modules_e401a244["floating-label"]);
+  floatingLabel && floatingLabelActive && labelClasses.push(modules_e401a244["floating-label-active"]);
   (labelProps == null ? void 0 : labelProps.className) && labelClasses.push(labelProps.className);
-  required && labelClasses.push(modules_e401a244['required']);
-  error && labelClasses.push(modules_e401a244['error']);
+  required && labelClasses.push(modules_e401a244["required"]);
+  error && labelClasses.push(modules_e401a244["error"]);
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_e401a244.wrapper + " " + (className ? className : '')
+    className: modules_e401a244.wrapper + " " + (className ? className : "")
   }), React.createElement(FormGroup, {
     error: error,
     errorMessage: errorMessage,
@@ -3658,9 +3755,9 @@ var Wrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperProps: helperProps,
     helperIndent: helperIndent
   }, React.createElement("div", {
-    className: (floatingLabel ? modules_e401a244['floating-wrapper'] : '') + " " + (innerClassName ? innerClassName : '')
+    className: (floatingLabel ? modules_e401a244["floating-wrapper"] : "") + " " + (innerClassName ? innerClassName : "")
   }, label && React.createElement(Label, _extends({}, labelProps, {
-    className: modules_e401a244.label + " " + labelClasses.join(' '),
+    className: modules_e401a244.label + " " + labelClasses.join(" "),
     htmlFor: name
   }), label), renderChildren())));
 });
@@ -3684,14 +3781,14 @@ var useWrapper = function useWrapper(value, placeholder, type) {
       setHasFocus = _useState5[1];
 
   useEffect(function () {
-    if (value != null && value.length && value.length > 0 || placeholder || type === 'datetime-local' || type === 'time') {
+    if (value != null && value.length && value.length > 0 || placeholder || type === "datetime-local" || type === "time" || type === "date") {
       setFloatingLabelActive(true);
     }
   }, []);
   useEffect(function () {
     if (value != null && value.length && value.length > 0 || hasFocus) {
       setFloatingLabelActive(true);
-    } else if (!placeholder && !hasFocus && type !== 'datetime-local' && type !== 'time') {
+    } else if (!placeholder && !hasFocus && type !== "datetime-local" && type !== "time" && type !== "date") {
       setFloatingLabelActive(false);
     }
   }, [value, placeholder, type, hasFocus]);
@@ -3708,7 +3805,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
 
 var _excluded$g = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus"];
 
-var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive, prefix) {
+var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix) {
   var _useState = useState({}),
       labelOffset = _useState[0],
       setLabelOffset = _useState[1];
@@ -3720,17 +3817,18 @@ var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive
   };
 
   useEffect(function () {
-    if (wrapper.current && input.current && prefix) {
+    if (input.current && prefix) {
       if (floatingLabelActive) {
         resetLabelOffset();
       } else {
-        var prefixDifference = input.current.getBoundingClientRect().left - wrapper.current.getBoundingClientRect().left + 4;
+        var spacingBetweenPrefixAndInput = 4;
+        var prefixDifference = getComputedStyle(input.current).paddingLeft + spacingBetweenPrefixAndInput;
         setLabelOffset({
           left: prefixDifference + "px"
         });
       }
     }
-  }, [wrapper.current, input.current, prefix, floatingLabelActive]);
+  }, [input.current, prefix, floatingLabelActive]);
   return {
     labelOffset: labelOffset
   };
@@ -3765,22 +3863,21 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       prefix = _ref2.prefix,
       suffix = _ref2.suffix;
 
-  var wrapper = useRef(null);
   var input = useRef(null);
   var hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-  var labelClasses = [modules_bc06a1ad['input-label']];
+  var labelClasses = [modules_bc06a1ad["input-label"]];
 
-  var _useLabelOffset = useLabelOffset(ref || wrapper, inputProps && inputProps.ref || input, floatingLabelActive, prefix),
+  var _useLabelOffset = useLabelOffset(inputProps && inputProps.ref || input, floatingLabelActive, prefix),
       labelOffset = _useLabelOffset.labelOffset;
 
-  hasFocus && labelClasses.push(modules_bc06a1ad['focus']);
+  hasFocus && labelClasses.push(modules_bc06a1ad["focus"]);
   return React.createElement(Wrapper, _extends({}, rest, {
-    ref: ref || wrapper,
+    ref: ref,
     name: name,
-    className: modules_bc06a1ad['input-wrapper'] + " " + (className != null ? className : ''),
+    className: modules_bc06a1ad["input-wrapper"] + " " + (className != null ? className : ""),
     labelProps: {
       id: labelId,
-      className: labelClasses.join(' '),
+      className: labelClasses.join(" "),
       style: _extends({}, labelOffset)
     },
     floatingLabelActive: floatingLabelActive,
@@ -3789,14 +3886,14 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperId: helperId,
     helperText: helperText,
     helperProps: _extends({}, helperProps, {
-      className: modules_bc06a1ad['input-wrapper-helper'] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '') + " "
+      className: modules_bc06a1ad["input-wrapper-helper"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "") + " "
     }),
     helperIndent: 20
   }), React.createElement(Input, _extends({}, inputProps, {
-    prefix: hasValueOrActiveFloatingLabel ? prefix : '',
-    suffix: hasValueOrActiveFloatingLabel ? suffix : '',
+    prefix: hasValueOrActiveFloatingLabel ? prefix : "",
+    suffix: hasValueOrActiveFloatingLabel ? suffix : "",
     wrapperProps: {
-      className: (floatingLabelActive ? modules_bc06a1ad['floating-label-active'] : '') + " " + ((_inputProps$wrapperPr = inputProps == null ? void 0 : (_inputProps$wrapperPr2 = inputProps.wrapperProps) == null ? void 0 : _inputProps$wrapperPr2.className) != null ? _inputProps$wrapperPr : '')
+      className: (floatingLabelActive ? modules_bc06a1ad["floating-label-active"] : "") + " " + ((_inputProps$wrapperPr = inputProps == null ? void 0 : (_inputProps$wrapperPr2 = inputProps.wrapperProps) == null ? void 0 : _inputProps$wrapperPr2.className) != null ? _inputProps$wrapperPr : "")
     },
     ref: inputProps && inputProps.ref || input,
     "aria-labelledby": labelId,
@@ -3812,9 +3909,9 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       _onBlur && _onBlur(e);
       setHasFocus(false);
-      e.target.value || e.target.placeholder || inputProps != null && (_inputProps$placehold = inputProps.placeholder) != null && _inputProps$placehold.length || type === 'datetime-local' || type === 'time' ? setFloatingLabelActive(true) : setFloatingLabelActive(false);
+      e.target.value || e.target.placeholder || inputProps != null && (_inputProps$placehold = inputProps.placeholder) != null && _inputProps$placehold.length || type === "datetime-local" || type === "time" || type === "date" ? setFloatingLabelActive(true) : setFloatingLabelActive(false);
     },
-    className: (floatingLabelActive ? modules_bc06a1ad['floating-label'] : '') + " " + ((_inputProps$className = inputProps == null ? void 0 : inputProps.className) != null ? _inputProps$className : ''),
+    className: (floatingLabelActive ? modules_bc06a1ad["floating-label"] : "") + " " + ((_inputProps$className = inputProps == null ? void 0 : inputProps.className) != null ? _inputProps$className : ""),
     name: name,
     error: error,
     id: name,
@@ -3854,10 +3951,10 @@ var SelectWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperId: helperId,
     labelProps: {
       id: labelId,
-      className: modules_ee83d198['select-label']
+      className: modules_ee83d198["select-label"]
     },
     helperProps: _extends({}, helperProps, {
-      className: modules_ee83d198['select-helper-text'] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '')
+      className: modules_ee83d198["select-helper-text"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "")
     }),
     error: error
   }), React.createElement(Select, _extends({}, selectProps, {
@@ -3870,12 +3967,12 @@ var SelectWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onClear && _onClear(e);
     },
     placeholder: placeholder,
-    className: (floatingLabelActive ? modules_ee83d198['floating-label-active'] : '') + " " + ((_selectProps$classNam = selectProps == null ? void 0 : selectProps.className) != null ? _selectProps$classNam : '')
+    className: (floatingLabelActive ? modules_ee83d198["floating-label-active"] : "") + " " + ((_selectProps$classNam = selectProps == null ? void 0 : selectProps.className) != null ? _selectProps$classNam : "")
   }), children));
 });
 
-var css$c = ".TextareaWrapper_module_textareaLabel__453887a8 {\n  left: calc(1.25rem + 1px);\n}\n.TextareaWrapper_module_textareaLabel__453887a8.TextareaWrapper_module_focus__453887a8 {\n  color: var(--color-primary);\n}\n\n.TextareaWrapper_module_textarea__453887a8 {\n  padding-top: 1.625rem;\n}\n.TextareaWrapper_module_textarea__453887a8:active:not(:disabled) {\n  border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textarea__453887a8:hover:not(:disabled) {\n  border-color: var(--default);\n}\n.TextareaWrapper_module_textarea__453887a8:focus:not(:disabled) {\n  outline: none;\n}\n\n.TextareaWrapper_module_textareaHelperText__453887a8 {\n  margin-top: 0.25rem;\n  margin-left: 1.25rem;\n}\n\n.TextareaWrapper_module_textareaWrapper__453887a8 {\n  padding-top: 1.75rem;\n  padding-right: 3.75rem;\n  padding-bottom: 0.75rem;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_error__453887a8 {\n  border-color: var(--error);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_hover__453887a8 {\n  border-color: var(--default);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_focus__453887a8 {\n  border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_disabled__453887a8 {\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n\n.TextareaWrapper_module_errorIcon__453887a8 {\n  top: 1.75rem;\n}";
-var modules_3c8e9c33 = {"textarea-label":"TextareaWrapper_module_textareaLabel__453887a8","focus":"TextareaWrapper_module_focus__453887a8","textarea":"TextareaWrapper_module_textarea__453887a8","textarea-helper-text":"TextareaWrapper_module_textareaHelperText__453887a8","textarea-wrapper":"TextareaWrapper_module_textareaWrapper__453887a8","error":"TextareaWrapper_module_error__453887a8","hover":"TextareaWrapper_module_hover__453887a8","disabled":"TextareaWrapper_module_disabled__453887a8","error-icon":"TextareaWrapper_module_errorIcon__453887a8"};
+var css$c = ".TextareaWrapper_module_srOnly__7bfa5c10 {\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.TextareaWrapper_module_hidden__7bfa5c10 {\n  display: none;\n}\n\n.TextareaWrapper_module_slideIn__7bfa5c10 {\n  animation: TextareaWrapper_module_slideIn__7bfa5c10 0.5s forwards;\n}\n\n.TextareaWrapper_module_slideOut__7bfa5c10 {\n  animation: TextareaWrapper_module_slideOut__7bfa5c10 0.5s forwards;\n}\n\n@keyframes TextareaWrapper_module_slideIn__7bfa5c10 {\n  0% {\n    transform: translateY(100vh);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n@keyframes TextareaWrapper_module_slideOut__7bfa5c10 {\n  0% {\n    transform: translateY(0%);\n  }\n  100% {\n    transform: translateY(100vh);\n  }\n}\nlabel.TextareaWrapper_module_textareaLabel__7bfa5c10.TextareaWrapper_module_focus__7bfa5c10 {\n  color: var(--color-primary);\n}\n\n.TextareaWrapper_module_textarea__7bfa5c10 {\n  padding-top: 1.625rem;\n}\n.TextareaWrapper_module_textarea__7bfa5c10:active:not(:disabled) {\n  border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textarea__7bfa5c10:hover:not(:disabled):not(.TextareaWrapper_module_error__7bfa5c10) {\n  border-color: var(--default);\n}\n.TextareaWrapper_module_textarea__7bfa5c10:focus:not(:disabled) {\n  outline: none;\n}\n\n.TextareaWrapper_module_textareaHelperText__7bfa5c10 {\n  margin-top: 0.25rem;\n  margin-left: 1.25rem;\n}\n\n.TextareaWrapper_module_textareaWrapper__7bfa5c10 {\n  padding-top: 1.75rem;\n  padding-right: 3.75rem;\n  padding-bottom: 0.75rem;\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n}\n.TextareaWrapper_module_textareaWrapper__7bfa5c10.TextareaWrapper_module_error__7bfa5c10 {\n  border-color: var(--error);\n}\n.TextareaWrapper_module_textareaWrapper__7bfa5c10.TextareaWrapper_module_hover__7bfa5c10 {\n  border-color: var(--default);\n}\n.TextareaWrapper_module_textareaWrapper__7bfa5c10.TextareaWrapper_module_focus__7bfa5c10 {\n  border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textareaWrapper__7bfa5c10.TextareaWrapper_module_disabled__7bfa5c10 {\n  color: var(--greyed-out);\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n\n.TextareaWrapper_module_errorIcon__7bfa5c10 {\n  top: 1.75rem;\n}";
+var modules_3c8e9c33 = {"sr-only":"TextareaWrapper_module_srOnly__7bfa5c10","hidden":"TextareaWrapper_module_hidden__7bfa5c10","slide-in":"TextareaWrapper_module_slideIn__7bfa5c10","slide-out":"TextareaWrapper_module_slideOut__7bfa5c10","textarea-label":"TextareaWrapper_module_textareaLabel__7bfa5c10","focus":"TextareaWrapper_module_focus__7bfa5c10","textarea":"TextareaWrapper_module_textarea__7bfa5c10","error":"TextareaWrapper_module_error__7bfa5c10","textarea-helper-text":"TextareaWrapper_module_textareaHelperText__7bfa5c10","textarea-wrapper":"TextareaWrapper_module_textareaWrapper__7bfa5c10","hover":"TextareaWrapper_module_hover__7bfa5c10","disabled":"TextareaWrapper_module_disabled__7bfa5c10","error-icon":"TextareaWrapper_module_errorIcon__7bfa5c10"};
 n(css$c,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$e = ["name", "error", "value", "label", "placeholder", "textareaProps", "helperProps", "onChange", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "disabled"];
@@ -3909,22 +4006,22 @@ var TextareaWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setHover = _useState[1];
 
   var optionalClasses = [];
-  hasFocus && optionalClasses.push(modules_3c8e9c33['focus']);
-  hover && optionalClasses.push(modules_3c8e9c33['hover']);
-  disabled && optionalClasses.push(modules_3c8e9c33['disabled']);
-  error && optionalClasses.push(modules_3c8e9c33['error']);
+  hasFocus && optionalClasses.push(modules_3c8e9c33["focus"]);
+  hover && optionalClasses.push(modules_3c8e9c33["hover"]);
+  disabled && optionalClasses.push(modules_3c8e9c33["disabled"]);
+  error && optionalClasses.push(modules_3c8e9c33["error"]);
   return React.createElement(Wrapper, _extends({}, rest, {
     ref: ref,
     disabled: disabled,
     labelProps: {
       id: labelId,
-      className: modules_3c8e9c33['textarea-label'] + " " + (hasFocus ? modules_3c8e9c33['focus'] : '')
+      className: modules_3c8e9c33["textarea-label"] + " " + optionalClasses.join(" ")
     },
     name: name,
     label: label,
     helperId: helperId,
     helperProps: _extends({}, helperProps, {
-      className: modules_3c8e9c33['textarea-helper-text']
+      className: modules_3c8e9c33["textarea-helper-text"]
     }),
     error: error,
     floatingLabelActive: floatingLabelActive,
@@ -3958,12 +4055,12 @@ var TextareaWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onMouseLeave && _onMouseLeave(e);
       setHover(false);
     },
-    className: modules_3c8e9c33['textarea'],
+    className: modules_3c8e9c33["textarea"] + " " + (error ? modules_3c8e9c33["error"] : ""),
     wrapperProps: {
-      className: modules_3c8e9c33['textarea-wrapper'] + "} " + optionalClasses.join(' ')
+      className: modules_3c8e9c33["textarea-wrapper"] + "} " + optionalClasses.join(" ")
     },
     errorProps: {
-      className: modules_3c8e9c33['error-icon']
+      className: modules_3c8e9c33["error-icon"]
     }
   })));
 });
@@ -3974,12 +4071,12 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       legend = _ref.legend,
       _ref$legendStyle = _ref.legendStyle,
-      legendStyle = _ref$legendStyle === void 0 ? 'body' : _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,
+      background = _ref$background === void 0 ? noBackground ? "" : "#FFF" : _ref$background,
       _ref$noPadding = _ref.noPadding,
       noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
       _ref$disabled = _ref.disabled,
@@ -4020,14 +4117,14 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: _extends({
       backgroundColor: background
     }, rest.style),
-    className: modules_76ea8ff8.fieldset + " " + (noPadding ? modules_76ea8ff8['no-padding'] : '') + " " + (className != null ? className : '')
+    className: modules_76ea8ff8.fieldset + " " + (noPadding ? modules_76ea8ff8["no-padding"] : "") + " " + (className != null ? className : "")
   }), legend && React.createElement("legend", {
-    className: modules_35a251a6['sr-only']
+    className: modules_35a251a6["sr-only"]
   }, legend), legend && !hideLegend && React.createElement(Typography, {
     variant: legendStyle,
     tag: "span",
     "aria-hidden": "true",
-    className: modules_76ea8ff8['legend'] + " " + (required ? modules_76ea8ff8['required'] : '') + " " + (error ? modules_76ea8ff8['error'] : '')
+    className: modules_76ea8ff8["legend"] + " " + (required ? modules_76ea8ff8["required"] : "") + " " + (error ? modules_76ea8ff8["error"] : "")
   }, legend), renderChildren());
 });
 
@@ -4042,7 +4139,7 @@ var Form = function Form(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
   return React.createElement("form", _extends({
-    className: modules_b9bf355c.form + " " + (className != null ? className : '')
+    className: modules_b9bf355c.form + " " + (className != null ? className : "")
   }, rest), children);
 };
 
@@ -4099,7 +4196,7 @@ var RadioWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperId: helperId,
     helperText: helperText,
     helperProps: _extends({}, helperProps, {
-      className: modules_856c8e0e['radio-wrapper-helper'] + " " + (error ? modules_856c8e0e['radio-wrapper-error'] : '') + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '')
+      className: modules_856c8e0e["radio-wrapper-helper"] + " " + (error ? modules_856c8e0e["radio-wrapper-error"] : "") + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "")
     }),
     error: error,
     errorId: errorId,
@@ -4154,7 +4251,7 @@ var CheckboxWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperId: helperId,
     helperText: helperText,
     helperProps: _extends({}, helperProps, {
-      className: modules_8177141b['checkbox-wrapper-helper'] + " " + (error ? modules_8177141b['checkbox-wrapper-error'] : '') + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '')
+      className: modules_8177141b["checkbox-wrapper-helper"] + " " + (error ? modules_8177141b["checkbox-wrapper-error"] : "") + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "")
     }),
     error: error,
     errorMessageIcon: Icons.Error,
@@ -4164,7 +4261,7 @@ var CheckboxWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var setWizardState = function setWizardState(steps, mode, stepScreenReaderLabel) {
   return {
-    type: 'SET_STATE',
+    type: "SET_STATE",
     payload: {
       steps: steps,
       mode: mode,
@@ -4175,17 +4272,17 @@ var setWizardState = function setWizardState(steps, mode, stepScreenReaderLabel)
 
 var changeCurrentStepNo = function changeCurrentStepNo(currentStepNo) {
   return {
-    type: 'CHANGE_CURRENT_STEP_NO',
+    type: "CHANGE_CURRENT_STEP_NO",
     payload: currentStepNo
   };
 };
 
 var reducer = function reducer(state, action) {
   switch (action.type) {
-    case 'SET_STATE':
+    case "SET_STATE":
       return _extends({}, state, action.payload);
 
-    case 'CHANGE_CURRENT_STEP_NO':
+    case "CHANGE_CURRENT_STEP_NO":
       return _extends({}, state, {
         currentStepNo: action.payload
       });
@@ -4315,10 +4412,10 @@ var WizardActions = function WizardActions(_ref) {
   var hasNextStep = nextStepNo !== -1;
   var previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);
   var hasPreviousStep = previousStepNo !== -1;
-  var isLastStepOrEditMode = !hasNextStep || mode === 'edit';
+  var isLastStepOrEditMode = !hasNextStep || mode === "edit";
 
   var changeStepNo = function changeStepNo(direction) {
-    if (direction === 'forward') {
+    if (direction === "forward") {
       hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));
     } else {
       hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));
@@ -4326,12 +4423,12 @@ var WizardActions = function WizardActions(_ref) {
   };
 
   var onNextWrapper = function onNextWrapper() {
-    onNext(currentStepNo) && changeStepNo('forward');
+    onNext(currentStepNo) && changeStepNo("forward");
   };
 
   var onPreviousWrapper = function onPreviousWrapper() {
     onPrevious && onPrevious();
-    changeStepNo('backward');
+    changeStepNo("backward");
   };
 
   var onSaveAndCloseWrapper = function onSaveAndCloseWrapper() {
@@ -4345,7 +4442,7 @@ var WizardActions = function WizardActions(_ref) {
     variant: "outline",
     onClick: onPreviousWrapper
   }, previousButtonLabel), hasNextStep && React.createElement(Button, {
-    variant: mode === 'edit' ? 'outline' : 'fill',
+    variant: mode === "edit" ? "outline" : "fill",
     onClick: onNextWrapper
   }, nextButtonLabel), isLastStepOrEditMode && React.createElement(Button, {
     onClick: onSaveAndCloseWrapper
@@ -4368,54 +4465,54 @@ var BaseWizardSteps = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var getStepState = function getStepState(stepNo) {
     if (currentStepNo === stepNo) {
-      return 'current';
+      return "current";
     } else if (stepNo < currentStepNo) {
-      return 'finished';
+      return "finished";
     }
 
-    return 'future';
+    return "future";
   };
 
   var getStepContent = function getStepContent(stepState, index, disabled) {
     var stepNumberString = String(index + 1);
 
-    if (stepState === 'finished') {
+    if (stepState === "finished") {
       return disabled ? null : React.createElement(Icon, {
-        className: modules_b302f2c5['checkmark'],
+        className: modules_b302f2c5["checkmark"],
         icon: Icons.Checkmark
       });
     } else {
       return React.createElement(Fragment, null, React.createElement("span", {
-        className: modules_35a251a6['sr-only']
+        className: modules_35a251a6["sr-only"]
       }, stepScreenReaderLabel, " "), stepNumberString);
     }
   };
 
   var generatedSteps = steps.map(function (step, index) {
     var stepState = getStepState(index);
-    var disabledStyleClassName = step.disabled ? modules_b302f2c5['disabled'] : '';
-    var clickableClassName = futureStepsClickable ? modules_b302f2c5['clickable'] : '';
+    var disabledStyleClassName = step.disabled ? modules_b302f2c5["disabled"] : "";
+    var clickableClassName = futureStepsClickable ? modules_b302f2c5["clickable"] : "";
     return React.createElement("button", {
-      key: step.label.toLowerCase().replace(/\s/, '-'),
-      disabled: step.disabled || stepState === 'future' && !futureStepsClickable || stepState === 'current',
-      "aria-current": stepState === 'current' ? 'step' : undefined,
+      key: step.label.toLowerCase().replace(/\s/, "-"),
+      disabled: step.disabled || stepState === "future" && !futureStepsClickable || stepState === "current",
+      "aria-current": stepState === "current" ? "step" : undefined,
       onClick: function onClick() {
         return _onClick && _onClick(index);
       },
-      className: modules_b302f2c5['wizard-element'] + " " + modules_b302f2c5[stepState] + " " + clickableClassName + " " + disabledStyleClassName
+      className: modules_b302f2c5["wizard-element"] + " " + modules_b302f2c5[stepState] + " " + clickableClassName + " " + disabledStyleClassName
     }, React.createElement("div", {
-      className: modules_b302f2c5['number-wrapper']
+      className: modules_b302f2c5["number-wrapper"]
     }, React.createElement("span", {
-      className: modules_b302f2c5['number']
+      className: modules_b302f2c5["number"]
     }, getStepContent(stepState, index, step.disabled))), React.createElement("div", {
-      className: modules_b302f2c5['two-line-text-overflow']
+      className: modules_b302f2c5["two-line-text-overflow"]
     }, React.createElement("span", {
-      className: modules_b302f2c5['label']
+      className: modules_b302f2c5["label"]
     }, step.label)));
   });
   return React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_b302f2c5['wizard']
+    className: modules_b302f2c5["wizard"]
   }), generatedSteps);
 });
 
@@ -4442,7 +4539,7 @@ var WizardSteps = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     steps: steps,
     currentStepNo: currentStepNo,
     stepScreenReaderLabel: stepScreenReaderLabel,
-    futureStepsClickable: mode === 'edit'
+    futureStepsClickable: mode === "edit"
   }));
 });
 
@@ -4450,14 +4547,14 @@ var css$7 = ".DataGrid_module_gridWrapper__f048f02f {\n  padding: 1rem 0;\n}\n\n
 var modules_b8d590e8 = {"grid-wrapper":"DataGrid_module_gridWrapper__f048f02f","table-wrapper":"DataGrid_module_tableWrapper__f048f02f","table":"DataGrid_module_table__f048f02f","pagination":"DataGrid_module_pagination__f048f02f"};
 n(css$7,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var css$6 = ".DataGridHeaderCell_module_headerCell__cbbe0d16 {\n  font-weight: normal;\n  text-align: left;\n  padding: 0 0.625rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16:first-child {\n  padding-left: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16:last-child {\n  padding-right: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16 > * {\n  display: inline-flex;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16 > button {\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: none;\n  cursor: pointer;\n}\n\n.DataGridHeaderCell_module_headline__cbbe0d16 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1.5;\n  font-weight: 700;\n  color: var(--default);\n}\n\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0.5rem;\n  justify-content: center;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 > * {\n  font-size: 0.625rem;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16 {\n  color: var(--greyed-out);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16.DataGridHeaderCell_module_active__cbbe0d16 {\n  color: var(--color-primary);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16.DataGridHeaderCell_module_hidden__cbbe0d16 {\n  visibility: hidden;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridHeaderCell_module_headerCell__cbbe0d16:first-child {\n    padding-left: 1.25rem;\n  }\n  .DataGridHeaderCell_module_headerCell__cbbe0d16:last-child {\n    padding-right: 1.25rem;\n  }\n}";
-var modules_4fa6e81a = {"header-cell":"DataGridHeaderCell_module_headerCell__cbbe0d16","headline":"DataGridHeaderCell_module_headline__cbbe0d16","sorting-indicator-container":"DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16","indicator":"DataGridHeaderCell_module_indicator__cbbe0d16","active":"DataGridHeaderCell_module_active__cbbe0d16","hidden":"DataGridHeaderCell_module_hidden__cbbe0d16"};
+var css$6 = ".DataGridHeaderCell_module_headerCell__24249a03 {\n  font-weight: normal;\n  text-align: left;\n  padding: 0 0.625rem;\n}\n.DataGridHeaderCell_module_headerCell__24249a03:first-child {\n  padding-left: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__24249a03:last-child {\n  padding-right: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__24249a03 > * {\n  display: inline-flex;\n}\n.DataGridHeaderCell_module_headerCell__24249a03 > button {\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n}\n\n.DataGridHeaderCell_module_headline__24249a03 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1.5;\n  font-weight: 700;\n  color: var(--default);\n}\n\n.DataGridHeaderCell_module_sortingIndicatorContainer__24249a03 {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0.5rem;\n  justify-content: center;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__24249a03 > * {\n  font-size: 0.625rem;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__24249a03 .DataGridHeaderCell_module_indicator__24249a03 {\n  color: var(--greyed-out);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__24249a03 .DataGridHeaderCell_module_indicator__24249a03.DataGridHeaderCell_module_active__24249a03 {\n  color: var(--color-primary);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__24249a03 .DataGridHeaderCell_module_indicator__24249a03.DataGridHeaderCell_module_hidden__24249a03 {\n  visibility: hidden;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridHeaderCell_module_headerCell__24249a03:first-child {\n    padding-left: 1.25rem;\n  }\n  .DataGridHeaderCell_module_headerCell__24249a03:last-child {\n    padding-right: 1.25rem;\n  }\n}";
+var modules_4fa6e81a = {"header-cell":"DataGridHeaderCell_module_headerCell__24249a03","headline":"DataGridHeaderCell_module_headline__24249a03","sorting-indicator-container":"DataGridHeaderCell_module_sortingIndicatorContainer__24249a03","indicator":"DataGridHeaderCell_module_indicator__24249a03","active":"DataGridHeaderCell_module_active__24249a03","hidden":"DataGridHeaderCell_module_hidden__24249a03"};
 n(css$6,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$7 = ["headline", "name", "disableSorting", "activeSortDirection", "onSort"];
 var ariaSortMapping = {
-  ASC: 'ascending',
-  DESC: 'descending'
+  ASC: "ascending",
+  DESC: "descending"
 };
 var DataGridHeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var headline = _ref.headline,
@@ -4473,28 +4570,28 @@ var DataGridHeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var sortingIndicator = function sortingIndicator() {
     var getSortingIndicatorClasses = function getSortingIndicatorClasses(direction) {
-      var sortingIndicatorClasses = [modules_4fa6e81a['indicator']];
-      activeSortDirection && sortingIndicatorClasses.push(activeSortDirection === direction ? modules_4fa6e81a['active'] : modules_4fa6e81a['hidden']);
+      var sortingIndicatorClasses = [modules_4fa6e81a["indicator"]];
+      activeSortDirection && sortingIndicatorClasses.push(activeSortDirection === direction ? modules_4fa6e81a["active"] : modules_4fa6e81a["hidden"]);
       return sortingIndicatorClasses;
     };
 
     return React.createElement(Fragment, null, React.createElement(Icon, {
-      className: getSortingIndicatorClasses('ASC').join(' '),
+      className: getSortingIndicatorClasses("ASC").join(" "),
       icon: Icons.TriangleUp
     }), React.createElement(Icon, {
-      className: getSortingIndicatorClasses('DESC').join(' '),
+      className: getSortingIndicatorClasses("DESC").join(" "),
       icon: Icons.TriangleDown
     }));
   };
 
   var innerContent = React.createElement(Fragment, null, React.createElement("span", {
-    className: modules_4fa6e81a['headline']
+    className: modules_4fa6e81a["headline"]
   }, headline), !disableSorting && React.createElement("div", {
-    className: modules_4fa6e81a['sorting-indicator-container']
+    className: modules_4fa6e81a["sorting-indicator-container"]
   }, sortingIndicator()));
   return React.createElement("th", _extends({}, rest, {
     ref: ref,
-    className: modules_4fa6e81a['header-cell'],
+    className: modules_4fa6e81a["header-cell"],
     "aria-sort": activeSortDirection && ariaSortMapping[activeSortDirection]
   }), disableSorting ? React.createElement("div", {
     key: name
@@ -4504,12 +4601,12 @@ var DataGridHeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, innerContent));
 });
 
-var css$5 = ".DataGridHeader_module_thead__e75f00b8::after {\n  content: \"\";\n  position: absolute;\n  top: 2.5rem;\n  width: calc(100% - 2rem);\n  left: 1rem;\n  border-bottom: 1px solid #c3c3c7;\n}\n\n.DataGridHeader_module_row__e75f00b8 {\n  height: 2.5rem;\n}\n\n.DataGridHeader_module_contextMenu__e75f00b8 {\n  width: 4.125rem;\n  box-sizing: border-box;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridHeader_module_thead__e75f00b8::after {\n    width: calc(100% - 2.5rem);\n    left: 1.25rem;\n  }\n}";
-var modules_bec66042 = {"thead":"DataGridHeader_module_thead__e75f00b8","row":"DataGridHeader_module_row__e75f00b8","context-menu":"DataGridHeader_module_contextMenu__e75f00b8"};
+var css$5 = ".DataGridHeader_module_thead__8c44381b::after {\n  content: \"\";\n  position: absolute;\n  width: calc(100% - 2rem);\n  left: 1rem;\n  border-bottom: 1px solid #c3c3c7;\n}\n\n.DataGridHeader_module_row__8c44381b {\n  height: 2.5rem;\n}\n\n.DataGridHeader_module_contextMenu__8c44381b {\n  width: 4.125rem;\n  box-sizing: border-box;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridHeader_module_thead__8c44381b::after {\n    width: calc(100% - 2.5rem);\n    left: 1.25rem;\n  }\n}";
+var modules_bec66042 = {"thead":"DataGridHeader_module_thead__8c44381b","row":"DataGridHeader_module_row__8c44381b","context-menu":"DataGridHeader_module_contextMenu__8c44381b"};
 n(css$5,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$6 = ["initialSort", "onSort", "headers", "disableContextMenuColumn", "enableMultiSorting", "spacing"];
-var sortingStates = [undefined, 'ASC', 'DESC'];
+var sortingStates = [undefined, "ASC", "DESC"];
 var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var initialSort = _ref.initialSort,
       onSort = _ref.onSort,
@@ -4589,15 +4686,15 @@ var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   return React.createElement("thead", _extends({}, rest, {
     ref: ref,
-    className: modules_bec66042['thead']
+    className: modules_bec66042["thead"]
   }), React.createElement("tr", {
-    className: modules_bec66042['row']
+    className: modules_bec66042["row"]
   }, headerCells, !disableContextMenuColumn && React.createElement("td", {
     style: {
       paddingRight: spacing == null ? void 0 : spacing.paddingRight
     },
     "aria-label": "context menu",
-    className: modules_bec66042['context-menu']
+    className: modules_bec66042["context-menu"]
   })));
 });
 
@@ -4605,8 +4702,8 @@ var css$4 = ".DataGridActions_module_actions__a2bfe2f8 {\n  margin-bottom: 1rem;
 var modules_3f552d89 = {"actions":"DataGridActions_module_actions__a2bfe2f8","left-actions":"DataGridActions_module_leftActions__a2bfe2f8","right-actions":"DataGridActions_module_rightActions__a2bfe2f8","desktop":"DataGridActions_module_desktop__a2bfe2f8","mobile":"DataGridActions_module_mobile__a2bfe2f8"};
 n(css$4,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var css$3 = ".DataGridColumnsToggle_module_popover__89304f63 {\n  background-color: var(--modal-background-color);\n  z-index: 1;\n  min-width: 17.5rem;\n}\n\n.DataGridColumnsToggle_module_backdrop__89304f63 {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background-color: transparent;\n}\n\n.DataGridColumnsToggle_module_header__89304f63 {\n  min-width: 5rem;\n  padding: 1rem 0.5rem 1rem 1.5rem;\n  background-color: var(--modal-header-background-color);\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n}\n\n.DataGridColumnsToggle_module_title__89304f63 {\n  flex: 1;\n  margin: 0;\n}\n\n.DataGridColumnsToggle_module_closeBtn__89304f63 {\n  margin-left: 0.5rem;\n}\n\n.DataGridColumnsToggle_module_content__89304f63 {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}";
-var modules_a68425a1 = {"popover":"DataGridColumnsToggle_module_popover__89304f63","backdrop":"DataGridColumnsToggle_module_backdrop__89304f63","header":"DataGridColumnsToggle_module_header__89304f63","title":"DataGridColumnsToggle_module_title__89304f63","close-btn":"DataGridColumnsToggle_module_closeBtn__89304f63","content":"DataGridColumnsToggle_module_content__89304f63"};
+var css$3 = ".DataGridColumnsToggle_module_popover__9116ab7c {\n  background-color: var(--modal-background-color);\n  z-index: 1;\n  min-width: 17.5rem;\n  font-family: var(--font-family);\n}\n\n.DataGridColumnsToggle_module_backdrop__9116ab7c {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background-color: transparent;\n}\n\n.DataGridColumnsToggle_module_header__9116ab7c {\n  min-width: 5rem;\n  padding: 1rem 0.5rem 1rem 1.5rem;\n  background-color: var(--modal-header-background-color);\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n}\n\n.DataGridColumnsToggle_module_title__9116ab7c {\n  flex: 1;\n  margin: 0;\n}\n\n.DataGridColumnsToggle_module_closeBtn__9116ab7c {\n  margin-left: 0.5rem;\n}\n\n.DataGridColumnsToggle_module_content__9116ab7c {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}";
+var modules_a68425a1 = {"popover":"DataGridColumnsToggle_module_popover__9116ab7c","backdrop":"DataGridColumnsToggle_module_backdrop__9116ab7c","header":"DataGridColumnsToggle_module_header__9116ab7c","title":"DataGridColumnsToggle_module_title__9116ab7c","close-btn":"DataGridColumnsToggle_module_closeBtn__9116ab7c","content":"DataGridColumnsToggle_module_content__9116ab7c"};
 n(css$3,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$5 = ["open", "headers", "titleLabel", "closeButtonTitle", "onClose", "onToggleClicked", "className", "domRoot"];
@@ -4614,9 +4711,9 @@ var DataGridColumnsToggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var open = _ref.open,
       headers = _ref.headers,
       _ref$titleLabel = _ref.titleLabel,
-      titleLabel = _ref$titleLabel === void 0 ? 'Show columns' : _ref$titleLabel,
+      titleLabel = _ref$titleLabel === void 0 ? "Show columns" : _ref$titleLabel,
       _ref$closeButtonTitle = _ref.closeButtonTitle,
-      closeButtonTitle = _ref$closeButtonTitle === void 0 ? 'Close show columns dialog' : _ref$closeButtonTitle,
+      closeButtonTitle = _ref$closeButtonTitle === void 0 ? "Close show columns dialog" : _ref$closeButtonTitle,
       onClose = _ref.onClose,
       onToggleClicked = _ref.onToggleClicked,
       className = _ref.className,
@@ -4627,7 +4724,7 @@ var DataGridColumnsToggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useState = useState(generateID()),
       id = _useState[0];
 
-  var labelledId = id + '_header';
+  var labelledId = id + "_header";
   var toggles = headers.map(function (item) {
     return React.createElement(Toggle, {
       key: item.name,
@@ -4645,29 +4742,29 @@ var DataGridColumnsToggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement(Popover, _extends({}, rest, {
     ref: ref,
-    className: modules_a68425a1['popover'] + " " + className,
+    className: modules_a68425a1["popover"] + " " + className,
     show: open,
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": labelledId
   }), open && createPortal(React.createElement("div", {
-    className: modules_a68425a1['backdrop'],
+    className: modules_a68425a1["backdrop"],
     onClick: handleBackdropClick
   }), domRoot), open && React.createElement(Fragment, null, React.createElement("div", {
-    className: modules_a68425a1['header']
+    className: modules_a68425a1["header"]
   }, React.createElement(Typography, {
     id: labelledId,
-    className: modules_a68425a1['title'],
+    className: modules_a68425a1["title"],
     tag: "span",
     variant: "h4"
   }, titleLabel), React.createElement(IconButton, {
     onClick: onClose,
-    className: "" + modules_a68425a1['close-btn'],
+    className: "" + modules_a68425a1["close-btn"],
     title: closeButtonTitle
   }, React.createElement(Icon, {
     icon: Icons.Times
   }))), React.createElement("div", {
-    className: modules_a68425a1['content']
+    className: modules_a68425a1["content"]
   }, toggles)));
 });
 
@@ -4698,9 +4795,9 @@ var DataGridActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var showColumnBtn = useRef(null);
   return isHidden ? null : React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: modules_3f552d89['actions'] + " " + (className != null ? className : '')
+    className: modules_3f552d89["actions"] + " " + (className != null ? className : "")
   }), React.createElement("div", {
-    className: modules_3f552d89['left-actions']
+    className: modules_3f552d89["left-actions"]
   }, enableAddBtn && React.createElement(Button, _extends({
     color: "primary",
     startIcon: React.createElement(Icon, {
@@ -4711,7 +4808,7 @@ var DataGridActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: "outline",
     children: "Add item"
   }, addBtnProps))), React.createElement("div", {
-    className: modules_3f552d89['right-actions']
+    className: modules_3f552d89["right-actions"]
   }, enableColumnsBtn && React.createElement(Fragment, null, React.createElement(Button, _extends({
     startIcon: React.createElement(Icon, {
       icon: Icons.Change
@@ -4720,7 +4817,7 @@ var DataGridActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: "text",
     children: "Columns"
   }, columnsBtnProps, {
-    className: modules_3f552d89['desktop'] + " " + ((_columnsBtnProps$clas = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas : ''),
+    className: modules_3f552d89["desktop"] + " " + ((_columnsBtnProps$clas = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas : ""),
     ref: showColumnBtn,
     onClick: function onClick() {
       return setShowColsPopover(true);
@@ -4731,7 +4828,7 @@ var DataGridActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: function onClick() {
       return setShowColsPopover(true);
     },
-    className: modules_3f552d89['mobile'] + " " + ((_columnsBtnProps$clas2 = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas2 : '')
+    className: modules_3f552d89["mobile"] + " " + ((_columnsBtnProps$clas2 = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas2 : "")
   }), React.createElement(Icon, {
     icon: Icons.Change
   })), React.createElement(DataGridColumnsToggle, {
@@ -4751,11 +4848,11 @@ var DataGridActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: "text",
     children: "Search"
   }, searchBtnProps, {
-    className: modules_3f552d89['desktop'] + " " + ((_searchBtnProps$class = searchBtnProps == null ? void 0 : searchBtnProps.className) != null ? _searchBtnProps$class : '')
+    className: modules_3f552d89["desktop"] + " " + ((_searchBtnProps$class = searchBtnProps == null ? void 0 : searchBtnProps.className) != null ? _searchBtnProps$class : "")
   })), React.createElement(IconButton, _extends({
     title: "Search"
   }, searchBtnProps, {
-    className: modules_3f552d89['mobile'] + " " + ((_columnsBtnProps$clas3 = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas3 : '')
+    className: modules_3f552d89["mobile"] + " " + ((_columnsBtnProps$clas3 = columnsBtnProps == null ? void 0 : columnsBtnProps.className) != null ? _columnsBtnProps$clas3 : "")
   }), React.createElement(Icon, {
     icon: Icons.TableSearch
   })))));
@@ -4789,9 +4886,9 @@ var DataGridCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("td", _extends({}, rest, {
     ref: ref,
     style: _extends({}, rest.style, cellStyle),
-    className: modules_e636700c['cell'] + " " + (className != null ? className : '')
+    className: modules_e636700c["cell"] + " " + (className != null ? className : "")
   }), isLoading && React.createElement("div", {
-    className: modules_e636700c['loading'],
+    className: modules_e636700c["loading"],
     "aria-busy": "true",
     "aria-live": "polite"
   }), !isLoading && React.createElement(Typography, {
@@ -4828,12 +4925,12 @@ var DataGridRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     return null;
   });
-  var classNames = [modules_fb55f208['row']];
+  var classNames = [modules_fb55f208["row"]];
   className && classNames.push(className);
-  isLoading && classNames.push(modules_fb55f208['loading']);
+  isLoading && classNames.push(modules_fb55f208["loading"]);
   return React.createElement("tr", _extends({}, rest, {
     ref: ref,
-    className: classNames.join(' ')
+    className: classNames.join(" ")
   }), visibleCells);
 });
 
@@ -4877,7 +4974,7 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
 
     if (emptyData) {
       return React.createElement("tr", null, React.createElement("td", {
-        className: modules_532fe2cf['empty'],
+        className: modules_532fe2cf["empty"],
         colSpan: visibleColumns + (disableContextMenuColumn ? 0 : 1)
       }, React.createElement(Typography, {
         variant: "body",
@@ -4928,11 +5025,11 @@ var DataGridInner = function DataGridInner(_ref, ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   if (!headers) {
-    throw new Error('Headers definition has to be provided');
+    throw new Error("Headers definition has to be provided");
   }
 
   if (!children) {
-    throw new Error('DataGridBody should be provieded with a template how to render rows');
+    throw new Error("DataGridBody should be provieded with a template how to render rows");
   }
 
   var _useState = useState(headers),
@@ -4953,7 +5050,7 @@ var DataGridInner = function DataGridInner(_ref, ref) {
   };
 
   if (styleWithSpacing != null && styleWithSpacing.padding) {
-    var splitPaddings = styleWithSpacing.padding.toString().split(' ');
+    var splitPaddings = styleWithSpacing.padding.toString().split(" ");
     var paddingLeftIndex = 0;
 
     if (splitPaddings.length >= 2) {
@@ -4981,7 +5078,7 @@ var DataGridInner = function DataGridInner(_ref, ref) {
   }
 
   return React.createElement("div", _extends({}, rest, {
-    className: modules_b8d590e8['grid-wrapper'],
+    className: modules_b8d590e8["grid-wrapper"],
     ref: ref,
     style: {
       paddingTop: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingTop,
@@ -4995,9 +5092,9 @@ var DataGridInner = function DataGridInner(_ref, ref) {
     headers: internalHeaders,
     onColumnToggled: onColumnToggled
   })), React.createElement("div", {
-    className: modules_b8d590e8['table-wrapper']
+    className: modules_b8d590e8["table-wrapper"]
   }, React.createElement("table", {
-    className: modules_b8d590e8['table']
+    className: modules_b8d590e8["table"]
   }, React.createElement(DataGridHeader, {
     headers: internalHeaders,
     initialSort: initialSort,
@@ -5018,7 +5115,7 @@ var DataGridInner = function DataGridInner(_ref, ref) {
       paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
       paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
     }),
-    className: modules_b8d590e8['pagination'] + " " + ((_paginationProps$clas = paginationProps.className) != null ? _paginationProps$clas : '')
+    className: modules_b8d590e8["pagination"] + " " + ((_paginationProps$clas = paginationProps.className) != null ? _paginationProps$clas : "")
   })));
 };