@luminati-io/uikit 3.7.2 → 3.7.4

package/dist/umd/uikit.development.js

@@ -29543,7 +29543,11 @@ var BarChart = function BarChart(props) {
     onPointerUp = props.onPointerUp,
     onPointerDown = props.onPointerDown,
     pointerEventsDataKey = props.pointerEventsDataKey,
-    children = props.children;
+    children = props.children,
+    _props$snapTooltipToD = props.snapTooltipToDatumX,
+    snapTooltipToDatumX = _props$snapTooltipToD === void 0 ? true : _props$snapTooltipToD,
+    _props$snapTooltipToD2 = props.snapTooltipToDatumY,
+    snapTooltipToDatumY = _props$snapTooltipToD2 === void 0 ? true : _props$snapTooltipToD2;
   var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_5__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
@@ -29567,6 +29571,8 @@ var BarChart = function BarChart(props) {
       id: "pattern_".concat(i)
     }, barProps.pattern);
   }).filter(Boolean);
+  var showVerticalCrosshair = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(props.showVerticalCrosshair, !stacked && !horizontal);
+  var showHorizontalCrosshair = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(props.showHorizontalCrosshair, !stacked && horizontal);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(XYChart, {
     theme: chartTheme,
     xScale: config.x,
@@ -29640,10 +29646,10 @@ var BarChart = function BarChart(props) {
     tickFormat: yAxis.formatTick,
     labelOffset: yAxis.labelOffset
   }), !!showTooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, {
-    showHorizontalCrosshair: !stacked && !horizontal,
-    showVerticalCrosshair: !stacked && horizontal,
-    snapTooltipToDatumX: true,
-    snapTooltipToDatumY: true,
+    showHorizontalCrosshair: showVerticalCrosshair,
+    showVerticalCrosshair: showHorizontalCrosshair,
+    snapTooltipToDatumX: snapTooltipToDatumX,
+    snapTooltipToDatumY: snapTooltipToDatumY,
     unstyled: true,
     applyPositionStyle: true,
     renderTooltip: function renderTooltip(params) {
@@ -29659,7 +29665,7 @@ var BarChart = function BarChart(props) {
 };
 BarChart.displayName = 'BarChart';
 var Bar = function Bar(props) {
-  var _splitProps = (0,_util__WEBPACK_IMPORTED_MODULE_2__.splitProps)(props, 'animated', 'showGridRows', 'showGridColumns', 'numTicks', 'xAxis', 'yAxis', 'formatValue', 'margin', 'horizontal', 'stacked', 'showAnnotations', 'showTooltip', 'tooltipContent', 'onPointerMove', 'onPointerOut', 'onPointerUp', 'onPointerDown', 'pointerEventsDataKey', 'children'),
+  var _splitProps = (0,_util__WEBPACK_IMPORTED_MODULE_2__.splitProps)(props, 'animated', 'showGridRows', 'showGridColumns', 'numTicks', 'xAxis', 'yAxis', 'formatValue', 'margin', 'horizontal', 'stacked', 'showAnnotations', 'showTooltip', 'tooltipContent', 'snapTooltipToDatumX', 'snapTooltipToDatumY', 'showVerticalCrosshair', 'showHorizontalCrosshair', 'onPointerMove', 'onPointerOut', 'onPointerUp', 'onPointerDown', 'pointerEventsDataKey', 'children'),
     _splitProps2 = _slicedToArray(_splitProps, 2),
     chartProps = _splitProps2[0],
     restProps = _splitProps2[1];
@@ -29714,6 +29720,10 @@ Bar.propTypes = {
   showAnnotations: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   tooltipContent: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
+  snapTooltipToDatumX: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  snapTooltipToDatumY: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  showVerticalCrosshair: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  showHorizontalCrosshair: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   onPointerMove: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onPointerOut: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onPointerUp: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
@@ -30116,8 +30126,8 @@ ChartContainer.defaultProps = {
   variant: 'default'
 };
 ChartContainer.propTypes = {
-  header: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  description: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  header: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  description: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   actions: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   width: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   height: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired,
@@ -34404,6 +34414,7 @@ var ClearIndicator = function ClearIndicator(props) {
   var ic = _icons__WEBPACK_IMPORTED_MODULE_0__["default"].CloseSmall;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({
     ref: innerRef,
+    "data-testid": "clear-indicator",
     width: "18px",
     height: "18px",
     viewBox: ic.viewBox,
@@ -34641,6 +34652,7 @@ var DropdownIndicator = function DropdownIndicator(props) {
   var ic = _icons__WEBPACK_IMPORTED_MODULE_0__["default"][selectProps.menuIsOpen ? 'ChevronUp' : 'ChevronDown'];
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({
     ref: innerRef,
+    "data-testid": "dropdown-indicator",
     width: "18px",
     height: "18px",
     viewBox: ic.viewBox,
@@ -35653,35 +35665,37 @@ UploadItemState.propTypes = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Checkbox: () => (/* reexport safe */ _checkbox__WEBPACK_IMPORTED_MODULE_3__.Checkbox),
+/* harmony export */   Checkbox: () => (/* reexport safe */ _checkbox__WEBPACK_IMPORTED_MODULE_6__.Checkbox),
 /* harmony export */   CheckboxList: () => (/* reexport safe */ _checkbox_list__WEBPACK_IMPORTED_MODULE_0__.CheckboxList),
-/* harmony export */   CompareTo: () => (/* reexport safe */ _compare_to__WEBPACK_IMPORTED_MODULE_4__.CompareTo),
-/* harmony export */   DatePicker: () => (/* reexport safe */ _date_picker__WEBPACK_IMPORTED_MODULE_5__.DatePicker),
-/* harmony export */   DragDrop: () => (/* reexport safe */ _drag_drop__WEBPACK_IMPORTED_MODULE_11__.DragDrop),
-/* harmony export */   Dropdown: () => (/* reexport safe */ _dropdown__WEBPACK_IMPORTED_MODULE_1__.Dropdown),
-/* harmony export */   FILE_STATUS: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_12__.FILE_STATUS),
-/* harmony export */   FileUploader: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_12__.FileUploader),
-/* harmony export */   Number: () => (/* reexport safe */ _number__WEBPACK_IMPORTED_MODULE_6__.Number),
-/* harmony export */   RadioGroup: () => (/* reexport safe */ _radio_group__WEBPACK_IMPORTED_MODULE_7__.RadioGroup),
-/* harmony export */   StyledDayPicker: () => (/* reexport safe */ _date_picker__WEBPACK_IMPORTED_MODULE_5__.StyledDayPicker),
-/* harmony export */   Textarea: () => (/* reexport safe */ _textarea__WEBPACK_IMPORTED_MODULE_8__.Textarea),
-/* harmony export */   Textbox: () => (/* reexport safe */ _textbox__WEBPACK_IMPORTED_MODULE_9__.Textbox),
-/* harmony export */   TextboxList: () => (/* reexport safe */ _textbox_list__WEBPACK_IMPORTED_MODULE_2__.TextboxList),
-/* harmony export */   Toggle: () => (/* reexport safe */ _toggle__WEBPACK_IMPORTED_MODULE_10__.Toggle)
+/* harmony export */   CompareTo: () => (/* reexport safe */ _compare_to__WEBPACK_IMPORTED_MODULE_7__.CompareTo),
+/* harmony export */   DatePicker: () => (/* reexport safe */ _date_picker__WEBPACK_IMPORTED_MODULE_8__.DatePicker),
+/* harmony export */   DragDrop: () => (/* reexport safe */ _drag_drop__WEBPACK_IMPORTED_MODULE_1__.DragDrop),
+/* harmony export */   Dropdown: () => (/* reexport safe */ _dropdown__WEBPACK_IMPORTED_MODULE_2__.Dropdown),
+/* harmony export */   FILE_STATUS: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_3__.FILE_STATUS),
+/* harmony export */   FileUploader: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_3__.FileUploader),
+/* harmony export */   Number: () => (/* reexport safe */ _number__WEBPACK_IMPORTED_MODULE_9__.Number),
+/* harmony export */   Phone: () => (/* reexport safe */ _phone__WEBPACK_IMPORTED_MODULE_4__.Phone),
+/* harmony export */   RadioGroup: () => (/* reexport safe */ _radio_group__WEBPACK_IMPORTED_MODULE_10__.RadioGroup),
+/* harmony export */   StyledDayPicker: () => (/* reexport safe */ _date_picker__WEBPACK_IMPORTED_MODULE_8__.StyledDayPicker),
+/* harmony export */   Textarea: () => (/* reexport safe */ _textarea__WEBPACK_IMPORTED_MODULE_11__.Textarea),
+/* harmony export */   Textbox: () => (/* reexport safe */ _textbox__WEBPACK_IMPORTED_MODULE_12__.Textbox),
+/* harmony export */   TextboxList: () => (/* reexport safe */ _textbox_list__WEBPACK_IMPORTED_MODULE_5__.TextboxList),
+/* harmony export */   Toggle: () => (/* reexport safe */ _toggle__WEBPACK_IMPORTED_MODULE_13__.Toggle)
 /* harmony export */ });
 /* harmony import */ var _checkbox_list__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./checkbox_list */ "./src/input/checkbox_list/index.js");
-/* harmony import */ var _dropdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown */ "./src/input/dropdown/index.js");
-/* harmony import */ var _textbox_list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./textbox_list */ "./src/input/textbox_list/index.js");
-/* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./checkbox */ "./src/input/checkbox.js");
-/* harmony import */ var _compare_to__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./compare_to */ "./src/input/compare_to.js");
-/* harmony import */ var _date_picker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./date_picker */ "./src/input/date_picker.js");
-/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./number */ "./src/input/number.js");
-/* harmony import */ var _radio_group__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./radio_group */ "./src/input/radio_group.js");
-/* harmony import */ var _textarea__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./textarea */ "./src/input/textarea.js");
-/* harmony import */ var _textbox__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./textbox */ "./src/input/textbox.js");
-/* harmony import */ var _toggle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./toggle */ "./src/input/toggle.js");
-/* harmony import */ var _drag_drop__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./drag_drop */ "./src/input/drag_drop/index.js");
-/* harmony import */ var _file_uploader__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./file_uploader */ "./src/input/file_uploader/index.js");
+/* harmony import */ var _drag_drop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./drag_drop */ "./src/input/drag_drop/index.js");
+/* harmony import */ var _dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown */ "./src/input/dropdown/index.js");
+/* harmony import */ var _file_uploader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./file_uploader */ "./src/input/file_uploader/index.js");
+/* harmony import */ var _phone__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./phone */ "./src/input/phone/index.js");
+/* harmony import */ var _textbox_list__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./textbox_list */ "./src/input/textbox_list/index.js");
+/* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./checkbox */ "./src/input/checkbox.js");
+/* harmony import */ var _compare_to__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./compare_to */ "./src/input/compare_to.js");
+/* harmony import */ var _date_picker__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./date_picker */ "./src/input/date_picker.js");
+/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./number */ "./src/input/number.js");
+/* harmony import */ var _radio_group__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./radio_group */ "./src/input/radio_group.js");
+/* harmony import */ var _textarea__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./textarea */ "./src/input/textarea.js");
+/* harmony import */ var _textbox__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./textbox */ "./src/input/textbox.js");
+/* harmony import */ var _toggle__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./toggle */ "./src/input/toggle.js");
 // LICENSE_CODE ZON
 
 
@@ -35700,6 +35714,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/input/number.js":
@@ -35723,23 +35738,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../translation */ "./src/translation.js");
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
-/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./shared */ "./src/input/shared.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./shared */ "./src/input/shared.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["onFocus", "onBlur", "onChange"];
+var _excluded = ["onChange", "onBlur", "value", "step", "minValue", "maxValue", "size", "placeholder", "changeOnBlur"],
+  _excluded2 = ["onFocus", "onBlur", "onChange"];
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 
 
 
@@ -35749,16 +35763,20 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 var color = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color;
-var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
-  var onChange = props.onChange,
-    onBlur = props.onBlur,
-    value = props.value,
-    step = props.step,
-    minValue = props.minValue,
-    maxValue = props.maxValue,
-    size = props.size,
-    placeholder = props.placeholder,
-    changeOnBlur = props.changeOnBlur;
+var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
+  var onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    value = _ref.value,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    placeholder = _ref.placeholder,
+    _ref$changeOnBlur = _ref.changeOnBlur,
+    changeOnBlur = _ref$changeOnBlur === void 0 ? true : _ref$changeOnBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     var v = e.target.value;
     if (v != '') v = +v;
@@ -35770,19 +35788,10 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     var v = +value;
     if (typeof maxValue == 'number' && v > maxValue) onChange === null || onChange === void 0 || onChange(maxValue, e);else if (typeof minValue == 'number' && v < minValue) onChange === null || onChange === void 0 || onChange(minValue, e);
   }, [onChange, onBlur, value, minValue, maxValue, changeOnBlur]);
-  var heightCalculationCallback = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    var sizes = {
-      'xs': 28,
-      'sm': 36,
-      'md': 40,
-      'lg': 48
-    };
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["height:", ";"], (0,_utils__WEBPACK_IMPORTED_MODULE_7__.toPixel)(sizes[size] || sizes.sm));
-  }, [size]);
+  var heightCalculationCallback = (0,_shared__WEBPACK_IMPORTED_MODULE_7__.useHeightCalculationCallback)(size);
   var t = (0,_translation__WEBPACK_IMPORTED_MODULE_4__.useTranslate)();
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_8__.FieldWrapper, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_7__.FieldWrapper, _extends({}, rest, {
+    ref: ref,
     autoresize: false,
     heightCalculationCallback: heightCalculationCallback,
     inputProps: {
@@ -35797,11 +35806,6 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     placeholder: t(placeholder)
   }));
 });
-Number.defaultProps = {
-  size: 'sm',
-  step: 1,
-  changeOnBlur: true
-};
 Number.displayName = 'Number';
 Number.propTypes = {
   value: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)]),
@@ -35817,13 +35821,18 @@ Number.propTypes = {
   necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['asterisk', 'text']),
   invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   leftInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   rightInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().func), prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    current: prop_types__WEBPACK_IMPORTED_MODULE_1___default().instanceOf(Element)
+  })]),
+  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  verticalAlign: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
   changeOnBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
@@ -35831,7 +35840,7 @@ var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forw
   var onFocus = props.onFocus,
     onBlur = props.onBlur,
     onChange = props.onChange,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded2);
   var inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -35906,6 +35915,615 @@ var Buttons = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withC
 
 /***/ }),
 
+/***/ "./src/input/phone/country_select.js":
+/*!*******************************************!*\
+  !*** ./src/input/phone/country_select.js ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CountrySelect: () => (/* binding */ CountrySelect)
+/* harmony export */ });
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/react-select.esm.js");
+/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/index-a301f526.esm.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../theme */ "./src/theme.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../typography */ "./src/typography/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils */ "./src/utils.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../constants */ "./src/constants.js");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../icon */ "./src/icon.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _textbox__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../textbox */ "./src/input/textbox.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onBlur"],
+  _excluded2 = ["inputRef", "innerRef"],
+  _excluded3 = ["searchInputRef", "onInputBlur", "children", "filterOption"],
+  _excluded4 = ["size", "disabled", "value", "onChange"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 font_family = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].font_family,
+  font_weight = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].font_weight,
+  font_size = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].font_size,
+  line_height = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].line_height,
+  color = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color;
+var CountrySelect = function CountrySelect(_ref) {
+  var countries = _ref.countries,
+    country = _ref.country,
+    onChangeCountry = _ref.onChangeCountry,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    getCountryValue = _ref.getCountryValue,
+    getCountryLabel = _ref.getCountryLabel,
+    getCountryCallingCode = _ref.getCountryCallingCode,
+    getCountryFlag = _ref.getCountryFlag,
+    filterCountry = _ref.filterCountry,
+    onMenuClose = _ref.onMenuClose;
+  var inputRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
+  var onInputBlurRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
+  var searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
+  var _getCountryValue = useFunOrPropCb('value', getCountryValue);
+  var _getCountryLabel = useFunOrPropCb('label', getCountryLabel);
+  var _getCountryCallingCode = useFunOrPropCb('callingCode', getCountryCallingCode);
+  var _getCountryFlag = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (opt) {
+    var flag = typeof getCountryFlag == 'function' ? getCountryFlag(opt) : opt.flag;
+    if (!flag) return null;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(FlagWrapper, null, flag);
+  }, [getCountryFlag]);
+  var _filterCountry = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (opt, inputValue) {
+    if (typeof filterCountry == 'function') return filterCountry(opt, inputValue);
+    if (!opt) return false;
+    if (inputValue.startsWith('+')) inputValue = inputValue.slice(1);
+    var filter = function filter(optValue) {
+      return compareCountryString(optValue, inputValue);
+    };
+    var countryValue = _getCountryValue(opt);
+    var countryLabel = _getCountryLabel(opt);
+    var countryCallingCode = _getCountryCallingCode(opt);
+    return filter(countryLabel) || filter(countryValue) || filter(countryCallingCode);
+  }, [filterCountry]);
+  var formatOptionLabel = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (opt, _ref2) {
+    var context = _ref2.context;
+    if (!opt) return '';
+    if (context == 'value') return _getCountryFlag(opt) || '';
+    var countryCallingCode = _getCountryCallingCode(opt);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, null, _getCountryFlag(opt), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
+      variant: "sm",
+      color: "gray_11_25",
+      no_wrap: true
+    }, _getCountryLabel(opt)), !!countryCallingCode && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
+      variant: "sm",
+      color: "gray_9"
+    }, "+", countryCallingCode));
+  }, [_getCountryLabel, _getCountryCallingCode, _getCountryFlag]);
+  var filterOption = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3, inputValue) {
+    var opt = _ref3.data;
+    return _filterCountry(opt, inputValue);
+  }, [_filterCountry]);
+  var setFocus = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
+    return setTimeout(function () {
+      var _searchInputRef$curre;
+      return (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+    }, 0);
+  }, []);
+  var handleBlur = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (event) {
+    var _onInputBlurRef$curre;
+    return (_onInputBlurRef$curre = onInputBlurRef.current) === null || _onInputBlurRef$curre === void 0 ? void 0 : _onInputBlurRef$curre.call(onInputBlurRef, event);
+  }, []);
+  var handleClose = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
+    setTimeout(function () {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+    }, 0);
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+  }, [onMenuClose]);
+  var MenuListComponent = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    var MenuListC = function MenuListC(rest) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(MenuList, _extends({}, rest, {
+        searchInputRef: searchInputRef,
+        onInputBlur: handleBlur,
+        filterOption: filterOption
+      }));
+    };
+    return MenuListC;
+  }, [handleBlur, filterOption]);
+  var InputComponent = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    var InputC = function InputC(_ref4) {
+      var onBlur = _ref4.onBlur,
+        rest = _objectWithoutProperties(_ref4, _excluded);
+      (0,_util__WEBPACK_IMPORTED_MODULE_10__.useSetRefsEffect)(onBlur, [onInputBlurRef]);
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Input, _extends({}, rest, {
+        inputRef: inputRef
+      }));
+    };
+    return InputC;
+  }, []);
+  var comps = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return {
+      IndicatorSeparator: null,
+      DropdownIndicator: DropdownIndicator,
+      Input: InputComponent,
+      MenuList: MenuListComponent
+    };
+  }, [InputComponent, MenuListComponent]);
+  var value = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return countries.find(function (c) {
+      return _getCountryValue(c) == country;
+    });
+  }, [countries, country, _getCountryValue]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_11__["default"], {
+    options: countries,
+    value: value,
+    onChange: onChangeCountry,
+    isDisabled: disabled,
+    menuPortalTarget: document.body,
+    styles: getStyles(size),
+    formatOptionLabel: formatOptionLabel,
+    placeholder: null,
+    getOptionValue: _getCountryValue,
+    getOptionLabel: _getCountryLabel,
+    backspaceRemovesValue: false,
+    onMenuOpen: setFocus,
+    onMenuClose: handleClose,
+    components: comps
+  });
+};
+var EventTrap = function EventTrap(_ref5) {
+  var children = _ref5.children;
+  var eventTrap = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
+    onMouseDown: eventTrap,
+    onClick: eventTrap
+  }, children);
+};
+var DropdownIndicator = function DropdownIndicator(_ref6) {
+  var selectProps = _ref6.selectProps,
+    innerRef = _ref6.innerRef,
+    innerProps = _ref6.innerProps,
+    isDisabled = _ref6.isDisabled;
+  var ic = _icons__WEBPACK_IMPORTED_MODULE_0__["default"][selectProps.menuIsOpen ? 'ChevronUp' : 'ChevronDown'];
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({
+    ref: innerRef,
+    width: "12px",
+    height: "12px",
+    viewBox: ic.viewBox,
+    style: {
+      color: color.gray_9,
+      cursor: isDisabled ? 'default' : 'pointer'
+    }
+  }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
+    href: "#".concat(ic.id)
+  }));
+};
+var Input = function Input(_ref7) {
+  var inputRef = _ref7.inputRef,
+    innerRef = _ref7.innerRef,
+    rest = _objectWithoutProperties(_ref7, _excluded2);
+  var handleRef = (0,_util__WEBPACK_IMPORTED_MODULE_10__.useSetRefsCallback)([inputRef, innerRef]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_12__.c.Input, _extends({}, rest, {
+    innerRef: handleRef,
+    onBlur: null,
+    value: "",
+    readOnly: true
+  }));
+};
+var MenuList = function MenuList(_ref8) {
+  var searchInputRef = _ref8.searchInputRef,
+    onInputBlur = _ref8.onInputBlur,
+    children = _ref8.children,
+    filterOption = _ref8.filterOption,
+    rest = _objectWithoutProperties(_ref8, _excluded3);
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var filteredChildren = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return Array.isArray(children) ? children.filter(function (i) {
+      return filterOption(i.props, value);
+    }) : children;
+  }, [value, children, filterOption]);
+  var hasChildren = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return !Array.isArray(filteredChildren) || filteredChildren.length;
+  }, [filteredChildren]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_12__.c.MenuList, rest, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(EventTrap, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SearchContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SearchInput, {
+    ref: searchInputRef,
+    onBlur: onInputBlur,
+    onChange: setValue
+  })), hasChildren ? filteredChildren : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(NoOptionsMessage, rest, "No options")));
+};
+var SearchInput = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (_ref9, ref) {
+  var size = _ref9.size,
+    disabled = _ref9.disabled,
+    value = _ref9.value,
+    onChange = _ref9.onChange,
+    rest = _objectWithoutProperties(_ref9, _excluded4);
+  var _useValue = (0,_util__WEBPACK_IMPORTED_MODULE_10__.useValue)(value),
+    _useValue2 = _slicedToArray(_useValue, 2),
+    val = _useValue2[0],
+    setVal = _useValue2[1];
+  var changeValue = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (v, e) {
+    setVal(v);
+    onChange === null || onChange === void 0 || onChange(v, e);
+  }, [onChange]);
+  var reset = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
+    return changeValue('');
+  }, [changeValue]);
+  var SearchIcon = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_7__.Icon, {
+      name: "Search",
+      color: "gray_9",
+      size: size == 'lg' ? 'sm' : 'xs'
+    });
+  }, [size]);
+  var ClearButton = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return !!val && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_8__.IconButton, {
+      variant: "ghost",
+      icon: "Close",
+      onClick: reset
+    });
+  }, [val, disabled, reset]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_textbox__WEBPACK_IMPORTED_MODULE_9__.Textbox, _extends({}, rest, {
+    size: size,
+    disabled: disabled,
+    fieldRef: ref,
+    leftInnerContent: SearchIcon,
+    rightInnerContent: ClearButton,
+    value: val,
+    onChange: changeValue
+  }));
+});
+SearchInput.displayName = 'SearchInput';
+var NoOptionsMessage = function NoOptionsMessage(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_12__.c.NoOptionsMessage, props);
+};
+var SearchContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "SearchContainer",
+  componentId: "sc-7zi817-0"
+})(["padding:8px;"]);
+var Option = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "Option",
+  componentId: "sc-7zi817-1"
+})(["display:flex;flex-direction:row;align-items:center;gap:4px;"]);
+var FlagWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "FlagWrapper",
+  componentId: "sc-7zi817-2"
+})(["display:flex;align-items:center;width:18px;height:18px;"]);
+var getStyles = function getStyles(size) {
+  return {
+    control: function control(baseStyles, _ref10) {
+      var isDisabled = _ref10.isDisabled;
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        width: '56px',
+        minHeight: getHeight(size),
+        padding: "4px 8px 4px 12px",
+        /* Label/sm */
+        fontFamily: font_family.sans,
+        fontStyle: 'normal',
+        fontWeight: font_weight.regular,
+        fontSize: font_size.sm,
+        lineHeight: line_height.none,
+        color: isDisabled ? color.gray_9 : color.gray_11_50,
+        backgroundColor: color.gray_2,
+        borderColor: isDisabled ? color.gray_6 : color.gray_7,
+        cursor: isDisabled ? 'default' : 'text',
+        borderRight: '0 none',
+        borderTopRightRadius: '0',
+        borderBottomRightRadius: '0',
+        boxShadow: undefined,
+        '&:hover': undefined
+      });
+    },
+    valueContainer: function valueContainer(baseStyles) {
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        padding: '0'
+      });
+    },
+    menu: function menu(baseStyles) {
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        padding: 0,
+        boxSizing: 'border-box',
+        minWidth: '240px',
+        width: 'fit-content',
+        maxWidth: '540px',
+        backgroundColor: color.white,
+        borderRadius: '4px',
+        boxShadow: _theme__WEBPACK_IMPORTED_MODULE_3__["default"].box_shadow.md
+      });
+    },
+    menuPortal: function menuPortal(baseStyles) {
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        zIndex: _constants__WEBPACK_IMPORTED_MODULE_6__.Z_INDEX.dropdown
+      });
+    },
+    option: function option(baseStyles, _ref11) {
+      var selected = _ref11.selected;
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        backgroundColor: selected ? color.blue_3 : baseStyles.backgroundColor
+      });
+    }
+  };
+};
+var getHeight = function getHeight(size) {
+  var height = {
+    sm: 36,
+    md: 40,
+    lg: 48
+  };
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(height[size] || height.sm);
+};
+var compareCountryString = function compareCountryString(optValue, inputValue) {
+  return optValue === null || optValue === void 0 ? void 0 : optValue.toLowerCase().includes(inputValue.toLowerCase());
+};
+var useFunOrPropCb = function useFunOrPropCb(propName, fun) {
+  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (obj) {
+    return typeof fun == 'function' ? fun(obj) : obj[propName];
+  }, [fun]);
+};
+
+/***/ }),
+
+/***/ "./src/input/phone/index.js":
+/*!**********************************!*\
+  !*** ./src/input/phone/index.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Phone: () => (/* reexport safe */ _phone__WEBPACK_IMPORTED_MODULE_0__.Phone)
+/* harmony export */ });
+/* harmony import */ var _phone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./phone */ "./src/input/phone/phone.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+/***/ }),
+
+/***/ "./src/input/phone/phone.js":
+/*!**********************************!*\
+  !*** ./src/input/phone/phone.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Phone: () => (/* binding */ Phone)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../translation */ "./src/translation.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../shared */ "./src/input/shared.js");
+/* harmony import */ var _country_select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./country_select */ "./src/input/phone/country_select.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["size", "value", "onChange", "placeholder", "countries", "maxLength", "inputProps", "disabled", "defaultCountry", "parsePhoneNumber", "getCountryValue", "getCountryLabel", "getCountryCallingCode", "getCountryFlag", "filterCountry"],
+  _excluded2 = ["value", "parsePhoneNumber"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+
+
+
+
+
+
+var noop = function noop() {};
+var Phone = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    _ref$countries = _ref.countries,
+    countries = _ref$countries === void 0 ? [] : _ref$countries,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? 20 : _ref$maxLength,
+    inputProps = _ref.inputProps,
+    disabled = _ref.disabled,
+    _ref$defaultCountry = _ref.defaultCountry,
+    defaultCountry = _ref$defaultCountry === void 0 ? 'US' : _ref$defaultCountry,
+    _ref$parsePhoneNumber = _ref.parsePhoneNumber,
+    parsePhoneNumber = _ref$parsePhoneNumber === void 0 ? noop : _ref$parsePhoneNumber,
+    getCountryValue = _ref.getCountryValue,
+    getCountryLabel = _ref.getCountryLabel,
+    getCountryCallingCode = _ref.getCountryCallingCode,
+    getCountryFlag = _ref.getCountryFlag,
+    filterCountry = _ref.filterCountry,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var fieldRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  var unmaskNumber = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    var number = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var unmasked = number;
+    var parsed = parsePhoneNumber(number);
+    if (parsed) {
+      var code = "+".concat(parsed.callingCode);
+      unmasked = "".concat(code).concat(number.replace(code, '').trim());
+    }
+    var char2dig = '22233344455566677778889999';
+    unmasked = unmasked.replace(/[a-z]/ig, function (c) {
+      return char2dig[c.charCodeAt(0) - 97];
+    });
+    return unmasked.replace(/[^+0-9()-\s]/g, '');
+  }, [parsePhoneNumber]);
+  var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    var _e$target;
+    onChange === null || onChange === void 0 || onChange(unmaskNumber((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value), e);
+  }, [unmaskNumber, onChange]);
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultCountry),
+    _useState2 = _slicedToArray(_useState, 2),
+    country = _useState2[0],
+    setCountry = _useState2[1];
+  var onChangeCountry = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (v) {
+    if (!v) return setCountry(null);
+    var number = value || '';
+    var newCode = typeof getCountryCallingCode == 'function' ? getCountryCallingCode(v) : v.callingCode;
+    if (newCode && !number.startsWith("+".concat(newCode))) {
+      var parsed = parsePhoneNumber(number);
+      var oldCode = parsed === null || parsed === void 0 ? void 0 : parsed.callingCode;
+      var repl = oldCode ? "+".concat(oldCode) : number.startsWith('+') ? '+' : '';
+      number = repl ? number.replace(repl, "+".concat(newCode)) : "+".concat(newCode).concat(number);
+      onChange === null || onChange === void 0 || onChange(number, {});
+    }
+    setCountry(v.value);
+  }, [value, parsePhoneNumber, getCountryCallingCode, onChange]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var _parsePhoneNumber;
+    if (value) setCountry(((_parsePhoneNumber = parsePhoneNumber(value)) === null || _parsePhoneNumber === void 0 ? void 0 : _parsePhoneNumber.country) || null);
+  }, [value, parsePhoneNumber]);
+  var heightCalculationCallback = (0,_shared__WEBPACK_IMPORTED_MODULE_4__.useHeightCalculationCallback)(size);
+  var t = (0,_translation__WEBPACK_IMPORTED_MODULE_3__.useTranslate)();
+  var handleMenuClose = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    var _fieldRef$current;
+    return (_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.focus();
+  }, []);
+  var selectProps = {
+    countries: countries,
+    country: country,
+    onChangeCountry: onChangeCountry,
+    size: size,
+    disabled: disabled,
+    getCountryValue: getCountryValue,
+    getCountryLabel: getCountryLabel,
+    getCountryCallingCode: getCountryCallingCode,
+    getCountryFlag: getCountryFlag,
+    filterCountry: filterCountry,
+    onMenuClose: handleMenuClose
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_4__.FieldWrapper, _extends({}, rest, {
+    ref: ref,
+    heightCalculationCallback: heightCalculationCallback,
+    autofocus: false,
+    autoresize: false,
+    verticalAlign: "center",
+    Field: PhoneField,
+    fieldRef: fieldRef,
+    disabled: disabled,
+    value: value,
+    onChange: handleChange,
+    placeholder: t(placeholder),
+    inputProps: _objectSpread(_objectSpread({}, inputProps), {}, {
+      maxLength: maxLength,
+      parsePhoneNumber: parsePhoneNumber
+    }),
+    leftOuterContent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_country_select__WEBPACK_IMPORTED_MODULE_5__.CountrySelect, selectProps)
+  }));
+});
+Phone.displayName = 'Phone';
+Phone.propTypes = {
+  value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  required: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['asterisk', 'text']),
+  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  leftInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  rightInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
+  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  maxLength: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+  defaultCountry: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  parsePhoneNumber: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func).isRequired,
+  getCountryValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  getCountryLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  getCountryCallingCode: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  getCountryFlag: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  filterCountry: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  countries: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().array)
+};
+var PhoneField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref2, ref) {
+  var value = _ref2.value,
+    parsePhoneNumber = _ref2.parsePhoneNumber,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var phoneNumber = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return parsePhoneNumber(value || '');
+  }, [value, parsePhoneNumber]);
+  var formatted = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return phoneNumber && phoneNumber.formattedOutput || value;
+  }, [phoneNumber, value]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TelInput, _extends({}, rest, {
+    ref: ref,
+    value: formatted
+  }));
+});
+PhoneField.displayName = 'PhoneField';
+var TelInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs({
+  type: 'tel'
+}).withConfig({
+  displayName: "TelInput",
+  componentId: "sc-ommqlh-0"
+})(["padding:0;outline:none;border:0;width:100%;color:inherit;background:inherit;"]);
+
+/***/ }),
+
 /***/ "./src/input/radio_group.js":
 /*!**********************************!*\
   !*** ./src/input/radio_group.js ***!
@@ -36191,7 +36809,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["id", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "onChange", "onFocus", "onBlur", "placeholder", "disabled", "invalid", "autofocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper"];
+var _excluded = ["id", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "fieldRef", "onChange", "onFocus", "onBlur", "placeholder", "disabled", "invalid", "autofocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper"];
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -36227,6 +36845,7 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     rightOuterContent = props.rightOuterContent,
     heightCalculationCallback = props.heightCalculationCallback,
     Field = props.Field,
+    fieldRef = props.fieldRef,
     onChange = props.onChange,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
@@ -36245,6 +36864,7 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     innerWrapper = props.innerWrapper,
     rest = _objectWithoutProperties(props, _excluded);
   var field = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
+  var setFieldRefs = (0,_util__WEBPACK_IMPORTED_MODULE_10__.useSetRefsCallback)([fieldRef, field]);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
@@ -36295,7 +36915,7 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     $verticalAlign: verticalAlign,
     onClick: onWrapperClick
   }, leftInnerContent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Field, _extends({}, props.inputProps, {
-    ref: field,
+    ref: setFieldRefs,
     id: id,
     disabled: disabled,
     onChange: onChange,
@@ -36309,9 +36929,6 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
   }, helperText));
 });
 FieldWrapper.displayName = 'FieldWrapper';
-FieldWrapper.defaultProps = {
-  size: 'md'
-};
 FieldWrapper.propTypes = {
   value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
   onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
@@ -36329,7 +36946,16 @@ FieldWrapper.propTypes = {
   labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  Field: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().elementType)
+  Field: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().elementType),
+  fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().func), prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({
+    current: prop_types__WEBPACK_IMPORTED_MODULE_0___default().instanceOf(Element)
+  })]),
+  required: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['asterisk', 'text']),
+  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  heightCalculationCallback: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  autoresize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  verticalAlign: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
 };
 FieldWrapper.displayName = 'FieldWrapper';
 var Field = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.withConfig({
@@ -36417,11 +37043,11 @@ var Asterisk = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typogra
 var LeftOuterContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "LeftOuterContentWrapper",
   componentId: "sc-r60v1b-4"
-})(["border-top-left-radius:4px;border-bottom-left-radius:4px;overflow:hidden;height:100%;"]);
+})(["border-top-left-radius:4px;border-bottom-left-radius:4px;height:100%;"]);
 var RightOuterContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "RightOuterContentWrapper",
   componentId: "sc-r60v1b-5"
-})(["border-top-right-radius:4px;border-bottom-right-radius:4px;overflow:hidden;height:100%;"]);
+})(["border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;"]);
 var InputContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).withConfig({
   displayName: "InputContentWrapper",
   componentId: "sc-r60v1b-6"
@@ -36431,26 +37057,16 @@ var InputContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default
 var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "InputWrapper",
   componentId: "sc-r60v1b-7"
-})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";", " ", " ", ""], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].font_family.sans, inputVerticalPadding, inputHorizontalPadding, function (props) {
+})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", ""], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].font_family.sans, inputVerticalPadding, inputHorizontalPadding, function (props) {
   return props.$verticalAlign;
 }, function (props) {
-  var $leftOuterContent = props.$leftOuterContent,
-    $rightOuterContent = props.$rightOuterContent;
-  var borderTopLeftRadius = 4;
-  var borderBottomLeftRadius = 4;
-  var borderTopRightRadius = 4;
-  var borderBottomRightRadius = 4;
-  var borderLeftWidth = 1;
-  var borderRightWidth = 1;
-  if ($leftOuterContent) {
-    borderTopLeftRadius = borderBottomLeftRadius = 0;
-    borderLeftWidth = 0;
-  }
-  if ($rightOuterContent) {
-    borderTopRightRadius = borderBottomRightRadius = 0;
-    borderRightWidth = 0;
-  }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["border-left-width:", ";border-right-width:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";"], (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderLeftWidth), (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderRightWidth), (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderTopLeftRadius), (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderBottomLeftRadius), (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderTopRightRadius), (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(borderBottomRightRadius));
+  return props.$leftOuterContent ? '0' : '4px';
+}, function (props) {
+  return props.$leftOuterContent ? '0' : '4px';
+}, function (props) {
+  return props.$rightOuterContent ? '0' : '4px';
+}, function (props) {
+  return props.$rightOuterContent ? '0' : '4px';
 }, function (props) {
   var _props$$heightCalcula;
   return (_props$$heightCalcula = props.$heightCalculationCallback) === null || _props$$heightCalcula === void 0 ? void 0 : _props$$heightCalcula.call(props);
@@ -36529,7 +37145,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
+var _excluded = ["onChange", "rows", "maxRows", "placeholder"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 
 
 
@@ -36537,11 +37156,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-var Textarea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
-  var onChange = props.onChange,
-    rows = props.rows,
-    maxRows = props.maxRows,
-    placeholder = props.placeholder;
+var Textarea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (_ref, ref) {
+  var onChange = _ref.onChange,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 1 : _ref$rows,
+    maxRows = _ref.maxRows,
+    placeholder = _ref.placeholder,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (e) {
     onChange === null || onChange === void 0 || onChange(e.target.value, e);
   }, [onChange]);
@@ -36553,9 +37174,8 @@ var Textarea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forward
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["min-height:", ";max-height:", ";height:", ";"], (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(minHeight), (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(maxHeight), (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)(height));
   }, [rows, maxRows]);
   var t = (0,_translation__WEBPACK_IMPORTED_MODULE_4__.useTranslate)();
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_6__.FieldWrapper, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_6__.FieldWrapper, _extends({}, rest, {
+    ref: ref,
     autoresize: true,
     verticalAlign: "flex-start",
     heightCalculationCallback: heightCalculationCallback,
@@ -36575,17 +37195,20 @@ Textarea.propTypes = {
   necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['asterisk', 'text']),
   invalid: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   leftInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   rightInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  rows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
-};
-Textarea.defaultProps = {
-  rows: 1
+  inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
+  fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().func), prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({
+    current: prop_types__WEBPACK_IMPORTED_MODULE_0___default().instanceOf(Element)
+  })]),
+  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  rows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
+  maxRows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 Textarea.displayName = 'Textarea';
 var Area = styled_components__WEBPACK_IMPORTED_MODULE_2___default().textarea.withConfig({
@@ -36616,21 +37239,25 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
+var _excluded = ["size", "onChange", "placeholder"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 
 
 
 
-var Textbox = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
-  var size = props.size,
-    onChange = props.onChange,
-    placeholder = props.placeholder;
+var Textbox = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
-    onChange === null || onChange === void 0 || onChange(e.target.value, e);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
   }, [onChange]);
   var heightCalculationCallback = (0,_shared__WEBPACK_IMPORTED_MODULE_3__.useHeightCalculationCallback)(size);
   var t = (0,_translation__WEBPACK_IMPORTED_MODULE_2__.useTranslate)();
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.FieldWrapper, _extends({}, props, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.FieldWrapper, _extends({}, rest, {
     ref: ref,
     heightCalculationCallback: heightCalculationCallback,
     autoresize: false,
@@ -36651,18 +37278,19 @@ Textbox.propTypes = {
   necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['asterisk', 'text']),
   invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   leftInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  leftOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   rightInnerContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  rightOuterContent: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
-  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
-};
-Textbox.defaultProps = {
-  size: 'sm'
+  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().func), prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    current: prop_types__WEBPACK_IMPORTED_MODULE_1___default().instanceOf(Element)
+  })])
 };
 Textbox.displayName = 'Textbox';
 
@@ -44704,7 +45332,7 @@ var getStyleProps = function getStyleProps(props, name, classNamesState) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   OFFSET: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_6__.OFFSET),
-/* harmony export */   VirtualizedListFactory: () => (/* reexport safe */ _virtualized_list__WEBPACK_IMPORTED_MODULE_10__.VirtualizedListFactory),
+/* harmony export */   VirtualizedListFactory: () => (/* reexport safe */ _virtualized_list__WEBPACK_IMPORTED_MODULE_12__.VirtualizedListFactory),
 /* harmony export */   classNames: () => (/* reexport safe */ _class_names__WEBPACK_IMPORTED_MODULE_0__.classNames),
 /* harmony export */   firstDefined: () => (/* reexport safe */ _first_defined__WEBPACK_IMPORTED_MODULE_1__.firstDefined),
 /* harmony export */   flexRender: () => (/* reexport safe */ _flex_renderer__WEBPACK_IMPORTED_MODULE_2__.flexRender),
@@ -44719,10 +45347,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   getScrollIndex: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_6__.getScrollIndex),
 /* harmony export */   getStyleProps: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_6__.getStyleProps),
 /* harmony export */   isGroupHeader: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_6__.isGroupHeader),
-/* harmony export */   mergeRefs: () => (/* reexport safe */ _merge_refs__WEBPACK_IMPORTED_MODULE_7__.mergeRefs),
-/* harmony export */   splitProps: () => (/* reexport safe */ _split_props__WEBPACK_IMPORTED_MODULE_8__.splitProps),
-/* harmony export */   tooltipPlacement: () => (/* reexport safe */ _tooltip_placement__WEBPACK_IMPORTED_MODULE_9__.tooltipPlacement),
-/* harmony export */   withUserStyles: () => (/* reexport safe */ _with_user_styles__WEBPACK_IMPORTED_MODULE_11__.withUserStyles)
+/* harmony export */   mergeRefs: () => (/* reexport safe */ _merge_refs__WEBPACK_IMPORTED_MODULE_8__.mergeRefs),
+/* harmony export */   setRef: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_7__.setRef),
+/* harmony export */   setRefs: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_7__.setRefs),
+/* harmony export */   splitProps: () => (/* reexport safe */ _split_props__WEBPACK_IMPORTED_MODULE_9__.splitProps),
+/* harmony export */   tooltipPlacement: () => (/* reexport safe */ _tooltip_placement__WEBPACK_IMPORTED_MODULE_10__.tooltipPlacement),
+/* harmony export */   useSetRefsCallback: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_7__.useSetRefsCallback),
+/* harmony export */   useSetRefsEffect: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_7__.useSetRefsEffect),
+/* harmony export */   useValue: () => (/* reexport safe */ _use_value__WEBPACK_IMPORTED_MODULE_11__.useValue),
+/* harmony export */   withUserStyles: () => (/* reexport safe */ _with_user_styles__WEBPACK_IMPORTED_MODULE_13__.withUserStyles)
 /* harmony export */ });
 /* harmony import */ var _class_names__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./class_names */ "./src/util/class_names.js");
 /* harmony import */ var _first_defined__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./first_defined */ "./src/util/first_defined.js");
@@ -44731,11 +45364,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _get_button_size__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./get_button_size */ "./src/util/get_button_size.js");
 /* harmony import */ var _get_props__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./get_props */ "./src/util/get_props.js");
 /* harmony import */ var _getters__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./getters */ "./src/util/getters.js");
-/* harmony import */ var _merge_refs__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./merge_refs */ "./src/util/merge_refs.js");
-/* harmony import */ var _split_props__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./split_props */ "./src/util/split_props.js");
-/* harmony import */ var _tooltip_placement__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./tooltip_placement */ "./src/util/tooltip_placement.js");
-/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./virtualized_list */ "./src/util/virtualized_list.js");
-/* harmony import */ var _with_user_styles__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./with_user_styles */ "./src/util/with_user_styles.js");
+/* harmony import */ var _set_ref__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./set_ref */ "./src/util/set_ref.js");
+/* harmony import */ var _merge_refs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./merge_refs */ "./src/util/merge_refs.js");
+/* harmony import */ var _split_props__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./split_props */ "./src/util/split_props.js");
+/* harmony import */ var _tooltip_placement__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./tooltip_placement */ "./src/util/tooltip_placement.js");
+/* harmony import */ var _use_value__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./use_value */ "./src/util/use_value.js");
+/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _with_user_styles__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./with_user_styles */ "./src/util/with_user_styles.js");
 // LICENSE_CODE ZON
 
 
@@ -44753,6 +45388,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 /***/ }),
 
 /***/ "./src/util/merge_refs.js":
@@ -44790,6 +45427,55 @@ var mergeRefs = function mergeRefs() {
 
 /***/ }),
 
+/***/ "./src/util/set_ref.js":
+/*!*****************************!*\
+  !*** ./src/util/set_ref.js ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   setRef: () => (/* binding */ setRef),
+/* harmony export */   setRefs: () => (/* binding */ setRefs),
+/* harmony export */   useSetRefsCallback: () => (/* binding */ useSetRefsCallback),
+/* harmony export */   useSetRefsEffect: () => (/* binding */ useSetRefsEffect)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+
+var setRef = function setRef(instance, ref) {
+  if (typeof ref == 'function') ref(instance);else if (_typeof(ref) == 'object') ref.current = instance;
+};
+var setRefs = function setRefs(instance, refs) {
+  return refs.forEach(function (r) {
+    return setRef(instance, r);
+  });
+};
+var useSetRefsEffect = function useSetRefsEffect(instance, refs) {
+  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return setRefs(instance, refs);
+  }, [instance].concat(_toConsumableArray(refs)));
+};
+var useSetRefsCallback = function useSetRefsCallback(refs) {
+  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (instance) {
+    return setRefs(instance, refs);
+  }, refs);
+};
+
+/***/ }),
+
 /***/ "./src/util/split_props.js":
 /*!*********************************!*\
   !*** ./src/util/split_props.js ***!
@@ -44847,6 +45533,43 @@ var tooltipPlacement = function () {
 
 /***/ }),
 
+/***/ "./src/util/use_value.js":
+/*!*******************************!*\
+  !*** ./src/util/use_value.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useValue: () => (/* binding */ useValue)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useValue = function useValue(value) {
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    val = _useState2[0],
+    setVal = _useState2[1];
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return setVal(value);
+  }, [value]);
+  return [val, setVal];
+};
+
+/***/ }),
+
 /***/ "./src/util/virtualized_list.js":
 /*!**************************************!*\
   !*** ./src/util/virtualized_list.js ***!