@moda/om 15.7.0 → 15.10.0

package/dist/index.cjs.js

@@ -17,14 +17,12 @@ function _interopNamespace(e) {
 				var d = Object.getOwnPropertyDescriptor(e, k);
 				Object.defineProperty(n, k, d.get ? d : {
 					enumerable: true,
-					get: function () {
-						return e[k];
-					}
+					get: function () { return e[k]; }
 				});
 			}
 		});
 	}
-	n['default'] = e;
+	n["default"] = e;
 	return Object.freeze(n);
 }
 
@@ -3115,6 +3113,7 @@ FocusLock.defaultProps = {
   onActivation: undefined,
   onDeactivation: undefined
 };
+var FocusLockUI = FocusLock;
 
 function deferAction(action) {
   // Hidding setImmediate from Webpack to avoid inserting polyfill
@@ -3162,7 +3161,7 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
       onDeactivation = lockProps.onDeactivation,
       restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
 
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(FocusLock, {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(FocusLockUI, {
     ref: parentRef,
     sideCar: sideCar,
     disabled: !(lockProps && enabled && focusLock),
@@ -3282,7 +3281,7 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) {
       };
 
       _proto.render = function render() {
-        return /*#__PURE__*/React__default['default'].createElement(WrappedComponent, this.props);
+        return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, this.props);
       };
 
       return SideEffect;
@@ -3751,6 +3750,8 @@ var setFocus = function setFocus(topNode, lastNode) {
   }
 };
 
+var moveFocusInside = setFocus;
+
 var focusOnBody = function focusOnBody() {
   return document && document.activeElement === document.body;
 };
@@ -3852,7 +3853,7 @@ var activateTrap = function activateTrap() {
 
               document.body.focus();
             } else {
-              result = setFocus(workingArea, lastActiveFocus);
+              result = moveFocusInside(workingArea, lastActiveFocus);
               lastPortaledElement = {};
             }
           }
@@ -3990,7 +3991,7 @@ mediumFocus.assignSyncMedium(onFocus);
 mediumBlur.assignMedium(onBlur);
 mediumEffect.assignMedium(function (cb) {
   return cb({
-    moveFocusInside: setFocus,
+    moveFocusInside: moveFocusInside,
     focusInside: focusInside
   });
 });
@@ -4243,7 +4244,8 @@ var handleScroll = function handleScroll(axis, endTarget, event, sourceDelta, no
 
     target = target.parentNode;
   } while ( // portaled content
-  !targetInLock && target !== document.body || targetInLock && (endTarget.contains(target) || endTarget === target));
+  !targetInLock && target !== document.body || // self content
+  targetInLock && (endTarget.contains(target) || endTarget === target));
 
   if (isDeltaPositive && (noOverscroll && availableScroll === 0 || !noOverscroll && delta > availableScroll)) {
     shouldCancelScroll = true;
@@ -4862,7 +4864,7 @@ var _excluded$E = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outl
 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;
-var AspectRatioBox = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, forwardedRef) {
+var AspectRatioBox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, forwardedRef) {
   var _ref$aspectWidth = _ref.aspectWidth,
       aspectWidth = _ref$aspectWidth === void 0 ? DEFAULT_PRODUCT_ASPECT_WIDTH : _ref$aspectWidth,
       _ref$aspectHeight = _ref.aspectHeight,
@@ -4884,7 +4886,7 @@ var AspectRatioBox = /*#__PURE__*/React__default['default'].forwardRef(function
       width = _scale.width,
       paddingBottom = _scale.paddingBottom;
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     ref: forwardedRef,
     className: classNames('AspectRatioBox', {
       'AspectRatioBox--outlined': outlined
@@ -4892,12 +4894,12 @@ var AspectRatioBox = /*#__PURE__*/React__default['default'].forwardRef(function
     style: {
       maxWidth: "".concat(width, "px")
     }
-  }, rest), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "AspectRatioBox__wrapper",
     style: {
       paddingBottom: paddingBottom
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "AspectRatioBox__content"
   }, children));
 });
@@ -4910,7 +4912,7 @@ var Badge = function Badge(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$D);
 
-  return /*#__PURE__*/React__default['default'].createElement("span", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("span", _extends$3({
     className: classNames('Badge', theme && "Badge--".concat(theme), className)
   }, rest), children);
 };
@@ -4922,7 +4924,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$C);
 
   var position = 0;
-  return /*#__PURE__*/React__default['default'].createElement("ol", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("ol", _extends$3({
     itemScope: true,
     itemType: "http://schema.org/BreadcrumbList",
     className: classNames('Breadcrumbs', className)
@@ -4953,7 +4955,7 @@ var isButton = function isButton(props) {
   return !('href' in props);
 };
 
-var Clickable = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+var Clickable = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       _ref$styleless = _ref.styleless,
       styleless = _ref$styleless === void 0 ? false : _ref$styleless,
@@ -4968,13 +4970,13 @@ var Clickable = /*#__PURE__*/React__default['default'].forwardRef(function (_ref
     disabled: disabled
   });
 
-  if (isLink(props)) return /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, _extends$3({}, props, {
+  if (isLink(props)) return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, _extends$3({}, props, {
     ref: ref
   }));
-  if (isAnchor(props)) return /*#__PURE__*/React__default['default'].createElement("a", _extends$3({}, props, {
+  if (isAnchor(props)) return /*#__PURE__*/React__default["default"].createElement("a", _extends$3({}, props, {
     ref: ref
   }));
-  if (isButton(props)) return /*#__PURE__*/React__default['default'].createElement("button", _extends$3({}, props, {
+  if (isButton(props)) return /*#__PURE__*/React__default["default"].createElement("button", _extends$3({}, props, {
     ref: ref
   }));
   return null;
@@ -4990,7 +4992,7 @@ var ControlLink = function ControlLink(_ref) {
       underlined = _ref$underlined === void 0 ? true : _ref$underlined,
       rest = _objectWithoutProperties(_ref, _excluded$A);
 
-  return /*#__PURE__*/React__default['default'].createElement(Clickable, _extends$3({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$3({}, rest, {
     className: classNames('ControlLink', {
       'ControlLink--underlined': underlined
     }, {
@@ -5007,18 +5009,18 @@ var Breadcrumb = function Breadcrumb(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded$z);
 
-  return /*#__PURE__*/React__default['default'].createElement("li", {
+  return /*#__PURE__*/React__default["default"].createElement("li", {
     className: classNames('Breadcrumb', className),
     itemProp: "itemListElement",
     itemScope: true,
     itemType: "http://schema.org/ListItem"
-  }, rest.to || rest.href ? /*#__PURE__*/React__default['default'].createElement(ControlLink, _extends$3({
+  }, rest.to || rest.href ? /*#__PURE__*/React__default["default"].createElement(ControlLink, _extends$3({
     itemProp: "item"
-  }, rest), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
     itemProp: "name"
-  }, children)) : /*#__PURE__*/React__default['default'].createElement("span", {
+  }, children)) : /*#__PURE__*/React__default["default"].createElement("span", {
     itemProp: "name"
-  }, children), position != null && /*#__PURE__*/React__default['default'].createElement("meta", {
+  }, children), position != null && /*#__PURE__*/React__default["default"].createElement("meta", {
     itemProp: "position",
     content: String(position)
   }));
@@ -5070,7 +5072,7 @@ var BreakpointContext = /*#__PURE__*/React$2.createContext({});
 var BreakpointProvider = function BreakpointProvider(_ref) {
   var defaultWidth = _ref.defaultWidth,
       children = _ref.children;
-  return /*#__PURE__*/React__default['default'].createElement(BreakpointContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(BreakpointContext.Provider, {
     value: {
       defaultWidth: defaultWidth
     }
@@ -5150,7 +5152,7 @@ var Breakpoint = function Breakpoint(_ref) {
   var _useBreakpoint = useBreakpoint(rest),
       matches = _useBreakpoint.matches;
 
-  return matches ? /*#__PURE__*/React__default['default'].createElement("div", {
+  return matches ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Breakpoint Breakpoint--".concat(mode, "-").concat(breakpoint)
   }, children) : null;
 };
@@ -5165,7 +5167,7 @@ var Button = function Button(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded$x);
 
-  return /*#__PURE__*/React__default['default'].createElement(Clickable, _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$3({
     className: classNames('Button', {
       'Button--chip': chip,
       'Button--secondary': secondary,
@@ -5202,21 +5204,21 @@ var Checkbox = function Checkbox(_ref) {
     if (typeof checked === 'undefined') setIsChecked(event.currentTarget.checked);
     onChange && onChange(event);
   }, [onChange, checked]);
-  return /*#__PURE__*/React__default['default'].createElement("label", {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
     role: "button",
     tabIndex: 0,
     className: classNames('Checkbox', className, {
       'Checkbox--checked': isChecked,
       'Checkbox--disabled': disabled
     })
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     tabIndex: -1,
     className: classNames('Checkbox__indicator', {
       'Checkbox__indicator--checked': isChecked,
       'Checkbox__indicator--unchecked': !isChecked,
       'Checkbox__indicator--disabled': disabled
     })
-  }), /*#__PURE__*/React__default['default'].createElement("input", _extends$3({
+  }), /*#__PURE__*/React__default["default"].createElement("input", _extends$3({
     tabIndex: -1,
     className: "Checkbox__input",
     type: "checkbox",
@@ -5224,7 +5226,7 @@ var Checkbox = function Checkbox(_ref) {
     value: value,
     onChange: handleChange,
     disabled: disabled
-  }, rest)), children && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest)), children && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Checkbox__label"
   }, children));
 };
@@ -5310,7 +5312,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
     backgroundSize: 'cover'
   } : {});
 
-  return /*#__PURE__*/React__default['default'].createElement(Clickable, _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$3({
     className: classNames("ColorSwatch", {
       'ColorSwatch--light': !backgroundColor || backgroundColor === '#fff',
       'ColorSwatch--small': size === 'small',
@@ -5323,7 +5325,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     disabled: disabled
-  }, rest), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ColorSwatch__chip",
     style: styles
   }));
@@ -5335,7 +5337,7 @@ var Constrain = function Constrain(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$u);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Constrain', className)
   }, rest), children);
 };
@@ -5346,7 +5348,7 @@ var ExceedConstrain = function ExceedConstrain(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$t);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('ExceedConstrain', className)
   }, rest), children);
 };
@@ -5357,8 +5359,8 @@ function _interopDefault$2(e) {
   return e && "object" == _typeof(e) && "default" in e ? e["default"] : e;
 }
 
-var React$1 = _interopDefault$2(React__default['default']),
-    reactDom$1 = require$$1__default['default'];
+var React$1 = _interopDefault$2(React__default["default"]),
+    reactDom$1 = require$$1__default["default"];
 
 function _defaults2$1(e, t) {
   for (var n = Object.getOwnPropertyNames(t), a = 0; a < n.length; a++) {
@@ -6074,9 +6076,9 @@ function _interopDefault$1(ex) {
   return ex && _typeof(ex) === 'object' && 'default' in ex ? ex['default'] : ex;
 }
 
-var React = _interopDefault$1(React__default['default']);
+var React = _interopDefault$1(React__default["default"]);
 
-var reactDom = require$$1__default['default'];
+var reactDom = require$$1__default["default"];
 
 var invariant = _interopDefault$1(invariant_1);
 
@@ -7721,7 +7723,7 @@ var Warning16 = function Warning16(_a) {
 Warning16.displayName = 'Warning16';
 
 var _excluded$s = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
-var TextInput = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
       error = _ref.error,
@@ -7732,7 +7734,7 @@ var TextInput = /*#__PURE__*/React__default['default'].forwardRef(function (_ref
       onChangeEvent = _ref.onChangeEvent,
       rest = _objectWithoutProperties(_ref, _excluded$s);
 
-  return /*#__PURE__*/React__default['default'].createElement("input", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("input", _extends$3({
     className: classNames('TextInput', className, {
       'TextInput--focus': focus,
       'TextInput--disabled': disabled,
@@ -8108,7 +8110,7 @@ var Text = function Text(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded$r);
 
-  return /*#__PURE__*/React__default['default'].createElement("span", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("span", _extends$3({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
       color: dist$4.colors.all[color]
@@ -8300,20 +8302,20 @@ var SearchInput = function SearchInput(_ref) {
   React$2.useEffect(function () {
     onChangeValue && onChangeValue(controlledValue);
   }, [controlledValue, onChangeValue]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames('SearchInput', className)
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "SearchInput__icon"
-  }, /*#__PURE__*/React__default['default'].createElement(Search20, null)), /*#__PURE__*/React__default['default'].createElement(TextInput, _extends$3({
+  }, /*#__PURE__*/React__default["default"].createElement(Search20, null)), /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$3({
     className: "SearchInput__input",
     onChange: handleChange,
     value: controlledValue,
     ref: ref
-  }, rest)), controlledValue && /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }, rest)), controlledValue && /*#__PURE__*/React__default["default"].createElement(Clickable, {
     className: "SearchInput__clear",
     onClick: handleClick,
     type: "reset"
-  }, /*#__PURE__*/React__default['default'].createElement(Exit20, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(Exit20, null)));
 };
 
 function t(t) {
@@ -8485,7 +8487,7 @@ var SelectOption = function SelectOption(_ref) {
       });
     }
   }, [active, ref]);
-  return /*#__PURE__*/React__default['default'].createElement("li", {
+  return /*#__PURE__*/React__default["default"].createElement("li", {
     ref: ref,
     className: classNames('SelectOption', className, {
       'SelectOption--active': active,
@@ -8545,9 +8547,9 @@ var SelectOptions = function SelectOptions(_ref) {
   useUpdateEffect(function () {
     onFocus && activeOption && onFocus(activeOption);
   }, [activeOption, onFocus]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames('SelectOptions', className)
-  }, searchable && /*#__PURE__*/React__default['default'].createElement(SearchInput, {
+  }, searchable && /*#__PURE__*/React__default["default"].createElement(SearchInput, {
     className: "SelectOptions__search",
     placeholder: "Search",
     value: searchPhrase,
@@ -8555,7 +8557,7 @@ var SelectOptions = function SelectOptions(_ref) {
     onClear: function onClear() {
       return setSearchPhrase('');
     }
-  }), /*#__PURE__*/React__default['default'].createElement("ul", _extends$3({
+  }), /*#__PURE__*/React__default["default"].createElement("ul", _extends$3({
     className: "SelectOptions__list",
     tabIndex: -1,
     role: "listbox",
@@ -8563,7 +8565,7 @@ var SelectOptions = function SelectOptions(_ref) {
     "aria-labelledby": "Select__label--".concat(idRef),
     "aria-activedescendant": "SelectOption--".concat(activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, "-").concat(idRef)
   }, rest), options.map(function (option) {
-    return /*#__PURE__*/React__default['default'].createElement(SelectOption, {
+    return /*#__PURE__*/React__default["default"].createElement(SelectOption, {
       id: "SelectOption--".concat(option.value, "-").concat(idRef),
       key: option.value,
       option: option,
@@ -8571,7 +8573,7 @@ var SelectOptions = function SelectOptions(_ref) {
       selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
       onClick: onSelect
     }, option.label);
-  })), options.length === 0 && /*#__PURE__*/React__default['default'].createElement(Text, {
+  })), options.length === 0 && /*#__PURE__*/React__default["default"].createElement(Text, {
     className: "SelectOptions__none",
     color: "cement"
   }, "Nothing found"));
@@ -8582,7 +8584,7 @@ var SelectLabel = function SelectLabel(_ref) {
       label = _ref.label,
       hasValue = _ref.hasValue;
   if (!label) return null;
-  return /*#__PURE__*/React__default['default'].createElement("label", {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
     id: "Select__label--".concat(idRef)
   }, "".concat(label).concat(hasValue ? ': ' : ''));
 };
@@ -8764,19 +8766,19 @@ var Select = function Select(_ref) {
       return state.focused === option.value;
     });
   }, [options, state.focused]);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     id: idRef ? "Select--".concat(idRef) : undefined,
     className: classNames('Select', {
       'Select--disabled': disabled,
       'Select--error': error
     }, className),
     ref: selectRef
-  }, rest), !allowAutoFill && name && /*#__PURE__*/React__default['default'].createElement("input", {
+  }, rest), !allowAutoFill && name && /*#__PURE__*/React__default["default"].createElement("input", {
     id: idRef,
     name: name,
     type: "hidden",
     value: state.value
-  }), /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }), /*#__PURE__*/React__default["default"].createElement(Clickable, {
     id: "Select__value--".concat(idRef),
     className: "Select__value",
     disabled: disabled,
@@ -8786,15 +8788,15 @@ var Select = function Select(_ref) {
     "aria-labelledby": "Select__label--".concat(idRef, " Select__value--").concat(idRef),
     type: "button",
     title: "Select"
-  }, /*#__PURE__*/React__default['default'].createElement(SelectLabel, {
+  }, /*#__PURE__*/React__default["default"].createElement(SelectLabel, {
     idRef: idRef,
     label: label,
     hasValue: focused != null || selected != null
-  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React__default['default'].createElement("span", {
+  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames('Select__icon', {
       'Select__icon--shifted': shiftIconLeftwards
     })
-  }, state.mode === Mode.Open ? /*#__PURE__*/React__default['default'].createElement(ChevronUp12, null) : /*#__PURE__*/React__default['default'].createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React__default['default'].createElement(SelectOptions, {
+  }, state.mode === Mode.Open ? /*#__PURE__*/React__default["default"].createElement(ChevronUp12, null) : /*#__PURE__*/React__default["default"].createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React__default["default"].createElement(SelectOptions, {
     idRef: idRef,
     className: classNames('Select__options', {
       'Select__options--up': dropDirection === 'up',
@@ -8805,7 +8807,7 @@ var Select = function Select(_ref) {
     onSelect: handleSelect,
     onFocus: handleFocus,
     selectedOption: selected
-  })), allowAutoFill && /*#__PURE__*/React__default['default'].createElement("input", {
+  })), allowAutoFill && /*#__PURE__*/React__default["default"].createElement("input", {
     className: "Select__hidden-field",
     name: name,
     onChange: function onChange(_ref3) {
@@ -8837,6 +8839,8 @@ var T = function T() {
   return true;
 };
 
+var otherwise = T;
+
 function _isPlaceholder(a) {
   return a != null && _typeof(a) === 'object' && a['@@functional/placeholder'] === true;
 }
@@ -9045,6 +9049,8 @@ var curryN = /*#__PURE__*/_curry2(function curryN(length, fn) {
   return _arity(length, _curryN(length, [], fn));
 });
 
+var curryN$1 = curryN;
+
 /**
  * Optimized internal three-arity curry function.
  *
@@ -9188,6 +9194,8 @@ var max = /*#__PURE__*/_curry2(function max(a, b) {
   return b > a ? b : a;
 });
 
+var max$1 = max;
+
 function _map(fn, functor) {
   var idx = 0;
   var len = functor.length;
@@ -9255,6 +9263,8 @@ var _isArrayLike = /*#__PURE__*/_curry1(function isArrayLike(x) {
   return false;
 });
 
+var _isArrayLike$1 = _isArrayLike;
+
 var XWrap = /*#__PURE__*/function () {
   function XWrap(fn) {
     this.f = fn;
@@ -9308,6 +9318,8 @@ var bind = /*#__PURE__*/_curry2(function bind(fn, thisObj) {
   });
 });
 
+var bind$1 = bind;
+
 function _arrayReduce(xf, acc, list) {
   var idx = 0;
   var len = list.length;
@@ -9344,7 +9356,7 @@ function _iterableReduce(xf, acc, iter) {
 }
 
 function _methodReduce(xf, acc, obj, methodName) {
-  return xf['@@transducer/result'](obj[methodName](bind(xf['@@transducer/step'], xf), acc));
+  return xf['@@transducer/result'](obj[methodName](bind$1(xf['@@transducer/step'], xf), acc));
 }
 
 var symIterator = typeof Symbol !== 'undefined' ? Symbol.iterator : '@@iterator';
@@ -9353,7 +9365,7 @@ function _reduce(fn, acc, list) {
     fn = _xwrap(fn);
   }
 
-  if (_isArrayLike(list)) {
+  if (_isArrayLike$1(list)) {
     return _arrayReduce(fn, acc, list);
   }
 
@@ -9396,6 +9408,8 @@ var _xmap = /*#__PURE__*/_curry2(function _xmap(f, xf) {
   return new XMap(f, xf);
 });
 
+var _xmap$1 = _xmap;
+
 function _has(prop, obj) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
@@ -9410,6 +9424,8 @@ var _isArguments = /*#__PURE__*/function () {
   };
 }();
 
+var _isArguments$1 = _isArguments;
+
 var hasEnumBug = ! /*#__PURE__*/{
   toString: null
 }.propertyIsEnumerable('toString');
@@ -9463,7 +9479,7 @@ var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ? /*#__PURE__*/_
   var prop, nIdx;
   var ks = [];
 
-  var checkArgsLength = hasArgsEnumBug && _isArguments(obj);
+  var checkArgsLength = hasArgsEnumBug && _isArguments$1(obj);
 
   for (prop in obj) {
     if (_has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
@@ -9487,6 +9503,7 @@ var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ? /*#__PURE__*/_
 
   return ks;
 });
+var keys$1 = keys;
 
 /**
  * Takes a function and
@@ -9524,10 +9541,10 @@ var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ? /*#__PURE__*/_
  * @symb R.map(f, functor_o) = functor_o.map(f)
  */
 
-var map = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
+var map = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/map', 'map'], _xmap$1, function map(fn, functor) {
   switch (Object.prototype.toString.call(functor)) {
     case '[object Function]':
-      return curryN(functor.length, function () {
+      return curryN$1(functor.length, function () {
         return fn.call(this, functor.apply(this, arguments));
       });
 
@@ -9535,13 +9552,15 @@ var map = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/map',
       return _reduce(function (acc, key) {
         acc[key] = fn(functor[key]);
         return acc;
-      }, {}, keys(functor));
+      }, {}, keys$1(functor));
 
     default:
       return _map(fn, functor);
   }
 }));
 
+var map$1 = map;
+
 /**
  * Returns a single item by iterating through the list, successively calling
  * the iterator function and passing it an accumulator value and the current
@@ -9591,6 +9610,8 @@ var map = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/map',
 
 var reduce = /*#__PURE__*/_curry3(_reduce);
 
+var reduce$1 = reduce;
+
 /**
  * Gives a single-word string description of the (native) type of a value,
  * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
@@ -9621,6 +9642,8 @@ var type = /*#__PURE__*/_curry1(function type(val) {
   return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
 });
 
+var type$1 = type;
+
 function _identity(x) {
   return x;
 }
@@ -9647,6 +9670,8 @@ function _identity(x) {
 
 var identity = /*#__PURE__*/_curry1(_identity);
 
+var identity$1 = identity;
+
 function _arrayFromIterator(iter) {
   var list = [];
   var next;
@@ -9725,9 +9750,9 @@ function _equals(a, b, stackA, stackB) {
     return true;
   }
 
-  var typeA = type(a);
+  var typeA = type$1(a);
 
-  if (typeA !== type(b)) {
+  if (typeA !== type$1(b)) {
     return false;
   }
 
@@ -9831,9 +9856,9 @@ function _equals(a, b, stackA, stackB) {
       return false;
   }
 
-  var keysA = keys(a);
+  var keysA = keys$1(a);
 
-  if (keysA.length !== keys(b).length) {
+  if (keysA.length !== keys$1(b).length) {
     return false;
   }
 
@@ -9884,6 +9909,8 @@ var equals = /*#__PURE__*/_curry2(function equals(a, b) {
   return _equals(a, b, [], []);
 });
 
+var equals$1 = equals;
+
 function _indexOf(list, a, idx) {
   var inf, item; // Array.prototype.indexOf doesn't exist below IE9
 
@@ -9941,7 +9968,7 @@ function _indexOf(list, a, idx) {
 
 
   while (idx < list.length) {
-    if (equals(list[idx], a)) {
+    if (equals$1(list[idx], a)) {
       return idx;
     }
 
@@ -9984,7 +10011,7 @@ function _includes(a, list) {
  */
 
 var cond = /*#__PURE__*/_curry1(function cond(pairs) {
-  var arity = reduce(max, 0, map(function (pair) {
+  var arity = reduce$1(max$1, 0, map$1(function (pair) {
     return pair[0].length;
   }, pairs));
   return _arity(arity, function () {
@@ -10000,6 +10027,8 @@ var cond = /*#__PURE__*/_curry1(function cond(pairs) {
   });
 });
 
+var cond$1 = cond;
+
 var _Set = /*#__PURE__*/function () {
   function _Set() {
     /* globals Set */
@@ -10196,6 +10225,9 @@ function hasOrAdd(item, shouldAdd, set) {
   }
 } // A simple Set type that honours R.equals semantics
 
+
+var _Set$1 = _Set;
+
 /**
  * Returns a new list containing only one copy of each element in the original
  * list, based upon the value returned by applying the supplied function to
@@ -10216,7 +10248,7 @@ function hasOrAdd(item, shouldAdd, set) {
  */
 
 var uniqBy = /*#__PURE__*/_curry2(function uniqBy(fn, list) {
-  var set = new _Set();
+  var set = new _Set$1();
   var result = [];
   var idx = 0;
   var appliedItem, item;
@@ -10235,6 +10267,8 @@ var uniqBy = /*#__PURE__*/_curry2(function uniqBy(fn, list) {
   return result;
 });
 
+var uniqBy$1 = uniqBy;
+
 /**
  * Returns a new list containing only one copy of each element in the original
  * list. [`R.equals`](#equals) is used to determine equality.
@@ -10253,7 +10287,8 @@ var uniqBy = /*#__PURE__*/_curry2(function uniqBy(fn, list) {
  *      R.uniq([[42], [42]]); //=> [[42]]
  */
 
-var uniq = /*#__PURE__*/uniqBy(identity);
+var uniq = /*#__PURE__*/uniqBy$1(identity$1);
+var uniq$1 = uniq;
 
 function _isNumber(x) {
   return Object.prototype.toString.call(x) === '[object Number]';
@@ -10292,6 +10327,8 @@ var range = /*#__PURE__*/_curry2(function range(from, to) {
   return result;
 });
 
+var range$1 = range;
+
 var __assign$2 = undefined && undefined.__assign || function () {
   __assign$2 = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10392,7 +10429,7 @@ var MultiSelect = function MultiSelect(_ref) {
     dispatch({
       type: 'SELECT',
       payload: {
-        value: uniq([].concat(_toConsumableArray(values), [option.value]))
+        value: uniq$1([].concat(_toConsumableArray(values), [option.value]))
       }
     });
   }, [dispatch, values]);
@@ -10422,30 +10459,30 @@ var MultiSelect = function MultiSelect(_ref) {
   React$2.useEffect(function () {
     onChange && onChange(values);
   }, [onChange, values]);
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     id: idRef ? "MultiSelect--".concat(idRef) : undefined,
     className: classNames('MultiSelect', {
       'MultiSelect--disabled': disabled,
       'MultiSelect--error': error
     }, className),
     ref: selectRef
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Clickable, {
     className: "MultiSelect__search",
     disabled: disabled,
     onClick: handleToggle
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "MultiSelect__selected-items"
   }, values.map(function (value, index) {
     var _options$find;
 
-    return /*#__PURE__*/React__default['default'].createElement("span", {
+    return /*#__PURE__*/React__default["default"].createElement("span", {
       className: "MultiSelect__selected-item",
       key: index
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "MultiSelect__selected-value"
     }, ((_options$find = options.find(function (option) {
       return option.value === value;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.label) || value), /*#__PURE__*/React__default['default'].createElement(Exit16, {
+    })) === null || _options$find === void 0 ? void 0 : _options$find.label) || value), /*#__PURE__*/React__default["default"].createElement(Exit16, {
       style: {
         width: '8px',
         height: '8px',
@@ -10456,11 +10493,11 @@ var MultiSelect = function MultiSelect(_ref) {
         return handleRemove(value);
       }
     }));
-  })), /*#__PURE__*/React__default['default'].createElement("span", {
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames('MultiSelect__icon', {
       'MultiSelect__icon--shifted': shiftIconLeftwards
     })
-  }, state.mode === Mode.Open ? /*#__PURE__*/React__default['default'].createElement(ChevronUp12, null) : /*#__PURE__*/React__default['default'].createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React__default['default'].createElement(SelectOptions, {
+  }, state.mode === Mode.Open ? /*#__PURE__*/React__default["default"].createElement(ChevronUp12, null) : /*#__PURE__*/React__default["default"].createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React__default["default"].createElement(SelectOptions, {
     idRef: idRef,
     className: classNames('Select__options', {
       'Select__options--up': dropDirection === 'up',
@@ -10475,7 +10512,7 @@ var MultiSelect = function MultiSelect(_ref) {
 };
 
 var _excluded$m = ["className", "children", "error", "label", "placeholder"];
-var Field = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+var Field = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       error = _ref.error,
@@ -10483,28 +10520,28 @@ var Field = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
       placeholder = _ref.placeholder,
       rest = _objectWithoutProperties(_ref, _excluded$m);
 
-  return /*#__PURE__*/React__default['default'].createElement("label", {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
     className: classNames('Field', className)
-  }, label && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Field__label"
-  }, label), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, label), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Field__context"
-  }, children ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].cloneElement(children, _objectSpread2(_objectSpread2({
+  }, children ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].cloneElement(children, _objectSpread2(_objectSpread2({
     ref: ref,
     error: error,
     placeholder: placeholder,
     label: label,
     shiftIconLeftwards: error && children.type === Select
-  }, rest), children.props)), error && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest), children.props)), error && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Field__icon"
-  }, /*#__PURE__*/React__default['default'].createElement(Warning16, null))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TextInput, _extends$3({
+  }, /*#__PURE__*/React__default["default"].createElement(Warning16, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$3({
     ref: ref,
     placeholder: placeholder,
     label: label,
     error: error
-  }, rest)), error && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest)), error && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Field__icon"
-  }, /*#__PURE__*/React__default['default'].createElement(Warning16, null)))), error && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement(Warning16, null)))), error && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Field__error"
   }, error));
 });
@@ -10515,7 +10552,7 @@ var CreditCardNumberInputField = function CreditCardNumberInputField(_ref) {
   var onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded$l);
 
-  return /*#__PURE__*/React__default['default'].createElement(Field, _extends$3({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(Field, _extends$3({}, rest, {
     onChangeEvent: onChange
   }));
 };
@@ -10561,7 +10598,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     setValue(event.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
   }, [setValue, onChange]);
-  return /*#__PURE__*/React__default['default'].createElement(InputMask, {
+  return /*#__PURE__*/React__default["default"].createElement(InputMask, {
     mask: mask,
     maskChar: maskChar,
     alwaysShowMask: alwaysShowMask,
@@ -10573,7 +10610,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     onFocus: onFocus,
     onBlur: onBlur
   }, function (inputProps) {
-    return /*#__PURE__*/React__default['default'].createElement(CreditCardNumberInputField, _extends$3({}, rest, inputProps));
+    return /*#__PURE__*/React__default["default"].createElement(CreditCardNumberInputField, _extends$3({}, rest, inputProps));
   });
 };
 
@@ -10584,9 +10621,9 @@ var DefinitionList = function DefinitionList(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded$j);
 
-  return /*#__PURE__*/React__default['default'].createElement("dl", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("dl", _extends$3({
     className: classNames('DefinitionList', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement("dt", null, term), /*#__PURE__*/React__default['default'].createElement("dd", null, children));
+  }, rest), /*#__PURE__*/React__default["default"].createElement("dt", null, term), /*#__PURE__*/React__default["default"].createElement("dd", null, children));
 };
 
 var _excluded$i = ["name", "children", "className", "virtual", "icon", "data-testid", "expanded"];
@@ -10613,45 +10650,53 @@ var Expandable = function Expandable(_ref) {
       return !expanded;
     });
   }, []);
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Expandable', {
       'Expandable--expanded': expanded
     }, className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Clickable, {
     className: classNames('Expandable__name', {
       'Expandable__name--plusMinus': icon === 'plus-minus'
     }),
     onClick: handleClick,
     "data-testid": dataTestId
-  }, name, icon !== 'plus-minus' && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, name, icon !== 'plus-minus' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Expandable__icon"
-  }, icon === 'chevron' && expanded && /*#__PURE__*/React__default['default'].createElement(ChevronUp12, null), icon === 'chevron' && !expanded && /*#__PURE__*/React__default['default'].createElement(ChevronDown12, null))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, icon === 'chevron' && expanded && /*#__PURE__*/React__default["default"].createElement(ChevronUp12, null), icon === 'chevron' && !expanded && /*#__PURE__*/React__default["default"].createElement(ChevronDown12, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Expandable__contents"
   }, expanded || !virtual ? children : null));
 };
 
-var _excluded$h = ["text", "type", "className"];
+var _excluded$h = ["text", "treatment", "color", "family", "type", "className"];
 var Divider = function Divider(_ref) {
   var text = _ref.text,
+      treatment = _ref.treatment,
+      color = _ref.color,
+      family = _ref.family,
       type = _ref.type,
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded$h);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  var defaultTreatment = type === 'two-line' ? 'eyebrow' : 'h5';
+  var defaultFamily = type === 'two-line' ? undefined : 'serif';
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Divider', type ? "Divider--".concat(type) : '', className)
-  }, rest), text && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "Divider__text"
+  }, rest), text && /*#__PURE__*/React__default["default"].createElement(Text, {
+    className: "Divider__text",
+    treatment: treatment !== null && treatment !== void 0 ? treatment : defaultTreatment,
+    color: color,
+    family: family !== null && family !== void 0 ? family : defaultFamily
   }, text));
 };
 
 var TwoLineDivider = function TwoLineDivider(props) {
-  return /*#__PURE__*/React__default['default'].createElement(Divider, _extends$3({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Divider, _extends$3({}, props, {
     type: 'two-line'
   }));
 };
 
 var NoLineDivider = function NoLineDivider(props) {
-  return /*#__PURE__*/React__default['default'].createElement(Divider, _extends$3({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Divider, _extends$3({}, props, {
     type: 'no-line'
   }));
 };
@@ -10662,7 +10707,7 @@ var Label = function Label(_ref) {
       hidden = _ref.hidden,
       rest = _objectWithoutProperties(_ref, _excluded$g);
 
-  return /*#__PURE__*/React__default['default'].createElement("label", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("label", _extends$3({
     className: classNames('Label', className, {
       'Label--hidden': hidden
     })
@@ -10676,7 +10721,7 @@ var useCursor = {};
 Object.defineProperty(useCursor, "__esModule", {
   value: true
 });
-var react_1 = React__default['default'];
+var react_1 = React__default["default"];
 var map_cursor_to_max_1 = dist$1;
 
 useCursor.useCursor = function (_a) {
@@ -10729,14 +10774,14 @@ useCursor.useCursor = function (_a) {
 })(dist);
 
 var Circle = function Circle() {
-  return /*#__PURE__*/React__default['default'].createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "Circle",
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M24 12C24 18.6282 18.6282 24 12 24C5.37184 24 0 18.6282 0 12C0 5.37184 5.37184 0 12 0C18.6282 0 24 5.37184 24 12Z",
@@ -10745,14 +10790,14 @@ var Circle = function Circle() {
 };
 
 var Triangle = function Triangle() {
-  return /*#__PURE__*/React__default['default'].createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "Triangle",
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.9986 0L0 24H24L11.9986 0Z",
@@ -10761,14 +10806,14 @@ var Triangle = function Triangle() {
 };
 
 var Diamond = function Diamond() {
-  return /*#__PURE__*/React__default['default'].createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "Diamond",
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12 24.0026L0 12.0026L12 0L24 12.0026L12 24.0026Z",
@@ -10777,14 +10822,14 @@ var Diamond = function Diamond() {
 };
 
 var ArcWindow = function ArcWindow() {
-  return /*#__PURE__*/React__default['default'].createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "ArcWindow",
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M20.1097 24V11.6273V8.8331V8.81993C20.1018 3.96884 16.4806 0 12.0536 0C7.6291 0 4.00527 3.96884 4 8.81993V8.8331V11.6273V24H20.1097Z",
@@ -10811,9 +10856,9 @@ var Loading = function Loading(_ref) {
     };
   }, [handleNext]);
   var CurrentComponent = FRAMES[index];
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Loading', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(CurrentComponent, null));
+  }, rest), /*#__PURE__*/React__default["default"].createElement(CurrentComponent, null));
 };
 
 var defaultSize = 32;
@@ -10821,17 +10866,17 @@ var LoadingBalls = function LoadingBalls(_ref) {
   var className = _ref.className,
       width = _ref.width,
       height = _ref.height;
-  return /*#__PURE__*/React__default['default'].createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     className: classNames('LoadingBalls', className),
     viewBox: "0 0 32 32",
     width: width || defaultSize,
     height: height || defaultSize
-  }, /*#__PURE__*/React__default['default'].createElement("circle", {
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
     transform: "translate(8 0)",
     cx: "0",
     cy: "16",
     r: "0"
-  }, /*#__PURE__*/React__default['default'].createElement("animate", {
+  }, /*#__PURE__*/React__default["default"].createElement("animate", {
     attributeName: "r",
     values: "0; 4; 0; 0",
     dur: "1.2s",
@@ -10840,12 +10885,12 @@ var LoadingBalls = function LoadingBalls(_ref) {
     keyTimes: "0;0.2;0.7;1",
     keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8",
     calcMode: "spline"
-  })), /*#__PURE__*/React__default['default'].createElement("circle", {
+  })), /*#__PURE__*/React__default["default"].createElement("circle", {
     transform: "translate(16 0)",
     cx: "0",
     cy: "16",
     r: "0"
-  }, /*#__PURE__*/React__default['default'].createElement("animate", {
+  }, /*#__PURE__*/React__default["default"].createElement("animate", {
     attributeName: "r",
     values: "0; 4; 0; 0",
     dur: "1.2s",
@@ -10854,12 +10899,12 @@ var LoadingBalls = function LoadingBalls(_ref) {
     keyTimes: "0;0.2;0.7;1",
     keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8",
     calcMode: "spline"
-  })), /*#__PURE__*/React__default['default'].createElement("circle", {
+  })), /*#__PURE__*/React__default["default"].createElement("circle", {
     transform: "translate(24 0)",
     cx: "0",
     cy: "16",
     r: "0"
-  }, /*#__PURE__*/React__default['default'].createElement("animate", {
+  }, /*#__PURE__*/React__default["default"].createElement("animate", {
     attributeName: "r",
     values: "0; 4; 0; 0",
     dur: "1.2s",
@@ -10879,9 +10924,9 @@ var Modal = function Modal(_ref) {
       shards = _ref.shards,
       rest = _objectWithoutProperties(_ref, _excluded$e);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Modal', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(FocusOn, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(FocusOn, {
     shards: shards,
     onClickOutside: onClose,
     onEscapeKey: onClose
@@ -10916,7 +10961,7 @@ var Overlay = /*#__PURE__*/React$2.forwardRef(function (_ref, forwardedRef) {
     };
   }, [show]);
   if (!open) return null;
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Overlay', {
       'Overlay--closing': !show
     }, className),
@@ -10950,14 +10995,14 @@ var ModalOverlay = function ModalOverlay(_ref) {
     };
   }, [element]);
   if (!element) return null;
-  return /*#__PURE__*/require$$1.createPortal( /*#__PURE__*/React__default['default'].createElement(Overlay, _extends$3({
+  return /*#__PURE__*/require$$1.createPortal( /*#__PURE__*/React__default["default"].createElement(Overlay, _extends$3({
     className: classNames('ModalOverlay', overlayClassName),
     show: show
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Modal, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Modal, {
     className: classNames('ModalOverlay__modal', className),
     onClose: onClose,
     shards: shards
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames('ModalOverlay__content', contentClassName)
   }, children))), element);
 };
@@ -11136,23 +11181,23 @@ var whenCurrentPageIsGreaterThanHalfTheTotal = function whenCurrentPageIsGreater
 };
 
 var showAllPages = function showAllPages(_, totalPages) {
-  return range(1, totalPages + 1);
+  return range$1(1, totalPages + 1);
 };
 
 var showFirstNPagesAndLastPage = function showFirstNPagesAndLastPage(_, totalPages, maxPages) {
-  return [].concat(_toConsumableArray(range(1, maxPages)), [totalPages]);
+  return [].concat(_toConsumableArray(range$1(1, maxPages)), [totalPages]);
 };
 
 var showTheLastNPages = function showTheLastNPages(_, totalPages, maxPages) {
-  return [1].concat(_toConsumableArray(range(totalPages - maxPages + 2, totalPages + 1)));
+  return [1].concat(_toConsumableArray(range$1(totalPages - maxPages + 2, totalPages + 1)));
 };
 
 var showAGroupOfPagesCenteredOnTheCurrentPage = function showAGroupOfPagesCenteredOnTheCurrentPage(page, totalPages, maxPages) {
   var diff = Math.floor((maxPages - 2) / 2);
-  return [1].concat(_toConsumableArray(range(page - diff, page + diff + 1)), [totalPages]);
+  return [1].concat(_toConsumableArray(range$1(page - diff, page + diff + 1)), [totalPages]);
 };
 
-var determinePagesToShow = cond([[whenThereAreFewerPagesThanWeDisplay, showAllPages], [whenCurrentPageIsLessThanHalfTheTotal, showFirstNPagesAndLastPage], [whenCurrentPageIsGreaterThanHalfTheTotal, showTheLastNPages], [T, showAGroupOfPagesCenteredOnTheCurrentPage]]);
+var determinePagesToShow = cond$1([[whenThereAreFewerPagesThanWeDisplay, showAllPages], [whenCurrentPageIsLessThanHalfTheTotal, showFirstNPagesAndLastPage], [whenCurrentPageIsGreaterThanHalfTheTotal, showTheLastNPages], [otherwise, showAGroupOfPagesCenteredOnTheCurrentPage]]);
 var Paginator = function Paginator(_ref) {
   var selectedPage = _ref.selectedPage,
       totalPages = _ref.totalPages,
@@ -11170,22 +11215,22 @@ var Paginator = function Paginator(_ref) {
     return onGoToPage(page - 1);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("section", {
+  return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classNames('Paginator', className),
     "aria-label": "Pagination"
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     disabled: !canDoPrev(selectedPage),
     onClick: function onClick() {
       prevPage(selectedPage);
       window.scrollTo(0, 0);
     },
     className: classNames('Paginator__button', 'Paginator__button--previous')
-  }, /*#__PURE__*/React__default['default'].createElement(ChevronLeft16, {
+  }, /*#__PURE__*/React__default["default"].createElement(ChevronLeft16, {
     className: "Paginator__previous-chevron"
   }), " Previous"), pages.map(function (page, index) {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: index
-    }, /*#__PURE__*/React__default['default'].createElement("button", {
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
       onClick: function onClick() {
         onGoToPage(page);
         window.scrollTo(0, 0);
@@ -11193,17 +11238,17 @@ var Paginator = function Paginator(_ref) {
       className: classNames('Paginator__button', {
         'Paginator__button--currentPage': page === selectedPage
       })
-    }, page), pages[index + 1] && pages[index + 1] !== page + 1 && /*#__PURE__*/React__default['default'].createElement("span", {
+    }, page), pages[index + 1] && pages[index + 1] !== page + 1 && /*#__PURE__*/React__default["default"].createElement("span", {
       className: classNames('Paginator__button', 'Paginator__button--ellipsis')
     }, "..."));
-  }), /*#__PURE__*/React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     disabled: !canDoNext(selectedPage, totalPages),
     onClick: function onClick() {
       nextPage(selectedPage);
       window.scrollTo(0, 0);
     },
     className: classNames('Paginator__button', 'Paginator__button--next')
-  }, "Next ", /*#__PURE__*/React__default['default'].createElement(ChevronRight16, {
+  }, "Next ", /*#__PURE__*/React__default["default"].createElement(ChevronRight16, {
     className: "Paginator__next-chevron"
   })));
 };
@@ -11243,18 +11288,18 @@ var Popover = function Popover(_ref) {
   React$2.useEffect(function () {
     return setOpen(open);
   }, [open]);
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames("Popover Popover--anchor-".concat(anchor), className),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, rest), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Popover__trigger"
-  }, isOpen && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, isOpen && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Popover__caret",
     style: {
       zIndex: zIndex != null ? zIndex + 1 : undefined
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Popover__content",
     style: {
       zIndex: zIndex
@@ -11269,9 +11314,9 @@ var PromoBanner = function PromoBanner(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
   var length = React$2.Children.count(children);
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('PromoBanner', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Constrain, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Constrain, {
     className: "PromoBanner__constrain"
   }, React$2.Children.map(children, function (child, index) {
     var isCenter = length % 2 !== 0 && Math.floor(length / 2) === index;
@@ -11296,7 +11341,7 @@ var RadioButton = function RadioButton(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$9);
 
   var inputRef = React$2.useRef(null);
-  return /*#__PURE__*/React__default['default'].createElement("label", {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
     tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0,
     onKeyPress: function onKeyPress(_ref2) {
       var _inputRef$current;
@@ -11308,14 +11353,14 @@ var RadioButton = function RadioButton(_ref) {
       'RadioButton--checked': checked,
       'RadioButton--disabled': disabled
     })
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     tabIndex: -1,
     className: classNames('RadioButton__indicator', {
       'RadioButton__indicator--checked': checked,
       'RadioButton__indicator--unchecked': !checked,
       'RadioButton__indicator--disabled': disabled
     })
-  }), /*#__PURE__*/React__default['default'].createElement("input", _extends$3({
+  }), /*#__PURE__*/React__default["default"].createElement("input", _extends$3({
     ref: inputRef,
     tabIndex: -1,
     className: "RadioButton__input",
@@ -11324,7 +11369,7 @@ var RadioButton = function RadioButton(_ref) {
     checked: checked,
     value: value,
     disabled: disabled
-  }, rest)), children && /*#__PURE__*/React__default['default'].createElement("span", {
+  }, rest)), children && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "RadioButton__label",
     tabIndex: -1
   }, children));
@@ -11339,13 +11384,13 @@ var SelectableButton = function SelectableButton(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$8);
 
-  return /*#__PURE__*/React__default['default'].createElement(Clickable, _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$3({
     className: classNames('SelectableButton', {
       'SelectableButton--hover': hover,
       'SelectableButton--selected': selected,
       'SelectableButton--unavailable': unavailable
     }, className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement("span", null, children));
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, children));
 };
 
 var _excluded$7 = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
@@ -11360,7 +11405,7 @@ var Stack = function Stack(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded$7);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
       alignItems: alignItems,
@@ -11377,15 +11422,15 @@ var Tag = function Tag(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Tag', className, {
       'Tag--disabled': disabled
     })
-  }, rest), /*#__PURE__*/React__default['default'].createElement("div", null, children), onRemove && /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", null, children), onRemove && /*#__PURE__*/React__default["default"].createElement(Clickable, {
     disabled: disabled,
     "aria-label": "Remove",
     onClick: onRemove
-  }, /*#__PURE__*/React__default['default'].createElement(Exit16, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(Exit16, null)));
 };
 
 var _excluded$5 = ["tabs", "onTabClicked", "activeTab", "className"];
@@ -11406,13 +11451,13 @@ var Tabs = function Tabs(_ref) {
     if (onTabClicked) onTabClicked(tabName);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('Tabs', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(TabList, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(TabList, {
     tabs: tabs,
     onTabSelected: handleTabClick,
     activePanel: activePanel
-  }), /*#__PURE__*/React__default['default'].createElement(TabPanels, {
+  }), /*#__PURE__*/React__default["default"].createElement(TabPanels, {
     panels: tabs,
     activePanel: activePanel
   }));
@@ -11422,10 +11467,10 @@ var TabList = function TabList(_ref) {
   var tabs = _ref.tabs,
       onTabSelected = _ref.onTabSelected,
       activePanel = _ref.activePanel;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "TabList"
   }, tabs.map(function (tab) {
-    return /*#__PURE__*/React__default['default'].createElement(Tab, {
+    return /*#__PURE__*/React__default["default"].createElement(Tab, {
       key: tab.name,
       tab: tab,
       onTabChosen: onTabSelected,
@@ -11446,7 +11491,7 @@ var Tab = function Tab(_ref) {
       handleClick();
     }
   }, [handleClick]);
-  return /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  return /*#__PURE__*/React__default["default"].createElement(Clickable, {
     className: "Tab ".concat(activeTab === tab.name ? 'Tab--active' : ''),
     onClick: handleClick,
     onKeyDown: handleKeyDown
@@ -11456,12 +11501,12 @@ var Tab = function Tab(_ref) {
 var TabPanels = function TabPanels(_ref) {
   var panels = _ref.panels,
       activePanel = _ref.activePanel;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "TabPanels"
   }, panels.filter(function (tab) {
     return tab.name === activePanel;
   }).map(function (tab) {
-    return /*#__PURE__*/React__default['default'].createElement(TabPanel, {
+    return /*#__PURE__*/React__default["default"].createElement(TabPanel, {
       key: tab.name
     }, tab.panel);
   }));
@@ -11469,13 +11514,13 @@ var TabPanels = function TabPanels(_ref) {
 
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "TabPanel"
   }, children);
 };
 
 var _excluded$4 = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange"];
-var Textarea = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+var Textarea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
       error = _ref.error,
@@ -11485,7 +11530,7 @@ var Textarea = /*#__PURE__*/React__default['default'].forwardRef(function (_ref,
       _onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default['default'].createElement("textarea", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("textarea", _extends$3({
     className: classNames('Textarea', className, {
       'Textarea--focus': focus,
       'Textarea--disabled': disabled,
@@ -11510,19 +11555,19 @@ var Toast = function Toast(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
 
-  return /*#__PURE__*/React__default['default'].createElement(Stack, _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement(Stack, _extends$3({
     className: classNames('Toast', "Toast--".concat(theme), className),
     direction: "horizontal",
     space: 2,
     alignItems: "center",
     justifyContent: "space-between"
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Text, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Text, {
     treatment: "bold1",
     color: "snow"
-  }, children), onRemove && /*#__PURE__*/React__default['default'].createElement(Clickable, {
+  }, children), onRemove && /*#__PURE__*/React__default["default"].createElement(Clickable, {
     "aria-label": "Remove",
     onClick: onRemove
-  }, /*#__PURE__*/React__default['default'].createElement(Exit16, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(Exit16, null)));
 };
 
 var _excluded$2 = ["className", "double"];
@@ -11531,13 +11576,43 @@ var VerticalDivider = function VerticalDivider(_ref) {
       _double = _ref["double"],
       rest = _objectWithoutProperties(_ref, _excluded$2);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames('VerticalDivider', {
       'VerticalDivider--double': _double
     }, className)
   }, rest));
 };
 
+var PasswordInput = /*#__PURE__*/React$2.forwardRef(function (_ref, ref) {
+  var rest = _extends$3({}, _ref);
+
+  var _useState = React$2.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      passwordShown = _useState2[0],
+      setPasswordShown = _useState2[1];
+
+  var togglePasswordVisiblity = function togglePasswordVisiblity() {
+    setPasswordShown(passwordShown ? false : true);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "PasswordInput"
+  }, /*#__PURE__*/React__default["default"].createElement(Field, _extends$3({
+    type: passwordShown ? 'text' : 'password'
+  }, rest, {
+    ref: ref
+  })), /*#__PURE__*/React__default["default"].createElement(Clickable, {
+    className: "PasswordInput__password-action",
+    onClick: togglePasswordVisiblity,
+    type: "button"
+  }, passwordShown ? /*#__PURE__*/React__default["default"].createElement(Text, {
+    treatment: "eyebrow"
+  }, "HIDE") : /*#__PURE__*/React__default["default"].createElement(Text, {
+    treatment: "eyebrow"
+  }, "SHOW")));
+});
+PasswordInput.displayName = 'PasswordInput';
+
 var isRenderProps = function isRenderProps(children) {
   return typeof children === 'function';
 };
@@ -11593,11 +11668,11 @@ var StatesProps = function StatesProps(_ref) {
   var props = _ref.props,
       children = _ref.children;
   var childrenProps = omit.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
-  return /*#__PURE__*/React__default['default'].createElement(Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack, {
     className: "StatesProps",
     space: 2,
     direction: "horizontal"
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React__default['default'].createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default['default'].createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default['default'].createElement("span", null, " "));
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React__default["default"].createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default["default"].createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default["default"].createElement("span", null, " "));
 };
 
 var _excluded$1 = ["props", "children"];
@@ -11606,13 +11681,13 @@ var State = function State(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$1);
 
-  var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React__default['default'].cloneElement(children, props);
+  var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React__default["default"].cloneElement(children, props);
   var innerChildren = isRenderProps(children) ? children(props) : children;
-  return /*#__PURE__*/React__default['default'].createElement("div", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: "State"
-  }, rest), Specimen, /*#__PURE__*/React__default['default'].createElement("code", {
+  }, rest), Specimen, /*#__PURE__*/React__default["default"].createElement("code", {
     className: "State__props"
-  }, /*#__PURE__*/React__default['default'].createElement(StatesProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(StatesProps, {
     props: props
   }, innerChildren)));
 };
@@ -11624,10 +11699,10 @@ var States = function States(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "States"
   }, states.map(function (props, i) {
-    return /*#__PURE__*/React__default['default'].createElement(State, _extends$3({
+    return /*#__PURE__*/React__default["default"].createElement(State, _extends$3({
       key: i,
       props: props
     }, rest), children);
@@ -11678,6 +11753,7 @@ exports.NoLineDivider = NoLineDivider;
 exports.Overlay = Overlay;
 exports.POPOVER_MOUSEOUT_DELAY_MS = POPOVER_MOUSEOUT_DELAY_MS;
 exports.Paginator = Paginator;
+exports.PasswordInput = PasswordInput;
 exports.Popover = Popover;
 exports.PromoBanner = PromoBanner;
 exports.RadioButton = RadioButton;