@moda/om 21.9.0 → 21.11.0

package/dist/index.cjs.js

@@ -1355,11 +1355,11 @@ var StateProps = function StateProps(_ref) {
   }, stringifyProps(props)), ' ', !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React.createElement("span", null, ' />'));
 };
 
-var _excluded$G = ["props", "children"];
+var _excluded$H = ["props", "children"];
 var State = function State(_ref) {
   var props = _ref.props,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var styles = useStyles();
   var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React.cloneElement(children, props);
   var innerChildren = isRenderProps(children) ? children(props) : children;
@@ -1370,12 +1370,12 @@ var State = function State(_ref) {
   }, innerChildren));
 };
 
-var _excluded$F = ["states", "children"];
+var _excluded$G = ["states", "children"];
 var States = function States(_ref) {
   var _ref$states = _ref.states,
     states = _ref$states === void 0 ? [{}] : _ref$states,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React.createElement(React.Fragment, null, states.map(function (props, index) {
     return /*#__PURE__*/React.createElement(State, _extends$1({
       key: index,
@@ -5431,7 +5431,7 @@ function requireDist$3() {
 
 var distExports$3 = requireDist$3();
 
-var _excluded$E = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
+var _excluded$F = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
 var DEFAULT_PRODUCT_ASPECT_WIDTH = 128;
 var DEFAULT_PRODUCT_ASPECT_HEIGHT = 205;
 var DEFAULT_PRODUCT_ASPECT_RATIO = DEFAULT_PRODUCT_ASPECT_HEIGHT / DEFAULT_PRODUCT_ASPECT_WIDTH;
@@ -5477,7 +5477,7 @@ var AspectRatioBox = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef
     outlined = _ref2$outlined === void 0 ? false : _ref2$outlined,
     children = _ref2.children,
     className = _ref2.className,
-    rest = _objectWithoutProperties(_ref2, _excluded$E);
+    rest = _objectWithoutProperties(_ref2, _excluded$F);
   var _scaleDimensions = scaleDimensions({
       width: aspectWidth,
       height: aspectHeight,
@@ -5505,22 +5505,22 @@ var AspectRatioBox = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef
 });
 AspectRatioBox.displayName = 'AspectRatioBox';
 
-var _excluded$D = ["className", "theme", "children"];
+var _excluded$E = ["className", "theme", "children"];
 var Badge = function Badge(_ref) {
   var className = _ref.className,
     theme = _ref.theme,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React.createElement("span", _extends$1({
     className: classNames('Badge', theme && "Badge--".concat(theme), className)
   }, rest), children);
 };
 
-var _excluded$C = ["children", "className"];
+var _excluded$D = ["children", "className"];
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var position = 0;
   return /*#__PURE__*/React.createElement("ol", _extends$1({
     itemScope: true,
@@ -5538,7 +5538,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-var _excluded$B = ["className", "styleless", "disabled"];
+var _excluded$C = ["className", "styleless", "disabled"];
 
 // Define minimal LinkProps that work with both v5 and v7
 // Using Omit to remove conflicting HTML attributes, then add router-specific props
@@ -5557,7 +5557,7 @@ var Clickable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$styleless = _ref.styleless,
     styleless = _ref$styleless === void 0 ? false : _ref$styleless,
     disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var baseClassName = classNames({
     Clickable: !styleless,
     'Clickable--disabled': disabled
@@ -5585,14 +5585,14 @@ var Clickable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Clickable.displayName = 'Clickable';
 
-var _excluded$A = ["className", "disabled", "children", "underlined"];
+var _excluded$B = ["className", "disabled", "children", "underlined"];
 var ControlLink = function ControlLink(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     children = _ref.children,
     _ref$underlined = _ref.underlined,
     underlined = _ref$underlined === void 0 ? true : _ref$underlined,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React.createElement(Clickable, _extends$1({}, rest, {
     className: classNames('ControlLink', {
       'ControlLink--underlined': underlined
@@ -5603,12 +5603,12 @@ var ControlLink = function ControlLink(_ref) {
   }), children);
 };
 
-var _excluded$z = ["children", "position", "className"];
+var _excluded$A = ["children", "position", "className"];
 var Breadcrumb = function Breadcrumb(_ref) {
   var children = _ref.children,
     position = _ref.position,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   return /*#__PURE__*/React.createElement("li", {
     className: classNames('Breadcrumb', className),
     itemProp: "itemListElement",
@@ -7352,11 +7352,11 @@ var useBreakpoint = function useBreakpoint(props) {
   };
 };
 
-var _excluded$y = ["children", "className"];
+var _excluded$z = ["children", "className"];
 var Breakpoint = function Breakpoint(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   var _discriminate = discriminate(rest),
     mode = _discriminate.mode,
     breakpoint = _discriminate.breakpoint;
@@ -7367,7 +7367,7 @@ var Breakpoint = function Breakpoint(_ref) {
   }, omit(['at', 'gt', 'lt'], rest)), children) : null;
 };
 
-var _excluded$x = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
+var _excluded$y = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
 var Button = function Button(_ref) {
   var secondary = _ref.secondary,
     tertiary = _ref.tertiary,
@@ -7377,7 +7377,7 @@ var Button = function Button(_ref) {
     focus = _ref.focus,
     disabled = _ref.disabled,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React.createElement(Clickable, _extends$1({
     className: classNames('Button', {
       'Button--chip': chip,
@@ -7501,7 +7501,7 @@ var Circle12 = function Circle12(_a) {
 };
 Circle12.displayName = 'Circle12';
 
-var _excluded$w = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
+var _excluded$x = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
 var CHECKED_ITEM_PROPS = {
   className: 'Checkbox__check-mark',
   height: '85%',
@@ -7520,7 +7520,7 @@ var Checkbox = function Checkbox(_ref) {
     checkIcon = _ref$checkIcon === void 0 ? 'checkmark' : _ref$checkIcon,
     dataTestId = _ref.dataTestId,
     id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   var _useState = React.useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
@@ -7610,7 +7610,7 @@ var SKU_COLORS = {
   yellow: '#ffca44'
 };
 
-var _excluded$v = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
+var _excluded$w = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
 var ColorSwatch = function ColorSwatch(_ref) {
   var _SKU_COLORS;
   var className = _ref.className,
@@ -7626,7 +7626,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     disabled = _ref.disabled,
     title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   var handleClick = React.useCallback(function (_event) {
     onClick === null || onClick === void 0 || onClick(color, title);
   }, [color, title, onClick]);
@@ -7661,7 +7661,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
   }));
 };
 
-var _excluded$u = ["className", "children", "onClose", "shards", "autoFocus"];
+var _excluded$v = ["className", "children", "onClose", "shards", "autoFocus"];
 var Modal = function Modal(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -7669,7 +7669,7 @@ var Modal = function Modal(_ref) {
     shards = _ref.shards,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames('Modal', className),
     role: "dialog",
@@ -7682,14 +7682,14 @@ var Modal = function Modal(_ref) {
   }, children));
 };
 
-var _excluded$t = ["className", "children", "show"];
+var _excluded$u = ["className", "children", "show"];
 var UNMOUNT_DELAY_MS = 500;
 var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     children = _ref.children,
     _ref$show = _ref.show,
     show = _ref$show === void 0 ? true : _ref$show,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var _useState = React.useState(show),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -7716,7 +7716,7 @@ var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
 });
 Overlay.displayName = 'Overlay';
 
-var _excluded$s = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
+var _excluded$t = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -7727,7 +7727,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     show = _ref$show === void 0 ? true : _ref$show,
     shards = _ref.shards,
     autoFocus = _ref.autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   var element = React.useMemo(function () {
     return typeof document !== 'undefined' ? document.createElement('div') : null;
   }, []);
@@ -7753,7 +7753,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
   }, children))), element);
 };
 
-var _excluded$r = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
+var _excluded$s = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
 var Stack = function Stack(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -7763,7 +7763,7 @@ var Stack = function Stack(_ref) {
     alignItems = _ref.alignItems,
     justifyContent = _ref.justifyContent,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -7773,7 +7773,7 @@ var Stack = function Stack(_ref) {
   }, rest), children);
 };
 
-var _excluded$q = ["as", "className", "treatment", "color", "family", "children", "style"];
+var _excluded$r = ["as", "className", "treatment", "color", "family", "children", "style"];
 var Text = function Text(_ref) {
   var _ref$as = _ref.as,
     Component = _ref$as === void 0 ? 'span' : _ref$as,
@@ -7785,7 +7785,7 @@ var Text = function Text(_ref) {
     family = _ref.family,
     children = _ref.children,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React.createElement(Component, _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
@@ -7794,13 +7794,13 @@ var Text = function Text(_ref) {
   }, rest), children);
 };
 
-var _excluded$p = ["title", "message", "actions", "contentClassName"];
+var _excluded$q = ["title", "message", "actions", "contentClassName"];
 var Dialog = function Dialog(_ref) {
   var title = _ref.title,
     message = _ref.message,
     actions = _ref.actions,
     contentClassName = _ref.contentClassName,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   var titleId = React.useId();
   return /*#__PURE__*/React.createElement(ModalOverlay, _extends$1({
     contentClassName: classNames('Dialog', contentClassName),
@@ -7902,21 +7902,21 @@ var useConfirm = function useConfirm() {
   return React.useContext(ConfirmContext);
 };
 
-var _excluded$o = ["className", "children"];
+var _excluded$p = ["className", "children"];
 var Constrain = function Constrain(_ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames('Constrain', className)
   }, rest), children);
 };
 
-var _excluded$n = ["className", "children"];
+var _excluded$o = ["className", "children"];
 var ExceedConstrain = function ExceedConstrain(_ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$n);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames('ExceedConstrain', className)
   }, rest), children);
@@ -9880,7 +9880,7 @@ var Warning16 = function Warning16(_a) {
 };
 Warning16.displayName = 'Warning16';
 
-var _excluded$m = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
+var _excluded$n = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
 var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -9890,7 +9890,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label = _ref.label,
     _onChange = _ref.onChange,
     onChangeEvent = _ref.onChangeEvent,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React.createElement("input", _extends$1({
     className: classNames('TextInput', className, {
       'TextInput--focus': focus,
@@ -10346,7 +10346,7 @@ var Search20 = function Search20(_a) {
 };
 Search20.displayName = 'Search20';
 
-var _excluded$l = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value", "searchIconSize"];
+var _excluded$m = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value", "searchIconSize"];
 var SEARCH_ICON_DEFAULT_SIZE = 20;
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
@@ -10361,7 +10361,7 @@ var SearchInput = function SearchInput(_ref) {
     value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
     _ref$searchIconSize = _ref.searchIconSize,
     searchIconSize = _ref$searchIconSize === void 0 ? SEARCH_ICON_DEFAULT_SIZE : _ref$searchIconSize,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   var ref = React.useRef(null);
   var _useState = React.useState(value),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10626,7 +10626,7 @@ var SelectOption = function SelectOption(_ref) {
   }), label);
 };
 
-var _excluded$k = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId", "extraOption", "onCloseDropdown"];
+var _excluded$l = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId", "extraOption", "onCloseDropdown"];
 var SelectOptions = function SelectOptions(_ref) {
   var idRef = _ref.idRef,
     searchable = _ref.searchable,
@@ -10640,7 +10640,7 @@ var SelectOptions = function SelectOptions(_ref) {
     dataTestId = _ref.dataTestId,
     extraOption = _ref.extraOption,
     onCloseDropdown = _ref.onCloseDropdown,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
+    rest = _objectWithoutProperties(_ref, _excluded$l);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchPhrase = _useState2[0],
@@ -10825,7 +10825,7 @@ var useSelect = function useSelect(_ref) {
   };
 };
 
-var _excluded$j = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption", "paddingRight", "smallMobileText"];
+var _excluded$k = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption", "paddingRight", "smallMobileText"];
 var Select = function Select(_ref) {
   var _ref2, _ref3;
   var _ref$allowAutoFill = _ref.allowAutoFill,
@@ -10855,7 +10855,7 @@ var Select = function Select(_ref) {
     paddingRight = _ref.paddingRight,
     _ref$smallMobileText = _ref.smallMobileText,
     smallMobileText = _ref$smallMobileText === void 0 ? false : _ref$smallMobileText,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   var _useFormControlContex = useFormControlContext(),
     errorDisplayedByParent = _useFormControlContex.displaysError;
   var _useSelect = useSelect({
@@ -11048,7 +11048,7 @@ var Exit16 = function Exit16(_a) {
 };
 Exit16.displayName = 'Exit16';
 
-var _excluded$i = ["className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "onChange", "options", "searchable", "shiftIconLeftwards", "value"];
+var _excluded$j = ["className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "onChange", "options", "searchable", "shiftIconLeftwards", "value"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     defaultValue = _ref.defaultValue,
@@ -11063,7 +11063,7 @@ var MultiSelect = function MultiSelect(_ref) {
     searchable = _ref.searchable,
     shiftIconLeftwards = _ref.shiftIconLeftwards,
     value = _ref.value,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   var _useSelect = useSelect({
       value: value,
       defaultValue: defaultValue
@@ -11176,14 +11176,16 @@ var MultiSelect = function MultiSelect(_ref) {
   }));
 };
 
-var _excluded$h = ["className", "children", "error", "label", "placeholder"];
+var _excluded$i = ["className", "children", "error", "label", "placeholder", "showErrorIcon"];
 var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     error = _ref.error,
     label = _ref.label,
     placeholder = _ref.placeholder,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    _ref$showErrorIcon = _ref.showErrorIcon,
+    showErrorIcon = _ref$showErrorIcon === void 0 ? true : _ref$showErrorIcon,
+    rest = _objectWithoutProperties(_ref, _excluded$i);
   var id = React.useId();
   var errorId = "".concat(id, "-error");
   var fieldContextValue = React.useMemo(function () {
@@ -11209,7 +11211,7 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label: label,
     shiftIconLeftwards: error && children.type === Select,
     'aria-describedby': ariaDescribedBy
-  }, rest), children.props)), error && /*#__PURE__*/React.createElement("span", {
+  }, rest), children.props)), error && showErrorIcon && /*#__PURE__*/React.createElement("span", {
     className: "Field__icon"
   }, /*#__PURE__*/React.createElement(Warning16, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, _extends$1({
     ref: ref,
@@ -11227,16 +11229,16 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Field.displayName = 'Field';
 
-var _excluded$g = ["onChange"];
+var _excluded$h = ["onChange"];
 var CreditCardNumberInputField = function CreditCardNumberInputField(_ref) {
   var onChange = _ref.onChange,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React.createElement(Field, _extends$1({}, rest, {
     onChangeEvent: onChange
   }));
 };
 
-var _excluded$f = ["value", "disabled", "readOnly", "defaultValue", "maskChar", "alwaysShowMask", "onMouseDown", "onFocus", "onBlur", "onChange"];
+var _excluded$g = ["value", "disabled", "readOnly", "defaultValue", "maskChar", "alwaysShowMask", "onMouseDown", "onFocus", "onBlur", "onChange"];
 var DEFAULT_MASK = '9999 9999 9999 9999';
 var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
   var _ref2;
@@ -11250,7 +11252,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
-    rest = _objectWithoutProperties(_ref, _excluded$f);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = React.useState((_ref2 = propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : ''),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -11288,18 +11290,18 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
   }, /*#__PURE__*/React.createElement(CreditCardNumberInputField, rest));
 };
 
-var _excluded$e = ["term", "children", "className"];
+var _excluded$f = ["term", "children", "className"];
 var DefinitionList = function DefinitionList(_ref) {
   var term = _ref.term,
     children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/React.createElement("dl", _extends$1({
     className: classNames('DefinitionList', className)
   }, rest), /*#__PURE__*/React.createElement("dt", null, term), /*#__PURE__*/React.createElement("dd", null, children));
 };
 
-var _excluded$d = ["text", "treatment", "color", "family", "type", "className"];
+var _excluded$e = ["text", "treatment", "color", "family", "type", "className"];
 var Divider = function Divider(_ref) {
   var text = _ref.text,
     treatment = _ref.treatment,
@@ -11307,7 +11309,7 @@ var Divider = function Divider(_ref) {
     family = _ref.family,
     type = _ref.type,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   var defaultTreatment = type === 'two-line' ? 'eyebrow' : 'h5';
   var defaultFamily = type === 'two-line' ? undefined : 'serif';
   return /*#__PURE__*/React.createElement("div", _extends$1({
@@ -11340,7 +11342,7 @@ var LineAboveDivider = function LineAboveDivider(props) {
   }));
 };
 
-var _excluded$c = ["name", "children", "className", "virtual", "icon", "data-testid", "defaultExpanded", "expanded", "onToggle", "background", "border"];
+var _excluded$d = ["name", "children", "className", "virtual", "icon", "data-testid", "defaultExpanded", "expanded", "onToggle", "background", "border"];
 var Expandable = function Expandable(_ref) {
   var name = _ref.name,
     children = _ref.children,
@@ -11358,7 +11360,7 @@ var Expandable = function Expandable(_ref) {
     background = _ref$background === void 0 ? 'light' : _ref$background,
     _ref$border = _ref.border,
     border = _ref$border === void 0 ? true : _ref$border,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   var _useState = React.useState(defaultExpanded),
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
@@ -11389,11 +11391,11 @@ var Expandable = function Expandable(_ref) {
   }, expanded || !virtual ? children : null));
 };
 
-var _excluded$b = ["className", "hidden"];
+var _excluded$c = ["className", "hidden"];
 var Label = function Label(_ref) {
   var className = _ref.className,
     hidden = _ref.hidden,
-    rest = _objectWithoutProperties(_ref, _excluded$b);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/React.createElement("label", _extends$1({
     className: classNames('Label', className, {
       'Label--hidden': hidden
@@ -11603,11 +11605,11 @@ var ArcWindow = function ArcWindow() {
   }));
 };
 
-var _excluded$a = ["className"];
+var _excluded$b = ["className"];
 var FRAMES = [Triangle, Diamond, ArcWindow, Circle];
 var Loading = function Loading(_ref) {
   var className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
+    rest = _objectWithoutProperties(_ref, _excluded$b);
   var _useCursor = distExports.useCursor({
       max: FRAMES.length
     }),
@@ -12544,6 +12546,7 @@ var OTPInput = function OTPInput(_a) {
   }));
 };
 
+var _excluded$a = ["aria-describedby", "aria-label", "autoComplete", "className", "disabled", "error", "focus", "id", "inputClassName", "inputType", "label", "name", "numInputs", "onChange", "onPaste", "placeholder", "renderSeparator", "required", "shouldAutoFocus", "value"];
 var getInputAriaLabel = function getInputAriaLabel(index, inputCount, ariaLabel, label) {
   var baseLabel = ariaLabel || label || 'One-time password digit';
   return "".concat(baseLabel, " ").concat(index + 1, " of ").concat(inputCount);
@@ -12572,8 +12575,13 @@ var OtpInput = function OtpInput(_ref) {
     required = _ref.required,
     shouldAutoFocus = _ref.shouldAutoFocus,
     _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value;
-  return /*#__PURE__*/React.createElement(OTPInput, {
+    value = _ref$value === void 0 ? '' : _ref$value,
+    rest = _objectWithoutProperties(_ref, _excluded$a);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: value
+  }), /*#__PURE__*/React.createElement(OTPInput, _extends$1({}, rest, {
     containerStyle: classNames('OtpInput', className),
     inputType: inputType,
     numInputs: numInputs,
@@ -12597,11 +12605,10 @@ var OtpInput = function OtpInput(_ref) {
           'OtpInput__input--focus': focus
         }),
         disabled: disabled,
-        name: name,
         required: required
       }));
     }
-  });
+  })));
 };
 OtpInput.displayName = 'OtpInput';