@sebgroup/green-react 2.5.1 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, memo, useCallback } from 'react';
3
- import { randomId, createDatepicker, months, years, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
2
+ import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, forwardRef, useCallback } from 'react';
3
+ import { randomId, createDatepicker, months, years, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
4
4
  import { getScopedTagName, GdsDropdown, GdsOption } from '@sebgroup/green-core';
5
5
  import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
6
6
  import classNames from 'classnames';
@@ -2462,94 +2462,31 @@ const Datepicker = (options = {}) => {
2462
2462
  });
2463
2463
  };
2464
2464
 
2465
- var anObject$6 = anObject$c;
2466
-
2467
- // `RegExp.prototype.flags` getter implementation
2468
- // https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
2469
- var regexpFlags = function () {
2470
- var that = anObject$6(this);
2471
- var result = '';
2472
- if (that.hasIndices) result += 'd';
2473
- if (that.global) result += 'g';
2474
- if (that.ignoreCase) result += 'i';
2475
- if (that.multiline) result += 'm';
2476
- if (that.dotAll) result += 's';
2477
- if (that.unicode) result += 'u';
2478
- if (that.unicodeSets) result += 'v';
2479
- if (that.sticky) result += 'y';
2480
- return result;
2481
- };
2482
-
2483
- var call$8 = functionCall;
2484
- var hasOwn$2 = hasOwnProperty_1;
2485
- var isPrototypeOf$3 = objectIsPrototypeOf;
2486
- var regExpFlags = regexpFlags;
2487
-
2488
- var RegExpPrototype$1 = RegExp.prototype;
2489
-
2490
- var regexpGetFlags = function (R) {
2491
- var flags = R.flags;
2492
- return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$2(R, 'flags') && isPrototypeOf$3(RegExpPrototype$1, R)
2493
- ? call$8(regExpFlags, R) : flags;
2494
- };
2495
-
2496
- var PROPER_FUNCTION_NAME = functionName.PROPER;
2497
- var defineBuiltIn$2 = defineBuiltIn$6;
2498
- var anObject$5 = anObject$c;
2499
- var $toString = toString$4;
2500
- var fails$3 = fails$g;
2501
- var getRegExpFlags = regexpGetFlags;
2502
-
2503
- var TO_STRING = 'toString';
2504
- var RegExpPrototype = RegExp.prototype;
2505
- var nativeToString = RegExpPrototype[TO_STRING];
2506
-
2507
- var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
2508
- // FF44- RegExp#toString has a wrong name
2509
- var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
2510
-
2511
- // `RegExp.prototype.toString` method
2512
- // https://tc39.es/ecma262/#sec-regexp.prototype.tostring
2513
- if (NOT_GENERIC || INCORRECT_NAME) {
2514
- defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
2515
- var R = anObject$5(this);
2516
- var pattern = $toString(R.source);
2517
- var flags = $toString(getRegExpFlags(R));
2518
- return '/' + pattern + '/' + flags;
2519
- }, { unsafe: true });
2520
- }
2521
-
2522
- function Button({
2523
- children,
2524
- variant,
2525
- onClick,
2526
- disabled,
2527
- active = false,
2528
- type = 'button',
2529
- size,
2530
- testId
2531
- }) {
2532
- var _a;
2533
- const props = {
2534
- type,
2535
- disabled
2536
- };
2537
- const classNames = [];
2538
- if (variant) classNames.push(variant);
2539
- if (active) classNames.push('active');
2540
- if (size) classNames.push(size);
2541
- if (classNames.length) props.className = classNames.join(' ');
2542
- if (onClick) props.onClick = onClick;
2543
- return variant == 'close' ? jsx("button", Object.assign({}, props, {
2544
- "aria-label": (_a = children === null || children === void 0 ? void 0 : children.toString()) !== null && _a !== void 0 ? _a : 'Close',
2465
+ function Button(_a) {
2466
+ var _b;
2467
+ var {
2468
+ className,
2469
+ variant,
2470
+ active = false,
2471
+ type = 'button',
2472
+ size,
2473
+ testId
2474
+ } = _a,
2475
+ otherProps = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
2476
+ const buttonClassName = classNames(className, variant, size, {
2477
+ active: active
2478
+ }) || undefined;
2479
+ return variant == 'close' ? jsx("button", Object.assign({
2480
+ className: buttonClassName,
2481
+ "aria-label": (_b = otherProps['aria-label']) !== null && _b !== void 0 ? _b : 'Close',
2545
2482
  "data-testid": testId
2546
- }, {
2483
+ }, otherProps, {
2547
2484
  children: jsx("i", {})
2548
- })) : jsx("button", Object.assign({}, props, {
2485
+ })) : jsx("button", Object.assign({
2486
+ className: buttonClassName,
2487
+ type: type,
2549
2488
  "data-testid": testId
2550
- }, {
2551
- children: children
2552
- }));
2489
+ }, otherProps));
2553
2490
  }
2554
2491
 
2555
2492
  const IconButton = _a => {
@@ -2572,6 +2509,7 @@ const IconButton = _a => {
2572
2509
 
2573
2510
  const ButtonGroup = ({
2574
2511
  children,
2512
+ className,
2575
2513
  selectedIndex,
2576
2514
  variant,
2577
2515
  id
@@ -2588,12 +2526,13 @@ const ButtonGroup = ({
2588
2526
  onClick: e => {
2589
2527
  setSelected(ix);
2590
2528
  if (bp.onClick) bp.onClick(e);
2591
- }
2529
+ },
2530
+ className: classNames(bp.className, className)
2592
2531
  });
2593
2532
  return props;
2594
2533
  });
2595
2534
  setButtons(buttonProps);
2596
- }, [children, selected, variant]);
2535
+ }, [children, selected, variant, className]);
2597
2536
  return jsx(Group, Object.assign({
2598
2537
  "data-label": "button-group",
2599
2538
  id: id
@@ -2602,6 +2541,52 @@ const ButtonGroup = ({
2602
2541
  }));
2603
2542
  };
2604
2543
 
2544
+ const useInput = (props, onChanges, onChangeInput) => {
2545
+ const id = useMemo(() => props.id || randomId(), [props.id]);
2546
+ const ref = useRef(null);
2547
+ const onChange = event => {
2548
+ onChanges && onChanges(event);
2549
+ onChangeInput && onChangeInput(event.target.value);
2550
+ };
2551
+ return Object.assign(Object.assign({}, props), {
2552
+ id,
2553
+ ref,
2554
+ onChange
2555
+ });
2556
+ };
2557
+
2558
+ const Checkbox = _a => {
2559
+ var {
2560
+ label,
2561
+ onChange,
2562
+ validator,
2563
+ testId
2564
+ } = _a,
2565
+ props = __rest(_a, ["label", "onChange", "validator", "testId"]);
2566
+ const inputProps = useInput(props, onChange);
2567
+ const labelClassNames = classNames('form-control', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
2568
+ const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
2569
+ return jsxs("div", Object.assign({
2570
+ className: "form-group"
2571
+ }, {
2572
+ children: [jsxs("label", Object.assign({
2573
+ htmlFor: inputProps.id,
2574
+ className: labelClassNames
2575
+ }, {
2576
+ children: [label, jsx("input", Object.assign({
2577
+ type: "checkbox",
2578
+ "data-testid": testId
2579
+ }, inputProps, {
2580
+ className: inputClassNames
2581
+ })), jsx("i", {})]
2582
+ })), validator && jsx("span", Object.assign({
2583
+ className: "form-info"
2584
+ }, {
2585
+ children: validator.message
2586
+ }))]
2587
+ }));
2588
+ };
2589
+
2605
2590
  /* eslint-disable-next-line */
2606
2591
  const validateInputValue = (target, rules, setError) => {
2607
2592
  const errorMessage = validateInputValueErrors(rules, target);
@@ -2717,6 +2702,7 @@ const FormItems = ({
2717
2702
  onChange: _onFormItemsChanged
2718
2703
  }) => {
2719
2704
  const {
2705
+ values,
2720
2706
  setValues,
2721
2707
  setErrors,
2722
2708
  setFields,
@@ -2779,6 +2765,7 @@ const FormItems = ({
2779
2765
  return /*#__PURE__*/React.cloneElement(children, {
2780
2766
  validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
2781
2767
  name,
2768
+ value: values === null || values === void 0 ? void 0 : values[name],
2782
2769
  onChange: event => {
2783
2770
  if (typeof _onFormItemsChanged === 'function') {
2784
2771
  _onFormItemsChanged(event);
@@ -2852,17 +2839,17 @@ var setSpecies$1 = function (CONSTRUCTOR_NAME) {
2852
2839
  }
2853
2840
  };
2854
2841
 
2855
- var isPrototypeOf$2 = objectIsPrototypeOf;
2842
+ var isPrototypeOf$3 = objectIsPrototypeOf;
2856
2843
 
2857
2844
  var $TypeError$5 = TypeError;
2858
2845
 
2859
2846
  var anInstance$1 = function (it, Prototype) {
2860
- if (isPrototypeOf$2(Prototype, it)) return it;
2847
+ if (isPrototypeOf$3(Prototype, it)) return it;
2861
2848
  throw new $TypeError$5('Incorrect invocation');
2862
2849
  };
2863
2850
 
2864
2851
  var uncurryThis$6 = functionUncurryThis;
2865
- var fails$2 = fails$g;
2852
+ var fails$3 = fails$g;
2866
2853
  var isCallable$5 = isCallable$l;
2867
2854
  var classof$1 = classof$4;
2868
2855
  var getBuiltIn$2 = getBuiltIn$7;
@@ -2906,7 +2893,7 @@ isConstructorLegacy.sham = true;
2906
2893
 
2907
2894
  // `IsConstructor` abstract operation
2908
2895
  // https://tc39.es/ecma262/#sec-isconstructor
2909
- var isConstructor$1 = !construct || fails$2(function () {
2896
+ var isConstructor$1 = !construct || fails$3(function () {
2910
2897
  var called;
2911
2898
  return isConstructorModern(isConstructorModern.call)
2912
2899
  || !isConstructorModern(Object)
@@ -2925,7 +2912,7 @@ var aConstructor$1 = function (argument) {
2925
2912
  throw new $TypeError$4(tryToString$2(argument) + ' is not a constructor');
2926
2913
  };
2927
2914
 
2928
- var anObject$4 = anObject$c;
2915
+ var anObject$6 = anObject$c;
2929
2916
  var aConstructor = aConstructor$1;
2930
2917
  var isNullOrUndefined$1 = isNullOrUndefined$4;
2931
2918
  var wellKnownSymbol$4 = wellKnownSymbol$g;
@@ -2935,20 +2922,20 @@ var SPECIES$1 = wellKnownSymbol$4('species');
2935
2922
  // `SpeciesConstructor` abstract operation
2936
2923
  // https://tc39.es/ecma262/#sec-speciesconstructor
2937
2924
  var speciesConstructor$1 = function (O, defaultConstructor) {
2938
- var C = anObject$4(O).constructor;
2925
+ var C = anObject$6(O).constructor;
2939
2926
  var S;
2940
- return C === undefined || isNullOrUndefined$1(S = anObject$4(C)[SPECIES$1]) ? defaultConstructor : aConstructor(S);
2927
+ return C === undefined || isNullOrUndefined$1(S = anObject$6(C)[SPECIES$1]) ? defaultConstructor : aConstructor(S);
2941
2928
  };
2942
2929
 
2943
2930
  var NATIVE_BIND$1 = functionBindNative;
2944
2931
 
2945
2932
  var FunctionPrototype = Function.prototype;
2946
2933
  var apply$1 = FunctionPrototype.apply;
2947
- var call$7 = FunctionPrototype.call;
2934
+ var call$8 = FunctionPrototype.call;
2948
2935
 
2949
2936
  // eslint-disable-next-line es/no-reflect -- safe
2950
- var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$7.bind(apply$1) : function () {
2951
- return call$7.apply(apply$1, arguments);
2937
+ var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$8.bind(apply$1) : function () {
2938
+ return call$8.apply(apply$1, arguments);
2952
2939
  });
2953
2940
 
2954
2941
  var classofRaw = classofRaw$2;
@@ -2995,8 +2982,8 @@ var global$7 = global$k;
2995
2982
  var apply = functionApply;
2996
2983
  var bind$3 = functionBindContext;
2997
2984
  var isCallable$4 = isCallable$l;
2998
- var hasOwn$1 = hasOwnProperty_1;
2999
- var fails$1 = fails$g;
2985
+ var hasOwn$2 = hasOwnProperty_1;
2986
+ var fails$2 = fails$g;
3000
2987
  var html = html$2;
3001
2988
  var arraySlice = arraySlice$1;
3002
2989
  var createElement = documentCreateElement$2;
@@ -3016,13 +3003,13 @@ var queue$2 = {};
3016
3003
  var ONREADYSTATECHANGE = 'onreadystatechange';
3017
3004
  var $location, defer, channel, port;
3018
3005
 
3019
- fails$1(function () {
3006
+ fails$2(function () {
3020
3007
  // Deno throws a ReferenceError on `location` access without `--location` flag
3021
3008
  $location = global$7.location;
3022
3009
  });
3023
3010
 
3024
3011
  var run = function (id) {
3025
- if (hasOwn$1(queue$2, id)) {
3012
+ if (hasOwn$2(queue$2, id)) {
3026
3013
  var fn = queue$2[id];
3027
3014
  delete queue$2[id];
3028
3015
  fn();
@@ -3083,7 +3070,7 @@ if (!set || !clear) {
3083
3070
  isCallable$4(global$7.postMessage) &&
3084
3071
  !global$7.importScripts &&
3085
3072
  $location && $location.protocol !== 'file:' &&
3086
- !fails$1(globalPostMessageDefer)
3073
+ !fails$2(globalPostMessageDefer)
3087
3074
  ) {
3088
3075
  defer = globalPostMessageDefer;
3089
3076
  global$7.addEventListener('message', eventListener, false);
@@ -3322,8 +3309,8 @@ newPromiseCapability$2.f = function (C) {
3322
3309
  var $$7 = _export;
3323
3310
  var IS_NODE = engineIsNode;
3324
3311
  var global$3 = global$k;
3325
- var call$6 = functionCall;
3326
- var defineBuiltIn$1 = defineBuiltIn$6;
3312
+ var call$7 = functionCall;
3313
+ var defineBuiltIn$2 = defineBuiltIn$6;
3327
3314
  var setPrototypeOf = objectSetPrototypeOf;
3328
3315
  var setToStringTag = setToStringTag$3;
3329
3316
  var setSpecies = setSpecies$1;
@@ -3400,7 +3387,7 @@ var callReaction = function (reaction, state) {
3400
3387
  if (result === reaction.promise) {
3401
3388
  reject(new TypeError$1('Promise-chain cycle'));
3402
3389
  } else if (then = isThenable(result)) {
3403
- call$6(then, result, resolve, reject);
3390
+ call$7(then, result, resolve, reject);
3404
3391
  } else resolve(result);
3405
3392
  } else reject(value);
3406
3393
  } catch (error) {
@@ -3437,7 +3424,7 @@ var dispatchEvent = function (name, promise, reason) {
3437
3424
  };
3438
3425
 
3439
3426
  var onUnhandled = function (state) {
3440
- call$6(task, global$3, function () {
3427
+ call$7(task, global$3, function () {
3441
3428
  var promise = state.facade;
3442
3429
  var value = state.value;
3443
3430
  var IS_UNHANDLED = isUnhandled(state);
@@ -3460,7 +3447,7 @@ var isUnhandled = function (state) {
3460
3447
  };
3461
3448
 
3462
3449
  var onHandleUnhandled = function (state) {
3463
- call$6(task, global$3, function () {
3450
+ call$7(task, global$3, function () {
3464
3451
  var promise = state.facade;
3465
3452
  if (IS_NODE) {
3466
3453
  process.emit('rejectionHandled', promise);
@@ -3494,7 +3481,7 @@ var internalResolve = function (state, value, unwrap) {
3494
3481
  microtask(function () {
3495
3482
  var wrapper = { done: false };
3496
3483
  try {
3497
- call$6(then, value,
3484
+ call$7(then, value,
3498
3485
  bind$1(internalResolve, wrapper, state),
3499
3486
  bind$1(internalReject, wrapper, state)
3500
3487
  );
@@ -3518,7 +3505,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
3518
3505
  PromiseConstructor = function Promise(executor) {
3519
3506
  anInstance(this, PromisePrototype);
3520
3507
  aCallable$3(executor);
3521
- call$6(Internal, this);
3508
+ call$7(Internal, this);
3522
3509
  var state = getInternalPromiseState(this);
3523
3510
  try {
3524
3511
  executor(bind$1(internalResolve, state), bind$1(internalReject, state));
@@ -3545,7 +3532,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
3545
3532
 
3546
3533
  // `Promise.prototype.then` method
3547
3534
  // https://tc39.es/ecma262/#sec-promise.prototype.then
3548
- Internal.prototype = defineBuiltIn$1(PromisePrototype, 'then', function then(onFulfilled, onRejected) {
3535
+ Internal.prototype = defineBuiltIn$2(PromisePrototype, 'then', function then(onFulfilled, onRejected) {
3549
3536
  var state = getInternalPromiseState(this);
3550
3537
  var reaction = newPromiseCapability$1(speciesConstructor(this, PromiseConstructor));
3551
3538
  state.parent = true;
@@ -3578,10 +3565,10 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
3578
3565
 
3579
3566
  if (!NATIVE_PROMISE_SUBCLASSING) {
3580
3567
  // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs
3581
- defineBuiltIn$1(NativePromisePrototype$1, 'then', function then(onFulfilled, onRejected) {
3568
+ defineBuiltIn$2(NativePromisePrototype$1, 'then', function then(onFulfilled, onRejected) {
3582
3569
  var that = this;
3583
3570
  return new PromiseConstructor(function (resolve, reject) {
3584
- call$6(nativeThen, that, resolve, reject);
3571
+ call$7(nativeThen, that, resolve, reject);
3585
3572
  }).then(onFulfilled, onRejected);
3586
3573
  // https://github.com/zloirock/core-js/issues/640
3587
3574
  }, { unsafe: true });
@@ -3631,9 +3618,9 @@ var getIteratorMethod$2 = function (it) {
3631
3618
  || Iterators[classof(it)];
3632
3619
  };
3633
3620
 
3634
- var call$5 = functionCall;
3621
+ var call$6 = functionCall;
3635
3622
  var aCallable$2 = aCallable$8;
3636
- var anObject$3 = anObject$c;
3623
+ var anObject$5 = anObject$c;
3637
3624
  var tryToString$1 = tryToString$4;
3638
3625
  var getIteratorMethod$1 = getIteratorMethod$2;
3639
3626
 
@@ -3641,41 +3628,41 @@ var $TypeError$1 = TypeError;
3641
3628
 
3642
3629
  var getIterator$1 = function (argument, usingIterator) {
3643
3630
  var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
3644
- if (aCallable$2(iteratorMethod)) return anObject$3(call$5(iteratorMethod, argument));
3631
+ if (aCallable$2(iteratorMethod)) return anObject$5(call$6(iteratorMethod, argument));
3645
3632
  throw new $TypeError$1(tryToString$1(argument) + ' is not iterable');
3646
3633
  };
3647
3634
 
3648
- var call$4 = functionCall;
3649
- var anObject$2 = anObject$c;
3635
+ var call$5 = functionCall;
3636
+ var anObject$4 = anObject$c;
3650
3637
  var getMethod = getMethod$3;
3651
3638
 
3652
3639
  var iteratorClose$1 = function (iterator, kind, value) {
3653
3640
  var innerResult, innerError;
3654
- anObject$2(iterator);
3641
+ anObject$4(iterator);
3655
3642
  try {
3656
3643
  innerResult = getMethod(iterator, 'return');
3657
3644
  if (!innerResult) {
3658
3645
  if (kind === 'throw') throw value;
3659
3646
  return value;
3660
3647
  }
3661
- innerResult = call$4(innerResult, iterator);
3648
+ innerResult = call$5(innerResult, iterator);
3662
3649
  } catch (error) {
3663
3650
  innerError = true;
3664
3651
  innerResult = error;
3665
3652
  }
3666
3653
  if (kind === 'throw') throw value;
3667
3654
  if (innerError) throw innerResult;
3668
- anObject$2(innerResult);
3655
+ anObject$4(innerResult);
3669
3656
  return value;
3670
3657
  };
3671
3658
 
3672
3659
  var bind = functionBindContext;
3673
- var call$3 = functionCall;
3674
- var anObject$1 = anObject$c;
3660
+ var call$4 = functionCall;
3661
+ var anObject$3 = anObject$c;
3675
3662
  var tryToString = tryToString$4;
3676
3663
  var isArrayIteratorMethod = isArrayIteratorMethod$1;
3677
3664
  var lengthOfArrayLike = lengthOfArrayLike$2;
3678
- var isPrototypeOf$1 = objectIsPrototypeOf;
3665
+ var isPrototypeOf$2 = objectIsPrototypeOf;
3679
3666
  var getIterator = getIterator$1;
3680
3667
  var getIteratorMethod = getIteratorMethod$2;
3681
3668
  var iteratorClose = iteratorClose$1;
@@ -3705,7 +3692,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
3705
3692
 
3706
3693
  var callFn = function (value) {
3707
3694
  if (AS_ENTRIES) {
3708
- anObject$1(value);
3695
+ anObject$3(value);
3709
3696
  return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]);
3710
3697
  } return INTERRUPTED ? fn(value, stop) : fn(value);
3711
3698
  };
@@ -3721,20 +3708,20 @@ var iterate$2 = function (iterable, unboundFunction, options) {
3721
3708
  if (isArrayIteratorMethod(iterFn)) {
3722
3709
  for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
3723
3710
  result = callFn(iterable[index]);
3724
- if (result && isPrototypeOf$1(ResultPrototype, result)) return result;
3711
+ if (result && isPrototypeOf$2(ResultPrototype, result)) return result;
3725
3712
  } return new Result(false);
3726
3713
  }
3727
3714
  iterator = getIterator(iterable, iterFn);
3728
3715
  }
3729
3716
 
3730
3717
  next = IS_RECORD ? iterable.next : iterator.next;
3731
- while (!(step = call$3(next, iterator)).done) {
3718
+ while (!(step = call$4(next, iterator)).done) {
3732
3719
  try {
3733
3720
  result = callFn(step.value);
3734
3721
  } catch (error) {
3735
3722
  iteratorClose(iterator, 'throw', error);
3736
3723
  }
3737
- if (typeof result == 'object' && result && isPrototypeOf$1(ResultPrototype, result)) return result;
3724
+ if (typeof result == 'object' && result && isPrototypeOf$2(ResultPrototype, result)) return result;
3738
3725
  } return new Result(false);
3739
3726
  };
3740
3727
 
@@ -3788,7 +3775,7 @@ var promiseStaticsIncorrectIteration = FORCED_PROMISE_CONSTRUCTOR$3 || !checkCor
3788
3775
  });
3789
3776
 
3790
3777
  var $$6 = _export;
3791
- var call$2 = functionCall;
3778
+ var call$3 = functionCall;
3792
3779
  var aCallable$1 = aCallable$8;
3793
3780
  var newPromiseCapabilityModule$2 = newPromiseCapability$2;
3794
3781
  var perform$1 = perform$3;
@@ -3812,7 +3799,7 @@ $$6({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
3812
3799
  var index = counter++;
3813
3800
  var alreadyCalled = false;
3814
3801
  remaining++;
3815
- call$2($promiseResolve, C, promise).then(function (value) {
3802
+ call$3($promiseResolve, C, promise).then(function (value) {
3816
3803
  if (alreadyCalled) return;
3817
3804
  alreadyCalled = true;
3818
3805
  values[index] = value;
@@ -3831,7 +3818,7 @@ var FORCED_PROMISE_CONSTRUCTOR$2 = promiseConstructorDetection.CONSTRUCTOR;
3831
3818
  var NativePromiseConstructor = promiseNativeConstructor;
3832
3819
  var getBuiltIn$1 = getBuiltIn$7;
3833
3820
  var isCallable$1 = isCallable$l;
3834
- var defineBuiltIn = defineBuiltIn$6;
3821
+ var defineBuiltIn$1 = defineBuiltIn$6;
3835
3822
 
3836
3823
  var NativePromisePrototype = NativePromiseConstructor && NativePromiseConstructor.prototype;
3837
3824
 
@@ -3847,12 +3834,12 @@ $$5({ target: 'Promise', proto: true, forced: FORCED_PROMISE_CONSTRUCTOR$2, real
3847
3834
  if (isCallable$1(NativePromiseConstructor)) {
3848
3835
  var method = getBuiltIn$1('Promise').prototype['catch'];
3849
3836
  if (NativePromisePrototype['catch'] !== method) {
3850
- defineBuiltIn(NativePromisePrototype, 'catch', method, { unsafe: true });
3837
+ defineBuiltIn$1(NativePromisePrototype, 'catch', method, { unsafe: true });
3851
3838
  }
3852
3839
  }
3853
3840
 
3854
3841
  var $$4 = _export;
3855
- var call$1 = functionCall;
3842
+ var call$2 = functionCall;
3856
3843
  var aCallable = aCallable$8;
3857
3844
  var newPromiseCapabilityModule$1 = newPromiseCapability$2;
3858
3845
  var perform = perform$3;
@@ -3869,7 +3856,7 @@ $$4({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
3869
3856
  var result = perform(function () {
3870
3857
  var $promiseResolve = aCallable(C.resolve);
3871
3858
  iterate(iterable, function (promise) {
3872
- call$1($promiseResolve, C, promise).then(capability.resolve, reject);
3859
+ call$2($promiseResolve, C, promise).then(capability.resolve, reject);
3873
3860
  });
3874
3861
  });
3875
3862
  if (result.error) reject(result.value);
@@ -3878,7 +3865,7 @@ $$4({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
3878
3865
  });
3879
3866
 
3880
3867
  var $$3 = _export;
3881
- var call = functionCall;
3868
+ var call$1 = functionCall;
3882
3869
  var newPromiseCapabilityModule = newPromiseCapability$2;
3883
3870
  var FORCED_PROMISE_CONSTRUCTOR$1 = promiseConstructorDetection.CONSTRUCTOR;
3884
3871
 
@@ -3887,17 +3874,17 @@ var FORCED_PROMISE_CONSTRUCTOR$1 = promiseConstructorDetection.CONSTRUCTOR;
3887
3874
  $$3({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR$1 }, {
3888
3875
  reject: function reject(r) {
3889
3876
  var capability = newPromiseCapabilityModule.f(this);
3890
- call(capability.reject, undefined, r);
3877
+ call$1(capability.reject, undefined, r);
3891
3878
  return capability.promise;
3892
3879
  }
3893
3880
  });
3894
3881
 
3895
- var anObject = anObject$c;
3882
+ var anObject$2 = anObject$c;
3896
3883
  var isObject = isObject$9;
3897
3884
  var newPromiseCapability = newPromiseCapability$2;
3898
3885
 
3899
3886
  var promiseResolve$1 = function (C, x) {
3900
- anObject(C);
3887
+ anObject$2(C);
3901
3888
  if (isObject(x) && x.constructor === C) return x;
3902
3889
  var promiseCapability = newPromiseCapability.f(C);
3903
3890
  var resolve = promiseCapability.resolve;
@@ -3928,7 +3915,8 @@ const FormItem = ({
3928
3915
  inputId,
3929
3916
  children,
3930
3917
  expandableInfoButtonLabel,
3931
- role
3918
+ role,
3919
+ rightAlignedFooterInfo
3932
3920
  }) => {
3933
3921
  const expandableInnerRef = useRef(null);
3934
3922
  const expandableRef = useRef(null);
@@ -4013,140 +4001,27 @@ const FormItem = ({
4013
4001
  }, {
4014
4002
  children: [" ", expandableInfo, " "]
4015
4003
  }))
4016
- })), children, jsx("div", Object.assign({
4004
+ })), children, jsxs("div", Object.assign({
4017
4005
  className: "gds-form-item__footer"
4018
4006
  }, {
4019
- children: validator && jsx("span", Object.assign({
4007
+ children: [validator && jsx("span", Object.assign({
4020
4008
  className: "form-info"
4021
4009
  }, {
4022
4010
  children: validator.message
4023
- }))
4011
+ })), rightAlignedFooterInfo && jsx("span", Object.assign({
4012
+ className: "form-info",
4013
+ style: {
4014
+ textAlign: 'right',
4015
+ width: validator ? 'auto' : '100%'
4016
+ }
4017
+ }, {
4018
+ children: rightAlignedFooterInfo
4019
+ }))]
4024
4020
  }))]
4025
4021
  }));
4026
4022
  };
4027
4023
 
4028
- const useInput = (props, onChanges, onChangeInput) => {
4029
- const id = useMemo(() => props.id || randomId(), [props.id]);
4030
- const ref = useRef(null);
4031
- const onChange = event => {
4032
- onChanges && onChanges(event);
4033
- onChangeInput && onChangeInput(event.target.value);
4034
- };
4035
- return Object.assign(Object.assign({}, props), {
4036
- id,
4037
- ref,
4038
- onChange
4039
- });
4040
- };
4041
-
4042
- const RenderInput = (type, props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId) => {
4043
- const _a = useInput(props, onChange, onChangeInput),
4044
- {
4045
- value
4046
- } = _a,
4047
- inputProps = __rest(_a, ["value"]);
4048
- const propsWithDescription = info ? Object.assign(Object.assign({}, inputProps), {
4049
- 'aria-describedby': `${inputProps.id}_info`
4050
- }) : inputProps;
4051
- // Render naked
4052
- if (!label && !info && !expandableInfo) return jsx("input", Object.assign({
4053
- type: type,
4054
- value: value,
4055
- "data-testid": testId
4056
- }, propsWithDescription));
4057
- return jsx(FormItem, Object.assign({
4058
- validator: validator,
4059
- labelInformation: info,
4060
- label: label,
4061
- expandableInfo: expandableInfo,
4062
- expandableInfoButtonLabel: expandableInfoButtonLabel,
4063
- inputId: inputProps.id
4064
- }, {
4065
- children: jsx("div", Object.assign({
4066
- className: "gds-input-wrapper"
4067
- }, {
4068
- children: jsx("input", Object.assign({
4069
- type: type,
4070
- value: value
4071
- }, propsWithDescription, {
4072
- className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
4073
- "data-testid": testId
4074
- }))
4075
- }))
4076
- }));
4077
- };
4078
- const TextInput = _a => {
4079
- var {
4080
- label,
4081
- info,
4082
- testId,
4083
- onChange,
4084
- onChangeInput,
4085
- validator,
4086
- expandableInfo,
4087
- expandableInfoButtonLabel
4088
- } = _a,
4089
- props = __rest(_a, ["label", "info", "testId", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel"]);
4090
- return RenderInput('text', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
4091
- };
4092
- const EmailInput = _a => {
4093
- var {
4094
- label,
4095
- info,
4096
- onChange,
4097
- onChangeInput,
4098
- validator,
4099
- testId
4100
- } = _a,
4101
- props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "testId"]);
4102
- return RenderInput('email', props, onChange, onChangeInput, label, info, validator, testId);
4103
- };
4104
- const NumberInput = _a => {
4105
- var {
4106
- label,
4107
- info,
4108
- onChange,
4109
- onChangeInput,
4110
- validator,
4111
- expandableInfo,
4112
- expandableInfoButtonLabel,
4113
- testId
4114
- } = _a,
4115
- props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel", "testId"]);
4116
- return RenderInput('number', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
4117
- };
4118
- const Checkbox = _a => {
4119
- var {
4120
- label,
4121
- onChange,
4122
- validator,
4123
- testId
4124
- } = _a,
4125
- props = __rest(_a, ["label", "onChange", "validator", "testId"]);
4126
- const inputProps = useInput(props, onChange);
4127
- const labelClassNames = classNames('form-control', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
4128
- const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
4129
- return jsxs("div", Object.assign({
4130
- className: "form-group"
4131
- }, {
4132
- children: [jsxs("label", Object.assign({
4133
- htmlFor: inputProps.id,
4134
- className: labelClassNames
4135
- }, {
4136
- children: [label, jsx("input", Object.assign({
4137
- type: "checkbox",
4138
- "data-testid": testId
4139
- }, inputProps, {
4140
- className: inputClassNames
4141
- })), jsx("i", {})]
4142
- })), validator && jsx("span", Object.assign({
4143
- className: "form-info"
4144
- }, {
4145
- children: validator.message
4146
- }))]
4147
- }));
4148
- };
4149
- const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
4024
+ const RadioButton = /*#__PURE__*/forwardRef((_a, ref) => {
4150
4025
  var {
4151
4026
  label,
4152
4027
  validator,
@@ -4156,7 +4031,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
4156
4031
  const {
4157
4032
  id
4158
4033
  } = useInput(props);
4159
- const inputClassNames = classNames(validator);
4034
+ const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
4160
4035
  return jsxs("label", Object.assign({
4161
4036
  htmlFor: id,
4162
4037
  className: "form-control"
@@ -4174,6 +4049,105 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
4174
4049
  }));
4175
4050
  });
4176
4051
 
4052
+ const Input = _a => {
4053
+ var {
4054
+ 'aria-describedby': ariaDescribedBy,
4055
+ autoComplete = 'off',
4056
+ children,
4057
+ className,
4058
+ testId: dataTestId,
4059
+ expandableInfo,
4060
+ expandableInfoButtonLabel,
4061
+ formatter,
4062
+ id = randomId(),
4063
+ label,
4064
+ info,
4065
+ onChange,
4066
+ unit,
4067
+ role,
4068
+ validator,
4069
+ onChangeInput,
4070
+ value = ''
4071
+ } = _a,
4072
+ props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value"]);
4073
+ const [uuid] = useState(id);
4074
+ const [localValue, setLocalValue] = useState(value);
4075
+ useEffect(() => {
4076
+ setLocalValue(value);
4077
+ }, [value]);
4078
+ const localOnChange = useCallback(event => {
4079
+ const oldValue = event.target.value;
4080
+ const newValue = formatter ? formatter(oldValue) : oldValue;
4081
+ setLocalValue(newValue);
4082
+ event.target.value = newValue;
4083
+ if (onChange) onChange(event);
4084
+ if (onChangeInput) onChangeInput(newValue);
4085
+ // Fixes bug: React loses caret position when you format the input value
4086
+ if (!formatter || newValue.length > oldValue.length) return;
4087
+ const pointer = event.target.selectionStart;
4088
+ const element = event.target;
4089
+ window.requestAnimationFrame(() => {
4090
+ element.selectionStart = pointer;
4091
+ element.selectionEnd = pointer;
4092
+ });
4093
+ }, [formatter, setLocalValue, onChange, onChangeInput]);
4094
+ const inputAriaDescribedBy = classNames(ariaDescribedBy, {
4095
+ [`gds-expandable-info-${uuid}`]: expandableInfo,
4096
+ [`${uuid}_info`]: info
4097
+ }) || undefined;
4098
+ const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
4099
+ const input = jsx("input", Object.assign({
4100
+ "aria-describedby": inputAriaDescribedBy,
4101
+ autoComplete: autoComplete,
4102
+ className: inputClassName,
4103
+ "data-testid": dataTestId,
4104
+ id: uuid,
4105
+ onChange: localOnChange,
4106
+ role: role,
4107
+ value: localValue
4108
+ }, props));
4109
+ if (!label && !info && !expandableInfo) return input;
4110
+ return jsx(FormItem, Object.assign({
4111
+ expandableInfo: expandableInfo,
4112
+ expandableInfoButtonLabel: expandableInfoButtonLabel,
4113
+ inputId: uuid,
4114
+ label: label,
4115
+ labelInformation: info,
4116
+ role: role
4117
+ }, {
4118
+ children: jsx("div", Object.assign({
4119
+ className: "gds-input-wrapper"
4120
+ }, {
4121
+ children: jsxs(Group, Object.assign({
4122
+ groupBorder: true,
4123
+ groupFocus: true,
4124
+ error: validator && validator.message
4125
+ }, {
4126
+ children: [input, unit && jsx("span", Object.assign({
4127
+ className: `form-text${props.disabled ? ' disabled' : ''}`
4128
+ }, {
4129
+ children: unit
4130
+ })), children]
4131
+ }))
4132
+ }))
4133
+ }));
4134
+ };
4135
+ const TextInput = props => {
4136
+ return jsx(Input, Object.assign({
4137
+ type: "text"
4138
+ }, props));
4139
+ };
4140
+ const EmailInput = props => {
4141
+ return jsx(Input, Object.assign({
4142
+ type: "email"
4143
+ }, props));
4144
+ };
4145
+ const NumberInput = props => {
4146
+ return jsx(Input, Object.assign({
4147
+ type: "number"
4148
+ }, props));
4149
+ };
4150
+
4177
4151
  const Text = ({
4178
4152
  children
4179
4153
  }) => jsx("span", Object.assign({
@@ -4186,9 +4160,9 @@ var $$1 = _export;
4186
4160
  var DESCRIPTORS = descriptors;
4187
4161
  var global$2 = global$k;
4188
4162
  var uncurryThis$2 = functionUncurryThis;
4189
- var hasOwn = hasOwnProperty_1;
4163
+ var hasOwn$1 = hasOwnProperty_1;
4190
4164
  var isCallable = isCallable$l;
4191
- var isPrototypeOf = objectIsPrototypeOf;
4165
+ var isPrototypeOf$1 = objectIsPrototypeOf;
4192
4166
  var toString$2 = toString$4;
4193
4167
  var defineBuiltInAccessor = defineBuiltInAccessor$2;
4194
4168
  var copyConstructorProperties = copyConstructorProperties$2;
@@ -4204,7 +4178,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
4204
4178
  // wrap Symbol constructor for correct work with undefined description
4205
4179
  var SymbolWrapper = function Symbol() {
4206
4180
  var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$2(arguments[0]);
4207
- var result = isPrototypeOf(SymbolPrototype, this)
4181
+ var result = isPrototypeOf$1(SymbolPrototype, this)
4208
4182
  ? new NativeSymbol(description)
4209
4183
  // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
4210
4184
  : description === undefined ? NativeSymbol() : NativeSymbol(description);
@@ -4227,7 +4201,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
4227
4201
  configurable: true,
4228
4202
  get: function description() {
4229
4203
  var symbol = thisSymbolValue(this);
4230
- if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
4204
+ if (hasOwn$1(EmptyStringDescriptionStore, symbol)) return '';
4231
4205
  var string = symbolDescriptiveString(symbol);
4232
4206
  var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace$1(string, regexp, '$1');
4233
4207
  return desc === '' ? undefined : desc;
@@ -4251,7 +4225,7 @@ const RadioGroup = ({
4251
4225
  validator,
4252
4226
  onChangeRadio,
4253
4227
  onChange,
4254
- name,
4228
+ name: propName = randomId(),
4255
4229
  horizontal,
4256
4230
  children
4257
4231
  }) => {
@@ -4259,11 +4233,11 @@ const RadioGroup = ({
4259
4233
  if (description) console.warn('"description" prop is deprecated. Please use "labelInformation" instead.');
4260
4234
  const [selected, setSelected] = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected);
4261
4235
  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
4236
+ const [name] = useState(propName);
4262
4237
  if (valueSelected !== prevValueSelected) {
4263
4238
  setSelected(valueSelected);
4264
4239
  setPrevValueSelected(valueSelected);
4265
4240
  }
4266
- validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
4267
4241
  const handleOnChange = event => {
4268
4242
  if (event.target.value !== selected) {
4269
4243
  setSelected(event.target.value);
@@ -4297,7 +4271,6 @@ const RadioGroup = ({
4297
4271
  expandableInfoButtonLabel,
4298
4272
  role: 'radiogroup'
4299
4273
  };
4300
- if (!name) name = randomId();
4301
4274
  const radioGroupWrapperClassNames = classNames('gds-radio-group-wrapper', {
4302
4275
  'gds-radio-group-wrapper--horizontal': horizontal
4303
4276
  });
@@ -4307,7 +4280,7 @@ const RadioGroup = ({
4307
4280
  }, {
4308
4281
  children: React.Children.map(children, radioButton => {
4309
4282
  return /*#__PURE__*/React.isValidElement(radioButton) ? /*#__PURE__*/React.cloneElement(radioButton, {
4310
- validator: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
4283
+ validator: validator,
4311
4284
  onChange: handleOnChange,
4312
4285
  checked: selected === radioButton.props.value,
4313
4286
  name,
@@ -4318,9 +4291,11 @@ const RadioGroup = ({
4318
4291
  }));
4319
4292
  };
4320
4293
 
4321
- const TextArea = /*#__PURE__*/memo(_a => {
4294
+ const TextArea = _a => {
4322
4295
  var {
4296
+ 'aria-describedby': ariaDescribedBy,
4323
4297
  autoComplete = 'off',
4298
+ className,
4324
4299
  expandableInfo,
4325
4300
  expandableInfoButtonLabel,
4326
4301
  id = randomId(),
@@ -4331,9 +4306,10 @@ const TextArea = /*#__PURE__*/memo(_a => {
4331
4306
  rows = 4,
4332
4307
  validator,
4333
4308
  value,
4334
- 'data-testid': dataTestId
4309
+ testId: dataTestId,
4310
+ maxLength
4335
4311
  } = _a,
4336
- props = __rest(_a, ["autoComplete", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", 'data-testid']);
4312
+ props = __rest(_a, ['aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength"]);
4337
4313
  const [uuid] = useState(id);
4338
4314
  const [localValue, setLocalValue] = useState(value);
4339
4315
  useEffect(() => {
@@ -4343,9 +4319,12 @@ const TextArea = /*#__PURE__*/memo(_a => {
4343
4319
  setLocalValue(event.target.value);
4344
4320
  if (onChange) onChange(event);
4345
4321
  }, [setLocalValue, onChange]);
4346
- const ariaDetails = [];
4347
- if (info) ariaDetails.push(`${uuid}_info`);
4348
- if (expandableInfo) ariaDetails.push(`gds-expandable-info-${uuid}`);
4322
+ const inputAriaDescribedBy = classNames(ariaDescribedBy, {
4323
+ [`gds-expandable-info-${uuid}`]: expandableInfo,
4324
+ [`${uuid}_info`]: info
4325
+ }) || undefined;
4326
+ const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
4327
+ const rightAlignedFooterInfo = maxLength ? `${(localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0}/${maxLength}` : undefined;
4349
4328
  return jsx(FormItem, Object.assign({
4350
4329
  expandableInfo: expandableInfo,
4351
4330
  expandableInfoButtonLabel: expandableInfoButtonLabel,
@@ -4353,25 +4332,27 @@ const TextArea = /*#__PURE__*/memo(_a => {
4353
4332
  label: label,
4354
4333
  labelInformation: info,
4355
4334
  role: role,
4356
- validator: validator
4335
+ validator: validator,
4336
+ rightAlignedFooterInfo: rightAlignedFooterInfo
4357
4337
  }, {
4358
4338
  children: jsx("div", Object.assign({
4359
4339
  className: "gds-input-wrapper"
4360
4340
  }, {
4361
4341
  children: jsx("textarea", Object.assign({
4362
- "aria-describedby": ariaDetails.length > 0 ? ariaDetails.join(' ') : undefined,
4342
+ "aria-describedby": inputAriaDescribedBy,
4363
4343
  autoComplete: autoComplete,
4364
- className: validator && validateClassName(validator.indicator),
4344
+ className: inputClassName,
4365
4345
  id: uuid,
4366
4346
  onChange: localOnChange,
4367
4347
  role: role,
4368
4348
  rows: rows,
4369
4349
  value: localValue,
4370
- "data-testid": dataTestId
4350
+ "data-testid": dataTestId,
4351
+ maxLength: maxLength
4371
4352
  }, props))
4372
4353
  }))
4373
4354
  }));
4374
- });
4355
+ };
4375
4356
 
4376
4357
  const Flexbox = _a => {
4377
4358
  var {
@@ -4411,10 +4392,26 @@ const Flexbox = _a => {
4411
4392
  }));
4412
4393
  };
4413
4394
 
4414
- const InPageWizardStepCard = props => {
4395
+ const InPageWizardStepCard = ({
4396
+ editBtnText: _editBtnText = 'Edit',
4397
+ onNextClick,
4398
+ stepStatus,
4399
+ stepText,
4400
+ title,
4401
+ children,
4402
+ dataTestid,
4403
+ hideFooter: _hideFooter = false,
4404
+ nextBtnIcon,
4405
+ nextBtnText: _nextBtnText = 'Next',
4406
+ onEditClick
4407
+ }) => {
4408
+ const sectionClassName = classNames('gds-in-page-wizard-step-card', 'card', {
4409
+ active: stepStatus === 'IsActive',
4410
+ completed: stepStatus === 'IsComplete'
4411
+ });
4415
4412
  return jsxs("section", Object.assign({
4416
- className: `gds-in-page-wizard-step-card card ${props.stepStatus === 'IsActive' ? 'active' : ''} ${props.stepStatus === 'IsComplete' ? 'completed' : ''}`,
4417
- "data-testid": props.dataTestid
4413
+ className: sectionClassName,
4414
+ "data-testid": dataTestid
4418
4415
  }, {
4419
4416
  children: [jsxs("header", Object.assign({
4420
4417
  className: "gds-in-page-wizard-step-card__header"
@@ -4426,54 +4423,54 @@ const InPageWizardStepCard = props => {
4426
4423
  })), jsx("div", Object.assign({
4427
4424
  className: "gds-in-page-wizard-step-card__header__progress"
4428
4425
  }, {
4429
- children: props.stepText
4426
+ children: stepText
4430
4427
  })), jsx("div", Object.assign({
4431
4428
  className: "gds-in-page-wizard-step-card__header__title"
4432
4429
  }, {
4433
4430
  children: jsx("h2", Object.assign({
4434
4431
  className: "h4"
4435
4432
  }, {
4436
- children: props.title
4433
+ children: title
4437
4434
  }))
4438
- })), props.stepStatus === 'IsComplete' && jsx("div", Object.assign({
4435
+ })), stepStatus === 'IsComplete' && jsx("div", Object.assign({
4439
4436
  className: "gds-in-page-wizard-step-card__header__edit"
4440
4437
  }, {
4441
4438
  children: jsxs("button", Object.assign({
4442
4439
  className: "secondary small",
4443
- onClick: props.onEditClick
4440
+ onClick: onEditClick
4444
4441
  }, {
4445
4442
  children: [jsx(Edit, {
4446
4443
  fill: 'var(--color)',
4447
4444
  height: 16,
4448
4445
  width: 16
4449
- }), props.editBtnText]
4446
+ }), _editBtnText]
4450
4447
  }))
4451
4448
  }))]
4452
- })), (props.stepStatus === 'IsActive' || props.stepStatus === 'IsComplete') && jsx("div", Object.assign({
4449
+ })), (stepStatus === 'IsActive' || stepStatus === 'IsComplete') && jsx("div", Object.assign({
4453
4450
  className: "gds-in-page-wizard-step-card__content"
4454
4451
  }, {
4455
- children: props.children
4456
- })), props.stepStatus === 'IsActive' && !props.hideFooter && jsx("footer", Object.assign({
4452
+ children: children
4453
+ })), stepStatus === 'IsActive' && !_hideFooter && jsx("footer", Object.assign({
4457
4454
  className: "gds-in-page-wizard-step-card__footer"
4458
4455
  }, {
4459
4456
  children: jsxs("button", Object.assign({
4460
4457
  className: "primary",
4461
- onClick: props.onNextClick
4458
+ onClick: onNextClick
4462
4459
  }, {
4463
- children: [props.nextBtnText, props.nextBtnIcon]
4460
+ children: [_nextBtnText, nextBtnIcon]
4464
4461
  }))
4465
- })), props.stepStatus === 'IsComplete' && !props.hideFooter && jsx("footer", Object.assign({
4466
- className: "gds-in-page-wizard-step-card__footer__edit"
4462
+ })), stepStatus === 'IsComplete' && !_hideFooter && jsx("footer", Object.assign({
4463
+ className: "gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit"
4467
4464
  }, {
4468
4465
  children: jsxs("button", Object.assign({
4469
4466
  className: "secondary",
4470
- onClick: props.onEditClick
4467
+ onClick: onEditClick
4471
4468
  }, {
4472
4469
  children: [jsx(Edit, {
4473
4470
  fill: 'var(--color)',
4474
4471
  height: 16,
4475
4472
  width: 16
4476
- }), props.editBtnText]
4473
+ }), _editBtnText]
4477
4474
  }))
4478
4475
  }))]
4479
4476
  }));
@@ -4482,20 +4479,18 @@ const InPageWizardStepCard = props => {
4482
4479
  const Link = _a => {
4483
4480
  var {
4484
4481
  button,
4485
- children
4482
+ children,
4483
+ className,
4484
+ role
4486
4485
  } = _a,
4487
- props = __rest(_a, ["button", "children"]);
4488
- const [anchorProps, setAnchorProps] = useState({});
4489
- useEffect(() => {
4490
- const className = button ? typeof button === 'string' ? `button ${button}` : 'button' : undefined;
4491
- const newProps = Object.assign({
4492
- role: button ? 'button' : undefined,
4493
- className: className
4494
- }, props);
4495
- setAnchorProps(newProps);
4496
- // eslint-disable-next-line react-hooks/exhaustive-deps
4497
- }, [button]);
4498
- return jsx("a", Object.assign({}, anchorProps, {
4486
+ otherProps = __rest(_a, ["button", "children", "className", "role"]);
4487
+ const buttonClassName = classNames(className, {
4488
+ "button": button
4489
+ }, button);
4490
+ return jsx("a", Object.assign({
4491
+ className: buttonClassName,
4492
+ role: button ? 'button' : role
4493
+ }, otherProps, {
4499
4494
  children: children
4500
4495
  }));
4501
4496
  };
@@ -4732,6 +4727,63 @@ const OptionGroup = ({
4732
4727
  }));
4733
4728
  };
4734
4729
 
4730
+ var anObject$1 = anObject$c;
4731
+
4732
+ // `RegExp.prototype.flags` getter implementation
4733
+ // https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
4734
+ var regexpFlags = function () {
4735
+ var that = anObject$1(this);
4736
+ var result = '';
4737
+ if (that.hasIndices) result += 'd';
4738
+ if (that.global) result += 'g';
4739
+ if (that.ignoreCase) result += 'i';
4740
+ if (that.multiline) result += 'm';
4741
+ if (that.dotAll) result += 's';
4742
+ if (that.unicode) result += 'u';
4743
+ if (that.unicodeSets) result += 'v';
4744
+ if (that.sticky) result += 'y';
4745
+ return result;
4746
+ };
4747
+
4748
+ var call = functionCall;
4749
+ var hasOwn = hasOwnProperty_1;
4750
+ var isPrototypeOf = objectIsPrototypeOf;
4751
+ var regExpFlags = regexpFlags;
4752
+
4753
+ var RegExpPrototype$1 = RegExp.prototype;
4754
+
4755
+ var regexpGetFlags = function (R) {
4756
+ var flags = R.flags;
4757
+ return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
4758
+ ? call(regExpFlags, R) : flags;
4759
+ };
4760
+
4761
+ var PROPER_FUNCTION_NAME = functionName.PROPER;
4762
+ var defineBuiltIn = defineBuiltIn$6;
4763
+ var anObject = anObject$c;
4764
+ var $toString = toString$4;
4765
+ var fails$1 = fails$g;
4766
+ var getRegExpFlags = regexpGetFlags;
4767
+
4768
+ var TO_STRING = 'toString';
4769
+ var RegExpPrototype = RegExp.prototype;
4770
+ var nativeToString = RegExpPrototype[TO_STRING];
4771
+
4772
+ var NOT_GENERIC = fails$1(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
4773
+ // FF44- RegExp#toString has a wrong name
4774
+ var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
4775
+
4776
+ // `RegExp.prototype.toString` method
4777
+ // https://tc39.es/ecma262/#sec-regexp.prototype.tostring
4778
+ if (NOT_GENERIC || INCORRECT_NAME) {
4779
+ defineBuiltIn(RegExp.prototype, TO_STRING, function toString() {
4780
+ var R = anObject(this);
4781
+ var pattern = $toString(R.source);
4782
+ var flags = $toString(getRegExpFlags(R));
4783
+ return '/' + pattern + '/' + flags;
4784
+ }, { unsafe: true });
4785
+ }
4786
+
4735
4787
  const InputWrapper = ({
4736
4788
  children,
4737
4789
  unitLabel
@@ -5204,17 +5256,18 @@ const Modal = _a => {
5204
5256
  const dialogProps = {
5205
5257
  id: uuid,
5206
5258
  role: 'dialog',
5207
- "aria-modal": true,
5208
- "aria-labelledby": headerId,
5209
- "aria-describedby": bodyId
5259
+ 'aria-modal': true,
5260
+ 'aria-labelledby': headerId,
5261
+ 'aria-describedby': bodyId
5210
5262
  };
5263
+ let modalContent;
5211
5264
  switch (type) {
5212
5265
  case 'slideout':
5213
5266
  {
5214
5267
  let className = undefined;
5215
- if (size === "lg") className = 'gds-slide-out--960';
5216
- if (size === "md") className = 'gds-slide-out--768';
5217
- return jsxs("aside", Object.assign({
5268
+ if (size === 'lg') className = 'gds-slide-out--960';
5269
+ if (size === 'md') className = 'gds-slide-out--768';
5270
+ modalContent = jsxs("aside", Object.assign({
5218
5271
  className: className
5219
5272
  }, dialogProps, {
5220
5273
  children: [jsx(ModalHeader, Object.assign({
@@ -5223,28 +5276,42 @@ const Modal = _a => {
5223
5276
  id: bodyId
5224
5277
  }, props)), jsx(ModalFooter, Object.assign({}, props))]
5225
5278
  }));
5279
+ break;
5226
5280
  }
5227
5281
  case 'takeover':
5228
5282
  {
5229
- return jsxs("main", Object.assign({}, dialogProps, {
5283
+ modalContent = jsxs("main", Object.assign({}, dialogProps, {
5230
5284
  children: [jsx(ModalHeader, Object.assign({
5231
5285
  id: headerId
5232
5286
  }, props)), jsx(ModalBody, Object.assign({
5233
5287
  id: bodyId
5234
5288
  }, props)), jsx(ModalFooter, Object.assign({}, props))]
5235
5289
  }));
5290
+ break;
5236
5291
  }
5237
5292
  default:
5238
5293
  {
5239
- return jsxs("section", Object.assign({}, dialogProps, {
5294
+ modalContent = jsxs("section", Object.assign({}, dialogProps, {
5240
5295
  children: [jsx(ModalHeader, Object.assign({
5241
5296
  id: headerId
5242
5297
  }, props)), jsx(ModalBody, Object.assign({
5243
5298
  id: bodyId
5244
5299
  }, props)), jsx(ModalFooter, Object.assign({}, props))]
5245
5300
  }));
5301
+ break;
5246
5302
  }
5247
5303
  }
5304
+ const handleBackdropClick = () => {
5305
+ if (props.onClose) props.onClose(null);
5306
+ };
5307
+ return jsxs(Fragment, {
5308
+ children: [modalContent, jsx("div", {
5309
+ "data-testid": "modal-backdrop",
5310
+ className: "backdrop",
5311
+ onClick: handleBackdropClick,
5312
+ "aria-hidden": "true"
5313
+ })]
5314
+ });
5248
5315
  };
5249
5316
 
5250
- 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 };
5317
+ 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 };