@moda/om 21.7.2 → 21.9.0

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/dist/index.esm.js CHANGED
@@ -336,18 +336,18 @@ requireFocusVisible();
336
336
 
337
337
  var dist$4 = {};
338
338
 
339
- var colors = {};
339
+ var colors$1 = {};
340
340
 
341
341
  var hasRequiredColors;
342
342
  function requireColors() {
343
- if (hasRequiredColors) return colors;
343
+ if (hasRequiredColors) return colors$1;
344
344
  hasRequiredColors = 1;
345
- Object.defineProperty(colors, "__esModule", {
345
+ Object.defineProperty(colors$1, "__esModule", {
346
346
  value: true
347
347
  });
348
- colors.colors = void 0;
348
+ colors$1.colors = void 0;
349
349
  // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
350
- colors.colors = {
350
+ colors$1.colors = {
351
351
  "all": {
352
352
  "coal": "rgb(0, 0, 0)",
353
353
  "ink": "rgb(25, 26, 27)",
@@ -432,7 +432,7 @@ function requireColors() {
432
432
  "silver": "rgb(217, 217, 217)"
433
433
  }
434
434
  };
435
- return colors;
435
+ return colors$1;
436
436
  }
437
437
 
438
438
  var typography = {};
@@ -574,7 +574,7 @@ function requireBreakpoints() {
574
574
 
575
575
  var helpers = {};
576
576
 
577
- var colorNames = {
577
+ var colors = {
578
578
  aliceblue: [240, 248, 255],
579
579
  antiquewhite: [250, 235, 215],
580
580
  aqua: [0, 255, 255],
@@ -724,6 +724,8 @@ var colorNames = {
724
724
  yellow: [255, 255, 0],
725
725
  yellowgreen: [154, 205, 50]
726
726
  };
727
+ for (var key in colors) Object.freeze(colors[key]);
728
+ var colorNames = Object.freeze(colors);
727
729
 
728
730
  var reverseNames = Object.create(null);
729
731
 
@@ -775,8 +777,8 @@ cs.get.rgb = function (string) {
775
777
  }
776
778
  var abbr = /^#([a-f\d]{3,4})$/i;
777
779
  var hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
778
- var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
779
- var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
780
+ var rgba = /^rgba?\(\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)\s*(?:[\s,|/]\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(%?)\s*)?\)$/i;
781
+ var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
780
782
  var keyword = /^(\w+)$/;
781
783
  var rgb = [0, 0, 0, 1];
782
784
  var match;
@@ -804,7 +806,7 @@ cs.get.rgb = function (string) {
804
806
  }
805
807
  } else if (match = string.match(rgba)) {
806
808
  for (i = 0; i < 3; i++) {
807
- rgb[i] = Number.parseInt(match[i + 1], 10);
809
+ rgb[i] = Number.parseFloat(match[i + 1]);
808
810
  }
809
811
  if (match[4]) {
810
812
  rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
@@ -816,14 +818,16 @@ cs.get.rgb = function (string) {
816
818
  if (match[4]) {
817
819
  rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
818
820
  }
819
- } else if (match = string.match(keyword)) {
821
+ } else if (match = string.toLowerCase().match(keyword)) {
820
822
  if (match[1] === 'transparent') {
821
823
  return [0, 0, 0, 0];
822
824
  }
823
825
  if (!Object.hasOwn(colorNames, match[1])) {
824
826
  return null;
825
827
  }
826
- rgb = colorNames[match[1]];
828
+
829
+ // eslint-disable-next-line unicorn/prefer-spread
830
+ rgb = colorNames[match[1]].slice();
827
831
  rgb[3] = 1;
828
832
  return rgb;
829
833
  } else {
@@ -839,7 +843,7 @@ cs.get.hsl = function (string) {
839
843
  if (!string) {
840
844
  return null;
841
845
  }
842
- var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
846
+ var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
843
847
  var match = string.match(hsl);
844
848
  if (match) {
845
849
  var alpha = Number.parseFloat(match[4]);
@@ -855,7 +859,7 @@ cs.get.hwb = function (string) {
855
859
  if (!string) {
856
860
  return null;
857
861
  }
858
- var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
862
+ var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*[\s,]\s*([+-]?[\d.]+)%\s*[\s,]\s*([+-]?[\d.]+)%\s*(?:[\s,]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
859
863
  var match = string.match(hwb);
860
864
  if (match) {
861
865
  var alpha = Number.parseFloat(match[4]);
@@ -3096,8 +3100,6 @@ var extractRef$2 = function extractRef(ref) {
3096
3100
  var effectCar = createSidecarMedium();
3097
3101
  var focusHiddenMarker = 'data-focus-on-hidden';
3098
3102
 
3099
- __assign$a({}, RemoveScroll.classNames);
3100
-
3101
3103
  var PREVENT_SCROLL = {
3102
3104
  preventScroll: true
3103
3105
  };
@@ -4870,6 +4872,13 @@ function RemoveScrollSideCar(props) {
4870
4872
  if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
4871
4873
  return false;
4872
4874
  }
4875
+ // allow drag selection (iOS); check if selection's anchorNode is the same as target or contains target
4876
+ var selection = window.getSelection();
4877
+ var anchorNode = selection && selection.anchorNode;
4878
+ var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
4879
+ if (isTouchingSelection) {
4880
+ return false;
4881
+ }
4873
4882
  var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
4874
4883
  if (!canBeScrolledInMainDirection) {
4875
4884
  return true;
@@ -9546,14 +9555,13 @@ function requireClone() {
9546
9555
  Object.defineProperty(clone, "__esModule", {
9547
9556
  value: true
9548
9557
  });
9549
- clone.clone = void 0;
9558
+ clone.clone = clone$1;
9550
9559
  function clone$1(originalObject) {
9551
9560
  if (!originalObject) {
9552
9561
  return null;
9553
9562
  }
9554
9563
  return JSON.parse(JSON.stringify(originalObject));
9555
9564
  }
9556
- clone.clone = clone$1;
9557
9565
  return clone;
9558
9566
  }
9559
9567
 
@@ -9569,7 +9577,7 @@ function requireMatches() {
9569
9577
  Object.defineProperty(matches, "__esModule", {
9570
9578
  value: true
9571
9579
  });
9572
- matches.matches = void 0;
9580
+ matches.matches = matches$1;
9573
9581
  function matchesRange(cardNumber, min, max) {
9574
9582
  var maxLengthToCheck = String(min).length;
9575
9583
  var substr = cardNumber.substr(0, maxLengthToCheck);
@@ -9588,7 +9596,6 @@ function requireMatches() {
9588
9596
  }
9589
9597
  return matchesPattern(cardNumber, pattern);
9590
9598
  }
9591
- matches.matches = matches$1;
9592
9599
  return matches;
9593
9600
  }
9594
9601
 
@@ -9599,7 +9606,7 @@ function requireAddMatchingCardsToResults() {
9599
9606
  Object.defineProperty(addMatchingCardsToResults, "__esModule", {
9600
9607
  value: true
9601
9608
  });
9602
- addMatchingCardsToResults.addMatchingCardsToResults = void 0;
9609
+ addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
9603
9610
  var clone_1 = requireClone();
9604
9611
  var matches_1 = requireMatches();
9605
9612
  function addMatchingCardsToResults$1(cardNumber, cardConfiguration, results) {
@@ -9622,7 +9629,6 @@ function requireAddMatchingCardsToResults() {
9622
9629
  break;
9623
9630
  }
9624
9631
  }
9625
- addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
9626
9632
  return addMatchingCardsToResults;
9627
9633
  }
9628
9634
 
@@ -9635,11 +9641,10 @@ function requireIsValidInputType() {
9635
9641
  Object.defineProperty(isValidInputType, "__esModule", {
9636
9642
  value: true
9637
9643
  });
9638
- isValidInputType.isValidInputType = void 0;
9644
+ isValidInputType.isValidInputType = isValidInputType$1;
9639
9645
  function isValidInputType$1(cardNumber) {
9640
9646
  return typeof cardNumber === "string" || cardNumber instanceof String;
9641
9647
  }
9642
- isValidInputType.isValidInputType = isValidInputType$1;
9643
9648
  return isValidInputType;
9644
9649
  }
9645
9650
 
@@ -9652,7 +9657,7 @@ function requireFindBestMatch() {
9652
9657
  Object.defineProperty(findBestMatch, "__esModule", {
9653
9658
  value: true
9654
9659
  });
9655
- findBestMatch.findBestMatch = void 0;
9660
+ findBestMatch.findBestMatch = findBestMatch$1;
9656
9661
  function hasEnoughResultsToDetermineBestMatch(results) {
9657
9662
  var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
9658
9663
  return result.matchStrength;
@@ -9682,7 +9687,6 @@ function requireFindBestMatch() {
9682
9687
  return bestMatch;
9683
9688
  });
9684
9689
  }
9685
- findBestMatch.findBestMatch = findBestMatch$1;
9686
9690
  return findBestMatch;
9687
9691
  }
9688
9692
 
@@ -12314,6 +12318,273 @@ var Paginator = function Paginator(_ref) {
12314
12318
  })));
12315
12319
  };
12316
12320
 
12321
+ var isStyleObject = function isStyleObject(obj) {
12322
+ return _typeof$1(obj) === 'object' && obj !== null;
12323
+ };
12324
+ var OTPInput = function OTPInput(_a) {
12325
+ var _b = _a.value,
12326
+ value = _b === void 0 ? '' : _b,
12327
+ _c = _a.numInputs,
12328
+ numInputs = _c === void 0 ? 4 : _c,
12329
+ onChange = _a.onChange,
12330
+ onPaste = _a.onPaste,
12331
+ renderInput = _a.renderInput,
12332
+ _d = _a.shouldAutoFocus,
12333
+ shouldAutoFocus = _d === void 0 ? false : _d,
12334
+ _e = _a.inputType,
12335
+ inputType = _e === void 0 ? 'text' : _e,
12336
+ renderSeparator = _a.renderSeparator,
12337
+ placeholder = _a.placeholder,
12338
+ containerStyle = _a.containerStyle,
12339
+ inputStyle = _a.inputStyle,
12340
+ _f = _a.skipDefaultStyles,
12341
+ skipDefaultStyles = _f === void 0 ? false : _f;
12342
+ var _g = React__default.useState(0),
12343
+ activeInput = _g[0],
12344
+ setActiveInput = _g[1];
12345
+ var inputRefs = React__default.useRef([]);
12346
+ var getOTPValue = function getOTPValue() {
12347
+ return value ? value.toString().split('') : [];
12348
+ };
12349
+ var isInputNum = inputType === 'number' || inputType === 'tel';
12350
+ React__default.useEffect(function () {
12351
+ inputRefs.current = inputRefs.current.slice(0, numInputs);
12352
+ }, [numInputs]);
12353
+ React__default.useEffect(function () {
12354
+ var _a;
12355
+ if (shouldAutoFocus) {
12356
+ (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
12357
+ }
12358
+ }, [shouldAutoFocus]);
12359
+ var getPlaceholderValue = function getPlaceholderValue() {
12360
+ if (typeof placeholder === 'string') {
12361
+ if (placeholder.length === numInputs) {
12362
+ return placeholder;
12363
+ }
12364
+ if (placeholder.length > 0) {
12365
+ console.error('Length of the placeholder should be equal to the number of inputs.');
12366
+ }
12367
+ }
12368
+ return undefined;
12369
+ };
12370
+ var isInputValueValid = function isInputValueValid(value) {
12371
+ var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
12372
+ return isTypeValid && value.trim().length === 1;
12373
+ };
12374
+ var handleChange = function handleChange(event) {
12375
+ var value = event.target.value;
12376
+ if (isInputValueValid(value)) {
12377
+ changeCodeAtFocus(value);
12378
+ focusInput(activeInput + 1);
12379
+ }
12380
+ };
12381
+ var handleInputChange = function handleInputChange(event) {
12382
+ var nativeEvent = event.nativeEvent;
12383
+ var value = event.target.value;
12384
+ if (!isInputValueValid(value)) {
12385
+ // Pasting from the native autofill suggestion on a mobile device can pass
12386
+ // the pasted string as one long input to one of the cells. This ensures
12387
+ // that we handle the full input and not just the first character.
12388
+ if (value.length === numInputs) {
12389
+ var hasInvalidInput = value.split('').some(function (cellInput) {
12390
+ return !isInputValueValid(cellInput);
12391
+ });
12392
+ if (!hasInvalidInput) {
12393
+ handleOTPChange(value.split(''));
12394
+ focusInput(numInputs - 1);
12395
+ }
12396
+ }
12397
+ // @ts-expect-error - This was added previously to handle and edge case
12398
+ // for dealing with keyCode "229 Unidentified" on Android. Check if this is
12399
+ // still needed.
12400
+ if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
12401
+ event.preventDefault();
12402
+ changeCodeAtFocus('');
12403
+ focusInput(activeInput - 1);
12404
+ }
12405
+ // Clear the input if it's not valid value because firefox allows
12406
+ // pasting non-numeric characters in a number type input
12407
+ event.target.value = '';
12408
+ }
12409
+ };
12410
+ var handleFocus = function handleFocus(event) {
12411
+ return function (index) {
12412
+ setActiveInput(index);
12413
+ event.target.select();
12414
+ };
12415
+ };
12416
+ var handleBlur = function handleBlur() {
12417
+ setActiveInput(activeInput - 1);
12418
+ };
12419
+ var handleKeyDown = function handleKeyDown(event) {
12420
+ var otp = getOTPValue();
12421
+ if ([event.code, event.key].includes('Backspace')) {
12422
+ event.preventDefault();
12423
+ changeCodeAtFocus('');
12424
+ focusInput(activeInput - 1);
12425
+ } else if (event.code === 'Delete') {
12426
+ event.preventDefault();
12427
+ changeCodeAtFocus('');
12428
+ } else if (event.code === 'ArrowLeft') {
12429
+ event.preventDefault();
12430
+ focusInput(activeInput - 1);
12431
+ } else if (event.code === 'ArrowRight') {
12432
+ event.preventDefault();
12433
+ focusInput(activeInput + 1);
12434
+ }
12435
+ // React does not trigger onChange when the same value is entered
12436
+ // again. So we need to focus the next input manually in this case.
12437
+ else if (event.key === otp[activeInput]) {
12438
+ event.preventDefault();
12439
+ focusInput(activeInput + 1);
12440
+ } else if (event.code === 'Spacebar' || event.code === 'Space' || event.code === 'ArrowUp' || event.code === 'ArrowDown') {
12441
+ event.preventDefault();
12442
+ }
12443
+ };
12444
+ var focusInput = function focusInput(index) {
12445
+ var _a, _b;
12446
+ var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
12447
+ if (inputRefs.current[activeInput]) {
12448
+ (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
12449
+ (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
12450
+ setActiveInput(activeInput);
12451
+ }
12452
+ };
12453
+ var changeCodeAtFocus = function changeCodeAtFocus(value) {
12454
+ var otp = getOTPValue();
12455
+ otp[activeInput] = value[0];
12456
+ handleOTPChange(otp);
12457
+ };
12458
+ var handleOTPChange = function handleOTPChange(otp) {
12459
+ var otpValue = otp.join('');
12460
+ onChange(otpValue);
12461
+ };
12462
+ var handlePaste = function handlePaste(event) {
12463
+ var _a;
12464
+ event.preventDefault();
12465
+ var otp = getOTPValue();
12466
+ var nextActiveInput = activeInput;
12467
+ // Get pastedData in an array of max size (num of inputs - current position)
12468
+ var pastedData = event.clipboardData.getData('text/plain').slice(0, numInputs - activeInput).split('');
12469
+ // Prevent pasting if the clipboard data contains non-numeric values for number inputs
12470
+ if (isInputNum && pastedData.some(function (value) {
12471
+ return isNaN(Number(value));
12472
+ })) {
12473
+ return;
12474
+ }
12475
+ // Paste data from focused input onwards
12476
+ for (var pos = 0; pos < numInputs; ++pos) {
12477
+ if (pos >= activeInput && pastedData.length > 0) {
12478
+ otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
12479
+ nextActiveInput++;
12480
+ }
12481
+ }
12482
+ focusInput(nextActiveInput);
12483
+ handleOTPChange(otp);
12484
+ };
12485
+ return /*#__PURE__*/React__default.createElement("div", {
12486
+ style: Object.assign({
12487
+ display: 'flex',
12488
+ alignItems: 'center'
12489
+ }, isStyleObject(containerStyle) && containerStyle),
12490
+ className: typeof containerStyle === 'string' ? containerStyle : undefined,
12491
+ onPaste: onPaste
12492
+ }, Array.from({
12493
+ length: numInputs
12494
+ }, function (_, index) {
12495
+ return index;
12496
+ }).map(function (index) {
12497
+ var _a, _b, _c;
12498
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
12499
+ key: index
12500
+ }, renderInput({
12501
+ value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
12502
+ placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
12503
+ ref: function ref(element) {
12504
+ return inputRefs.current[index] = element;
12505
+ },
12506
+ onChange: handleChange,
12507
+ onFocus: function onFocus(event) {
12508
+ return handleFocus(event)(index);
12509
+ },
12510
+ onBlur: handleBlur,
12511
+ onKeyDown: handleKeyDown,
12512
+ onPaste: handlePaste,
12513
+ autoComplete: 'off',
12514
+ 'aria-label': "Please enter OTP character ".concat(index + 1),
12515
+ style: Object.assign(!skipDefaultStyles ? {
12516
+ width: '1em',
12517
+ textAlign: 'center'
12518
+ } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
12519
+ className: typeof inputStyle === 'string' ? inputStyle : undefined,
12520
+ type: inputType,
12521
+ inputMode: isInputNum ? 'numeric' : 'text',
12522
+ onInput: handleInputChange
12523
+ }, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator));
12524
+ }));
12525
+ };
12526
+
12527
+ var getInputAriaLabel = function getInputAriaLabel(index, inputCount, ariaLabel, label) {
12528
+ var baseLabel = ariaLabel || label || 'One-time password digit';
12529
+ return "".concat(baseLabel, " ").concat(index + 1, " of ").concat(inputCount);
12530
+ };
12531
+ var OtpInput = function OtpInput(_ref) {
12532
+ var ariaDescribedBy = _ref['aria-describedby'],
12533
+ ariaLabel = _ref['aria-label'],
12534
+ _ref$autoComplete = _ref.autoComplete,
12535
+ autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
12536
+ className = _ref.className,
12537
+ disabled = _ref.disabled,
12538
+ error = _ref.error,
12539
+ focus = _ref.focus,
12540
+ id = _ref.id,
12541
+ inputClassName = _ref.inputClassName,
12542
+ _ref$inputType = _ref.inputType,
12543
+ inputType = _ref$inputType === void 0 ? 'tel' : _ref$inputType,
12544
+ label = _ref.label,
12545
+ name = _ref.name,
12546
+ _ref$numInputs = _ref.numInputs,
12547
+ numInputs = _ref$numInputs === void 0 ? 4 : _ref$numInputs,
12548
+ onChange = _ref.onChange,
12549
+ onPaste = _ref.onPaste,
12550
+ placeholder = _ref.placeholder,
12551
+ renderSeparator = _ref.renderSeparator,
12552
+ required = _ref.required,
12553
+ shouldAutoFocus = _ref.shouldAutoFocus,
12554
+ _ref$value = _ref.value,
12555
+ value = _ref$value === void 0 ? '' : _ref$value;
12556
+ return /*#__PURE__*/React__default.createElement(OTPInput, {
12557
+ containerStyle: classNames('OtpInput', className),
12558
+ inputType: inputType,
12559
+ numInputs: numInputs,
12560
+ onChange: onChange,
12561
+ onPaste: onPaste,
12562
+ placeholder: placeholder,
12563
+ renderSeparator: renderSeparator,
12564
+ shouldAutoFocus: shouldAutoFocus,
12565
+ skipDefaultStyles: true,
12566
+ value: value,
12567
+ renderInput: function renderInput(inputProps, index) {
12568
+ return /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
12569
+ id: id ? "".concat(id, "-").concat(index + 1) : undefined,
12570
+ autoComplete: autoComplete,
12571
+ "aria-describedby": ariaDescribedBy,
12572
+ "aria-invalid": error ? true : undefined,
12573
+ "aria-label": getInputAriaLabel(index, numInputs, ariaLabel, label),
12574
+ className: classNames(inputProps.className, 'OtpInput__input', inputClassName, {
12575
+ 'OtpInput__input--disabled': disabled,
12576
+ 'OtpInput__input--error': error,
12577
+ 'OtpInput__input--focus': focus
12578
+ }),
12579
+ disabled: disabled,
12580
+ name: name,
12581
+ required: required
12582
+ }));
12583
+ }
12584
+ });
12585
+ };
12586
+ OtpInput.displayName = 'OtpInput';
12587
+
12317
12588
  var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
12318
12589
  var rest = _extends$1({}, (_objectDestructuringEmpty(_ref), _ref));
12319
12590
  var _useState = useState(false),
@@ -12655,9 +12926,10 @@ var Tab = function Tab(_ref) {
12655
12926
  var TabList = function TabList(_ref) {
12656
12927
  var tabs = _ref.tabs,
12657
12928
  onTabSelected = _ref.onTabSelected,
12658
- activePanel = _ref.activePanel;
12929
+ activePanel = _ref.activePanel,
12930
+ className = _ref.className;
12659
12931
  return /*#__PURE__*/React__default.createElement("div", {
12660
- className: "TabList"
12932
+ className: classNames('TabList', className)
12661
12933
  }, tabs.map(function (tab) {
12662
12934
  return /*#__PURE__*/React__default.createElement(Tab, {
12663
12935
  key: tab.name,
@@ -12689,13 +12961,14 @@ var TabPanels = function TabPanels(_ref) {
12689
12961
  }));
12690
12962
  };
12691
12963
 
12692
- var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
12964
+ var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className", "tabListClassName"];
12693
12965
  var Tabs = function Tabs(_ref) {
12694
12966
  var tabs = _ref.tabs,
12695
12967
  onTabClicked = _ref.onTabClicked,
12696
12968
  defaultActiveTab = _ref.defaultActiveTab,
12697
12969
  activeTab = _ref.activeTab,
12698
12970
  className = _ref.className,
12971
+ tabListClassName = _ref.tabListClassName,
12699
12972
  rest = _objectWithoutProperties(_ref, _excluded$4);
12700
12973
  var _useState = useState(activeTab || defaultActiveTab || tabs[0].name),
12701
12974
  _useState2 = _slicedToArray(_useState, 2),
@@ -12713,7 +12986,8 @@ var Tabs = function Tabs(_ref) {
12713
12986
  }, rest), /*#__PURE__*/React__default.createElement(TabList, {
12714
12987
  tabs: tabs,
12715
12988
  onTabSelected: handleTabClick,
12716
- activePanel: activePanel
12989
+ activePanel: activePanel,
12990
+ className: tabListClassName
12717
12991
  }), /*#__PURE__*/React__default.createElement(TabPanels, {
12718
12992
  panels: tabs,
12719
12993
  activePanel: activePanel
@@ -12809,4 +13083,4 @@ var Utilities = {
12809
13083
  States: States
12810
13084
  };
12811
13085
 
12812
- export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };
13086
+ export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, OtpInput, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };