@sebgroup/green-react 2.5.0 → 2.6.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, memo, useCallback } from 'react';
-import { randomId, createDatepicker, months, years, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
+import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, forwardRef, useCallback } from 'react';
+import { randomId, createDatepicker, months, years, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
 import { getScopedTagName, GdsDropdown, GdsOption } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import classNames from 'classnames';
@@ -98,8 +98,9 @@ var global$k =
   // eslint-disable-next-line no-restricted-globals -- safe
   check(typeof self == 'object' && self) ||
   check(typeof commonjsGlobal == 'object' && commonjsGlobal) ||
+  check(typeof commonjsGlobal == 'object' && commonjsGlobal) ||
   // eslint-disable-next-line no-new-func -- fallback
-  (function () { return this; })() || commonjsGlobal || Function('return this')();
+  (function () { return this; })() || Function('return this')();
 
 var shared$3 = {exports: {}};
 
@@ -129,10 +130,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.1',
+  version: '3.33.3',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -2461,94 +2462,31 @@ const Datepicker = (options = {}) => {
   });
 };
 
-var anObject$6 = anObject$c;
-
-// `RegExp.prototype.flags` getter implementation
-// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
-var regexpFlags = function () {
-  var that = anObject$6(this);
-  var result = '';
-  if (that.hasIndices) result += 'd';
-  if (that.global) result += 'g';
-  if (that.ignoreCase) result += 'i';
-  if (that.multiline) result += 'm';
-  if (that.dotAll) result += 's';
-  if (that.unicode) result += 'u';
-  if (that.unicodeSets) result += 'v';
-  if (that.sticky) result += 'y';
-  return result;
-};
-
-var call$8 = functionCall;
-var hasOwn$2 = hasOwnProperty_1;
-var isPrototypeOf$3 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags;
-
-var RegExpPrototype$1 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$2(R, 'flags') && isPrototypeOf$3(RegExpPrototype$1, R)
-    ? call$8(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$2 = defineBuiltIn$6;
-var anObject$5 = anObject$c;
-var $toString = toString$4;
-var fails$3 = fails$g;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject$5(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
-function Button({
-  children,
-  variant,
-  onClick,
-  disabled,
-  active = false,
-  type = 'button',
-  size,
-  testId
-}) {
-  var _a;
-  const props = {
-    type,
-    disabled
-  };
-  const classNames = [];
-  if (variant) classNames.push(variant);
-  if (active) classNames.push('active');
-  if (size) classNames.push(size);
-  if (classNames.length) props.className = classNames.join(' ');
-  if (onClick) props.onClick = onClick;
-  return variant == 'close' ? jsx("button", Object.assign({}, props, {
-    "aria-label": (_a = children === null || children === void 0 ? void 0 : children.toString()) !== null && _a !== void 0 ? _a : 'Close',
+function Button(_a) {
+  var _b;
+  var {
+      className,
+      variant,
+      active = false,
+      type = 'button',
+      size,
+      testId
+    } = _a,
+    otherProps = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
+  const buttonClassName = classNames(className, variant, size, {
+    active: active
+  }) || undefined;
+  return variant == 'close' ? jsx("button", Object.assign({
+    className: buttonClassName,
+    "aria-label": (_b = otherProps['aria-label']) !== null && _b !== void 0 ? _b : 'Close',
     "data-testid": testId
-  }, {
+  }, otherProps, {
     children: jsx("i", {})
-  })) : jsx("button", Object.assign({}, props, {
+  })) : jsx("button", Object.assign({
+    className: buttonClassName,
+    type: type,
     "data-testid": testId
-  }, {
-    children: children
-  }));
+  }, otherProps));
 }
 
 const IconButton = _a => {
@@ -2571,6 +2509,7 @@ const IconButton = _a => {
 
 const ButtonGroup = ({
   children,
+  className,
   selectedIndex,
   variant,
   id
@@ -2587,12 +2526,13 @@ const ButtonGroup = ({
         onClick: e => {
           setSelected(ix);
           if (bp.onClick) bp.onClick(e);
-        }
+        },
+        className: classNames(bp.className, className)
       });
       return props;
     });
     setButtons(buttonProps);
-  }, [children, selected, variant]);
+  }, [children, selected, variant, className]);
   return jsx(Group, Object.assign({
     "data-label": "button-group",
     id: id
@@ -2601,6 +2541,52 @@ const ButtonGroup = ({
   }));
 };
 
+const useInput = (props, onChanges, onChangeInput) => {
+  const id = useMemo(() => props.id || randomId(), [props.id]);
+  const ref = useRef(null);
+  const onChange = event => {
+    onChanges && onChanges(event);
+    onChangeInput && onChangeInput(event.target.value);
+  };
+  return Object.assign(Object.assign({}, props), {
+    id,
+    ref,
+    onChange
+  });
+};
+
+const Checkbox = _a => {
+  var {
+      label,
+      onChange,
+      validator,
+      testId
+    } = _a,
+    props = __rest(_a, ["label", "onChange", "validator", "testId"]);
+  const inputProps = useInput(props, onChange);
+  const labelClassNames = classNames('form-control', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+  const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [jsxs("label", Object.assign({
+      htmlFor: inputProps.id,
+      className: labelClassNames
+    }, {
+      children: [label, jsx("input", Object.assign({
+        type: "checkbox",
+        "data-testid": testId
+      }, inputProps, {
+        className: inputClassNames
+      })), jsx("i", {})]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator.message
+    }))]
+  }));
+};
+
 /* eslint-disable-next-line */
 const validateInputValue = (target, rules, setError) => {
   const errorMessage = validateInputValueErrors(rules, target);
@@ -2716,6 +2702,7 @@ const FormItems = ({
   onChange: _onFormItemsChanged
 }) => {
   const {
+    values,
     setValues,
     setErrors,
     setFields,
@@ -2778,6 +2765,7 @@ const FormItems = ({
   return /*#__PURE__*/React.cloneElement(children, {
     validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
     name,
+    value: values === null || values === void 0 ? void 0 : values[name],
     onChange: event => {
       if (typeof _onFormItemsChanged === 'function') {
         _onFormItemsChanged(event);
@@ -2851,17 +2839,17 @@ var setSpecies$1 = function (CONSTRUCTOR_NAME) {
   }
 };
 
-var isPrototypeOf$2 = objectIsPrototypeOf;
+var isPrototypeOf$3 = objectIsPrototypeOf;
 
 var $TypeError$5 = TypeError;
 
 var anInstance$1 = function (it, Prototype) {
-  if (isPrototypeOf$2(Prototype, it)) return it;
+  if (isPrototypeOf$3(Prototype, it)) return it;
   throw new $TypeError$5('Incorrect invocation');
 };
 
 var uncurryThis$6 = functionUncurryThis;
-var fails$2 = fails$g;
+var fails$3 = fails$g;
 var isCallable$5 = isCallable$l;
 var classof$1 = classof$4;
 var getBuiltIn$2 = getBuiltIn$7;
@@ -2905,7 +2893,7 @@ isConstructorLegacy.sham = true;
 
 // `IsConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$1 = !construct || fails$2(function () {
+var isConstructor$1 = !construct || fails$3(function () {
   var called;
   return isConstructorModern(isConstructorModern.call)
     || !isConstructorModern(Object)
@@ -2924,7 +2912,7 @@ var aConstructor$1 = function (argument) {
   throw new $TypeError$4(tryToString$2(argument) + ' is not a constructor');
 };
 
-var anObject$4 = anObject$c;
+var anObject$6 = anObject$c;
 var aConstructor = aConstructor$1;
 var isNullOrUndefined$1 = isNullOrUndefined$4;
 var wellKnownSymbol$4 = wellKnownSymbol$g;
@@ -2934,20 +2922,20 @@ var SPECIES$1 = wellKnownSymbol$4('species');
 // `SpeciesConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-speciesconstructor
 var speciesConstructor$1 = function (O, defaultConstructor) {
-  var C = anObject$4(O).constructor;
+  var C = anObject$6(O).constructor;
   var S;
-  return C === undefined || isNullOrUndefined$1(S = anObject$4(C)[SPECIES$1]) ? defaultConstructor : aConstructor(S);
+  return C === undefined || isNullOrUndefined$1(S = anObject$6(C)[SPECIES$1]) ? defaultConstructor : aConstructor(S);
 };
 
 var NATIVE_BIND$1 = functionBindNative;
 
 var FunctionPrototype = Function.prototype;
 var apply$1 = FunctionPrototype.apply;
-var call$7 = FunctionPrototype.call;
+var call$8 = FunctionPrototype.call;
 
 // eslint-disable-next-line es/no-reflect -- safe
-var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$7.bind(apply$1) : function () {
-  return call$7.apply(apply$1, arguments);
+var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$8.bind(apply$1) : function () {
+  return call$8.apply(apply$1, arguments);
 });
 
 var classofRaw = classofRaw$2;
@@ -2994,8 +2982,8 @@ var global$7 = global$k;
 var apply = functionApply;
 var bind$3 = functionBindContext;
 var isCallable$4 = isCallable$l;
-var hasOwn$1 = hasOwnProperty_1;
-var fails$1 = fails$g;
+var hasOwn$2 = hasOwnProperty_1;
+var fails$2 = fails$g;
 var html = html$2;
 var arraySlice = arraySlice$1;
 var createElement = documentCreateElement$2;
@@ -3015,13 +3003,13 @@ var queue$2 = {};
 var ONREADYSTATECHANGE = 'onreadystatechange';
 var $location, defer, channel, port;
 
-fails$1(function () {
+fails$2(function () {
   // Deno throws a ReferenceError on `location` access without `--location` flag
   $location = global$7.location;
 });
 
 var run = function (id) {
-  if (hasOwn$1(queue$2, id)) {
+  if (hasOwn$2(queue$2, id)) {
     var fn = queue$2[id];
     delete queue$2[id];
     fn();
@@ -3082,7 +3070,7 @@ if (!set || !clear) {
     isCallable$4(global$7.postMessage) &&
     !global$7.importScripts &&
     $location && $location.protocol !== 'file:' &&
-    !fails$1(globalPostMessageDefer)
+    !fails$2(globalPostMessageDefer)
   ) {
     defer = globalPostMessageDefer;
     global$7.addEventListener('message', eventListener, false);
@@ -3321,8 +3309,8 @@ newPromiseCapability$2.f = function (C) {
 var $$7 = _export;
 var IS_NODE = engineIsNode;
 var global$3 = global$k;
-var call$6 = functionCall;
-var defineBuiltIn$1 = defineBuiltIn$6;
+var call$7 = functionCall;
+var defineBuiltIn$2 = defineBuiltIn$6;
 var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$3;
 var setSpecies = setSpecies$1;
@@ -3399,7 +3387,7 @@ var callReaction = function (reaction, state) {
       if (result === reaction.promise) {
         reject(new TypeError$1('Promise-chain cycle'));
       } else if (then = isThenable(result)) {
-        call$6(then, result, resolve, reject);
+        call$7(then, result, resolve, reject);
       } else resolve(result);
     } else reject(value);
   } catch (error) {
@@ -3436,7 +3424,7 @@ var dispatchEvent = function (name, promise, reason) {
 };
 
 var onUnhandled = function (state) {
-  call$6(task, global$3, function () {
+  call$7(task, global$3, function () {
     var promise = state.facade;
     var value = state.value;
     var IS_UNHANDLED = isUnhandled(state);
@@ -3459,7 +3447,7 @@ var isUnhandled = function (state) {
 };
 
 var onHandleUnhandled = function (state) {
-  call$6(task, global$3, function () {
+  call$7(task, global$3, function () {
     var promise = state.facade;
     if (IS_NODE) {
       process.emit('rejectionHandled', promise);
@@ -3493,7 +3481,7 @@ var internalResolve = function (state, value, unwrap) {
       microtask(function () {
         var wrapper = { done: false };
         try {
-          call$6(then, value,
+          call$7(then, value,
             bind$1(internalResolve, wrapper, state),
             bind$1(internalReject, wrapper, state)
           );
@@ -3517,7 +3505,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
   PromiseConstructor = function Promise(executor) {
     anInstance(this, PromisePrototype);
     aCallable$3(executor);
-    call$6(Internal, this);
+    call$7(Internal, this);
     var state = getInternalPromiseState(this);
     try {
       executor(bind$1(internalResolve, state), bind$1(internalReject, state));
@@ -3544,7 +3532,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
 
   // `Promise.prototype.then` method
   // https://tc39.es/ecma262/#sec-promise.prototype.then
-  Internal.prototype = defineBuiltIn$1(PromisePrototype, 'then', function then(onFulfilled, onRejected) {
+  Internal.prototype = defineBuiltIn$2(PromisePrototype, 'then', function then(onFulfilled, onRejected) {
     var state = getInternalPromiseState(this);
     var reaction = newPromiseCapability$1(speciesConstructor(this, PromiseConstructor));
     state.parent = true;
@@ -3577,10 +3565,10 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
 
     if (!NATIVE_PROMISE_SUBCLASSING) {
       // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs
-      defineBuiltIn$1(NativePromisePrototype$1, 'then', function then(onFulfilled, onRejected) {
+      defineBuiltIn$2(NativePromisePrototype$1, 'then', function then(onFulfilled, onRejected) {
         var that = this;
         return new PromiseConstructor(function (resolve, reject) {
-          call$6(nativeThen, that, resolve, reject);
+          call$7(nativeThen, that, resolve, reject);
         }).then(onFulfilled, onRejected);
       // https://github.com/zloirock/core-js/issues/640
       }, { unsafe: true });
@@ -3630,9 +3618,9 @@ var getIteratorMethod$2 = function (it) {
     || Iterators[classof(it)];
 };
 
-var call$5 = functionCall;
+var call$6 = functionCall;
 var aCallable$2 = aCallable$8;
-var anObject$3 = anObject$c;
+var anObject$5 = anObject$c;
 var tryToString$1 = tryToString$4;
 var getIteratorMethod$1 = getIteratorMethod$2;
 
@@ -3640,41 +3628,41 @@ var $TypeError$1 = TypeError;
 
 var getIterator$1 = function (argument, usingIterator) {
   var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
-  if (aCallable$2(iteratorMethod)) return anObject$3(call$5(iteratorMethod, argument));
+  if (aCallable$2(iteratorMethod)) return anObject$5(call$6(iteratorMethod, argument));
   throw new $TypeError$1(tryToString$1(argument) + ' is not iterable');
 };
 
-var call$4 = functionCall;
-var anObject$2 = anObject$c;
+var call$5 = functionCall;
+var anObject$4 = anObject$c;
 var getMethod = getMethod$3;
 
 var iteratorClose$1 = function (iterator, kind, value) {
   var innerResult, innerError;
-  anObject$2(iterator);
+  anObject$4(iterator);
   try {
     innerResult = getMethod(iterator, 'return');
     if (!innerResult) {
       if (kind === 'throw') throw value;
       return value;
     }
-    innerResult = call$4(innerResult, iterator);
+    innerResult = call$5(innerResult, iterator);
   } catch (error) {
     innerError = true;
     innerResult = error;
   }
   if (kind === 'throw') throw value;
   if (innerError) throw innerResult;
-  anObject$2(innerResult);
+  anObject$4(innerResult);
   return value;
 };
 
 var bind = functionBindContext;
-var call$3 = functionCall;
-var anObject$1 = anObject$c;
+var call$4 = functionCall;
+var anObject$3 = anObject$c;
 var tryToString = tryToString$4;
 var isArrayIteratorMethod = isArrayIteratorMethod$1;
 var lengthOfArrayLike = lengthOfArrayLike$2;
-var isPrototypeOf$1 = objectIsPrototypeOf;
+var isPrototypeOf$2 = objectIsPrototypeOf;
 var getIterator = getIterator$1;
 var getIteratorMethod = getIteratorMethod$2;
 var iteratorClose = iteratorClose$1;
@@ -3704,7 +3692,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
 
   var callFn = function (value) {
     if (AS_ENTRIES) {
-      anObject$1(value);
+      anObject$3(value);
       return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]);
     } return INTERRUPTED ? fn(value, stop) : fn(value);
   };
@@ -3720,20 +3708,20 @@ var iterate$2 = function (iterable, unboundFunction, options) {
     if (isArrayIteratorMethod(iterFn)) {
       for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
         result = callFn(iterable[index]);
-        if (result && isPrototypeOf$1(ResultPrototype, result)) return result;
+        if (result && isPrototypeOf$2(ResultPrototype, result)) return result;
       } return new Result(false);
     }
     iterator = getIterator(iterable, iterFn);
   }
 
   next = IS_RECORD ? iterable.next : iterator.next;
-  while (!(step = call$3(next, iterator)).done) {
+  while (!(step = call$4(next, iterator)).done) {
     try {
       result = callFn(step.value);
     } catch (error) {
       iteratorClose(iterator, 'throw', error);
     }
-    if (typeof result == 'object' && result && isPrototypeOf$1(ResultPrototype, result)) return result;
+    if (typeof result == 'object' && result && isPrototypeOf$2(ResultPrototype, result)) return result;
   } return new Result(false);
 };
 
@@ -3787,7 +3775,7 @@ var promiseStaticsIncorrectIteration = FORCED_PROMISE_CONSTRUCTOR$3 || !checkCor
 });
 
 var $$6 = _export;
-var call$2 = functionCall;
+var call$3 = functionCall;
 var aCallable$1 = aCallable$8;
 var newPromiseCapabilityModule$2 = newPromiseCapability$2;
 var perform$1 = perform$3;
@@ -3811,7 +3799,7 @@ $$6({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
         var index = counter++;
         var alreadyCalled = false;
         remaining++;
-        call$2($promiseResolve, C, promise).then(function (value) {
+        call$3($promiseResolve, C, promise).then(function (value) {
           if (alreadyCalled) return;
           alreadyCalled = true;
           values[index] = value;
@@ -3830,7 +3818,7 @@ var FORCED_PROMISE_CONSTRUCTOR$2 = promiseConstructorDetection.CONSTRUCTOR;
 var NativePromiseConstructor = promiseNativeConstructor;
 var getBuiltIn$1 = getBuiltIn$7;
 var isCallable$1 = isCallable$l;
-var defineBuiltIn = defineBuiltIn$6;
+var defineBuiltIn$1 = defineBuiltIn$6;
 
 var NativePromisePrototype = NativePromiseConstructor && NativePromiseConstructor.prototype;
 
@@ -3846,12 +3834,12 @@ $$5({ target: 'Promise', proto: true, forced: FORCED_PROMISE_CONSTRUCTOR$2, real
 if (isCallable$1(NativePromiseConstructor)) {
   var method = getBuiltIn$1('Promise').prototype['catch'];
   if (NativePromisePrototype['catch'] !== method) {
-    defineBuiltIn(NativePromisePrototype, 'catch', method, { unsafe: true });
+    defineBuiltIn$1(NativePromisePrototype, 'catch', method, { unsafe: true });
   }
 }
 
 var $$4 = _export;
-var call$1 = functionCall;
+var call$2 = functionCall;
 var aCallable = aCallable$8;
 var newPromiseCapabilityModule$1 = newPromiseCapability$2;
 var perform = perform$3;
@@ -3868,7 +3856,7 @@ $$4({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
     var result = perform(function () {
       var $promiseResolve = aCallable(C.resolve);
       iterate(iterable, function (promise) {
-        call$1($promiseResolve, C, promise).then(capability.resolve, reject);
+        call$2($promiseResolve, C, promise).then(capability.resolve, reject);
       });
     });
     if (result.error) reject(result.value);
@@ -3877,7 +3865,7 @@ $$4({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
 });
 
 var $$3 = _export;
-var call = functionCall;
+var call$1 = functionCall;
 var newPromiseCapabilityModule = newPromiseCapability$2;
 var FORCED_PROMISE_CONSTRUCTOR$1 = promiseConstructorDetection.CONSTRUCTOR;
 
@@ -3886,17 +3874,17 @@ var FORCED_PROMISE_CONSTRUCTOR$1 = promiseConstructorDetection.CONSTRUCTOR;
 $$3({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR$1 }, {
   reject: function reject(r) {
     var capability = newPromiseCapabilityModule.f(this);
-    call(capability.reject, undefined, r);
+    call$1(capability.reject, undefined, r);
     return capability.promise;
   }
 });
 
-var anObject = anObject$c;
+var anObject$2 = anObject$c;
 var isObject = isObject$9;
 var newPromiseCapability = newPromiseCapability$2;
 
 var promiseResolve$1 = function (C, x) {
-  anObject(C);
+  anObject$2(C);
   if (isObject(x) && x.constructor === C) return x;
   var promiseCapability = newPromiseCapability.f(C);
   var resolve = promiseCapability.resolve;
@@ -3927,7 +3915,8 @@ const FormItem = ({
   inputId,
   children,
   expandableInfoButtonLabel,
-  role
+  role,
+  rightAlignedFooterInfo
 }) => {
   const expandableInnerRef = useRef(null);
   const expandableRef = useRef(null);
@@ -4012,140 +4001,27 @@ const FormItem = ({
       }, {
         children: [" ", expandableInfo, " "]
       }))
-    })), children, jsx("div", Object.assign({
+    })), children, jsxs("div", Object.assign({
       className: "gds-form-item__footer"
     }, {
-      children: validator && jsx("span", Object.assign({
+      children: [validator && jsx("span", Object.assign({
         className: "form-info"
       }, {
         children: validator.message
-      }))
+      })), rightAlignedFooterInfo && jsx("span", Object.assign({
+        className: "form-info",
+        style: {
+          textAlign: 'right',
+          width: validator ? 'auto' : '100%'
+        }
+      }, {
+        children: rightAlignedFooterInfo
+      }))]
     }))]
   }));
 };
 
-const useInput = (props, onChanges, onChangeInput) => {
-  const id = useMemo(() => props.id || randomId(), [props.id]);
-  const ref = useRef(null);
-  const onChange = event => {
-    onChanges && onChanges(event);
-    onChangeInput && onChangeInput(event.target.value);
-  };
-  return Object.assign(Object.assign({}, props), {
-    id,
-    ref,
-    onChange
-  });
-};
-
-const RenderInput = (type, props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId) => {
-  const _a = useInput(props, onChange, onChangeInput),
-    {
-      value
-    } = _a,
-    inputProps = __rest(_a, ["value"]);
-  const propsWithDescription = info ? Object.assign(Object.assign({}, inputProps), {
-    'aria-describedby': `${inputProps.id}_info`
-  }) : inputProps;
-  // Render naked
-  if (!label && !info && !expandableInfo) return jsx("input", Object.assign({
-    type: type,
-    value: value,
-    "data-testid": testId
-  }, propsWithDescription));
-  return jsx(FormItem, Object.assign({
-    validator: validator,
-    labelInformation: info,
-    label: label,
-    expandableInfo: expandableInfo,
-    expandableInfoButtonLabel: expandableInfoButtonLabel,
-    inputId: inputProps.id
-  }, {
-    children: jsx("div", Object.assign({
-      className: "gds-input-wrapper"
-    }, {
-      children: jsx("input", Object.assign({
-        type: type,
-        value: value
-      }, propsWithDescription, {
-        className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
-        "data-testid": testId
-      }))
-    }))
-  }));
-};
-const TextInput = _a => {
-  var {
-      label,
-      info,
-      testId,
-      onChange,
-      onChangeInput,
-      validator,
-      expandableInfo,
-      expandableInfoButtonLabel
-    } = _a,
-    props = __rest(_a, ["label", "info", "testId", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel"]);
-  return RenderInput('text', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
-};
-const EmailInput = _a => {
-  var {
-      label,
-      info,
-      onChange,
-      onChangeInput,
-      validator,
-      testId
-    } = _a,
-    props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "testId"]);
-  return RenderInput('email', props, onChange, onChangeInput, label, info, validator, testId);
-};
-const NumberInput = _a => {
-  var {
-      label,
-      info,
-      onChange,
-      onChangeInput,
-      validator,
-      expandableInfo,
-      expandableInfoButtonLabel,
-      testId
-    } = _a,
-    props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel", "testId"]);
-  return RenderInput('number', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
-};
-const Checkbox = _a => {
-  var {
-      label,
-      onChange,
-      validator,
-      testId
-    } = _a,
-    props = __rest(_a, ["label", "onChange", "validator", "testId"]);
-  const inputProps = useInput(props, onChange);
-  const labelClassNames = classNames('form-control', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
-  const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
-  return jsxs("div", Object.assign({
-    className: "form-group"
-  }, {
-    children: [jsxs("label", Object.assign({
-      htmlFor: inputProps.id,
-      className: labelClassNames
-    }, {
-      children: [label, jsx("input", Object.assign({
-        type: "checkbox",
-        "data-testid": testId
-      }, inputProps, {
-        className: inputClassNames
-      })), jsx("i", {})]
-    })), validator && jsx("span", Object.assign({
-      className: "form-info"
-    }, {
-      children: validator.message
-    }))]
-  }));
-};
-const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
+const RadioButton = /*#__PURE__*/forwardRef((_a, ref) => {
   var {
       label,
       validator,
@@ -4155,7 +4031,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   const {
     id
   } = useInput(props);
-  const inputClassNames = classNames(validator);
+  const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
   return jsxs("label", Object.assign({
     htmlFor: id,
     className: "form-control"
@@ -4173,6 +4049,105 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 
+const Input = _a => {
+  var {
+      'aria-describedby': ariaDescribedBy,
+      autoComplete = 'off',
+      children,
+      className,
+      testId: dataTestId,
+      expandableInfo,
+      expandableInfoButtonLabel,
+      formatter,
+      id = randomId(),
+      label,
+      info,
+      onChange,
+      unit,
+      role,
+      validator,
+      onChangeInput,
+      value = ''
+    } = _a,
+    props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value"]);
+  const [uuid] = useState(id);
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const localOnChange = useCallback(event => {
+    const oldValue = event.target.value;
+    const newValue = formatter ? formatter(oldValue) : oldValue;
+    setLocalValue(newValue);
+    event.target.value = newValue;
+    if (onChange) onChange(event);
+    if (onChangeInput) onChangeInput(newValue);
+    // Fixes bug: React loses caret position when you format the input value
+    if (!formatter || newValue.length > oldValue.length) return;
+    const pointer = event.target.selectionStart;
+    const element = event.target;
+    window.requestAnimationFrame(() => {
+      element.selectionStart = pointer;
+      element.selectionEnd = pointer;
+    });
+  }, [formatter, setLocalValue, onChange, onChangeInput]);
+  const inputAriaDescribedBy = classNames(ariaDescribedBy, {
+    [`gds-expandable-info-${uuid}`]: expandableInfo,
+    [`${uuid}_info`]: info
+  }) || undefined;
+  const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
+  const input = jsx("input", Object.assign({
+    "aria-describedby": inputAriaDescribedBy,
+    autoComplete: autoComplete,
+    className: inputClassName,
+    "data-testid": dataTestId,
+    id: uuid,
+    onChange: localOnChange,
+    role: role,
+    value: localValue
+  }, props));
+  if (!label && !info && !expandableInfo) return input;
+  return jsx(FormItem, Object.assign({
+    expandableInfo: expandableInfo,
+    expandableInfoButtonLabel: expandableInfoButtonLabel,
+    inputId: uuid,
+    label: label,
+    labelInformation: info,
+    role: role
+  }, {
+    children: jsx("div", Object.assign({
+      className: "gds-input-wrapper"
+    }, {
+      children: jsxs(Group, Object.assign({
+        groupBorder: true,
+        groupFocus: true,
+        error: validator && validator.message
+      }, {
+        children: [input, unit && jsx("span", Object.assign({
+          className: `form-text${props.disabled ? ' disabled' : ''}`
+        }, {
+          children: unit
+        })), children]
+      }))
+    }))
+  }));
+};
+const TextInput = props => {
+  return jsx(Input, Object.assign({
+    type: "text"
+  }, props));
+};
+const EmailInput = props => {
+  return jsx(Input, Object.assign({
+    type: "email"
+  }, props));
+};
+const NumberInput = props => {
+  return jsx(Input, Object.assign({
+    type: "number"
+  }, props));
+};
+
 const Text = ({
   children
 }) => jsx("span", Object.assign({
@@ -4185,9 +4160,9 @@ var $$1 = _export;
 var DESCRIPTORS = descriptors;
 var global$2 = global$k;
 var uncurryThis$2 = functionUncurryThis;
-var hasOwn = hasOwnProperty_1;
+var hasOwn$1 = hasOwnProperty_1;
 var isCallable = isCallable$l;
-var isPrototypeOf = objectIsPrototypeOf;
+var isPrototypeOf$1 = objectIsPrototypeOf;
 var toString$2 = toString$4;
 var defineBuiltInAccessor = defineBuiltInAccessor$2;
 var copyConstructorProperties = copyConstructorProperties$2;
@@ -4203,7 +4178,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
   // wrap Symbol constructor for correct work with undefined description
   var SymbolWrapper = function Symbol() {
     var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$2(arguments[0]);
-    var result = isPrototypeOf(SymbolPrototype, this)
+    var result = isPrototypeOf$1(SymbolPrototype, this)
       ? new NativeSymbol(description)
       // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
       : description === undefined ? NativeSymbol() : NativeSymbol(description);
@@ -4226,7 +4201,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
     configurable: true,
     get: function description() {
       var symbol = thisSymbolValue(this);
-      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      if (hasOwn$1(EmptyStringDescriptionStore, symbol)) return '';
       var string = symbolDescriptiveString(symbol);
       var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace$1(string, regexp, '$1');
       return desc === '' ? undefined : desc;
@@ -4250,7 +4225,7 @@ const RadioGroup = ({
   validator,
   onChangeRadio,
   onChange,
-  name,
+  name: propName = randomId(),
   horizontal,
   children
 }) => {
@@ -4258,11 +4233,11 @@ const RadioGroup = ({
   if (description) console.warn('"description" prop is deprecated. Please use "labelInformation" instead.');
   const [selected, setSelected] = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected);
   const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  const [name] = useState(propName);
   if (valueSelected !== prevValueSelected) {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
   }
-  validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
   const handleOnChange = event => {
     if (event.target.value !== selected) {
       setSelected(event.target.value);
@@ -4296,7 +4271,6 @@ const RadioGroup = ({
     expandableInfoButtonLabel,
     role: 'radiogroup'
   };
-  if (!name) name = randomId();
   const radioGroupWrapperClassNames = classNames('gds-radio-group-wrapper', {
     'gds-radio-group-wrapper--horizontal': horizontal
   });
@@ -4306,7 +4280,7 @@ const RadioGroup = ({
     }, {
       children: React.Children.map(children, radioButton => {
         return /*#__PURE__*/React.isValidElement(radioButton) ? /*#__PURE__*/React.cloneElement(radioButton, {
-          validator: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
+          validator: validator,
           onChange: handleOnChange,
           checked: selected === radioButton.props.value,
           name,
@@ -4317,9 +4291,11 @@ const RadioGroup = ({
   }));
 };
 
-const TextArea = /*#__PURE__*/memo(_a => {
+const TextArea = _a => {
   var {
+      'aria-describedby': ariaDescribedBy,
       autoComplete = 'off',
+      className,
       expandableInfo,
       expandableInfoButtonLabel,
       id = randomId(),
@@ -4330,9 +4306,10 @@ const TextArea = /*#__PURE__*/memo(_a => {
       rows = 4,
       validator,
       value,
-      'data-testid': dataTestId
+      testId: dataTestId,
+      maxLength
     } = _a,
-    props = __rest(_a, ["autoComplete", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", 'data-testid']);
+    props = __rest(_a, ['aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength"]);
   const [uuid] = useState(id);
   const [localValue, setLocalValue] = useState(value);
   useEffect(() => {
@@ -4342,9 +4319,12 @@ const TextArea = /*#__PURE__*/memo(_a => {
     setLocalValue(event.target.value);
     if (onChange) onChange(event);
   }, [setLocalValue, onChange]);
-  const ariaDetails = [];
-  if (info) ariaDetails.push(`${uuid}_info`);
-  if (expandableInfo) ariaDetails.push(`gds-expandable-info-${uuid}`);
+  const inputAriaDescribedBy = classNames(ariaDescribedBy, {
+    [`gds-expandable-info-${uuid}`]: expandableInfo,
+    [`${uuid}_info`]: info
+  }) || undefined;
+  const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
+  const rightAlignedFooterInfo = maxLength ? `${(localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0}/${maxLength}` : undefined;
   return jsx(FormItem, Object.assign({
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
@@ -4352,25 +4332,27 @@ const TextArea = /*#__PURE__*/memo(_a => {
     label: label,
     labelInformation: info,
     role: role,
-    validator: validator
+    validator: validator,
+    rightAlignedFooterInfo: rightAlignedFooterInfo
   }, {
     children: jsx("div", Object.assign({
       className: "gds-input-wrapper"
     }, {
       children: jsx("textarea", Object.assign({
-        "aria-describedby": ariaDetails.length > 0 ? ariaDetails.join(' ') : undefined,
+        "aria-describedby": inputAriaDescribedBy,
         autoComplete: autoComplete,
-        className: validator && validateClassName(validator.indicator),
+        className: inputClassName,
         id: uuid,
         onChange: localOnChange,
         role: role,
         rows: rows,
         value: localValue,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        maxLength: maxLength
       }, props))
     }))
   }));
-});
+};
 
 const Flexbox = _a => {
   var {
@@ -4410,10 +4392,26 @@ const Flexbox = _a => {
   }));
 };
 
-const InPageWizardStepCard = props => {
+const InPageWizardStepCard = ({
+  editBtnText: _editBtnText = 'Edit',
+  onNextClick,
+  stepStatus,
+  stepText,
+  title,
+  children,
+  dataTestid,
+  hideFooter: _hideFooter = false,
+  nextBtnIcon,
+  nextBtnText: _nextBtnText = 'Next',
+  onEditClick
+}) => {
+  const sectionClassName = classNames('gds-in-page-wizard-step-card', 'card', {
+    active: stepStatus === 'IsActive',
+    completed: stepStatus === 'IsComplete'
+  });
   return jsxs("section", Object.assign({
-    className: `gds-in-page-wizard-step-card card ${props.stepStatus === 'IsActive' ? 'active' : ''} ${props.stepStatus === 'IsComplete' ? 'completed' : ''}`,
-    "data-testid": props.dataTestid
+    className: sectionClassName,
+    "data-testid": dataTestid
   }, {
     children: [jsxs("header", Object.assign({
       className: "gds-in-page-wizard-step-card__header"
@@ -4425,54 +4423,54 @@ const InPageWizardStepCard = props => {
       })), jsx("div", Object.assign({
         className: "gds-in-page-wizard-step-card__header__progress"
       }, {
-        children: props.stepText
+        children: stepText
       })), jsx("div", Object.assign({
         className: "gds-in-page-wizard-step-card__header__title"
       }, {
         children: jsx("h2", Object.assign({
           className: "h4"
         }, {
-          children: props.title
+          children: title
         }))
-      })), props.stepStatus === 'IsComplete' && jsx("div", Object.assign({
+      })), stepStatus === 'IsComplete' && jsx("div", Object.assign({
         className: "gds-in-page-wizard-step-card__header__edit"
       }, {
         children: jsxs("button", Object.assign({
           className: "secondary small",
-          onClick: props.onEditClick
+          onClick: onEditClick
         }, {
           children: [jsx(Edit, {
             fill: 'var(--color)',
             height: 16,
             width: 16
-          }), props.editBtnText]
+          }), _editBtnText]
         }))
       }))]
-    })), (props.stepStatus === 'IsActive' || props.stepStatus === 'IsComplete') && jsx("div", Object.assign({
+    })), (stepStatus === 'IsActive' || stepStatus === 'IsComplete') && jsx("div", Object.assign({
       className: "gds-in-page-wizard-step-card__content"
     }, {
-      children: props.children
-    })), props.stepStatus === 'IsActive' && !props.hideFooter && jsx("footer", Object.assign({
+      children: children
+    })), stepStatus === 'IsActive' && !_hideFooter && jsx("footer", Object.assign({
       className: "gds-in-page-wizard-step-card__footer"
     }, {
       children: jsxs("button", Object.assign({
         className: "primary",
-        onClick: props.onNextClick
+        onClick: onNextClick
       }, {
-        children: [props.nextBtnText, props.nextBtnIcon]
+        children: [_nextBtnText, nextBtnIcon]
       }))
-    })), props.stepStatus === 'IsComplete' && !props.hideFooter && jsx("footer", Object.assign({
-      className: "gds-in-page-wizard-step-card__footer__edit"
+    })), stepStatus === 'IsComplete' && !_hideFooter && jsx("footer", Object.assign({
+      className: "gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit"
     }, {
       children: jsxs("button", Object.assign({
         className: "secondary",
-        onClick: props.onEditClick
+        onClick: onEditClick
       }, {
         children: [jsx(Edit, {
           fill: 'var(--color)',
           height: 16,
           width: 16
-        }), props.editBtnText]
+        }), _editBtnText]
       }))
     }))]
   }));
@@ -4481,20 +4479,16 @@ const InPageWizardStepCard = props => {
 const Link = _a => {
   var {
       button,
-      children
+      children,
+      className,
+      role
     } = _a,
-    props = __rest(_a, ["button", "children"]);
-  const [anchorProps, setAnchorProps] = useState({});
-  useEffect(() => {
-    const className = button ? typeof button === 'string' ? `button ${button}` : 'button' : undefined;
-    const newProps = Object.assign({
-      role: button ? 'button' : undefined,
-      className: className
-    }, props);
-    setAnchorProps(newProps);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [button]);
-  return jsx("a", Object.assign({}, anchorProps, {
+    otherProps = __rest(_a, ["button", "children", "className", "role"]);
+  const buttonClassName = classNames(className, 'button', typeof button === 'string' && button) || undefined;
+  return jsx("a", Object.assign({
+    className: buttonClassName,
+    role: button ? 'button' : role
+  }, otherProps, {
     children: children
   }));
 };
@@ -4731,6 +4725,63 @@ const OptionGroup = ({
   }));
 };
 
+var anObject$1 = anObject$c;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags = function () {
+  var that = anObject$1(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var call = functionCall;
+var hasOwn = hasOwnProperty_1;
+var isPrototypeOf = objectIsPrototypeOf;
+var regExpFlags = regexpFlags;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
+    ? call(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn = defineBuiltIn$6;
+var anObject = anObject$c;
+var $toString = toString$4;
+var fails$1 = fails$g;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$1(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 const InputWrapper = ({
   children,
   unitLabel
@@ -5203,17 +5254,18 @@ const Modal = _a => {
   const dialogProps = {
     id: uuid,
     role: 'dialog',
-    "aria-modal": true,
-    "aria-labelledby": headerId,
-    "aria-describedby": bodyId
+    'aria-modal': true,
+    'aria-labelledby': headerId,
+    'aria-describedby': bodyId
   };
+  let modalContent;
   switch (type) {
     case 'slideout':
       {
         let className = undefined;
-        if (size === "lg") className = 'gds-slide-out--960';
-        if (size === "md") className = 'gds-slide-out--768';
-        return jsxs("aside", Object.assign({
+        if (size === 'lg') className = 'gds-slide-out--960';
+        if (size === 'md') className = 'gds-slide-out--768';
+        modalContent = jsxs("aside", Object.assign({
           className: className
         }, dialogProps, {
           children: [jsx(ModalHeader, Object.assign({
@@ -5222,28 +5274,42 @@ const Modal = _a => {
             id: bodyId
           }, props)), jsx(ModalFooter, Object.assign({}, props))]
         }));
+        break;
       }
     case 'takeover':
       {
-        return jsxs("main", Object.assign({}, dialogProps, {
+        modalContent = jsxs("main", Object.assign({}, dialogProps, {
           children: [jsx(ModalHeader, Object.assign({
             id: headerId
           }, props)), jsx(ModalBody, Object.assign({
             id: bodyId
           }, props)), jsx(ModalFooter, Object.assign({}, props))]
         }));
+        break;
       }
     default:
       {
-        return jsxs("section", Object.assign({}, dialogProps, {
+        modalContent = jsxs("section", Object.assign({}, dialogProps, {
           children: [jsx(ModalHeader, Object.assign({
             id: headerId
           }, props)), jsx(ModalBody, Object.assign({
             id: bodyId
           }, props)), jsx(ModalFooter, Object.assign({}, props))]
         }));
+        break;
       }
   }
+  const handleBackdropClick = () => {
+    if (props.onClose) props.onClose(null);
+  };
+  return jsxs(Fragment, {
+    children: [modalContent, jsx("div", {
+      "data-testid": "modal-backdrop",
+      className: "backdrop",
+      onClick: handleBackdropClick,
+      "aria-hidden": "true"
+    })]
+  });
 };
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Input, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, Stepper, Tab, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList };