@ntbjs/react-components 1.2.0-rc.15 → 1.2.0-rc.16

package/{Instructions-ba0d244e.js → Instructions-92d9cb6f.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
 var warningCircle = require('./warning-circle-24522402.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-ad337fac.js');
-var TextArea = require('./TextArea-7270a924.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-43e79e21.js');
+var TextArea = require('./TextArea-b0125a43.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -51,7 +51,10 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       showMoreText = _ref.showMoreText,
       showLessText = _ref.showLessText,
       isExpanded = _ref.isExpanded,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded"]);
+      loadingIcon = _ref.loadingIcon,
+      successIcon = _ref.successIcon,
+      padding = _ref.padding,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"]);
 
   var _useState = React.useState(false),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -204,7 +207,10 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     showMore: showMore,
     showMoreText: showMoreText,
     showLessText: showLessText,
-    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
   })));
 });
 Instructions.defaultProps = {
@@ -216,6 +222,7 @@ Instructions.defaultProps = {
   disabled: false,
   readOnly: false,
   type: '',
+  padding: 'medium',
   onUpdateCallback: function onUpdateCallback() {}
 };
 Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -244,7 +251,10 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
   onBlur: defaultTheme.PropTypes.func,
   onUpdateCallback: defaultTheme.PropTypes.func,
   type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
-  isExpanded: defaultTheme.PropTypes.func
+  isExpanded: defaultTheme.PropTypes.func,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large'])
 } : {};
 
 exports.Instructions = Instructions;

package/{MultiLevelCheckboxSelect-a16cdf3d.js → MultiLevelCheckboxSelect-4d9d84cd.js}

@@ -1,19 +1,20 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
-require('./Alert-d7863c58.js');
-require('./Badge-fa8f327e.js');
-var Popover = require('./Popover-6fcff6de.js');
-require('./Tab-3580786b.js');
-require('./Tabs-511523e0.js');
-require('./Tooltip-5ccdfe34.js');
-var Checkbox = require('./Checkbox-0cb45351.js');
+require('./Alert-13b75102.js');
+require('./Badge-aec841c8.js');
+var Popover = require('./Popover-e4ecb887.js');
+require('./Tab-f499ecbc.js');
+require('./Tabs-4d7742bc.js');
+require('./Tooltip-6b6f0b0a.js');
+require('./VerificationStatusIcon-b574fd21.js');
+var Checkbox = require('./Checkbox-68dc38a8.js');
 var lodash = require('lodash');
-var TextInput = require('./TextInput-97f7da4d.js');
-require('./InputGroup-53a44ae6.js');
-var SectionSeparator = require('./SectionSeparator-961ec4de.js');
+var TextInput = require('./TextInput-0d109708.js');
+require('./InputGroup-49fbc423.js');
+var SectionSeparator = require('./SectionSeparator-259a22ed.js');
 var close = require('./close-ebf2f3cf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,10 +39,24 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
+});
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _ref);
+}
+
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
 var MultiLevelCheckbox$1 = styled__default['default'].fieldset.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0;\n  border: 0;\n  margin: 0;\n"])));
 var MultiLevelCheckboxLegend = styled__default['default'].legend.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n"])), function (props) {
@@ -404,20 +419,6 @@ var PopoverHeader = styled__default['default'].div.attrs(defaultTheme.applyDefau
 var SearchContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
 var OptionsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
-});
-
-function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref);
-}
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 function useEventListener(eventName, handler, element, options) {

package/{MultiSelect-7e865f37.js → MultiSelect-4b8d3d0d.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-4c3da560.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Popover-6fcff6de.js → Popover-e4ecb887.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
-require('./shift-away-subtle-3cede45b.js');
+require('./shift-away-subtle-0bed9a3c.js');
 var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Radio-a6ba38ed.js → Radio-32d0513a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{SectionSeparator-961ec4de.js → SectionSeparator-259a22ed.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Switch-9e68deb2.js → Switch-4a41585f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{Tab-3580786b.js → Tab-f499ecbc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Tabs-511523e0.js → Tabs-4d7742bc.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
-var Tab = require('./Tab-3580786b.js');
+var Tab = require('./Tab-f499ecbc.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -43,9 +43,8 @@ var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 
 var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
   var children = _ref.children,
-      minHeight = _ref.minHeight,
       defaultMinHeight = _ref.defaultMinHeight,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children", "minHeight", "defaultMinHeight"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight"]);
 
   var _useState = React.useState(0),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -54,33 +53,10 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
 
   var _useState3 = React.useState(),
       _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      firstTab = _useState4[0],
-      setFirstTab = _useState4[1];
-
-  var _useState5 = React.useState(),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      minTabHeight = _useState6[0],
-      setMinTabHeight = _useState6[1];
-
-  var _useState7 = React.useState(),
-      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-      defaultHeight = _useState8[0],
-      setDefaultHeight = _useState8[1];
+      defaultHeight = _useState4[0],
+      setDefaultHeight = _useState4[1];
 
   var contentRef = React.useRef(null);
-  var visibleTabs = [];
-  React.useEffect(function () {
-    if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
-      setActiveTab(visibleTabs[0].key);
-      setFirstTab(visibleTabs[0]);
-    }
-  }, []);
-  React.useLayoutEffect(function () {
-    if (contentRef.current) {
-      var height = contentRef.current.offsetHeight;
-      setMinTabHeight(height);
-    }
-  }, [firstTab]);
   React.useEffect(function () {
     setDefaultHeight(defaultMinHeight);
   }, []);
@@ -97,11 +73,7 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
           return null;
         }
 
-        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
-          visibleTabs.push({
-            key: index,
-            content: child.props.children
-          });
+        if (child.type === Tab.Tab) {
           tabs.push({
             key: index,
             trigger: child.props.trigger,
@@ -130,24 +102,22 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
     }, tab.trigger);
   })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
     return React__default['default'].createElement("div", {
-      ref: tab.key === (firstTab === null || firstTab === void 0 ? void 0 : firstTab.key) ? contentRef : null,
+      ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
       key: tab.key,
       role: "tabpanel",
       hidden: tab.key !== activeTab,
       style: {
-        minHeight: minHeight ? minTabHeight : !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
+        minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
       }
     }, tab.content);
   })));
 });
 Tabs.defaultProps = {
-  minHeight: false,
   defaultMinHeight: ''
 };
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
   backgroundColor: defaultTheme.PropTypes.string,
-  minHeight: defaultTheme.PropTypes.bool,
   defaultMinHeight: defaultTheme.PropTypes.string
 } : {};
 

package/{TextArea-7270a924.js → TextArea-b0125a43.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
 var nanoid = require('nanoid');
-var check = require('./check-555d831b.js');
 var editNote = require('./edit-note-c47d292e.js');
 var styled = require('styled-components');
 
@@ -22,7 +21,9 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
 }, function (props) {
   return props.theme.themeProp('opacity', 0.6, 0.5);
 });
-var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  display: flex;\n  align-items: flex-start;\n  position: absolute;\n  right: 15px;\n  top: 10px;\n  bottom: 0;\n  svg {\n    width: 15px;\n    opacity: 0.7;\n    transition: opacity 250ms;\n    ", "\n    ", "\n  }\n"])), function (props) {
+var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  display: flex;\n  align-items: flex-start;\n  position: absolute;\n  right: 15px;\n  top: 10px;\n  bottom: 0;\n  > .smallPadingIcon {\n    padding: 4px;\n    width: 15px;\n    height: 15px;\n    border-radius: 5px;\n    opacity: 1;\n    margin-top: -5px;\n    ", "\n  }\n  svg {\n    width: 15px;\n    opacity: 0.7;\n    transition: opacity 250ms;\n    ", "\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
+}, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
 }, function (props) {
   return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n        display: none;\n      "])));
@@ -34,7 +35,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      padding: 15px 55px;\n    "])));
 }, function (props) {
-  return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      height: ", "px;\n      -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n    "])), props.defaultHeight);
+  return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n    "])));
 }, function (props) {
   return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      height: ", "px;\n    "])), props.maxHeight);
 }, function (props) {
@@ -136,7 +137,7 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
 });
-var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n  margin-top: -18px;\n  margin-bottom: 0;\n  display: block;\n  position: absolute;\n  font-size: 0.875rem;\n  cursor: pointer;\n  padding: 2px 10px;\n  margin-right: 10px;\n\n  ", "\n  transition:  margin-top 550ms ease-in-out;\n  -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 5px);\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (props) {
+var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n  margin-top: -18px;\n  margin-bottom: 0;\n  display: block;\n  position: absolute;\n  font-size: 0.875rem;\n  cursor: pointer;\n  padding: 2px 10px;\n  margin-right: 10px;\n  margin-top: -26px;\n  ", "\n  transition:  margin-top 550ms ease-in-out;\n  -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.expanded && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n      margin-top: 0px;\n    "])));
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
@@ -173,7 +174,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
       noBorder = _ref.noBorder,
       instructionsTextArea = _ref.instructionsTextArea,
       isExpanded = _ref.isExpanded,
-      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded"]);
+      loadingIcon = _ref.loadingIcon,
+      successIcon = _ref.successIcon,
+      padding = _ref.padding,
+      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded", "loadingIcon", "successIcon", "padding"]);
 
   var textInputDomNode = React.useRef(null);
   var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -273,6 +277,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     icon: icon,
     id: "text-input-".concat(uniqueId),
     lightBackground: lightBackground,
+    padding: padding,
     onChange: function onChange(e) {
       if (e.target.value) {
         setInputIsEmpty(false);
@@ -287,12 +292,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     noBorder: noBorder
   }, rest, {
     onClick: showMore ? handleTextAreaChange : undefined
-  })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && React__default['default'].createElement(check._default, {
-    color: '#b0b6b9',
-    size: 12
-  }), type === 'success' && React__default['default'].createElement(check.SvgCheck, null)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
+  })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
     disabled: disabled
-  }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
+  }, React__default['default'].createElement(editNote.SvgEditNote, {
+    className: padding === 'small' && 'smallPadingIcon'
+  })), label && React__default['default'].createElement(TextInputLabel, {
     htmlFor: "text-input-".concat(uniqueId),
     hasPlaceholder: Boolean(placeholder),
     hasIcon: Boolean(icon),
@@ -347,7 +351,9 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   noBorder: defaultTheme.PropTypes.bool,
   isExpanded: defaultTheme.PropTypes.func,
   type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
-  instructionsTextArea: defaultTheme.PropTypes.bool
+  instructionsTextArea: defaultTheme.PropTypes.bool,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element
 } : {};
 
 exports.TextArea = TextArea;

package/{TextInput-97f7da4d.js → TextInput-0d109708.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');

package/{Tooltip-5ccdfe34.js → Tooltip-6b6f0b0a.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 var TippyTooltip = require('@tippyjs/react');
-require('./shift-away-subtle-3cede45b.js');
+require('./shift-away-subtle-0bed9a3c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/VerificationStatusIcon-b574fd21.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+var VerificationStatusIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  font: normal normal normal 12px/16px Roboto;\n\n  ", ";\n\n  svg {\n    height: ", "px;\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
+}, function (props) {
+  var _props$iconHeight;
+
+  return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
+});
+var VerificationStatusColor = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n\n  ", "\n"])), function (props) {
+  var _props$iconHeight2;
+
+  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
+}, function (props) {
+  var _props$iconHeight3;
+
+  return ((_props$iconHeight3 = props.iconHeight) !== null && _props$iconHeight3 !== void 0 ? _props$iconHeight3 : 15) * 2 / 3;
+}, function (props) {
+  var _props$iconHeight4;
+
+  return ((_props$iconHeight4 = props.iconHeight) !== null && _props$iconHeight4 !== void 0 ? _props$iconHeight4 : 15) * 2 / 3;
+}, function (props) {
+  var darkThemeColor = props.theme.getColor('gray-100');
+  var lightThemeColor = props.theme.getColor('gray-500');
+
+  if (props.status === 'verified') {
+    darkThemeColor = props.theme.getColor('emerald-500');
+    lightThemeColor = props.theme.getColor('emerald-300');
+  } else if (props.status === 'pending') {
+    darkThemeColor = props.theme.getColor('brown-500');
+    lightThemeColor = props.theme.getColor('signal-yellow-500');
+  } else if (props.status === 'rejected') {
+    darkThemeColor = props.theme.getColor('red-600');
+    lightThemeColor = props.theme.getColor('red-200');
+  }
+
+  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
+});
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M9.3 12.662q-1.698 0-2.864-1.166T5.27 8.632q0-1.697 1.166-2.864T9.3 4.602q1.698 0 2.864 1.166t1.166 2.864q0 1.698-1.166 2.864T9.3 12.662zm0-1.86q.925 0 1.548-.622.622-.622.622-1.548t-.622-1.547q-.623-.623-1.548-.623t-1.548.623q-.622.622-.622 1.547t.622 1.548q.623.622 1.548.622zm0 12.686q-4.023-1.097-6.661-4.735Q0 15.113 0 10.616V3.482L9.3 0l9.3 3.482v7.134q0 4.498-2.639 8.137-2.638 3.639-6.661 4.735zm0-11.744zm0-9.765L1.86 4.757v5.86q0 1.769.507 3.421.507 1.653 1.408 3.083 1.254-.639 2.626-.999 1.373-.36 2.899-.36t2.898.36q1.373.36 2.627 1 .901-1.431 1.408-3.084.507-1.652.507-3.422V4.757L9.3 1.98zm0 15.643q-1.2 0-2.307.26-1.108.26-2.093.73.923 1.025 2.03 1.773 1.109.747 2.37 1.143 1.262-.395 2.363-1.143 1.102-.748 2.025-1.773-.985-.47-2.087-.73-1.102-.26-2.301-.26z"
+});
+
+function SvgVerification(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-2.5 0 24 24"
+  }, props), _ref);
+}
+
+var VerificationStatusIcon = React__default['default'].forwardRef(function VerificationStatusIcon(_ref, forwardedRef) {
+  var status = _ref.status,
+      iconHeight = _ref.iconHeight,
+      props = defaultTheme._objectWithoutProperties(_ref, ["status", "iconHeight"]);
+
+  return React__default['default'].createElement(VerificationStatusIcon$1, defaultTheme._extends({
+    iconHeight: iconHeight,
+    ref: forwardedRef
+  }, props), React__default['default'].createElement(SvgVerification, null), React__default['default'].createElement(VerificationStatusColor, {
+    iconHeight: iconHeight,
+    status: status
+  }));
+});
+VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  status: defaultTheme.PropTypes.oneOf(['verified', 'pending', 'rejected']).isRequired,
+  iconHeight: defaultTheme.PropTypes.number
+} : {};
+VerificationStatusIcon.defaultProps = {
+  iconHeight: 15
+};
+
+exports.VerificationStatusIcon = VerificationStatusIcon;

package/data/Alert/index.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Alert = require('../../Alert-d7863c58.js');
-require('../../defaultTheme-0dd58df6.js');
+var Alert = require('../../Alert-13b75102.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');
+require('lodash');
 
 
 

package/data/Badge/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Badge = require('../../Badge-fa8f327e.js');
-require('../../defaultTheme-0dd58df6.js');
+var Badge = require('../../Badge-aec841c8.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');
 

package/data/Popover/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var Popover = require('../../Popover-6fcff6de.js');
-require('../../defaultTheme-0dd58df6.js');
+var Popover = require('../../Popover-e4ecb887.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
 require('react');
 require('polished');
 require('@tippyjs/react');
-require('../../shift-away-subtle-3cede45b.js');
+require('../../shift-away-subtle-0bed9a3c.js');
 require('popper-max-size-modifier');
 
 

package/data/Tab/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Tab = require('../../Tab-3580786b.js');
-require('../../defaultTheme-0dd58df6.js');
+var Tab = require('../../Tab-f499ecbc.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');
 

package/data/Tabs/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Tabs = require('../../Tabs-511523e0.js');
-require('../../defaultTheme-0dd58df6.js');
+var Tabs = require('../../Tabs-4d7742bc.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
 require('react');
-require('../../Tab-3580786b.js');
+require('../../Tab-f499ecbc.js');
 
 
 

package/data/Tooltip/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-5ccdfe34.js');
-require('../../defaultTheme-0dd58df6.js');
+var Tooltip = require('../../Tooltip-6b6f0b0a.js');
+require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');
 require('@tippyjs/react');
-require('../../shift-away-subtle-3cede45b.js');
+require('../../shift-away-subtle-0bed9a3c.js');